FolderCard: Update tests

2025-09-19 21:38:05 +00:00 · 2022-03-23 14:40:53 +01:00 · 2022-03-23 14:40:53 +01:00 · 23ca6c41ba
commit 23ca6c41ba
parent 906f157115
2 changed files with 393 additions and 54 deletions
--- a/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js
+++ b/packages/core/upload/admin/src/components/FolderCard/tests/FolderCard.test.js
@ -3,7 +3,7 @@ import { BaseLink } from '@strapi/design-system/BaseLink';
 import { Flex } from '@strapi/design-system/Flex';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { Typography } from '@strapi/design-system/Typography';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';

 import { FolderCard } from '../FolderCard';
 import { FolderCardBody } from '../FolderCardBody';
@ -12,7 +12,7 @@ import { FolderCardCheckbox } from '../FolderCardCheckbox';
 const ID_FIXTURE = 'folder-1';

 // eslint-disable-next-line react/prop-types
-const ComponentFixture = ({ children, ...props }) => {
+const ComponentFixture = props => {
  return (
    <ThemeProvider theme={lightTheme}>
      <FolderCard
@ -23,30 +23,6 @@ const ComponentFixture = ({ children, ...props }) => {
        onDoubleClick={() => {}}
        {...props}
      >
-        {children || ''}
-      </FolderCard>
-    </ThemeProvider>
-  );
-};
-
-describe('FolderCard', () => {
-  it('renders and matches the snapshot', () => {
-    const { container } = render(<ComponentFixture />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('properly calls the onDoubleClick callback', () => {
-    const callback = jest.fn();
-    const { container } = render(<ComponentFixture onDoubleClick={callback} />);
-
-    fireEvent(container.querySelector('a'), new MouseEvent('dblclick', { bubbles: true }));
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it('has all required ids set when rendering a start action', () => {
-    const { container } = render(
-      <ComponentFixture startAction={<FolderCardCheckbox value={false} />}>
        <FolderCardBody as="h2">
          <BaseLink href="https://strapi.io" textDecoration="none">
            <Flex direction="column" alignItems="flex-start">
@ -56,10 +32,39 @@ describe('FolderCard', () => {
            </Flex>
          </BaseLink>
        </FolderCardBody>
-      </ComponentFixture>
-    );
+      </FolderCard>
+    </ThemeProvider>
+  );
+};

-    expect(container.querySelector(`[id="${ID_FIXTURE}-title"]`)).toBeInTheDocument();
-    expect(container.querySelector(`[aria-labelledby="${ID_FIXTURE}-title"]`)).toBeInTheDocument();
+const setup = props => render(<ComponentFixture {...props} />);
+
+describe('FolderCard', () => {
+  test('renders and matches the snapshot', () => {
+    const { container } = setup();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('properly calls the onDoubleClick callback', () => {
+    const callback = jest.fn();
+    const { container } = setup({ onDoubleClick: callback });
+
+    act(() => {
+      fireEvent(container.querySelector('button'), new MouseEvent('dblclick', { bubbles: true }));
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  test('has all required ids set when rendering a start action', () => {
+    const { container } = setup({
+      startAction: <FolderCardCheckbox value={false} />,
+    });
+
+    expect(container).toMatchSnapshot();
+    expect(container.querySelector(`[id="${ID_FIXTURE}-3-title"]`)).toBeInTheDocument();
+    expect(
+      container.querySelector(`[aria-labelledby="${ID_FIXTURE}-3-title"]`)
+    ).toBeInTheDocument();
  });
 });
--- a/packages/core/upload/admin/src/components/FolderCard/tests/snapshots/FolderCard.test.js.snap
+++ b/packages/core/upload/admin/src/components/FolderCard/tests/snapshots/FolderCard.test.js.snap
@ -1,11 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`FolderCard renders and matches the snapshot 1`] = `
-.c1 {
+exports[`FolderCard has all required ids set when rendering a start action 1`] = `
+.c12 {
  cursor: pointer;
 }

-.c8 {
+.c9 {
+  position: relative;
+  z-index: 3;
+}
+
+.c10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c14 {
  border: 0;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
@ -17,11 +36,91 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
  width: 1px;
 }

+.c13 {
+  font-weight: 500;
+  color: #32324d;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c6 {
+  margin: 0;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 4px;
+  border: 1px solid #c0c0cf;
+  -webkit-appearance: none;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.c6:checked {
+  background-color: #4945ff;
+  border: 1px solid #4945ff;
+}
+
+.c6:checked:after {
+  content: '';
+  display: block;
+  position: relative;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
+  width: 10px;
+  height: 10px;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.c6:checked:disabled:after {
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
+}
+
+.c6:disabled {
+  background-color: #dcdce4;
+  border: 1px solid #c0c0cf;
+}
+
+.c6:indeterminate {
+  background-color: #4945ff;
+  border: 1px solid #4945ff;
+}
+
+.c6:indeterminate:after {
+  content: '';
+  display: block;
+  position: relative;
+  color: white;
+  height: 2px;
+  width: 10px;
+  background-color: #ffffff;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.c6:indeterminate:disabled {
+  background-color: #dcdce4;
+  border: 1px solid #c0c0cf;
+}
+
+.c6:indeterminate:disabled:after {
+  background-color: #8e8ea9;
+}
+
 .c0 {
  position: relative;
 }

-.c6 {
+.c5 {
+  position: relative;
+  z-index: 2;
+}
+
+.c7 {
  background: #eaf5ff;
  color: #66b7f1;
  padding-top: 8px;
@ -31,7 +130,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
  border-radius: 4px;
 }

-.c3 {
+.c2 {
  background: #ffffff;
  padding-top: 12px;
  padding-right: 16px;
@ -43,7 +142,7 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
  cursor: pointer;
 }

-.c4 {
+.c3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -57,16 +156,16 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
  align-items: center;
 }

-.c5 > * {
+.c4 > * {
  margin-left: 0;
  margin-right: 0;
 }

-.c5 > * + * {
+.c4 > * + * {
  margin-left: 12px;
 }

-.c2 {
+.c1 {
  height: 100%;
  left: 0;
  position: absolute;
@ -75,43 +174,58 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
  width: 100%;
 }

-.c2:hover,
-.c2:focus {
+.c1:hover,
+.c1:focus {
  -webkit-text-decoration: none;
  text-decoration: none;
 }

-.c7 path {
+.c8 path {
  fill: currentColor;
 }

+.c11 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 <div>
  <div
    class="c0"
+    href="/"
  >
-    <a
+    <button
      aria-hidden="true"
      aria-label="Folder 1"
-      class="c1 c2"
-      href="/"
+      class="c1"
      tabindex="-1"
-      target="_self"
-      text-decoration="none"
+      type="button"
    />
    <div
-      class="c3 c4 c5"
+      class="c2 c3 c4"
      cursor="pointer"
      spacing="3"
    >
      <div
-        class="c6"
+        class="c5"
+      >
+        <input
+          aria-labelledby="folder-1-3-title"
+          class="c6"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="c7"
      >
        <svg
-          class="c7"
+          class="c8"
          fill="none"
-          height="1em"
+          height="1.125rem"
          viewBox="0 0 24 24"
-          width="1em"
+          width="1.25rem"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
@ -120,11 +234,231 @@ exports[`FolderCard renders and matches the snapshot 1`] = `
          />
        </svg>
      </div>
-      
+      <h2
+        class="c9 c10 c11"
+        id="folder-1-3-title"
+      >
+        <a
+          class="c12"
+          href="https://strapi.io"
+          target="_self"
+          text-decoration="none"
+        >
+          <div
+            class="c10"
+          >
+            <span
+              class="c13"
+            >
+              Pictures
+            </span>
+          </div>
+        </a>
+      </h2>
    </div>
  </div>
  <div
-    class="c8"
+    class="c14"
+  >
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-log"
+      role="log"
+    />
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-status"
+      role="status"
+    />
+    <p
+      aria-live="assertive"
+      aria-relevant="all"
+      id="live-region-alert"
+      role="alert"
+    />
+  </div>
+</div>
+`;
+
+exports[`FolderCard renders and matches the snapshot 1`] = `
+.c10 {
+  cursor: pointer;
+}
+
+.c7 {
+  position: relative;
+  z-index: 3;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.c12 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c11 {
+  font-weight: 500;
+  color: #32324d;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c0 {
+  position: relative;
+}
+
+.c5 {
+  background: #eaf5ff;
+  color: #66b7f1;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+}
+
+.c2 {
+  background: #ffffff;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  cursor: pointer;
+  cursor: pointer;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c4 > * + * {
+  margin-left: 12px;
+}
+
+.c1 {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  width: 100%;
+}
+
+.c1:hover,
+.c1:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c6 path {
+  fill: currentColor;
+}
+
+.c9 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div>
+  <div
+    class="c0"
+    href="/"
+  >
+    <button
+      aria-hidden="true"
+      aria-label="Folder 1"
+      class="c1"
+      tabindex="-1"
+      type="button"
+    />
+    <div
+      class="c2 c3 c4"
+      cursor="pointer"
+      spacing="3"
+    >
+      <div
+        class="c5"
+      >
+        <svg
+          class="c6"
+          fill="none"
+          height="1.125rem"
+          viewBox="0 0 24 24"
+          width="1.25rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.414 5H21a1 1 0 011 1v14a1 1 0 01-1 1H3a1 1 0 01-1-1V4a1 1 0 011-1h7.414l2 2z"
+            fill="#212134"
+          />
+        </svg>
+      </div>
+      <h2
+        class="c7 c8 c9"
+        id="folder-1-1-title"
+      >
+        <a
+          class="c10"
+          href="https://strapi.io"
+          target="_self"
+          text-decoration="none"
+        >
+          <div
+            class="c8"
+          >
+            <span
+              class="c11"
+            >
+              Pictures
+            </span>
+          </div>
+        </a>
+      </h2>
+    </div>
+  </div>
+  <div
+    class="c12"
  >
    <p
      aria-live="polite"