61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { TamaguiProvider, Theme } from 'tamagui';
|
|
import { useTheme } from '@tamagui/core';
|
|
import tamaguiConfig from '../../../../../tamagui.config';
|
|
import { useAdminTheme } from '../theme';
|
|
|
|
const ThemeProbe = () => {
|
|
const adminTheme = useAdminTheme();
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<div
|
|
data-testid="probe"
|
|
data-admin-bg={adminTheme.background}
|
|
data-theme-bg={String(theme.background?.val ?? '')}
|
|
data-admin-text={adminTheme.text}
|
|
data-theme-text={String(theme.color?.val ?? '')}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderWithTheme = (name: 'light' | 'dark') =>
|
|
render(
|
|
<TamaguiProvider config={tamaguiConfig} defaultTheme={name}>
|
|
<Theme name={name}>
|
|
<ThemeProbe />
|
|
</Theme>
|
|
</TamaguiProvider>
|
|
);
|
|
|
|
describe('useAdminTheme', () => {
|
|
it('tracks Tamagui theme values across light and dark modes', () => {
|
|
const { rerender } = renderWithTheme('light');
|
|
const probe = screen.getByTestId('probe');
|
|
const lightAdminBg = probe.getAttribute('data-admin-bg');
|
|
const lightThemeBg = probe.getAttribute('data-theme-bg');
|
|
const lightAdminText = probe.getAttribute('data-admin-text');
|
|
const lightThemeText = probe.getAttribute('data-theme-text');
|
|
|
|
expect(lightAdminBg).toBe(lightThemeBg);
|
|
expect(lightAdminText).toBe(lightThemeText);
|
|
|
|
rerender(
|
|
<TamaguiProvider config={tamaguiConfig} defaultTheme="dark">
|
|
<Theme name="dark">
|
|
<ThemeProbe />
|
|
</Theme>
|
|
</TamaguiProvider>
|
|
);
|
|
|
|
const darkProbe = screen.getByTestId('probe');
|
|
const darkAdminBg = darkProbe.getAttribute('data-admin-bg');
|
|
const darkThemeBg = darkProbe.getAttribute('data-theme-bg');
|
|
|
|
expect(darkAdminBg).toBe(darkThemeBg);
|
|
expect(darkAdminBg).not.toBe(lightAdminBg);
|
|
});
|
|
});
|