005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { test as base, expect } from '@playwright/test';
|
|
import { TestFixture } from './playwright.config';
|
|
|
|
const test = base.extend<TestFixture>({});
|
|
|
|
test.describe('Demo docs', () => {
|
|
test('mode toggle demos should work', async ({ page }) => {
|
|
await page.goto('/experiments/docs/demos/');
|
|
|
|
await expect(page.locator('div:has(> [data-element="demo-mode-toggle-paper"])')).toHaveClass(
|
|
/light/,
|
|
);
|
|
await expect(page.locator('[data-element="demo-mode-toggle-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(255, 255, 255)',
|
|
);
|
|
|
|
// Toggle dark mode
|
|
await page
|
|
.getByRole('radiogroup', { name: /^demo-mode-toggle$/ })
|
|
.locator('label:nth-child(3)')
|
|
.click();
|
|
|
|
await expect(page.locator('div:has(> [data-element="demo-mode-toggle-paper"])')).toHaveClass(
|
|
/dark/,
|
|
);
|
|
await expect(page.locator('[data-element="demo-mode-toggle-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(18, 18, 18)',
|
|
);
|
|
});
|
|
|
|
test('mode toggle custom theme demos should work', async ({ page }) => {
|
|
await page.goto('/experiments/docs/demos/');
|
|
|
|
await expect(
|
|
page.locator('div:has(> [data-element="demo-mode-toggle-custom-theme-paper"])'),
|
|
).toHaveClass(/light/);
|
|
await expect(page.locator('[data-element="demo-mode-toggle-custom-theme-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(239, 154, 154)',
|
|
);
|
|
|
|
// Toggle dark mode
|
|
await page
|
|
.getByRole('radiogroup', { name: /^demo-mode-toggle-custom-theme$/ })
|
|
.locator('label:nth-child(3)')
|
|
.click();
|
|
|
|
await expect(
|
|
page.locator('div:has(> [data-element="demo-mode-toggle-custom-theme-paper"])'),
|
|
).toHaveClass(/dark/);
|
|
await expect(page.locator('[data-element="demo-mode-toggle-custom-theme-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(183, 28, 28)',
|
|
);
|
|
});
|
|
|
|
test('mode toggle iframe demos should work', async ({ page }) => {
|
|
await page.goto('/experiments/docs/demos/');
|
|
|
|
const iframe = page.locator('iframe[title*="DemoModeToggleIframe"]').contentFrame();
|
|
|
|
await expect(iframe.locator('html')).toHaveClass(/light/);
|
|
await expect(iframe.locator('[data-element="demo-mode-toggle-iframe-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(255, 255, 255)',
|
|
);
|
|
|
|
// Toggle dark mode
|
|
await iframe
|
|
.getByRole('radiogroup', { name: /^demo-mode-toggle-iframe$/ })
|
|
.locator('label:nth-child(3)')
|
|
.click();
|
|
|
|
await expect(iframe.locator('html')).toHaveClass(/dark/);
|
|
await expect(iframe.locator('[data-element="demo-mode-toggle-iframe-paper"]')).toHaveCSS(
|
|
'background-color',
|
|
'rgb(18, 18, 18)',
|
|
);
|
|
});
|
|
});
|