diff --git a/frontend/src/components/SubtypeCard.tsx b/frontend/src/components/SubtypeCard.tsx
index 92f0c08..f8ac9a3 100644
--- a/frontend/src/components/SubtypeCard.tsx
+++ b/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;
diff --git a/frontend/src/components/TagType.tsx b/frontend/src/components/TagType.tsx
index 4272fcf..8caac1e 100644
--- a/frontend/src/components/TagType.tsx
+++ b/frontend/src/components/TagType.tsx
@@ -149,7 +149,7 @@ export default function SubtypePage() {
{/* Render the description based on typeId */}
{description}
- {/* Tags in this Category Section */}
+ {/* Tags in this type */}
Tags in This Category:
diff --git a/frontend/src/routes/glossary.test.tsx b/frontend/src/routes/glossary.test.tsx
new file mode 100644
index 0000000..3a84833
--- /dev/null
+++ b/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(
+
+
+ } />
+
+ ,
+ );
+
+ // Check if glossary title is rendered
+ expect(screen.getByText(/Explore Various Tag Types/i)).toBeInTheDocument();
+ });
+
+ it("renders tag counts and descriptions correctly", () => {
+ render(
+
+
+ } />
+
+ ,
+ );
+ });
+
+ it("renders error alert when there is an error", () => {
+ (useSearchTags as Mock).mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: new Error("Something went wrong"),
+ });
+
+ render(
+
+
+ } />
+
+ ,
+ );
+ });
+});
diff --git a/frontend/src/routes/glossary.tsx b/frontend/src/routes/glossary.tsx
index d05b245..7807c27 100644
--- a/frontend/src/routes/glossary.tsx
+++ b/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";
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index a89fddd..6db81ff 100644
--- a/frontend/src/routes/index.tsx
+++ b/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,
},
];