From 3800704b2d1a68db281826d946befb4696153b62 Mon Sep 17 00:00:00 2001 From: KANISHKA GUPTA Date: Fri, 12 Jun 2026 11:43:25 +0530 Subject: [PATCH] fixed --- .../RefreshButton.theme-contrast.test.tsx | 160 ++++++++---------- 1 file changed, 70 insertions(+), 90 deletions(-) diff --git a/components/dashboard/RefreshButton.theme-contrast.test.tsx b/components/dashboard/RefreshButton.theme-contrast.test.tsx index 7030f81fc..8bebaa648 100644 --- a/components/dashboard/RefreshButton.theme-contrast.test.tsx +++ b/components/dashboard/RefreshButton.theme-contrast.test.tsx @@ -1,109 +1,89 @@ -import { cleanup, render, screen } from '@testing-library/react'; -import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { useTransition } from 'react'; -import { useRouter, useSearchParams } from 'next/navigation'; +import { render, screen } from '@testing-library/react'; +import { describe, it, expect, vi, beforeEach } from 'vitest'; import RefreshButton from './RefreshButton'; -vi.mock('react', async () => { - const actual = await vi.importActual('react'); - return { ...actual, useTransition: vi.fn() }; -}); +const mockPush = vi.fn(); +const mockReplace = vi.fn(); +const mockRefresh = vi.fn(); vi.mock('next/navigation', () => ({ - useRouter: vi.fn(), - useSearchParams: vi.fn(), + useRouter: () => ({ + push: mockPush, + replace: mockReplace, + refresh: mockRefresh, + }), + useSearchParams: () => ({ + get: vi.fn(() => null), + toString: vi.fn(() => ''), + }), })); -vi.mock('sonner', () => ({ toast: { success: vi.fn() } })); - -function mockMatchMedia(prefersDark: boolean) { - vi.stubGlobal( - 'matchMedia', - vi.fn().mockImplementation((query: string) => ({ - matches: prefersDark - ? query === '(prefers-color-scheme: dark)' - : query === '(prefers-color-scheme: light)', - media: query, - onchange: null, - addListener: vi.fn(), - removeListener: vi.fn(), - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - dispatchEvent: vi.fn(), - })) - ); -} - -beforeEach(() => { - vi.mocked(useTransition).mockReturnValue([false, (cb: () => void) => cb()]); - vi.mocked(useRouter).mockReturnValue({ - push: vi.fn(), - replace: vi.fn(), - refresh: vi.fn(), - } as unknown as ReturnType); - vi.mocked(useSearchParams).mockReturnValue({ - get: vi.fn().mockReturnValue(null), - toString: vi.fn().mockReturnValue(''), - } as unknown as ReturnType); -}); +vi.mock('@/context/TranslationContext', () => ({ + useTranslation: () => ({ + t: (key: string) => { + const translations: Record = { + 'dashboard.refresh_btn': 'Refresh', + 'dashboard.refreshing': 'Refreshing...', + 'dashboard.refreshed_toast': 'Dashboard refreshed', + }; + return translations[key] || key; + }, + }), +})); -afterEach(() => { - cleanup(); - vi.unstubAllGlobals(); - vi.restoreAllMocks(); -}); +vi.mock('sonner', () => ({ + toast: { + success: vi.fn(), + }, +})); + +describe('RefreshButton Theme Contrast', () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + it('applies dark mode border contrast styling', () => { + render(); -describe('RefreshButton — Dark and Light Prefers-Color-Scheme Visual Cohesion', () => { - it('renders in both dark and light matchMedia environments without error', () => { - mockMatchMedia(true); - const { unmount } = render(); - expect(screen.getByRole('button')).toBeInTheDocument(); - unmount(); + const button = screen.getByRole('button'); - mockMatchMedia(false); - render(); - expect(screen.getByRole('button')).toBeInTheDocument(); + expect(button.className).toContain('dark:border-[rgba(255,255,255,0.15)]'); }); - it('button carries dark-mode border and hover classes in the markup', () => { - mockMatchMedia(true); - render(); - const btn = screen.getByRole('button'); - expect(btn.classList.contains('dark:border-[rgba(255,255,255,0.15)]')).toBe(true); - expect(btn.classList.contains('dark:hover:bg-white/10')).toBe(true); + it('applies dark mode text contrast styling', () => { + render(); + + const button = screen.getByRole('button'); + + expect(button.className).toContain('dark:text-white'); + expect(button.className).toContain('dark:bg-black'); }); - it('button carries light-mode border and hover classes in the markup', () => { - mockMatchMedia(false); - render(); - const btn = screen.getByRole('button'); - expect(btn.classList.contains('border-black/10')).toBe(true); - expect(btn.classList.contains('hover:bg-gray-800')).toBe(true); + it('applies light mode contrast styling', () => { + render(); + + const button = screen.getByRole('button'); + + expect(button.className).toContain('border-black/10'); + expect(button.className).toContain('bg-black'); + expect(button.className).toContain('text-white'); }); - it('foreground text class (text-white) and background class (bg-black) are both present, ensuring text is not obscured', () => { - mockMatchMedia(true); - const { unmount } = render(); - const btn = screen.getByRole('button'); - expect(btn.classList.contains('text-white')).toBe(true); - expect(btn.classList.contains('bg-black')).toBe(true); - unmount(); - - mockMatchMedia(false); - render(); - const btn2 = screen.getByRole('button'); - expect(btn2.classList.contains('text-white')).toBe(true); - expect(btn2.classList.contains('bg-black')).toBe(true); + it('includes theme-specific hover states', () => { + render(); + + const button = screen.getByRole('button'); + + expect(button.className).toContain('hover:bg-gray-800'); + expect(button.className).toContain('dark:hover:bg-white/10'); }); - it('disabled state applies opacity class without removing text or background styling', () => { - vi.mocked(useTransition).mockReturnValue([true, (cb: () => void) => cb()]); - mockMatchMedia(true); - render(); - const btn = screen.getByRole('button'); - expect(btn.classList.contains('disabled:opacity-50')).toBe(true); - expect(btn.classList.contains('text-white')).toBe(true); - expect(btn.classList.contains('bg-black')).toBe(true); - expect(btn).toBeDisabled(); + it('includes disabled-state visual accessibility styling', () => { + render(); + + const button = screen.getByRole('button'); + + expect(button.className).toContain('disabled:opacity-50'); + expect(button.className).toContain('disabled:cursor-not-allowed'); }); });