test: continue to tests a11y and fix

.changeset/strange-coats-poke.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-jest': minor
+---
+
+feat: add api to set a fetch MockResponse

packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx

@@ -20,7 +20,7 @@ export type PossibleVariants = 'toggle' | 'floating' | 'default';
 
 type CommonTypes<S extends Partial<AvailableSizes>> = Omit<
 	ButtonHTMLAttributes<HTMLButtonElement>,
-	'className' | 'style'
+	'className' | 'style' | 'aria-label'
 > & {
 	children: string;
 	isLoading?: boolean;
@@ -71,6 +71,7 @@ function Primitive<S extends AvailableSizes>(
 		<Tooltip title={children} placement={tooltipPlacement || 'top'}>
 			{(triggerProps, triggerRef) => (
 				<Clickable
+					aria-label={children}
 					{...triggerProps}
 					{...rest}
 					tabIndex={rest.tabIndex || 0}

packages/design-system/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,28 @@
+/* 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 { Icon } from './';
+
+describe('Icon', () => {
+	it('should render a11y html', async () => {
+		global.self.fetch.mockResponse = {
+			status: 200,
+			ok: true,
+			text: () =>
+				new Promise(resolve => {
+					resolve(undefined);
+				}),
+		};
+		const { container } = render(
+			<main>
+				<Icon name="pencil" />
+				<Icon name="src-https://statics-dev.cloud.talend.com/@talend/common/images/favicon-logo-square.ico" />
+				<Icon name="remote-https://unpkg.com/@talend/[email protected]/src/svg/core/abc.svg" />
+			</main>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+		const results = await axe(document.body);
+		expect(results).toHaveNoViolations();
+	});
+});

packages/design-system/src/components/Icon/Icon.tsx

@@ -1,8 +1,7 @@
 import { forwardRef, createRef, useState, useEffect, memo } from 'react';
-import type { PropsWithChildren, Ref } from 'react';
+import type { CSSProperties, Ref } from 'react';
 import classnames from 'classnames';
 // eslint-disable-next-line @talend/import-depth
-import { DeprecatedIconNames } from '../../types';
 import { IconsProvider } from '../IconsProvider';
 import style from './Icon.module.scss';
 
@@ -20,16 +19,18 @@ export enum SVG_TRANSFORMS {
 	FlipVertical = 'flip-vertical',
 }
 
-export type IconProps = PropsWithChildren<any> & {
-	name: DeprecatedIconNames;
-	transform: SVG_TRANSFORMS;
-	preserveColor: boolean;
-	border: boolean;
+export type IconProps = {
+	name: string;
+	className?: string;
+	id?: string;
+	style?: CSSProperties;
+	transform?: SVG_TRANSFORMS;
+	border?: boolean;
 };
 
 const accessibility = {
-	focusable: 'false',
-	'aria-hidden': 'true',
+	focusable: false,
+	'aria-hidden': true,
 };
 
 // eslint-disable-next-line react/display-name
@@ -111,19 +112,25 @@ export const Icon = forwardRef(
 		const classname = classnames('tc-icon', style.svg, className, {
 			[`tc-icon-name-${name}`]: !(isImg || isRemote),
 			[style.border]: border,
-			[style[transform]]: !!transform,
+			[style[transform || '']]: !!transform,
 		});
 
 		if (isImg) {
 			return (
-				<img alt="" src={name.substring(4)} className={classname} {...accessibility} {...rest} />
+				<img
+					alt="icon"
+					src={name.substring(4)}
+					className={classname}
+					{...accessibility}
+					{...rest}
+				/>
 			);
 		}
 
 		if (isRemote && content && !isRemoteSVG) {
 			return (
 				<img
-					alt=""
+					alt="remote icon"
 					src={name.replace('remote-', '')}
 					className={className}
 					{...accessibility}
@@ -135,7 +142,7 @@ export const Icon = forwardRef(
 		return (
 			<svg
 				{...rest}
-				name={!(isImg || isRemote) ? name : null}
+				name={!(isImg || isRemote) ? name : undefined}
 				{...accessibility}
 				className={classnames('tc-svg-icon', classname)}
 				ref={safeRef}

packages/design-system/src/components/Icon/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should render a11y html 1`] = `
+<main>
+  <svg
+    aria-hidden="true"
+    class="tc-svg-icon tc-icon theme-svg tc-icon-name-pencil"
+    focusable="false"
+    name="pencil"
+    pointer-events="none"
+    shape-rendering="geometricPrecision"
+  />
+  <img
+    alt="icon"
+    aria-hidden="true"
+    class="tc-icon theme-svg"
+    focusable="false"
+    src="https://statics-dev.cloud.talend.com/@talend/common/images/favicon-logo-square.ico"
+  />
+  <svg
+    aria-hidden="true"
+    class="tc-svg-icon tc-icon theme-svg"
+    focusable="false"
+    pointer-events="none"
+    shape-rendering="geometricPrecision"
+  />
+</main>
+`;

packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx

@@ -0,0 +1,33 @@
+/* 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 { InlineEditing } from './';
+
+jest.mock('@talend/utils', () => {
+	let i = 0;
+	return {
+		// we need stable but different uuid (is fixed to 42 by current mock)
+		randomUUID: () => `mocked-uuid-${i++}`,
+	};
+});
+
+describe('InlineEditing', () => {
+	it('should render a11y html', async () => {
+		const { container } = render(
+			<main>
+				<InlineEditing
+					label="Edit the value"
+					placeholder="What is your Lorem Ipsum?"
+					defaultValue="Lorem Ipsum"
+					onEdit={jest.fn()}
+				/>
+			</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();
+	});
+});

packages/design-system/src/components/InlineEditing/__snapshots__/InlineEditing.test.tsx.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineEditing should render a11y html 1`] = `
+<main>
+  <div
+    class="theme-inlineEditor"
+    data-test="inlineediting"
+    data-testid="inlineediting"
+  >
+    <div
+      class="theme-inlineEditor__editor"
+    >
+      <div
+        class="theme-stack theme-justify-start theme-align-stretch theme-nowrap theme-column theme-block theme-height-100 theme-noShrink theme-gap-x-XXS theme-gap-y-XXS"
+      >
+        <span
+          class="theme-hidden"
+        >
+          <label
+            class="theme-label"
+            for="field--mocked-uuid-5"
+          >
+            Edit the value
+          </label>
+        </span>
+        <div
+          class="theme-inputShell"
+        >
+          <input
+            class="theme-input"
+            data-padding-override="true"
+            data-test="inlineediting.input"
+            data-testid="inlineediting.input"
+            id="field--mocked-uuid-5"
+            name="Editthevalue"
+            placeholder="What is your Lorem Ipsum?"
+            type="text"
+            value="Lorem Ipsum"
+          />
+        </div>
+      </div>
+      <div
+        class="theme-inlineEditor__editor__actions"
+      >
+        <div
+          class="theme-stack theme-justify-space-between theme-align-center theme-nowrap theme-row theme-inline theme-gap-x-XXS theme-gap-y-XXS theme-padding-top-0 theme-padding-right-XXS theme-padding-bottom-0 theme-padding-left-XXS"
+        >
+          <button
+            aria-describedby="id-mocked-uuid-6"
+            aria-label="Cancel"
+            class="theme-clickable theme-buttonIcon theme-size_XS"
+            data-test="inlineediting.button.cancel"
+            data-testid="inlineediting.button.cancel"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="theme-buttonIcon__icon"
+            >
+              <svg
+                aria-hidden="true"
+                pointer-events="none"
+                shape-rendering="geometricPrecision"
+                style="width: 1.2rem; height: 1.2rem;"
+              >
+                <use
+                  xlink:href="#cross-filled:S"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            aria-describedby="id-mocked-uuid-7"
+            aria-label="Submit"
+            class="theme-clickable theme-buttonIcon theme-size_XS"
+            data-test="inlineediting.button.submit"
+            data-testid="inlineediting.button.submit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="theme-buttonIcon__icon"
+            >
+              <svg
+                aria-hidden="true"
+                pointer-events="none"
+                shape-rendering="geometricPrecision"
+                style="width: 1.2rem; height: 1.2rem;"
+              >
+                <use
+                  xlink:href="#check-filled:S"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+`;

packages/design-system/src/stories/icons/Icons.tsx

@@ -3,13 +3,10 @@ import type { ChangeEvent, FormEvent } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { IconGallery, IconItem } from '@storybook/blocks';
 
-import { StackHorizontal, Form, Icon, IconsProvider } from '../../';
+import { StackHorizontal, Form, Icon, IconsProvider, IconProps } from '../../';
 
-type TemplateProps = {
-	name: string;
+type TemplateProps = IconProps & {
 	size: number;
-	transform: string;
-	border?: boolean;
 	filter?: boolean;
 	useCurrentColor?: boolean;
 };
@@ -137,7 +134,6 @@ export const AllIconsDocs = () => {
 							filter: filter ? "url('#talend-grayscale')" : 'none',
 						}}
 						transform={transform}
-						preserveColor={!useCurrentColor}
 						border={border}
 					/>
 				</IconItem>

tools/scripts-config-jest/test-setup.js

@@ -65,6 +65,11 @@ try {
 				if (config.response) {
 					return resolve(config.response);
 				}
+				if (global.self.fetch.mockResponse) {
+					const res = global.self.fetch.mockResponse;
+					delete global.self.fetch.mockResponse;
+					return resolve(res);
+				}
 				return resolve();
 			}),
 	);