Merge pull request #694 from bounswe/frontend/feature/glossary-tag-types

[FE] Implement Glossary Page and Tag Type Pages

frontend/src/components/SubtypeCard.tsx

@@ -3,6 +3,7 @@ import { ArrowRight, Tags } from "lucide-react";
 import React from "react";
 import { Link } from "react-router-dom";
 
+//new card component for tag types to display in glossary
 interface TagSubtypeCardProps {
   tagSubtype: {
     typeId: string;

frontend/src/components/TagType.tsx

@@ -149,7 +149,7 @@ export default function SubtypePage() {
           {/* Render the description based on typeId */}
           <div className="mb-6 text-lg text-gray-700">{description}</div>
 
-          {/* Tags in this Category Section */}
+          {/* Tags in this type */}
           <h2 className="mb-4 text-2xl font-semibold text-gray-800">
             Tags in This Category:
           </h2>

frontend/src/routes/glossary.test.tsx

@@ -0,0 +1,79 @@
+// glossary.test.tsx
+import { useSearchTags } from "@/services/api/programmingForumComponents";
+import { TagDetails } from "@/services/api/programmingForumSchemas";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, Mock, vi } from "vitest";
+import GlossaryPage from "./glossary";
+
+const mockTagData = vi.hoisted(
+  () =>
+    ({
+      tagId: "1",
+      name: "javascript",
+      description:
+        "A popular programming language primarily used for web development.",
+      questionCount: 50,
+      followerCount: 1000,
+      logoImage: "https://example.com/logo.jpg",
+      officialWebsite: "https://example.com",
+      //createdAt: "2023-01-01T00:00:00Z",
+    }) satisfies TagDetails,
+);
+
+vi.mock("@/services/api/programmingForumComponents", () => ({
+  useSearchTags: vi.fn(() => ({
+    data: { data: { items: [mockTagData] } },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+describe("GlossaryPage", () => {
+  beforeEach(() => {
+    (useSearchTags as Mock).mockReturnValue({
+      data: { data: { items: [mockTagData] } },
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  it("renders glossary title correctly", () => {
+    render(
+      <MemoryRouter initialEntries={["/glossary"]}>
+        <Routes>
+          <Route path="/glossary" element={<GlossaryPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    // Check if glossary title is rendered
+    expect(screen.getByText(/Explore Various Tag Types/i)).toBeInTheDocument();
+  });
+
+  it("renders tag counts and descriptions correctly", () => {
+    render(
+      <MemoryRouter initialEntries={["/glossary"]}>
+        <Routes>
+          <Route path="/glossary" element={<GlossaryPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  });
+
+  it("renders error alert when there is an error", () => {
+    (useSearchTags as Mock).mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error("Something went wrong"),
+    });
+
+    render(
+      <MemoryRouter initialEntries={["/glossary"]}>
+        <Routes>
+          <Route path="/glossary" element={<GlossaryPage />} />
+        </Routes>
+      </MemoryRouter>,
+    );
+  });
+});

frontend/src/routes/glossary.tsx

@@ -1,3 +1,4 @@
+//glossary page to display tag types
 import { TagSubtypeCard } from "@/components/SubtypeCard";
 import { useSearchTags } from "@/services/api/programmingForumComponents";
 import { TagDetails } from "@/services/api/programmingForumSchemas";

frontend/src/routes/index.tsx

@@ -69,11 +69,11 @@ export const routes: RouteObject[] = [
     Component: CreateTagPage,
   },
   {
-    path: "/glossary",
+    path: "/glossary", //added glossary route
     Component: Glossary,
   },
   {
-    path: "/tagtype/:typeId",
+    path: "/tagtype/:typeId", //added tagtype pages' routes
     Component: TagTypePage,
   },
 ];