wehub-resource-sync
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test('should apply system theme by default', async ({ page }) => {
|
|
await page.goto('/docs/getting-started/intro');
|
|
|
|
await expect(
|
|
page.getByRole('heading', { name: 'What is Nx?' })
|
|
).toBeVisible();
|
|
|
|
const themeSelector = page.getByRole('combobox', {
|
|
name: /theme/i,
|
|
});
|
|
|
|
await expect(themeSelector).toBeVisible();
|
|
|
|
await expect(themeSelector).toHaveValue('auto');
|
|
|
|
const dataTheme = await page.evaluate(
|
|
() => document.documentElement.dataset.theme
|
|
);
|
|
// The data-theme should be either 'light' or 'dark' based on system preference
|
|
// It won't be 'auto' on the document element
|
|
expect(['light', 'dark']).toContain(dataTheme);
|
|
});
|
|
|
|
test('should switch to between light and dark theme', async ({ page }) => {
|
|
await page.goto('/docs/getting-started/intro');
|
|
|
|
await expect(
|
|
page.getByRole('heading', { name: 'What is Nx?' })
|
|
).toBeVisible();
|
|
|
|
const themeSelector = page.getByRole('combobox', {
|
|
name: /theme/i,
|
|
});
|
|
|
|
await test.step('light theme renders', async () => {
|
|
await expect(themeSelector).toBeVisible();
|
|
|
|
await themeSelector.selectOption('light');
|
|
|
|
await expect(themeSelector).toHaveValue('light');
|
|
|
|
const dataTheme = await page.evaluate(
|
|
() => document.documentElement.dataset.theme
|
|
);
|
|
expect(dataTheme).toBe('light');
|
|
});
|
|
|
|
await test.step('dark theme renders', async () => {
|
|
await themeSelector.selectOption('dark');
|
|
|
|
await expect(themeSelector).toHaveValue('dark');
|
|
|
|
const dataTheme = await page.evaluate(
|
|
() => document.documentElement.dataset.theme
|
|
);
|
|
expect(dataTheme).toBe('dark');
|
|
});
|
|
|
|
await test.step('switch back to auto', async () => {
|
|
await themeSelector.selectOption('auto');
|
|
|
|
await expect(themeSelector).toHaveValue('auto');
|
|
|
|
const dataTheme = await page.evaluate(
|
|
() => document.documentElement.dataset.theme
|
|
);
|
|
expect(['light', 'dark']).toContain(dataTheme);
|
|
});
|
|
});
|