From ae328e914dddf25745e0c88673b602cb150f3fac Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 6 Jun 2026 03:20:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20Add=20unit=20tests=20for=20Setti?=
 =?UTF-8?q?ngsTab=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 What: The `SettingsTab` component lacked test coverage to verify rendering and interaction.
📊 Coverage: Added tests to ensure all `MAIN_BLOCKS` and `DETAIL_OPTIONS` are correctly rendered, and that their checked states align with `isBlockVisible` and `displayOptions` props. Also added coverage to verify that toggling these checkboxes correctly invokes `toggleMainBlockVisibility` and `toggleDisplayOption` with the appropriate keys.
✨ Result: `src/components/SettingsTab.tsx` is now fully tested, improving the application's overall test coverage and catching potential future regressions in the modal settings configuration.

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/components/__tests__/SettingsTab.test.tsx | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/components/__tests__/SettingsTab.test.tsx

diff --git a/src/components/__tests__/SettingsTab.test.tsx b/src/components/__tests__/SettingsTab.test.tsx
new file mode 100644
index 00000000..dc0af5ed
--- /dev/null
+++ b/src/components/__tests__/SettingsTab.test.tsx
@@ -0,0 +1,128 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { SettingsTab } from "../SettingsTab";
+import { MAIN_BLOCKS, DETAIL_OPTIONS } from "@/lib/cardGeneratorConstants";
+
+describe("SettingsTab", () => {
+  const mockIsBlockVisible = vi.fn();
+  const mockToggleMainBlockVisibility = vi.fn();
+  const mockToggleDisplayOption = vi.fn();
+
+  const mockDisplayOptions = {
+    showAvatar: true,
+    showBio: false,
+    showStats: true,
+    showLocation: false,
+    showJoinedDate: true,
+    showTopics: false,
+    showLanguage: true,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockIsBlockVisible.mockImplementation((id) => id === "profile" || id === "heatmap");
+  });
+
+  it("renders all MAIN_BLOCKS", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    for (const block of MAIN_BLOCKS) {
+      expect(screen.getByLabelText(block.label)).toBeInTheDocument();
+    }
+  });
+
+  it("renders all DETAIL_OPTIONS", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    for (const option of DETAIL_OPTIONS) {
+      expect(screen.getByLabelText(option.label)).toBeInTheDocument();
+    }
+  });
+
+  it("calls toggleMainBlockVisibility when a main block checkbox is clicked", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    const profileCheckbox = screen.getByLabelText("Profile");
+    fireEvent.click(profileCheckbox);
+    expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("profile");
+
+    const contributionsCheckbox = screen.getByLabelText("Contributions");
+    fireEvent.click(contributionsCheckbox);
+    expect(mockToggleMainBlockVisibility).toHaveBeenCalledWith("contributions");
+  });
+
+  it("calls toggleDisplayOption when a detail option checkbox is clicked", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    const avatarCheckbox = screen.getByLabelText("Avatar");
+    fireEvent.click(avatarCheckbox);
+    expect(mockToggleDisplayOption).toHaveBeenCalledWith("showAvatar");
+
+    const bioCheckbox = screen.getByLabelText("Bio");
+    fireEvent.click(bioCheckbox);
+    expect(mockToggleDisplayOption).toHaveBeenCalledWith("showBio");
+  });
+
+  it("sets checked state correctly for main blocks based on isBlockVisible", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    expect(screen.getByLabelText("Profile")).toBeChecked();
+    expect(screen.getByLabelText("Activity Heatmap")).toBeChecked();
+    expect(screen.getByLabelText("Contributions")).not.toBeChecked();
+  });
+
+  it("sets checked state correctly for detail options based on displayOptions", () => {
+    render(
+      <SettingsTab
+        isBlockVisible={mockIsBlockVisible}
+        toggleMainBlockVisibility={mockToggleMainBlockVisibility}
+        displayOptions={mockDisplayOptions}
+        toggleDisplayOption={mockToggleDisplayOption}
+      />
+    );
+
+    expect(screen.getByLabelText("Avatar")).toBeChecked();
+    expect(screen.getByLabelText("Stats")).toBeChecked();
+    expect(screen.getByLabelText("Joined Date")).toBeChecked();
+    expect(screen.getByLabelText("Languages")).toBeChecked();
+
+    expect(screen.getByLabelText("Bio")).not.toBeChecked();
+    expect(screen.getByLabelText("Location")).not.toBeChecked();
+    expect(screen.getByLabelText("Topics")).not.toBeChecked();
+  });
+});