feat(apollo,look&feel): retour pr sur les stories et tests

Author: Abderrahman FAWZY DEV

apps/apollo-stories/src/components/Modal/ModalCore.stories.tsx

@@ -12,15 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { useRef } from "react";
 
-const meta: Meta<
-  React.ComponentType<
-    React.ComponentProps<typeof ModalCoreComponent> & {
-      body?: boolean;
-      footer?: boolean;
-      header?: boolean;
-    }
-  >
-> = {
+const meta: Meta<typeof ModalCoreComponent> = {
   title: "Components/Modal/ModalCore",
   component: ModalCoreComponent,
   parameters: {

apps/look-and-feel-stories/src/Modal/ModalCore.stories.tsx

@@ -12,15 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { useRef } from "react";
 
-const meta: Meta<
-  React.ComponentType<
-    React.ComponentProps<typeof ModalCoreComponent> & {
-      body?: boolean;
-      footer?: boolean;
-      header?: boolean;
-    }
-  >
-> = {
+const meta: Meta<typeof ModalCoreComponent> = {
   title: "Components/Modal/ModalCore",
   component: ModalCoreComponent,
   parameters: {

client/apollo/react/src/Modal/components/__tests__/ModalCoreBody.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { ModalCoreBody } from "../ModalCoreBody";
 import type { HasScrollState } from "../../../utilities/hook/useHasScroll";
@@ -12,23 +12,21 @@ vi.mock("../../../utilities/hook/useHasScroll.ts", () => ({
 
 describe("ModalCoreBody component", () => {
   it("renders children correctly", () => {
-    const { getByText } = render(<ModalCoreBody>Test Content</ModalCoreBody>);
-    expect(getByText("Test Content")).toBeInTheDocument();
+    render(<ModalCoreBody>Test Content</ModalCoreBody>);
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
   });
 
   it("applies custom className", () => {
-    const { container } = render(
+    render(
       <ModalCoreBody className="custom-class">Test Content</ModalCoreBody>,
     );
-    expect(container.firstChild).toHaveClass(
+    expect(screen.getByRole("main")).toHaveClass(
       "af-apollo-modal__body custom-class",
     );
   });
 
   it("passes other props to the main element", () => {
-    const { container } = render(
-      <ModalCoreBody id="test-id">Test Content</ModalCoreBody>,
-    );
-    expect(container.firstChild).toHaveAttribute("id", "test-id");
+    render(<ModalCoreBody id="test-id">Test Content</ModalCoreBody>);
+    expect(screen.getByRole("main")).toHaveAttribute("id", "test-id");
   });
 });

client/apollo/react/src/Modal/components/__tests__/ModalCoreFooter.test.tsx

@@ -1,30 +1,29 @@
 import { render, screen } from "@testing-library/react";
 import { ModalCoreFooter } from "../ModalCoreFooterApollo";
 
+const getFooter = () => screen.getByRole("contentinfo");
+
 describe("ModalCoreFooter", () => {
   it("should not render when no button props provided", () => {
     const { container } = render(<ModalCoreFooter />);
+
     const footer = container.querySelector("footer");
     expect(footer).not.toBeInTheDocument();
   });
 
   it("should render with default class", () => {
-    const { container } = render(
-      <ModalCoreFooter primaryButtonProps={{ children: "Primary" }} />,
-    );
-    const footer = container.querySelector("footer");
-    expect(footer).toHaveClass("af-apollo-modal__footer");
+    render(<ModalCoreFooter primaryButtonProps={{ children: "Primary" }} />);
+    expect(getFooter()).toHaveClass("af-apollo-modal__footer");
   });
 
   it("should render with additional class", () => {
-    const { container } = render(
+    render(
       <ModalCoreFooter
         className="custom-class"
         primaryButtonProps={{ children: "Primary" }}
       />,
     );
-    const footer = container.querySelector("footer");
-    expect(footer).toHaveClass("af-apollo-modal__footer custom-class");
+    expect(getFooter()).toHaveClass("af-apollo-modal__footer custom-class");
   });
 
   it("should render with primary and secondary buttons", () => {
@@ -34,21 +33,20 @@ describe("ModalCoreFooter", () => {
         secondaryButtonProps={{ children: "Secondary" }}
       />,
     );
+
     const primaryButton = screen.getByRole("button", { name: "Primary" });
     const secondaryButton = screen.getByRole("button", { name: "Secondary" });
-
     expect(primaryButton).toBeInTheDocument();
     expect(secondaryButton).toBeInTheDocument();
   });
 
   it("should filter out falsy class names", () => {
-    const { container } = render(
+    render(
       <ModalCoreFooter
         className={undefined}
         primaryButtonProps={{ children: "Primary" }}
       />,
     );
-    const footer = container.querySelector("footer");
-    expect(footer).toHaveClass("af-apollo-modal__footer");
+    expect(getFooter()).toHaveClass("af-apollo-modal__footer");
   });
 });