Merge pull request #78 from softeerbootcamp4th/feature/test-refactor

[Refactor] 차량 소개, 선착순 이벤트, 인증 모달 관련 테스트 코드 작성 및 리팩토링

jest.config.js

@@ -102,7 +102,7 @@ const config = {
 
   // A preset that is used as a base for Jest's configuration
   // preset: undefined,
-
+  preset: "ts-jest",
   // Run tests from one or more projects
   // projects: undefined,
 

package.json

@@ -63,6 +63,7 @@
     "storybook": "^8.2.6",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.6",
+    "ts-jest": "^29.2.4",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.4",
     "undici": "^6.19.4",
@@ -72,8 +73,10 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
+    "@types/js-cookie": "^3.0.6",
     "echarts": "^5.5.1",
     "echarts-wordcloud": "^2.1.0",
+    "js-cookie": "^3.0.5",
     "react-router-dom": "^6.26.0"
   },
   "eslintConfig": {

src/App.test.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import App from "./App";
+test("App", () => {
+  const a = 1;
+  expect(a).toBe(1);
+});

src/assets/svg/InnerHighlight.tsx

@@ -1,4 +1,5 @@
 import React, { Dispatch, MouseEvent, SetStateAction } from "react";
+import { InsideInfo } from "../../types/InfoScreen";
 
 interface InnerHighlightProps {
   setDescriptionStates: Dispatch<SetStateAction<Record<InsideInfo, boolean>>>;
@@ -43,6 +44,7 @@ const InnerHighlight = ({
       <rect width="1920" height="1080" fill="black" fillOpacity="0.7" />
       <circle
         id="light"
+        data-testid="light"
         cx="1346"
         cy="586"
         r="46"
@@ -53,6 +55,7 @@ const InnerHighlight = ({
       />
       <circle
         id="dial"
+        data-testid="dial"
         cx="975"
         cy="740"
         r="46"
@@ -63,6 +66,7 @@ const InnerHighlight = ({
       />
       <circle
         id="display"
+        data-testid="display"
         cx="1125"
         cy="345"
         r="46"
@@ -73,6 +77,7 @@ const InnerHighlight = ({
       />
       <circle
         id="blow"
+        data-testid="blow"
         cx="1608"
         cy="376"
         r="46"
@@ -83,6 +88,7 @@ const InnerHighlight = ({
       />
       <circle
         id="headup"
+        data-testid="headup"
         cx="558"
         cy="156"
         r="46"

src/components/common/Carousel/Carousel.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { fn } from "@storybook/test";
 import Carousel from "./Carousel";
 import { outsideInfoData } from "../../../constants/InfoData";
-import OutsideDescriptionItem from "../../mainPage/InfoScreen/OutsideDescriptionItem";
+import OutsideDescriptionItem from "../../mainPage/InfoScreen/OutsideDescriptionItem/OutsideDescriptionItem";
 
 export default {
   component: Carousel,

src/components/common/Carousel/Carousel.test.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { outsideInfoData } from "../../../constants/InfoData";
+import { render, screen } from "../../../utils/TestUtils";
+import OutsideDescriptionItem from "../../mainPage/InfoScreen/OutsideDescriptionItem/OutsideDescriptionItem";
+import Carousel from "./Carousel";
+import userEvent from "@testing-library/user-event";
+
+const carouselItems = outsideInfoData.map(({ key, title, content, image }) => {
+  return (
+    <OutsideDescriptionItem
+      key={key}
+      title={title}
+      description={content}
+      img={image}
+    />
+  );
+});
+
+const onClickCase = Array.from({ length: outsideInfoData.length }, (_, i) => i);
+
+describe("Carousel Component", () => {
+  beforeEach(() => {
+    IntersectionObserver = jest.fn().mockImplementation((callback) => ({
+      observe: jest.fn((element) => {
+        callback([
+          { isIntersecting: false, target: element },
+          { isIntersecting: true, target: element },
+          { isIntersecting: false, target: element },
+        ]);
+      }),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+
+    Element.prototype.scrollTo = jest.fn();
+  });
+
+  test("props로 전달받은 아이템 숫자 만큼의 하위 요소를 렌더링 해야 한다.", () => {
+    render(<Carousel items={carouselItems} />);
+
+    const items = screen.getAllByRole("img");
+    expect(items.length).toBe(outsideInfoData.length);
+  });
+
+  onClickCase.forEach((index) => {
+    test(`props로 ${index}번 째 아이템을 누르면 ${index}번 째 요소로 스크롤 되고, 투명도가 100이 되어야 한다.`, async () => {
+      render(<Carousel items={carouselItems} />);
+
+      const items = screen.getAllByRole("img");
+      await userEvent.click(items[index]);
+
+      const carouselContainer = items[index].parentElement;
+      const targetPosition =
+        items[index].offsetLeft - carouselContainer!.offsetLeft;
+
+      expect(carouselContainer?.scrollTo).toHaveBeenCalledWith({
+        top: 0,
+        left: targetPosition,
+        behavior: "smooth",
+      });
+
+      expect(items[index].parentElement?.parentElement).toHaveClass(
+        "opacity-100",
+      );
+    });
+  });
+});

src/components/common/Glow/Glow.test.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import { render, screen } from "../../../utils/test-utils";
+import { render, screen } from "../../../utils/TestUtils";
 import Glow from "./Glow";
 import { glowFadeOptions, glowOptions } from "../../../styles/options";
 import { fadeIn, randomGlow } from "../../../styles/keyframes";
 
-Element.prototype.animate = jest.fn();
+Element.prototype.animate = jest.fn().mockReturnValue({
+  finished: Promise.resolve(true),
+});
 
 describe("Glow Component", () => {
   test("글로우 3개가 렌더링 되야 한다.", () => {
@@ -32,22 +34,24 @@ describe("Glow Component", () => {
     });
   });
 
-  // test("글로우 밝기가 +- 10%에서 랜덤으로 밝아졌다 어두워졌다 해야 한다.", () => {
-  //   render(<Glow />);
-
-  //   const glowElemntArray = screen.getAllByRole("img", {
-  //     name: /glow-effect/i,
-  //   });
+  test("글로우 밝기가 +- 10%에서 랜덤으로 밝아졌다 어두워졌다 해야 한다.", async () => {
+    render(<Glow />);
 
-  //   glowElemntArray.map((glowElemnt, index) => {
-  //     expect(glowElemnt.animate).toHaveBeenCalledWith(fadeIn, {
-  //       ...glowFadeOptions,
-  //       delay: (index + 1) * 1000,
-  //     });
-  //   });
+    const glowElemntArray = screen.getAllByRole("img", {
+      name: /glow-effect/i,
+    });
 
-  //   glowElemntArray.map((glowElemnt) => {
-  //     expect(glowElemnt.animate).toHaveBeenCalledWith(randomGlow, glowOptions);
-  //   });
-  // });
+    await Promise.all(
+      glowElemntArray.map((glowElemnt, index) => {
+        expect(glowElemnt.animate).toHaveBeenCalledWith(fadeIn, {
+          ...glowFadeOptions,
+          delay: (index + 1) * 1000,
+        });
+      }),
+    );
+
+    glowElemntArray.map((glowElemnt) => {
+      expect(glowElemnt.animate).toHaveBeenCalledWith(randomGlow, glowOptions);
+    });
+  });
 });

src/components/mainPage/InfoScreen/ConvenienceDescriptionItem/ConvenienceDescriptionItem.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ConvenienceDescriptionItem from "./ConvenienceDescriptionItem";
+import { convenienceInfoData } from "../../../../constants/InfoData";
+
+export default {
+  component: ConvenienceDescriptionItem,
+  title: "main/Info/ConvenienceDescriptionItem",
+  tags: ["autodocs"],
+  excludeStories: /.*Data$/,
+};
+
+export const Main = {
+  args: {
+    title: convenienceInfoData[0].title,
+    description: convenienceInfoData[0].description,
+    img: convenienceInfoData[0].image,
+  },
+};

src/components/mainPage/InfoScreen/ConvenienceDescriptionItem/ConvenienceDescriptionItem.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { render, screen } from "../../../../utils/TestUtils";
+import { convenienceInfoData } from "../../../../constants/InfoData";
+import ConvenienceDescriptionItem from "./ConvenienceDescriptionItem";
+const defaultProps = {
+  title: convenienceInfoData[0].title,
+  description: convenienceInfoData[0].description,
+  img: convenienceInfoData[0].image,
+};
+
+describe("ConvenienceDescriptionItem 렌더링 테스트", () => {
+  test("props로 전달받은 제목이 렌더링 되야 한다.", () => {
+    render(<ConvenienceDescriptionItem {...defaultProps} />);
+
+    const title = screen.getByText(defaultProps.title);
+    expect(title).toBeInTheDocument();
+  });
+
+  test("props로 전달받은 설명이 렌더링 되야 한다.", () => {
+    render(<ConvenienceDescriptionItem {...defaultProps} />);
+
+    const description = screen.getByText(defaultProps.description);
+    expect(description).toBeInTheDocument();
+  });
+
+  test("props로 전달받은 이미지가 렌더링 되야 한다.", () => {
+    render(<ConvenienceDescriptionItem {...defaultProps} />);
+
+    const image = screen.getByRole("img");
+    expect(image).toHaveAttribute("src", defaultProps.img);
+  });
+});

src/components/mainPage/InfoScreen/ConvenienceDescriptionItem.tsx → src/components/mainPage/InfoScreen/ConvenienceDescriptionItem/ConvenienceDescriptionItem.tsx

@@ -4,7 +4,7 @@ interface ConvenienceDescriptionItemProps {
   title: string;
   description: string;
   img: string;
-  tailwind: string;
+  tailwind?: string;
 }
 
 const ConvenienceDescriptionItem = ({
@@ -15,6 +15,7 @@ const ConvenienceDescriptionItem = ({
 }: ConvenienceDescriptionItemProps) => {
   return (
     <div
+      role="article"
       className={`flex h-[38.25rem] w-[46rem] shrink-0 flex-col ${tailwind}`}
     >
       <img src={img} className="w-full" />

src/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import DriveDescriptionItem from "./DriveDescriptionItem";
+import { driveInfoData } from "../../../../constants/InfoData";
+
+export default {
+  component: DriveDescriptionItem,
+  title: "main/Info/DriveDescriptionItem",
+  tags: ["autodocs"],
+  excludeStories: /.*Data$/,
+};
+
+export const Main = {
+  args: {
+    title: driveInfoData[0].title,
+    img: driveInfoData[0].image,
+  },
+};

src/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { render, screen } from "../../../../utils/TestUtils";
+import { driveInfoData } from "../../../../constants/InfoData";
+import DriveDescriptionItem from "./DriveDescriptionItem";
+const defaultProps = {
+  title: driveInfoData[0].title,
+  img: driveInfoData[0].image,
+};
+
+describe("DriveDescriptionItem 렌더링 테스트", () => {
+  test("props로 전달받은 제목이 렌더링 되야 한다.", () => {
+    render(<DriveDescriptionItem {...defaultProps} />);
+
+    const title = screen.getByText(defaultProps.title);
+    expect(title).toBeInTheDocument();
+  });
+
+  test("props로 전달받은 이미지가 렌더링 되야 한다.", () => {
+    render(<DriveDescriptionItem {...defaultProps} />);
+
+    const image = screen.getByRole("img");
+    expect(image).toHaveAttribute("src", defaultProps.img);
+  });
+});

src/components/mainPage/InfoScreen/DriveDescriptionItem.tsx → src/components/mainPage/InfoScreen/DriveDescriptionItem/DriveDescriptionItem.tsx

@@ -3,7 +3,7 @@ import React from "react";
 interface DriveDescriptionItemProps {
   title: string;
   img: string;
-  tailwind: string;
+  tailwind?: string;
 }
 
 const DriveDescriptionItem = ({
@@ -13,6 +13,7 @@ const DriveDescriptionItem = ({
 }: DriveDescriptionItemProps) => {
   return (
     <div
+      role="article"
       className={`flex h-[20.875rem] w-[30rem] flex-col gap-700 flex-center ${tailwind}`}
     >
       <img src={img} alt={title} />

src/components/mainPage/InfoScreen/OutsideDescriptionItem/OutsideDescriptionItem.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import OutsideDescriptionItem from "./OutsideDescriptionItem";
+import { outsideInfoData } from "../../../../constants/InfoData";
+
+export default {
+  component: OutsideDescriptionItem,
+  title: "main/Info/OutsideDescriptionItem",
+  tags: ["autodocs"],
+  excludeStories: /.*Data$/,
+};
+
+export const Main = {
+  args: {
+    title: outsideInfoData[0].title,
+    description: outsideInfoData[0].content,
+    img: outsideInfoData[0].image,
+  },
+};

src/components/mainPage/InfoScreen/OutsideDescriptionItem/OutsideDescriptionItem.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "../../../../utils/TestUtils";
+import { outsideInfoData } from "../../../../constants/InfoData";
+import OutsideDescriptionItem from "./OutsideDescriptionItem";
+const defaultProps = {
+  title: outsideInfoData[0].title,
+  description: outsideInfoData[0].content,
+  img: outsideInfoData[0].image,
+};
+
+describe("OutsideDescriptionItem 렌더링 테스트", () => {
+  test("props로 전달받은 제목이 렌더링 되야 한다.", () => {
+    render(<OutsideDescriptionItem {...defaultProps} />);
+
+    const title = screen.getByText(defaultProps.title);
+    expect(title).toBeInTheDocument();
+  });
+
+  test("props로 전달받은 이미지가 렌더링 되야 한다.", () => {
+    render(<OutsideDescriptionItem {...defaultProps} />);
+
+    const image = screen.getByRole("img");
+    expect(image).toHaveAttribute("src", defaultProps.img);
+  });
+});