mirror of
https://github.com/strapi/strapi.git
synced 2025-11-01 10:23:34 +00:00
update component card tests and update snapshots
This commit is contained in:
parent
1444c3e134
commit
8e57bfd1f7
@ -68,6 +68,7 @@ describe('Content Type Builder - Components', () => {
|
||||
component: {
|
||||
category: 'default',
|
||||
displayName: 'Some Component',
|
||||
icon: 'Calendar',
|
||||
pluginOptions: {
|
||||
pluginName: {
|
||||
option: true,
|
||||
@ -107,6 +108,7 @@ describe('Content Type Builder - Components', () => {
|
||||
body: {
|
||||
component: {
|
||||
category: 'default',
|
||||
icon: 'Calendar',
|
||||
displayName: 'someComponent',
|
||||
attributes: {},
|
||||
},
|
||||
@ -172,6 +174,7 @@ describe('Content Type Builder - Components', () => {
|
||||
category: 'default',
|
||||
schema: {
|
||||
displayName: 'Some Component',
|
||||
icon: 'Calendar',
|
||||
description: '',
|
||||
collectionName: 'components_default_some_components',
|
||||
pluginOptions: {
|
||||
@ -254,6 +257,7 @@ describe('Content Type Builder - Components', () => {
|
||||
body: {
|
||||
component: {
|
||||
category: 'default',
|
||||
icon: 'Calendar',
|
||||
displayName: 'New Component',
|
||||
attributes: {
|
||||
name: {
|
||||
|
||||
@ -39,6 +39,7 @@ export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
|
||||
justifyContent="center"
|
||||
size={size}
|
||||
showBackground={showBackground}
|
||||
data-testid={icon ? 'component-card-icon' : 'component-card-icon-default'}
|
||||
>
|
||||
<ComponentIcon />
|
||||
</Wrapper>
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { ThemeProvider, lightTheme } from '@strapi/design-system';
|
||||
|
||||
import GlobalStyle from '../../../../../components/GlobalStyle';
|
||||
|
||||
import ComponentCard from '../ComponentCard';
|
||||
|
||||
describe('ComponentCard', () => {
|
||||
const setup = (props) =>
|
||||
render(
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<ComponentCard {...props}>test</ComponentCard>
|
||||
<GlobalStyle />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
it('should render default icon if not icon is passed', () => {
|
||||
const { getByTestId } = setup();
|
||||
expect(getByTestId('component-card-icon-default')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the passed icon', () => {
|
||||
const { getByTestId } = setup({ icon: 'Calendar' });
|
||||
expect(getByTestId('component-card-icon')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call the onClick handler when passed', () => {
|
||||
const onClick = jest.fn();
|
||||
const { getByText } = setup({ onClick });
|
||||
fireEvent.click(getByText('test'));
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@ -110,11 +110,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.c68 {
|
||||
.c67 {
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c70 {
|
||||
.c69 {
|
||||
background: #f0f0ff;
|
||||
padding: 20px;
|
||||
}
|
||||
@ -579,7 +579,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c69 {
|
||||
.c68 {
|
||||
height: 1px;
|
||||
border: none;
|
||||
-webkit-flex-shrink: 0;
|
||||
@ -607,7 +607,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c72 {
|
||||
.c71 {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
@ -625,16 +625,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c72 svg {
|
||||
.c71 svg {
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
}
|
||||
|
||||
.c72 svg path {
|
||||
.c71 svg path {
|
||||
fill: #4945ff;
|
||||
}
|
||||
|
||||
.c71 {
|
||||
.c70 {
|
||||
border-radius: 0 0 4px 4px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -711,7 +711,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
|
||||
.c59 {
|
||||
border-radius: 50%;
|
||||
color: #4945ff;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
@ -721,18 +720,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.c64 {
|
||||
border-radius: 50%;
|
||||
color: #666687;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.c64 svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.c63 {
|
||||
position: absolute;
|
||||
display: none;
|
||||
@ -785,6 +772,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
color: #4945ff;
|
||||
}
|
||||
|
||||
.c57.active > div:first-child svg path,
|
||||
.c57:focus > div:first-child svg path,
|
||||
.c57:hover > div:first-child svg path {
|
||||
fill: #4945ff;
|
||||
}
|
||||
|
||||
.c37.component-row,
|
||||
.c37.dynamiczone-row {
|
||||
position: relative;
|
||||
@ -876,7 +869,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.c65 {
|
||||
.c64 {
|
||||
padding-top: 5.625rem;
|
||||
}
|
||||
|
||||
@ -958,7 +951,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c67 {
|
||||
.c66 {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
@ -976,12 +969,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c67 svg {
|
||||
.c66 svg {
|
||||
height: 0.625rem;
|
||||
width: 0.625rem;
|
||||
}
|
||||
|
||||
.c67 svg path {
|
||||
.c66 svg path {
|
||||
fill: #4945ff;
|
||||
}
|
||||
|
||||
@ -1021,7 +1014,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
fill: #eaeaef;
|
||||
}
|
||||
|
||||
.c66 {
|
||||
.c65 {
|
||||
position: relative;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
@ -1031,7 +1024,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
transform: translate(-0.5px,-1px);
|
||||
}
|
||||
|
||||
.c66 * {
|
||||
.c65 * {
|
||||
fill: #d9d8ff;
|
||||
}
|
||||
|
||||
@ -3594,7 +3587,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="c43 c34 c64"
|
||||
class="c43 c34 c59"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 448 512"
|
||||
@ -3636,7 +3629,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="c43 c34 c64"
|
||||
class="c43 c34 c59"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 448 512"
|
||||
@ -3678,7 +3671,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="c43 c34 c64"
|
||||
class="c43 c34 c59"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 448 512"
|
||||
@ -3718,7 +3711,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c65"
|
||||
class="c64"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
@ -3751,7 +3744,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -3895,7 +3888,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4039,7 +4032,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4184,7 +4177,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c58 c67"
|
||||
class="c58 c66"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -4247,7 +4240,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4391,7 +4384,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4535,7 +4528,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4679,7 +4672,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4825,7 +4818,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -4971,7 +4964,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -5119,7 +5112,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c58 c67"
|
||||
class="c58 c66"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -5182,7 +5175,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -5326,7 +5319,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -5470,7 +5463,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -6548,7 +6541,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c58 c67"
|
||||
class="c58 c66"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -6611,7 +6604,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -6755,7 +6748,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -6901,7 +6894,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
class="c66"
|
||||
class="c65"
|
||||
color="primary200"
|
||||
fill="none"
|
||||
height="23"
|
||||
@ -7046,7 +7039,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c58 c67"
|
||||
class="c58 c66"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -7086,17 +7079,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<hr
|
||||
class="c68 c69"
|
||||
class="c67 c68"
|
||||
/>
|
||||
<button
|
||||
class="c70 c71"
|
||||
class="c69 c70"
|
||||
>
|
||||
<div
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c58 c72"
|
||||
class="c58 c71"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
|
||||
@ -28,6 +28,7 @@ describe('Component validator', () => {
|
||||
component: {
|
||||
category: 'default',
|
||||
displayName: 'mycompo',
|
||||
icon: 'Calendar',
|
||||
attributes: {
|
||||
title: {
|
||||
type: 'string',
|
||||
@ -49,6 +50,7 @@ describe('Component validator', () => {
|
||||
component: {
|
||||
category: 'default',
|
||||
displayName: 'mycompo',
|
||||
icon: 'Calendar',
|
||||
attributes: {
|
||||
title: {
|
||||
type: 'string',
|
||||
@ -72,6 +74,7 @@ describe('Component validator', () => {
|
||||
component: {
|
||||
category: 'default',
|
||||
displayName: 'mycompo',
|
||||
icon: 'Calendar',
|
||||
attributes: {
|
||||
title: {
|
||||
type: 'string',
|
||||
|
||||
@ -123,6 +123,7 @@ describe('Content type validator', () => {
|
||||
{
|
||||
uid: 'edit',
|
||||
displayName: 'test',
|
||||
icon: 'Calendar',
|
||||
category: 'test',
|
||||
attributes: {
|
||||
title: {
|
||||
@ -134,6 +135,7 @@ describe('Content type validator', () => {
|
||||
{
|
||||
tmpUID: 'random',
|
||||
displayName: 'test2',
|
||||
icon: 'Calendar',
|
||||
category: 'test',
|
||||
attributes: {
|
||||
title: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user