-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #696 from bounswe/fix/frontend/bookmarks-page
[Frontend] Fix Bookmarks Page
- Loading branch information
Showing
4 changed files
with
146 additions
and
163 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,120 @@ | ||
| import { | ||
| GetBookmarkedQuestionsError, | ||
| useGetBookmarkedQuestions, | ||
| } from "@/services/api/programmingForumComponents"; | ||
| import { QuestionDetails } from "@/services/api/programmingForumSchemas"; | ||
| import { testAccessibility } from "@/utils/test-accessibility"; | ||
| import { QueryObserverSuccessResult } from "@tanstack/react-query"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import { | ||
| createMemoryRouter, | ||
| MemoryRouter, | ||
| Route, | ||
| RouterProvider, | ||
| Routes, | ||
| } from "react-router-dom"; | ||
| import { beforeEach, describe, expect, it, vi } from "vitest"; | ||
| import { routeConfig } from "."; | ||
| import { BookmarkedQuestions } from "./bookmarks"; | ||
|
|
||
| // Mock the useGetBookmarkedQuestions hook | ||
| vi.mock("@/services/api/programmingForumComponents", () => ({ | ||
| useGetBookmarkedQuestions: vi.fn(), | ||
| })); | ||
|
|
||
| const mockQuestions: QuestionDetails[] = [ | ||
| { | ||
| GetBookmarkedQuestionsError, | ||
| useGetBookmarkedQuestions, | ||
| } from "@/services/api/programmingForumComponents"; | ||
| import { QuestionDetails } from "@/services/api/programmingForumSchemas"; | ||
| import { testAccessibility } from "@/utils/test-accessibility"; | ||
| import { QueryObserverSuccessResult } from "@tanstack/react-query"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import { | ||
| createMemoryRouter, | ||
| MemoryRouter, | ||
| Route, | ||
| RouterProvider, | ||
| Routes, | ||
| } from "react-router-dom"; | ||
| import { beforeEach, describe, expect, it, vi } from "vitest"; | ||
| import { routeConfig } from "."; | ||
| import { BookmarkedQuestions } from "./bookmarks"; | ||
|
|
||
| // Mock the useGetBookmarkedQuestions hook | ||
| vi.mock("@/services/api/programmingForumComponents", () => ({ | ||
| useGetBookmarkedQuestions: vi.fn(), | ||
| })); | ||
|
|
||
| const mockQuestions: QuestionDetails[] = [ | ||
| { | ||
| id: 1, | ||
| title: "How to implement a binary tree in Python?", | ||
| content: "I'm struggling to understand the structure...", | ||
| author: { | ||
| id: 1, | ||
| title: "How to implement a binary tree in Python?", | ||
| content: "I'm struggling to understand the structure...", | ||
| author: { id: 1, name: "John Doe", username: "user1", profilePicture: "p", reputationPoints: 50}, | ||
| createdAt: "2024-12-01T12:00:00Z", | ||
| updatedAt: "2024-12-01T12:30:00Z", | ||
| tags: [{ id: "1", name: "Python" }], | ||
| likeCount: 10, | ||
| dislikeCount: 2, | ||
| commentCount: 4, | ||
| viewCount: 50, | ||
| bookmarked: true, | ||
| selfVoted: 1, | ||
| difficulty: "MEDIUM", | ||
| selfDifficultyVote: "MEDIUM", | ||
| easyCount: 5, | ||
| mediumCount: 10, | ||
| hardCount: 3, | ||
| name: "John Doe", | ||
| username: "user1", | ||
| profilePicture: "p", | ||
| reputationPoints: 50, | ||
| }, | ||
| { | ||
| createdAt: "2024-12-01T12:00:00Z", | ||
| updatedAt: "2024-12-01T12:30:00Z", | ||
| tags: [{ id: "1", name: "Python" }], | ||
| likeCount: 10, | ||
| dislikeCount: 2, | ||
| commentCount: 4, | ||
| viewCount: 50, | ||
| bookmarked: true, | ||
| selfVoted: 1, | ||
| difficulty: "MEDIUM", | ||
| selfDifficultyVote: "MEDIUM", | ||
| easyCount: 5, | ||
| mediumCount: 10, | ||
| hardCount: 3, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: "What are closures in JavaScript?", | ||
| content: "Can someone explain closures with an example?", | ||
| author: { | ||
| id: 2, | ||
| title: "What are closures in JavaScript?", | ||
| content: "Can someone explain closures with an example?", | ||
| author: { id: 2, name: "Jane Smith", username: "user2", profilePicture: "p", reputationPoints: 50}, | ||
| createdAt: "2024-12-02T10:00:00Z", | ||
| updatedAt: "2024-12-02T10:20:00Z", | ||
| tags: [{ id: "2", name: "JavaScript" }], | ||
| likeCount: 15, | ||
| dislikeCount: 1, | ||
| commentCount: 5, | ||
| viewCount: 70, | ||
| bookmarked: true, | ||
| selfVoted: 0, | ||
| difficulty: "EASY", | ||
| selfDifficultyVote: "EASY", | ||
| easyCount: 8, | ||
| mediumCount: 6, | ||
| hardCount: 1, | ||
| name: "Jane Smith", | ||
| username: "user2", | ||
| profilePicture: "p", | ||
| reputationPoints: 50, | ||
| }, | ||
| ]; | ||
|
|
||
| describe("BookmarkedQuestions component", () => { | ||
| beforeEach(() => { | ||
| vi.mocked(useGetBookmarkedQuestions).mockReset(); | ||
| }); | ||
|
|
||
| it("should have no accessibility violations", async () => { | ||
| const router = createMemoryRouter(routeConfig, { | ||
| initialEntries: ["/bookmarks"], | ||
| }); | ||
|
|
||
| await testAccessibility(<RouterProvider router={router} />); | ||
| createdAt: "2024-12-02T10:00:00Z", | ||
| updatedAt: "2024-12-02T10:20:00Z", | ||
| tags: [{ id: "2", name: "JavaScript" }], | ||
| likeCount: 15, | ||
| dislikeCount: 1, | ||
| commentCount: 5, | ||
| viewCount: 70, | ||
| bookmarked: true, | ||
| selfVoted: 0, | ||
| difficulty: "EASY", | ||
| selfDifficultyVote: "EASY", | ||
| easyCount: 8, | ||
| mediumCount: 6, | ||
| hardCount: 1, | ||
| }, | ||
| ]; | ||
|
|
||
| describe("BookmarkedQuestions component", () => { | ||
| beforeEach(() => { | ||
| vi.mocked(useGetBookmarkedQuestions).mockReset(); | ||
| }); | ||
|
|
||
| it("should have no accessibility violations", async () => { | ||
| const router = createMemoryRouter(routeConfig, { | ||
| initialEntries: ["/bookmarks"], | ||
| }); | ||
|
|
||
| it("renders bookmarked questions correctly", () => { | ||
| vi.mocked(useGetBookmarkedQuestions).mockReturnValue({ | ||
| isLoading: false, | ||
| error: null, | ||
| data: { | ||
| data: { items: mockQuestions, totalItems: mockQuestions.length }, | ||
| }, | ||
| } as QueryObserverSuccessResult<unknown, GetBookmarkedQuestionsError>); | ||
|
|
||
| render( | ||
| <MemoryRouter initialEntries={["/bookmarks"]}> | ||
| <Routes> | ||
| <Route path="/bookmarks" element={<BookmarkedQuestions />} /> | ||
| </Routes> | ||
| </MemoryRouter>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText(`You have ${mockQuestions.length} bookmarked questions.`), | ||
| ).toBeInTheDocument(); | ||
|
|
||
| mockQuestions.forEach((question) => { | ||
| expect(screen.getByText(question.title)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| await testAccessibility(<RouterProvider router={router} />); | ||
| }); | ||
|
|
||
| it("renders bookmarked questions correctly", () => { | ||
| vi.mocked(useGetBookmarkedQuestions).mockReturnValue({ | ||
| isLoading: false, | ||
| error: null, | ||
| data: { | ||
| data: mockQuestions, | ||
| }, | ||
| } as QueryObserverSuccessResult<unknown, GetBookmarkedQuestionsError>); | ||
|
|
||
| render( | ||
| <MemoryRouter initialEntries={["/bookmarks"]}> | ||
| <Routes> | ||
| <Route path="/bookmarks" element={<BookmarkedQuestions />} /> | ||
| </Routes> | ||
| </MemoryRouter>, | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText( | ||
| `You have ${mockQuestions.length} bookmarked questions.`, | ||
| ), | ||
| ).toBeInTheDocument(); | ||
|
|
||
| mockQuestions.forEach((question) => { | ||
| expect(screen.getByText(question.title)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters