test: add items test

DaleStudy · Nov 8, 2024 · c359f4d · c359f4d
1 parent b29a5b5
commit c359f4d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 31 deletions.
diff --git a/src/components/Certificate/Certificate.test.tsx b/src/components/Certificate/Certificate.test.tsx
@@ -65,3 +65,9 @@ test("render LinkedIn link", () => {
     `https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${username}&organizationId=104834174&certUrl=${location.href}`,
   );
 });
+
+test("render footer", () => {
+  render(<Certificate />);
+
+  expect(screen.getByRole("contentinfo"));
+});
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
@@ -10,7 +10,7 @@
     padding-bottom: 100px;
   }
 
-  > section {
+  section {
     display: flex;
     flex-direction: column;
     gap: 40px;
@@ -20,32 +20,9 @@
       flex-direction: row;
       width: 80%;
     }
-
-    > ul:nth-child(1) {
-      display: flex;
-      flex-direction: column;
-      row-gap: 10px;
-      line-height: 20px;
-
-      @media (min-width: 768px) {
-        flex-direction: row;
-        column-gap: 80px;
-      }
-
-      > li > a {
-        font-size: 16px;
-        color: var(--bg-100);
-      }
-    }
-
-    > ul:nth-child(2) {
-      display: flex;
-      align-items: center;
-      column-gap: 40px;
-    }
   }
 
-  > p {
+  p {
     font-size: 14px;
     color: rgba(253, 253, 255, 0.75);
     border-top: 1px solid rgba(253, 253, 255, 0.2);
@@ -60,3 +37,26 @@
     }
   }
 }
+
+.leftMenu {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  line-height: 20px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    column-gap: 80px;
+  }
+
+  > li > a {
+    font-size: 16px;
+    color: var(--bg-100);
+  }
+}
+
+.rightMenu {
+  display: flex;
+  align-items: center;
+  column-gap: 40px;
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -96,7 +96,7 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <section>
-        <ul>
+        <ul className={styles.leftMenu}>
           {leftMenu.map(({ label, link }) => (
             <li key={link}>
               <a href={link} target="_blank" aria-label={label}>
@@ -105,7 +105,8 @@ export default function Footer() {
             </li>
           ))}
         </ul>
-        <ul>
+
+        <ul className={styles.rightMenu}>
           {rightMenu.map(({ label, link, component }) => (
             <li key={link}>
               <a href={link} target="_blank" aria-label={label}>
@@ -115,6 +116,7 @@ export default function Footer() {
           ))}
         </ul>
       </section>
+
       <p>© 2024 DaleStudy. All rights reserved.</p>
     </footer>
   );

diff --git a/src/components/Leaderboard/Leaderboard.test.tsx b/src/components/Leaderboard/Leaderboard.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import Leaderboard from "./Leaderboard";
 
 describe("<Leaderboard/>", () => {
@@ -31,7 +31,9 @@ describe("<Leaderboard/>", () => {
       { name: "SamTheKorean", solved: 60, rank: "나무" },
     ];
 
-    const memberItems = screen.getAllByRole("listitem");
+    const memberItems = within(
+      screen.getByRole("article", { name: /members list/i }),
+    ).getAllByRole("listitem");
 
     expect(memberItems).toHaveLength(members.length);
 
@@ -71,4 +73,8 @@ describe("<Leaderboard/>", () => {
       );
     });
   });
+
+  it("renders footer", () => {
+    expect(screen.getByRole("contentinfo"));
+  });
 });
diff --git a/src/components/Progress/Progress.test.tsx b/src/components/Progress/Progress.test.tsx
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, within } from "@testing-library/react";
 import Progress from "./Progress"; // Adjust the import path as needed
 
 describe("<Progress/>", () => {
@@ -31,7 +31,9 @@ describe("<Progress/>", () => {
   });
 
   it("renders the task list", () => {
-    const taskItems = screen.getAllByRole("listitem");
+    const taskItems = within(
+      screen.getByRole("region", { name: "Task List" }),
+    ).getAllByRole("listitem");
     expect(taskItems).toHaveLength(4); // Since there are 4 tasks defined
 
     const expectedTasks = [
@@ -47,4 +49,8 @@ describe("<Progress/>", () => {
       expect(taskItem).toHaveTextContent(task.difficulty);
     });
   });
+
+  it("renders footer", () => {
+    expect(screen.getByRole("contentinfo"));
+  });
 });