From a0815bc725bcc122acb70b01b6152c0b39e84f7a Mon Sep 17 00:00:00 2001
From: Yasuyuki Takeo <yasuflatland@gmail.com>
Date: Wed, 3 Jul 2024 06:43:40 +0900
Subject: [PATCH] Add test for Loading

---
 frontend/src/components/LoadingPage.test.tsx | 33 ++++++++++++++++++++
 frontend/src/components/LoadingPage.tsx      | 11 +++++--
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/LoadingPage.test.tsx

diff --git a/frontend/src/components/LoadingPage.test.tsx b/frontend/src/components/LoadingPage.test.tsx
new file mode 100644
index 0000000..f600490
--- /dev/null
+++ b/frontend/src/components/LoadingPage.test.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import LoadingPage from "./LoadingPage";
+
+describe("LoadingPage", () => {
+  it("renders without crashing", () => {
+    render(<LoadingPage />);
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("displays the flamingo icon with correct styling", () => {
+    render(<LoadingPage />);
+    const flamingoIcon = screen.getByTestId("flamingo-icon");
+    expect(flamingoIcon).toBeInTheDocument();
+    expect(flamingoIcon).toHaveClass("text-white text-8xl animate-flip");
+  });
+
+  it("displays the loading text with correct styling", () => {
+    render(<LoadingPage />);
+    const loadingText = screen.getByText("Loading...");
+    expect(loadingText).toBeInTheDocument();
+    expect(loadingText).toHaveClass("text-lg text-white mt-4");
+  });
+
+  it("has the correct background styling", () => {
+    render(<LoadingPage />);
+    const container = screen.getByTestId("loading-container");
+    expect(container).toHaveClass(
+      "bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100",
+    );
+  });
+});
diff --git a/frontend/src/components/LoadingPage.tsx b/frontend/src/components/LoadingPage.tsx
index f03296c..b84b224 100644
--- a/frontend/src/components/LoadingPage.tsx
+++ b/frontend/src/components/LoadingPage.tsx
@@ -1,11 +1,16 @@
-// LoadingPage.tsx
 import React from "react";
 import { GiFlamingo } from "react-icons/gi";
 
 function LoadingPage() {
   return (
-    <div className="bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100">
-      <GiFlamingo className="text-white text-8xl animate-flip" />
+    <div
+      className="bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100"
+      data-testid="loading-container"
+    >
+      <GiFlamingo
+        className="text-white text-8xl animate-flip"
+        data-testid="flamingo-icon"
+      />
       <p className="text-lg text-white mt-4">Loading...</p>
     </div>
   );