Merge pull request #21 from kameiryohei/create-test-landingPage

LandingSectionのテストコードを作成

.github/workflows/frontend_ci.yml

@@ -8,6 +8,14 @@ on:
     branches:
       - main
 
+env:
+  NEXT_PUBLIC_SUPABASE_URL: ${{secrets.NEXT_PUBLIC_SUPABASE_URL}}
+  NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY}}
+  MICROCMS_API_KEY: ${{secrets.MICROCMS_API_KEY}}
+  MICROCMS_API_DOMAIN: ${{secrets.MICROCMS_API_DOMAIN}}
+  DATABASE_URL: ${{secrets.DATABASE_URL}}
+  API_PREFIX: ${{secrets.API_PREFIX}}
+
 jobs:
   build:
     runs-on: ubuntu-latest

__test__/LandingSection.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, act } from "@testing-library/react";
+import LandingSection from "app/components/LandingSection";
+import { mockData } from "./mock/mock_CmsData";
+
+describe("<LandingSection />", () => {
+  test("LandingSectionコンポーネントが正しく表示されるかのテスト", async () => {
+    await act(async () => {
+      render(<LandingSection data={mockData} />);
+    });
+
+    expect(screen.getByText(mockData.title || "")).toBeInTheDocument();
+  });
+
+  test("アプリケーション名がレンダリングされる", async () => {
+    await act(async () => {
+      render(<LandingSection data={mockData} />);
+    });
+    expect(
+      screen.getByText(mockData.applicationName || "")
+    ).toBeInTheDocument();
+  });
+
+  test("各サブタイトルとテキストがレンダリングされる", async () => {
+    await act(async () => {
+      render(<LandingSection data={mockData} />);
+    });
+    expect(screen.getByText(mockData.subTitle1 || "")).toBeInTheDocument();
+    expect(screen.getByText(mockData.text1)).toBeInTheDocument();
+    expect(screen.getByText(mockData.subTitle2 || "")).toBeInTheDocument();
+    expect(screen.getByText(mockData.text2)).toBeInTheDocument();
+    expect(screen.getByText(mockData.subTitle3 || "")).toBeInTheDocument();
+    expect(screen.getByText(mockData.text3)).toBeInTheDocument();
+  });
+
+  test("最後のメッセージがレンダリングされる", async () => {
+    await act(async () => {
+      render(<LandingSection data={mockData} />);
+    });
+    expect(screen.getByText(mockData.lastMessage || "")).toBeInTheDocument();
+  });
+
+  test("画像が正しいsrc属性でレンダリングされる", async () => {
+    await act(async () => {
+      render(<LandingSection data={mockData} />);
+    });
+
+    const imageElement = screen.getByAltText("Home");
+    const imageElement_img1 = screen.getByAltText("Image 1");
+    const imageElement_img2 = screen.getByAltText("Image 2");
+    const imageElement_img3 = screen.getByAltText("Image 3");
+
+    expect(imageElement).toHaveAttribute("src");
+    expect(imageElement.getAttribute("src")).toContain(
+      encodeURIComponent(mockData.icon?.url ?? "")
+    );
+
+    expect(imageElement_img1).toHaveAttribute("src");
+    expect(imageElement_img1.getAttribute("src")).toContain(
+      mockData.img1?.url ?? ""
+    );
+
+    expect(imageElement_img2).toHaveAttribute("src");
+    expect(imageElement_img2.getAttribute("src")).toContain(
+      mockData.img2?.url ?? ""
+    );
+
+    expect(imageElement_img3).toHaveAttribute("src");
+    expect(imageElement_img3.getAttribute("src")).toContain(
+      mockData.img3?.url ?? ""
+    );
+  });
+});

__test__/mock/mock_CmsData.ts

@@ -0,0 +1,40 @@
+import { CmsData } from "app/components/CmsType";
+
+export const mockData: CmsData = {
+  createdAt: "2024-09-27T01:48:39.206Z",
+  updatedAt: "2024-09-27T01:49:24.332Z",
+  publishedAt: "2024-09-27T01:49:22.524Z",
+  revisedAt: "2024-09-27T01:49:22.524Z",
+  text1:
+    "新規登録をして、自分のプロフィールを編集しよう！学部名などを登録することで、自分の情報を元により多くの人に見てもらうことができます。ログインをしなくても、他の人のプランを見ることができます。",
+  text2:
+    "現在自分が受けている授業を登録しよう！その授業の内容や感想を書くことで、他の人に情報を共有することができます。あなたのコメントが後輩などの参考になるかもしれません！",
+  text3:
+    "自分が受けた授業を元に履修プランをアップデートしよう！また他の人のプランにコメントを残すこともできます。",
+  title: "履修プランを考えることをもっと楽に",
+  applicationName: "ClassPlannner",
+  subTitle1: "1. 登録",
+  subTitle2: "2. 履修プランを投稿",
+  subTitle3: "3. 履修プランを更新",
+  lastMessage: "今すぐ「ClassPlannner」をお試しください!",
+  img1: {
+    url: "https://images.microcms-assets.io/assets/1a2e596f4f604b99b756f320188ead42/d3f3f78d97934d0493d387d41ba7c9f3/image1.svg",
+    height: 500,
+    width: 500,
+  },
+  img2: {
+    url: "https://images.microcms-assets.io/assets/1a2e596f4f604b99b756f320188ead42/5135c18532a44fe382d0a201b69203b0/image2.svg",
+    height: 500,
+    width: 750,
+  },
+  img3: {
+    url: "https://images.microcms-assets.io/assets/1a2e596f4f604b99b756f320188ead42/bb2470186fc741c1bd4931a3b8aa3f94/image3.svg",
+    height: 500,
+    width: 500,
+  },
+  icon: {
+    url: "https://images.microcms-assets.io/assets/1a2e596f4f604b99b756f320188ead42/865dbce6aad6467aacf183753c6d67f5/icon.png",
+    height: 500,
+    width: 500,
+  },
+};

app/components/LandingSection.tsx

@@ -41,7 +41,7 @@ const LandingSection = ({ data }: LandingSectionProps) => {
               </p>
               <Image
                 src={data.img2?.url ?? ""}
-                alt="Register"
+                alt="Image 2"
                 width={300}
                 height={600}
                 className="pt-4"
@@ -60,7 +60,7 @@ const LandingSection = ({ data }: LandingSectionProps) => {
             <div className="flex justify-center gap-x-8 flex-col lg:flex-row items-center">
               <Image
                 src={data.img1?.url ?? ""}
-                alt="Register"
+                alt="Image 1"
                 width={300}
                 height={300}
                 className="pt-4 mx-auto rounded-full"
@@ -85,7 +85,7 @@ const LandingSection = ({ data }: LandingSectionProps) => {
               </p>
               <Image
                 src={data.img3?.url ?? ""}
-                alt="Register"
+                alt="Image 3"
                 width={300}
                 height={300}
                 className="pt-4 mx-auto rounded-full"