From 8e57bfd1f7dcd5a1c02c309d205352c9d4e646ed Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Fri, 12 May 2023 14:18:55 +0200
Subject: [PATCH] update component card tests and update snapshots

---
 .../components.test.api.js                    |  4 +
 .../components/ComponentIcon/ComponentIcon.js |  1 +
 .../components/tests/ComponentCard.test.js    | 35 +++++++
 .../tests/__snapshots__/index.test.js.snap    | 97 +++++++++----------
 .../validation/__tests__/component.test.js    |  3 +
 .../validation/__tests__/content-type.test.js |  2 +
 6 files changed, 90 insertions(+), 52 deletions(-)
 create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js

diff --git a/api-tests/core/content-type-builder/components.test.api.js b/api-tests/core/content-type-builder/components.test.api.js
index 572bcc940e..c1b526892f 100644
--- a/api-tests/core/content-type-builder/components.test.api.js
+++ b/api-tests/core/content-type-builder/components.test.api.js
@@ -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: {
diff --git a/packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js b/packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js
index b76c84d0e7..bee2c4e811 100644
--- a/packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js
+++ b/packages/core/admin/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js
@@ -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>
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js
new file mode 100644
index 0000000000..0365e75cba
--- /dev/null
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/ComponentCard.test.js
@@ -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();
+  });
+});
diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
index 7e5db31665..af950567aa 100644
--- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap
@@ -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"
diff --git a/packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js b/packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js
index 453a5b77b2..7a917ebd61 100644
--- a/packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js
+++ b/packages/core/content-type-builder/server/controllers/validation/__tests__/component.test.js
@@ -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',
diff --git a/packages/core/content-type-builder/server/controllers/validation/__tests__/content-type.test.js b/packages/core/content-type-builder/server/controllers/validation/__tests__/content-type.test.js
index 22bfb4b6ba..825e2db575 100644
--- a/packages/core/content-type-builder/server/controllers/validation/__tests__/content-type.test.js
+++ b/packages/core/content-type-builder/server/controllers/validation/__tests__/content-type.test.js
@@ -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: {