From 7b84bd6666ff5b31c72549876cdfb6ad5a583150 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 3 Jun 2026 09:29:25 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20Add=20test=20file=20for=20Settin?=
 =?UTF-8?q?gsTab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/components/SettingsTab.test.tsx | 131 ++++++++++++++++++++++++++++
 vitest.config.ts                    |   1 +
 2 files changed, 132 insertions(+)
 create mode 100644 src/components/SettingsTab.test.tsx

diff --git a/src/components/SettingsTab.test.tsx b/src/components/SettingsTab.test.tsx
new file mode 100644
index 00000000..196f2587
--- /dev/null
+++ b/src/components/SettingsTab.test.tsx
@@ -0,0 +1,131 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { SettingsTab } from "./SettingsTab";
+import { MAIN_BLOCKS, DETAIL_OPTIONS } from "@/lib/cardGeneratorConstants";
+import type { CardDisplayOptions } from "@/lib/cardSettings";
+import type { CardBlockId } from "@/lib/types";
+import "@testing-library/jest-dom";
+
+describe("SettingsTab", () => {
+  const defaultDisplayOptions: CardDisplayOptions = {
+    showAvatar: true,
+    showBio: false,
+    showStats: true,
+    showLocation: false,
+    showJoinedDate: true,
+    showTopics: false,
+    showLanguage: true,
+  };
+
+  const defaultIsBlockVisible = vi.fn((id: CardBlockId) => id === "profile" || id === "contributions");
+  const toggleMainBlockVisibility = vi.fn();
+  const toggleDisplayOption = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders all main block labels", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={defaultDisplayOptions}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    MAIN_BLOCKS.forEach(({ label }) => {
+      expect(screen.getByLabelText(label)).toBeInTheDocument();
+    });
+  });
+
+  it("renders all detail options labels", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={defaultDisplayOptions}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    DETAIL_OPTIONS.forEach(({ label }) => {
+      expect(screen.getByLabelText(label)).toBeInTheDocument();
+    });
+  });
+
+  it("sets correct checked state for main blocks based on isBlockVisible prop", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={defaultDisplayOptions}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    const profileCheckbox = screen.getByLabelText("Profile") as HTMLInputElement;
+    expect(profileCheckbox.checked).toBe(true);
+
+    const heatmapCheckbox = screen.getByLabelText("Activity Heatmap") as HTMLInputElement;
+    expect(heatmapCheckbox.checked).toBe(false);
+  });
+
+  it("sets correct checked state for detail options based on displayOptions prop", () => {
+    const optionsWithUndefined = { ...defaultDisplayOptions, showJoinedDate: undefined };
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={optionsWithUndefined}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    const avatarCheckbox = screen.getByLabelText("Avatar") as HTMLInputElement;
+    expect(avatarCheckbox.checked).toBe(true);
+
+    const bioCheckbox = screen.getByLabelText("Bio") as HTMLInputElement;
+    expect(bioCheckbox.checked).toBe(false);
+
+    const joinedDateCheckbox = screen.getByLabelText("Joined Date") as HTMLInputElement;
+    expect(joinedDateCheckbox.checked).toBe(false); // Covers the ?? false fallback
+  });
+
+  it("calls toggleMainBlockVisibility when a main block checkbox is toggled", async () => {
+    const user = userEvent.setup();
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={defaultDisplayOptions}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    const profileCheckbox = screen.getByLabelText("Profile");
+    await user.click(profileCheckbox);
+    expect(toggleMainBlockVisibility).toHaveBeenCalledWith("profile");
+    expect(toggleMainBlockVisibility).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls toggleDisplayOption when a detail option checkbox is toggled", async () => {
+    const user = userEvent.setup();
+    render(
+      <SettingsTab
+        isBlockVisible={defaultIsBlockVisible}
+        toggleMainBlockVisibility={toggleMainBlockVisibility}
+        displayOptions={defaultDisplayOptions}
+        toggleDisplayOption={toggleDisplayOption}
+      />
+    );
+
+    const avatarCheckbox = screen.getByLabelText("Avatar");
+    await user.click(avatarCheckbox);
+    expect(toggleDisplayOption).toHaveBeenCalledWith("showAvatar");
+    expect(toggleDisplayOption).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index 8ab92149..b0576528 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
         "src/components/ReadmeCardUrlSection.tsx",
         "src/components/BusinessCard.tsx",
         "src/components/LanguageChart.tsx",
+        "src/components/SettingsTab.tsx",
         "src/components/SkillsCard.tsx",
         "src/components/LayoutEditor.tsx",
         "src/lib/rateLimit.ts",