From cfbdc8d3044f3fdee6184fa2f44f6a59d16fb634 Mon Sep 17 00:00:00 2001
From: Aditya Kadam <adityack477@gmail.com>
Date: Fri, 12 Jun 2026 13:15:10 +0530
Subject: [PATCH] test(DashboardLayout-theme-contrast): verify Dark and Light
 Prefers-Color-Scheme Visual Cohesion

---
 .../dashboard/layout.theme-contrast.test.tsx  | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 app/(root)/dashboard/layout.theme-contrast.test.tsx

diff --git a/app/(root)/dashboard/layout.theme-contrast.test.tsx b/app/(root)/dashboard/layout.theme-contrast.test.tsx
new file mode 100644
index 000000000..d0a69e254
--- /dev/null
+++ b/app/(root)/dashboard/layout.theme-contrast.test.tsx
@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import DashboardLayout from './layout';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('DashboardLayout theme-contrast: Dark and Light Prefers-Color-Scheme Visual Cohesion', () => {
+  it('applies light mode text color class for sufficient contrast on light backgrounds', () => {
+    const { container } = render(
+      <DashboardLayout>
+        <p>Dashboard content</p>
+      </DashboardLayout>
+    );
+
+    const root = container.firstChild as HTMLElement;
+
+    // text-gray-900 ensures sufficient contrast in light mode
+    expect(root.className).toContain('text-gray-900');
+  });
+
+  it('applies dark mode text color class for sufficient contrast on dark backgrounds', () => {
+    const { container } = render(
+      <DashboardLayout>
+        <p>Dashboard content</p>
+      </DashboardLayout>
+    );
+
+    const root = container.firstChild as HTMLElement;
+
+    // dark:text-white ensures sufficient contrast in dark mode
+    expect(root.className).toContain('dark:text-white');
+  });
+
+  it('uses a transparent background so it does not clip foreground content colors in either theme', () => {
+    const { container } = render(
+      <DashboardLayout>
+        <p>Dashboard content</p>
+      </DashboardLayout>
+    );
+
+    const root = container.firstChild as HTMLElement;
+
+    // bg-transparent allows parent theme background to show through without clipping content
+    expect(root.className).toContain('bg-transparent');
+  });
+
+  it('renders children content correctly within the themed main wrapper', () => {
+    render(
+      <DashboardLayout>
+        <p>Dashboard content</p>
+      </DashboardLayout>
+    );
+
+    // Children must render visibly regardless of theme
+    expect(screen.getByText('Dashboard content')).toBeDefined();
+  });
+
+  it('renders the Toaster component for theme-aware notification styling', () => {
+    render(
+      <DashboardLayout>
+        <p>Dashboard content</p>
+      </DashboardLayout>
+    );
+
+    // Toaster (sonner) must render so notifications adapt to both themes
+    expect(screen.getByTestId('toaster')).toBeDefined();
+  });
+});