feat(apollo,look&feel): ajout des tests pour Item File

Author: neehal-axa

client/apollo/react/src/Form/ItemFile/ItemFileCommon.tsx

@@ -12,8 +12,8 @@ import {
 import classNames from "classnames";
 import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
 import { Spinner } from "../../Spinner/SpinnerCommon";
-import { ClickIcon } from "../../ClickIcon/ClickIconCommon";
-import { Icon } from "../../Icon/IconCommon";
+import type { ClickIconProps } from "../../ClickIcon/ClickIconCommon";
+import type { IconProps } from "../../Icon/IconCommon";
 
 export const itemFileStates = {
   success: "success",
@@ -31,9 +31,11 @@ export type ItemFileCommonProps = {
   errorMessage?: string;
   deleteIcon: string;
   ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
-  ItemIconComponent: ComponentType<ComponentProps<typeof Icon>>;
-  ItemClickIconComponent: ComponentType<ComponentProps<typeof ClickIcon>>;
+  ItemIconComponent: ComponentType<IconProps>;
+  ItemClickIconComponent: ComponentType<ClickIconProps>;
   ItemSpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
+  deleteIconProps?: Partial<ClickIconProps>;
+  visiibilityIconProps?: Partial<ClickIconProps>;
 } & ComponentPropsWithoutRef<"div">;
 
 export const ItemFileCommon = ({
@@ -47,6 +49,8 @@ export const ItemFileCommon = ({
   ItemClickIconComponent,
   ItemIconComponent,
   ItemMessageComponent,
+  deleteIconProps = {},
+  visiibilityIconProps = {},
 }: ItemFileCommonProps) => {
   const idHelp = useId();
   const idMessage = useId();
@@ -89,11 +93,14 @@ export const ItemFileCommon = ({
         <div className="af-click-icon__content">
           {state === "success" ? (
             <>
-              <ItemClickIconComponent src={visibilityIcon} />
-              <ItemClickIconComponent src={deleteIcon} />
+              <ItemClickIconComponent
+                src={visibilityIcon}
+                {...visiibilityIconProps}
+              />
+              <ItemClickIconComponent src={deleteIcon} {...deleteIconProps} />
             </>
           ) : (
-            <ItemClickIconComponent src={deleteIcon} />
+            <ItemClickIconComponent src={deleteIcon} {...deleteIconProps} />
           )}
         </div>
         {helper && (

client/apollo/react/src/Form/ItemFile/__tests__/ItemFile.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { ItemFile, itemFileStates } from "../ItemFileLF";
+
+describe("<ItemFile />", () => {
+  test("should render component when loading", () => {
+    render(
+      <ItemFile
+        title="IMG_879687880"
+        subTitle="0.12"
+        state={itemFileStates.loading}
+        helper="helper"
+      />,
+    );
+    const itemFileTitle = screen.getByText("IMG_879687880");
+    const itemFileSubTitle = screen.getByText("0.12");
+    const itemTitleState = document.querySelector(
+      '[aria-label="Chargement en cours"]',
+    );
+
+    expect(itemFileTitle).toBeInTheDocument();
+    expect(itemFileSubTitle).toBeInTheDocument();
+    expect(itemTitleState).toBeInTheDocument();
+  });
+
+  it("renders the component with error", () => {
+    const { container } = render(
+      <ItemFile
+        title="IMG_879687880"
+        subTitle="0.12"
+        state={itemFileStates.error}
+        errorMessage="Titre du message"
+        helper="Helper"
+      />,
+    );
+
+    expect(container.querySelector(".af-item-file")).toHaveClass(
+      "af-item-file--error",
+    );
+  });
+
+  it("renders the component with success", () => {
+    const { container } = render(
+      <ItemFile
+        title="IMG_879687880"
+        subTitle="0.12"
+        state={itemFileStates.success}
+        helper="helper"
+      />,
+    );
+
+    expect(container.querySelector("svg")).toHaveClass("af-icon__success");
+  });
+
+  it("shouldn't have an accessibility violation", async () => {
+    const { container } = render(
+      <ItemFile
+        state={itemFileStates.success}
+        subTitle="0.12"
+        title="IMG_879687880"
+        helper="helper"
+        deleteIconProps={{ "aria-label": "delete" }}
+        visiibilityIconProps={{ "aria-label": "visibility" }}
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});