update component card tests and update snapshots

This commit is contained in:
Fernando Chavez 2023-05-12 14:18:55 +02:00
parent 1444c3e134
commit 8e57bfd1f7
6 changed files with 90 additions and 52 deletions

View File

@ -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: {

View File

@ -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>

View File

@ -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();
});
});

View File

@ -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"

View File

@ -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',

View File

@ -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: {