diff --git a/frontend/package.json b/frontend/package.json
index 1e7bc8c..b5e8a69 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -82,7 +82,6 @@
"lint-staged": {
"*/**/*.{js,jsx,ts,tsx}": [
"prettier --write",
-
"eslint --report-unused-disable-directives --max-warnings 0"
],
"*/**/*.{json,css,md}": [
diff --git a/frontend/src/components/Bookmarkers.test.tsx b/frontend/src/components/Bookmarkers.test.tsx
new file mode 100644
index 0000000..3375694
--- /dev/null
+++ b/frontend/src/components/Bookmarkers.test.tsx
@@ -0,0 +1,77 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import { vi, test, Mock, expect, describe, beforeEach } from "vitest";
+import { Bookmarkers } from "./Bookmarkers";
+import { MemoryRouter } from "react-router-dom";
+import { useGetBookmarkers } from "@/services/api/semanticBrowseComponents";
+
+// Mocking the useGetBookmarkers hook
+vi.mock("@/services/api/semanticBrowseComponents", () => ({
+ useGetBookmarkers: vi.fn().mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: true,
+ }),
+ useFollowUser: vi.fn().mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: true,
+ }),
+ useGetUserById: vi.fn().mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: true,
+ }),
+ useUnfollowUser: vi.fn().mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: true,
+ }),
+}));
+
+describe("Bookmarkers", () => {
+ let recipeId: string;
+
+ beforeEach(() => {
+ recipeId = "1";
+ vi.clearAllMocks();
+ });
+
+ test("displays error state when there is an error", () => {
+ (useGetBookmarkers as Mock).mockReturnValue({
+ data: null,
+ isLoading: false,
+ error: true,
+ });
+
+ render();
+ expect(screen.getByText(/Error/i)).toBeInTheDocument();
+ });
+
+ test("checks if bookmarkers button works on click", () => {
+ (useGetBookmarkers as Mock).mockReturnValue({
+ data: { data: [{ id: 1 }, { id: 2 }] },
+ isLoading: false,
+ error: null,
+ });
+ render(
+
+
+ ,
+ );
+
+ // Act
+ const bookmarkersButton = screen
+ .getByText(/see bookmarkers/i)
+ .closest("span");
+ fireEvent.click(bookmarkersButton); // Open the popover
+ expect(
+ screen.getByRole("heading", { name: "Bookmarkers" }),
+ ).toBeInTheDocument();
+
+ const popoverCloseButton = screen.getByRole("button", { name: /close/i });
+ fireEvent.click(popoverCloseButton); // Close the popover without confirming
+ expect(
+ screen.queryByRole("heading", { name: "Bookmarkers" }),
+ ).not.toBeInTheDocument();
+ });
+});