test: add some

Talend · Oct 18, 2023 · 2c0bd32 · 2c0bd32
1 parent b714c9e
commit 2c0bd32
Show file tree

Hide file tree

Showing 8 changed files with 383 additions and 4 deletions.
diff --git a/packages/design-system/src/components/Loading/Loading.test.tsx b/packages/design-system/src/components/Loading/Loading.test.tsx
@@ -8,7 +8,7 @@ describe('Loading', () => {
 	it('should render a11y html', async () => {
 		const { container } = render(
 			<main>
-				<Loading data-testid="my.link">Link example</Loading>
+				<Loading />
 			</main>,
 		);
 		// eslint-disable-next-line testing-library/no-container

diff --git a/packages/design-system/src/components/Loading/Loading.tsx b/packages/design-system/src/components/Loading/Loading.tsx
@@ -1,8 +1,8 @@
 import { HTMLAttributes, forwardRef } from 'react';
 
-export type LoadingProps = HTMLAttributes<SVGElement>;
+export type LoadingProps = HTMLAttributes<SVGSVGElement>;
 
-export const Loading = forwardRef<SVGElement, LoadingProps>((props, ref) => (
+export const Loading = forwardRef<SVGSVGElement, LoadingProps>((props, ref) => (
 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ref={ref} {...props}>
 		<g>
 			<path

diff --git a/packages/design-system/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/packages/design-system/src/components/Loading/__snapshots__/Loading.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loading should render a11y html 1`] = `
+<main>
+  <svg
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14.227A6.227 6.227 0 118 1.773a6.227 6.227 0 010 12.454z"
+        fill="currentColor"
+        opacity=".2"
+      />
+      <path
+        d="M11.11 2.611l.886-1.534A7.951 7.951 0 008 0v1.773c1.134 0 2.195.308 3.11.838z"
+        fill="currentColor"
+      >
+        <animatetransform
+          attributeName="transform"
+          dur=".85s"
+          from="0 8 8"
+          repeatCount="indefinite"
+          to="360 8 8"
+          type="rotate"
+        />
+      </path>
+    </g>
+  </svg>
+</main>
+`;
diff --git a/packages/design-system/src/components/Message/Message.test.tsx b/packages/design-system/src/components/Message/Message.test.tsx
@@ -0,0 +1,51 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { describe, it, expect } from '@jest/globals';
+import { axe } from 'jest-axe';
+import { render } from '@testing-library/react';
+import { MessageSuccess, MessageDestructive, MessageWarning, MessageInformation } from './';
+
+describe('Message', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<MessageSuccess
+					title="All good"
+					description="This component is well configured"
+					link={{ href: 'https://talend.com', children: 'Learn more' }}
+					action={{ children: 'See', onClick: jest.fn() }}
+				>
+					Success
+				</MessageSuccess>
+				<MessageDestructive
+					title="Something went wrong"
+					description="There is an issue with the component configuration"
+					link={{ href: 'https://talend.com', children: 'Learn more' }}
+					action={{ children: 'See', onClick: jest.fn() }}
+				>
+					Destructive
+				</MessageDestructive>
+				<MessageWarning
+					title="Type incompatibilities"
+					description="Maybe resolve this issue before doing anything else"
+					link={{ href: 'https://talend.com', children: 'Learn more' }}
+					action={{ children: 'See', onClick: jest.fn() }}
+				>
+					Warning
+				</MessageWarning>
+				<MessageInformation
+					title="Auto mapping"
+					description="Some fields has been auto mapped"
+					link={{ href: 'https://talend.com', children: 'Learn more' }}
+					action={{ children: 'Dismiss', onClick: jest.fn() }}
+				>
+					Information
+				</MessageInformation>
+			</main>,
+		);
+		// eslint-disable-next-line testing-library/no-container
+		container.querySelector('button')?.click();
+		expect(container.firstChild).toMatchSnapshot();
+		const results = await axe(document.body);
+		expect(results).toHaveNoViolations();
+	});
+});
diff --git a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap
@@ -0,0 +1,270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message should render a11y html 1`] = `
+<main>
+  <div
+    aria-live="polite"
+    class="theme-message theme-success_border"
+    role="status"
+  >
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-XS theme-gap-y-XS theme-padding-top-S theme-padding-right-M theme-padding-bottom-S theme-padding-left-M"
+    >
+      <header
+        class="theme-message__title"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+        >
+          All good
+        </div>
+      </header>
+      <p
+        class="theme-message__description"
+      >
+        This component is well configured
+      </p>
+      <a
+        class="theme-linkable theme-link"
+        href="https://talend.com"
+      >
+        <span
+          class="theme-link__text"
+        >
+          Learn more
+        </span>
+        <span
+          class="theme-link__iconExternal"
+          data-test="link.icon.external"
+          data-testid="link.icon.external"
+        >
+          <svg
+            aria-hidden="true"
+            pointer-events="none"
+            shape-rendering="geometricPrecision"
+            style="width: 1.2rem; height: 1.2rem;"
+          >
+            <use
+              xlink:href="#external-link:S"
+            />
+          </svg>
+        </span>
+      </a>
+      Success
+      <div
+        class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
+      >
+        <button
+          aria-busy="false"
+          class="theme-clickable theme-button theme-tertiary"
+          type="button"
+        >
+          <span
+            class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          >
+            See
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-message theme-destructive_border"
+    role="status"
+  >
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-XS theme-gap-y-XS theme-padding-top-S theme-padding-right-M theme-padding-bottom-S theme-padding-left-M"
+    >
+      <header
+        class="theme-message__title"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+        >
+          Something went wrong
+        </div>
+      </header>
+      <p
+        class="theme-message__description"
+      >
+        There is an issue with the component configuration
+      </p>
+      <a
+        class="theme-linkable theme-link"
+        href="https://talend.com"
+      >
+        <span
+          class="theme-link__text"
+        >
+          Learn more
+        </span>
+        <span
+          class="theme-link__iconExternal"
+          data-test="link.icon.external"
+          data-testid="link.icon.external"
+        >
+          <svg
+            aria-hidden="true"
+            pointer-events="none"
+            shape-rendering="geometricPrecision"
+            style="width: 1.2rem; height: 1.2rem;"
+          >
+            <use
+              xlink:href="#external-link:S"
+            />
+          </svg>
+        </span>
+      </a>
+      Destructive
+      <div
+        class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
+      >
+        <button
+          aria-busy="false"
+          class="theme-clickable theme-button theme-tertiary"
+          type="button"
+        >
+          <span
+            class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          >
+            See
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-message theme-warning_border"
+    role="status"
+  >
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-XS theme-gap-y-XS theme-padding-top-S theme-padding-right-M theme-padding-bottom-S theme-padding-left-M"
+    >
+      <header
+        class="theme-message__title"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+        >
+          Type incompatibilities
+        </div>
+      </header>
+      <p
+        class="theme-message__description"
+      >
+        Maybe resolve this issue before doing anything else
+      </p>
+      <a
+        class="theme-linkable theme-link"
+        href="https://talend.com"
+      >
+        <span
+          class="theme-link__text"
+        >
+          Learn more
+        </span>
+        <span
+          class="theme-link__iconExternal"
+          data-test="link.icon.external"
+          data-testid="link.icon.external"
+        >
+          <svg
+            aria-hidden="true"
+            pointer-events="none"
+            shape-rendering="geometricPrecision"
+            style="width: 1.2rem; height: 1.2rem;"
+          >
+            <use
+              xlink:href="#external-link:S"
+            />
+          </svg>
+        </span>
+      </a>
+      Warning
+      <div
+        class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
+      >
+        <button
+          aria-busy="false"
+          class="theme-clickable theme-button theme-tertiary"
+          type="button"
+        >
+          <span
+            class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          >
+            See
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-message theme-information_border"
+    role="status"
+  >
+    <div
+      class="theme-stack theme-justify-start theme-align-start theme-nowrap theme-column theme-block theme-gap-x-XS theme-gap-y-XS theme-padding-top-S theme-padding-right-M theme-padding-bottom-S theme-padding-left-M"
+    >
+      <header
+        class="theme-message__title"
+      >
+        <div
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+        >
+          Auto mapping
+        </div>
+      </header>
+      <p
+        class="theme-message__description"
+      >
+        Some fields has been auto mapped
+      </p>
+      <a
+        class="theme-linkable theme-link"
+        href="https://talend.com"
+      >
+        <span
+          class="theme-link__text"
+        >
+          Learn more
+        </span>
+        <span
+          class="theme-link__iconExternal"
+          data-test="link.icon.external"
+          data-testid="link.icon.external"
+        >
+          <svg
+            aria-hidden="true"
+            pointer-events="none"
+            shape-rendering="geometricPrecision"
+            style="width: 1.2rem; height: 1.2rem;"
+          >
+            <use
+              xlink:href="#external-link:S"
+            />
+          </svg>
+        </span>
+      </a>
+      Information
+      <div
+        class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-0 theme-gap-y-0"
+      >
+        <button
+          aria-busy="false"
+          class="theme-clickable theme-button theme-tertiary"
+          type="button"
+        >
+          <span
+            class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          >
+            Dismiss
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</main>
+`;
diff --git a/packages/design-system/src/components/Modal/Modal.test.tsx b/packages/design-system/src/components/Modal/Modal.test.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { describe, it, expect } from '@jest/globals';
+import { axe } from 'jest-axe';
+import { render } from '@testing-library/react';
+import { Modal } from './';
+
+describe('Message', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<Modal visible header={{ title: '(Default story title)' }} onClose={() => jest.fn()}>
+					Content
+				</Modal>
+			</main>,
+		);
+		// eslint-disable-next-line testing-library/no-container
+		expect(container.firstChild).toMatchSnapshot();
+		const results = await axe(document.body);
+		expect(results).toHaveNoViolations();
+	});
+});