yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-17 10:38:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

update component card tests and update snapshots

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-tests/core/content-type-builder/components.test.api.js
View File

@ -68,6 +68,7 @@ describe('Content Type Builder - Components', () => {
component: { component: {
category: 'default', category: 'default',
displayName: 'Some Component', displayName: 'Some Component',
icon: 'Calendar',
pluginOptions: { pluginOptions: {
pluginName: { pluginName: {
option: true, option: true,
@ -107,6 +108,7 @@ describe('Content Type Builder - Components', () => {
body: { body: {
component: { component: {
category: 'default', category: 'default',
icon: 'Calendar',
displayName: 'someComponent', displayName: 'someComponent',
attributes: {}, attributes: {},
}, },
@ -172,6 +174,7 @@ describe('Content Type Builder - Components', () => {
category: 'default', category: 'default',
schema: { schema: {
displayName: 'Some Component', displayName: 'Some Component',
icon: 'Calendar',
description: '', description: '',
collectionName: 'components_default_some_components', collectionName: 'components_default_some_components',
pluginOptions: { pluginOptions: {
@ -254,6 +257,7 @@ describe('Content Type Builder - Components', () => {
body: { body: {
component: { component: {
category: 'default', category: 'default',
icon: 'Calendar',
displayName: 'New Component', displayName: 'New Component',
attributes: { attributes: {
name: { name: {

1
packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js
View File

@ -39,6 +39,7 @@ export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
justifyContent="center" justifyContent="center"
size={size} size={size}
showBackground={showBackground} showBackground={showBackground}
data-testid={icon ? 'component-card-icon' : 'component-card-icon-default'}
> >
<ComponentIcon /> <ComponentIcon />
</Wrapper> </Wrapper>

35
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js Normal file
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();
});
});

97
packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
View File

@ -110,11 +110,11 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
max-width: 100%; max-width: 100%;
} }
.c68 { .c67 {
background: #eaeaef; background: #eaeaef;
} }
.c70 { .c69 {
background: #f0f0ff; background: #f0f0ff;
padding: 20px; padding: 20px;
} }
@ -579,7 +579,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #ffffff; fill: #ffffff;
} }
.c69 { .c68 {
height: 1px; height: 1px;
border: none; border: none;
-webkit-flex-shrink: 0; -webkit-flex-shrink: 0;
@ -607,7 +607,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #666687; fill: #666687;
} }
.c72 { .c71 {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
border-radius: 50%; border-radius: 50%;
@ -625,16 +625,16 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
align-items: center; align-items: center;
} }
.c72 svg { .c71 svg {
height: 0.625rem; height: 0.625rem;
width: 0.625rem; width: 0.625rem;
} }
.c72 svg path { .c71 svg path {
fill: #4945ff; fill: #4945ff;
} }
.c71 { .c70 {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
display: block; display: block;
width: 100%; width: 100%;
@ -711,7 +711,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
.c59 { .c59 {
border-radius: 50%; border-radius: 50%;
color: #4945ff;
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
@ -721,18 +720,6 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
width: 20px; width: 20px;
} }
.c64 {
border-radius: 50%;
color: #666687;
height: 40px;
width: 40px;
}
.c64 svg {
height: 20px;
width: 20px;
}
.c63 { .c63 {
position: absolute; position: absolute;
display: none; display: none;
@ -785,6 +772,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
color: #4945ff; 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.component-row,
.c37.dynamiczone-row { .c37.dynamiczone-row {
position: relative; position: relative;
@ -876,7 +869,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
overflow-x: auto; overflow-x: auto;
} }
.c65 { .c64 {
padding-top: 5.625rem; padding-top: 5.625rem;
} }
@ -958,7 +951,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #666687; fill: #666687;
} }
.c67 { .c66 {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
border-radius: 50%; border-radius: 50%;
@ -976,12 +969,12 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
align-items: center; align-items: center;
} }
.c67 svg { .c66 svg {
height: 0.625rem; height: 0.625rem;
width: 0.625rem; width: 0.625rem;
} }
.c67 svg path { .c66 svg path {
fill: #4945ff; fill: #4945ff;
} }
@ -1021,7 +1014,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
fill: #eaeaef; fill: #eaeaef;
} }
.c66 { .c65 {
position: relative; position: relative;
-webkit-flex-shrink: 0; -webkit-flex-shrink: 0;
-ms-flex-negative: 0; -ms-flex-negative: 0;
@ -1031,7 +1024,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
transform: translate(-0.5px,-1px); transform: translate(-0.5px,-1px);
} }
.c66 * { .c65 * {
fill: #d9d8ff; fill: #d9d8ff;
} }
@ -3594,7 +3587,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
type="button" type="button"
> >
<div <div
class="c43 c34 c64" class="c43 c34 c59"
> >
<svg <svg
viewBox="0 0 448 512" viewBox="0 0 448 512"
@ -3636,7 +3629,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
type="button" type="button"
> >
<div <div
class="c43 c34 c64" class="c43 c34 c59"
> >
<svg <svg
viewBox="0 0 448 512" viewBox="0 0 448 512"
@ -3678,7 +3671,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
type="button" type="button"
> >
<div <div
class="c43 c34 c64" class="c43 c34 c59"
> >
<svg <svg
viewBox="0 0 448 512" viewBox="0 0 448 512"
@ -3718,7 +3711,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</div> </div>
</div> </div>
<div <div
class="c65" class="c64"
> >
<div <div
class="" class=""
@ -3751,7 +3744,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -3895,7 +3888,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4039,7 +4032,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4184,7 +4177,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c58 c67" class="c58 c66"
> >
<svg <svg
fill="none" fill="none"
@ -4247,7 +4240,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4391,7 +4384,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4535,7 +4528,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4679,7 +4672,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4825,7 +4818,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -4971,7 +4964,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -5119,7 +5112,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c58 c67" class="c58 c66"
> >
<svg <svg
fill="none" fill="none"
@ -5182,7 +5175,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -5326,7 +5319,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -5470,7 +5463,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -6548,7 +6541,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c58 c67" class="c58 c66"
> >
<svg <svg
fill="none" fill="none"
@ -6611,7 +6604,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -6755,7 +6748,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -6901,7 +6894,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
class="c39" class="c39"
> >
<svg <svg
class="c66" class="c65"
color="primary200" color="primary200"
fill="none" fill="none"
height="23" height="23"
@ -7046,7 +7039,7 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c58 c67" class="c58 c66"
> >
<svg <svg
fill="none" fill="none"
@ -7086,17 +7079,17 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
</div> </div>
<div> <div>
<hr <hr
class="c68 c69" class="c67 c68"
/> />
<button <button
class="c70 c71" class="c69 c70"
> >
<div <div
class="c6" class="c6"
> >
<div <div
aria-hidden="true" aria-hidden="true"
class="c58 c72" class="c58 c71"
> >
<svg <svg
fill="none" fill="none"

3
packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js
View File

@ -28,6 +28,7 @@ describe('Component validator', () => {
component: { component: {
category: 'default', category: 'default',
displayName: 'mycompo', displayName: 'mycompo',
icon: 'Calendar',
attributes: { attributes: {
title: { title: {
type: 'string', type: 'string',
@ -49,6 +50,7 @@ describe('Component validator', () => {
component: { component: {
category: 'default', category: 'default',
displayName: 'mycompo', displayName: 'mycompo',
icon: 'Calendar',
attributes: { attributes: {
title: { title: {
type: 'string', type: 'string',
@ -72,6 +74,7 @@ describe('Component validator', () => {
component: { component: {
category: 'default', category: 'default',
displayName: 'mycompo', displayName: 'mycompo',
icon: 'Calendar',
attributes: { attributes: {
title: { title: {
type: 'string', type: 'string',

2
packages/core/content-type-builder/server/controllers/validation/__tests__/content-type.test.js
View File

@ -123,6 +123,7 @@ describe('Content type validator', () => {
{ {
uid: 'edit', uid: 'edit',
displayName: 'test', displayName: 'test',
icon: 'Calendar',
category: 'test', category: 'test',
attributes: { attributes: {
title: { title: {
@ -134,6 +135,7 @@ describe('Content type validator', () => {
{ {
tmpUID: 'random', tmpUID: 'random',
displayName: 'test2', displayName: 'test2',
icon: 'Calendar',
category: 'test', category: 'test',
attributes: { attributes: {
title: { title: {