test: add some

Talend · Oct 18, 2023 · b714c9e · b714c9e
1 parent 2437d0f
commit b714c9e
Show file tree

Hide file tree

Showing 16 changed files with 491 additions and 39 deletions.
diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, Ref } from 'react';
 import classnames from 'classnames';
-import Linkable, { LinkableType } from '../../Linkable';
+import { Linkable, LinkableType } from '../../Linkable';
 
 import { StackHorizontal } from '../../Stack';
 

diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, ReactElement, Ref } from 'react';
-import Linkable, { LinkableType } from '../../Linkable';
+import { Linkable, LinkableType } from '../../Linkable';
 
 import styles from './DropdownEntry.module.scss';
 

diff --git a/packages/design-system/src/components/InlineMessage/InlineMessage.test.tsx b/packages/design-system/src/components/InlineMessage/InlineMessage.test.tsx
@@ -0,0 +1,24 @@
+/* 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 { InlineMessage } from './';
+
+describe('InlineMessage', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<InlineMessage variant="information" description="The information message value" />
+				<InlineMessage variant="destructive" description="The destructive message value" />
+				<InlineMessage variant="success" description="The success message value" />
+				<InlineMessage variant="warning" description="The warning message value" />
+				<InlineMessage variant="beta" description="The beta message value" />
+			</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/...ages/design-system/src/components/InlineMessage/__snapshots__/InlineMessage.test.tsx.snap b/...ages/design-system/src/components/InlineMessage/__snapshots__/InlineMessage.test.tsx.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineMessage should render a11y html 1`] = `
+<main>
+  <div
+    aria-live="polite"
+    class="theme-inlineMessage"
+    role="status"
+  >
+    <span
+      class="theme-icon theme-information__icon"
+    >
+      <svg
+        aria-hidden="true"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#information-filled:M"
+        />
+      </svg>
+    </span>
+    <p
+      class="theme-inlineMessage__contents"
+    >
+      <span>
+        The information message value
+      </span>
+    </p>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-inlineMessage"
+    role="status"
+  >
+    <span
+      class="theme-icon theme-destructive__icon"
+    >
+      <svg
+        aria-hidden="true"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#square-cross:M"
+        />
+      </svg>
+    </span>
+    <p
+      class="theme-inlineMessage__contents"
+    >
+      <span>
+        The destructive message value
+      </span>
+    </p>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-inlineMessage"
+    role="status"
+  >
+    <span
+      class="theme-icon theme-success__icon"
+    >
+      <svg
+        aria-hidden="true"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#check-filled:M"
+        />
+      </svg>
+    </span>
+    <p
+      class="theme-inlineMessage__contents"
+    >
+      <span>
+        The success message value
+      </span>
+    </p>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-inlineMessage"
+    role="status"
+  >
+    <span
+      class="theme-icon theme-warning__icon"
+    >
+      <svg
+        aria-hidden="true"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#exclamation:M"
+        />
+      </svg>
+    </span>
+    <p
+      class="theme-inlineMessage__contents"
+    >
+      <span>
+        The warning message value
+      </span>
+    </p>
+  </div>
+  <div
+    aria-live="polite"
+    class="theme-inlineMessage"
+    role="status"
+  >
+    <span
+      class="theme-icon theme-beta__icon"
+    >
+      <svg
+        aria-hidden="true"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#information-filled:M"
+        />
+      </svg>
+    </span>
+    <p
+      class="theme-inlineMessage__contents"
+    >
+      <span>
+        The beta message value
+      </span>
+    </p>
+  </div>
+</main>
+`;
diff --git a/packages/design-system/src/components/Link/Link.cy.tsx b/packages/design-system/src/components/Link/Link.cy.tsx
@@ -13,17 +13,25 @@ context('<Link />', () => {
 	});
 
 	it('should render icon before', () => {
-		cy.mount(<Link href="#" icon="information-filled" />);
+		cy.mount(
+			<Link href="#" icon="information-filled">
+				Link example
+			</Link>,
+		);
 		cy.findByTestId('link.icon.before').should('be.visible');
 	});
 
 	it('should render external', () => {
-		cy.mount(<Link href="https://www.talend.com" />);
+		cy.mount(<Link href="https://www.talend.com">Link example</Link>);
 		cy.findByTestId('link.icon.external').should('be.visible');
 	});
 
 	it('should render disabled', () => {
-		cy.mount(<Link href="#" icon="information-filled" disabled data-testid="my.link" />);
+		cy.mount(
+			<Link href="#" icon="information-filled" disabled data-testid="my.link">
+				Link example
+			</Link>,
+		);
 		cy.findByTestId('my.link').should('have.attr', 'aria-disabled');
 	});
 

diff --git a/packages/design-system/src/components/Link/Link.test.tsx b/packages/design-system/src/components/Link/Link.test.tsx
@@ -0,0 +1,26 @@
+/* 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 { Link } from './';
+
+describe('Link', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<Link href="#" data-testid="my.link">
+					Link example
+				</Link>
+				<Link href="#" icon="information-filled">
+					Link example
+				</Link>
+				<Link href="https://www.talend.com">Link example</Link>
+			</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/Link/Link.tsx b/packages/design-system/src/components/Link/Link.tsx
@@ -3,7 +3,7 @@ import { forwardRef, ReactElement, Ref, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { DeprecatedIconNames } from '../../types';
-import Linkable, { LinkableType, isBlank as targetCheck } from '../Linkable';
+import { Linkable, LinkableType, isBlank as targetCheck } from '../Linkable';
 
 import style from './Link.module.scss';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants';

diff --git a/packages/design-system/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/design-system/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link should render a11y html 1`] = `
+<main>
+  <a
+    class="theme-linkable theme-link"
+    data-testid="my.link"
+    href="#"
+  >
+    <span
+      class="theme-link__text"
+    >
+      Link example
+    </span>
+  </a>
+  <a
+    class="theme-linkable theme-link"
+    href="#"
+  >
+    <span
+      class="theme-link__icon"
+    >
+      <svg
+        aria-hidden="true"
+        data-test="link.icon.before"
+        data-testid="link.icon.before"
+        pointer-events="none"
+        shape-rendering="geometricPrecision"
+        style="width: 1.6rem; height: 1.6rem;"
+      >
+        <use
+          xlink:href="#information-filled:M"
+        />
+      </svg>
+    </span>
+    <span
+      class="theme-link__text"
+    >
+      Link example
+    </span>
+  </a>
+  <a
+    class="theme-linkable theme-link"
+    href="https://www.talend.com"
+  >
+    <span
+      class="theme-link__text"
+    >
+      Link example
+    </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>
+</main>
+`;
diff --git a/packages/design-system/src/components/LinkAsButton/LinkAsButton.test.tsx b/packages/design-system/src/components/LinkAsButton/LinkAsButton.test.tsx
@@ -0,0 +1,22 @@
+/* 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 { LinkAsButton } from './';
+
+describe('LinkAsButton', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<LinkAsButton data-testid="my.link">Link example</LinkAsButton>
+				<LinkAsButton icon="information-filled">Link example</LinkAsButton>
+				<LinkAsButton openInNewTab>Link example</LinkAsButton>
+			</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();
+	});
+});