mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-01 15:02:09 +08:00
Sem Bauke
1778b198bc
Co-authored-by: sembauke <sembauke@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
const html = {
|
|
challengePath:
|
|
'/learn/responsive-web-design-v9/lecture-what-is-css/what-are-some-default-browser-styles-applied-to-html',
|
|
challengeTitle: 'What Are Some Default Browser Styles Applied to HTML?',
|
|
paragraphOneText:
|
|
'When you start working with HTML and CSS, you\'ll notice that some styles are applied to your web pages even before you write any CSS. These styles are called "default browser styles" or "user-agent styles".',
|
|
codeSnippet: '<h1>Heading 1</h1>'
|
|
};
|
|
|
|
test.describe('Interactive Editor', () => {
|
|
// skipping because I don't know of a page with paragraph nodules that doesn't also have an interactive editor toggle
|
|
test.skip('should render paragraph nodules as text and not show the interactive editor toggle', async ({
|
|
page
|
|
}) => {
|
|
await page.goto(html.challengePath);
|
|
|
|
await expect(
|
|
page.getByRole('heading', { name: html.challengeTitle })
|
|
).toBeVisible();
|
|
|
|
await expect(page.getByText(html.paragraphOneText)).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole('button', { name: /interactive editor/i })
|
|
).not.toBeVisible();
|
|
});
|
|
|
|
test('should toggle between interactive editor and static code view when Interactive Editor button is clicked', async ({
|
|
page
|
|
}) => {
|
|
await page.goto(html.challengePath);
|
|
|
|
await expect(
|
|
page.getByRole('heading', { name: html.challengeTitle })
|
|
).toBeVisible();
|
|
await expect(page.getByText(html.paragraphOneText)).toBeVisible();
|
|
|
|
// Initially, interactive editor should be hidden, static code view should be visible
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]')
|
|
).not.toBeVisible();
|
|
await expect(
|
|
page.locator('pre code').filter({ hasText: html.codeSnippet })
|
|
).toHaveCount(1);
|
|
|
|
// Click the toggle button
|
|
const toggleButton = page.getByRole('button', {
|
|
name: /interactive editor/i
|
|
});
|
|
await toggleButton.click();
|
|
|
|
// Interactive editor should be visible, static code view hidden
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]').first()
|
|
).toBeVisible();
|
|
await expect(page.locator('pre code')).not.toBeVisible();
|
|
|
|
// Click the toggle button again
|
|
await toggleButton.click();
|
|
|
|
// Interactive editor should be hidden, static code view visible again
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]')
|
|
).not.toBeVisible();
|
|
await expect(
|
|
page.locator('pre code').filter({ hasText: html.codeSnippet })
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('should persist the preference for showing the interactive editor', async ({
|
|
page
|
|
}) => {
|
|
await page.goto(html.challengePath);
|
|
|
|
// Initially, the interactive editor should be hidden
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]')
|
|
).not.toBeVisible();
|
|
|
|
await page
|
|
.getByRole('button', {
|
|
name: /interactive editor/i
|
|
})
|
|
.click();
|
|
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]').first()
|
|
).toBeVisible();
|
|
|
|
// Reload the page and check that the interactive editor is still shown
|
|
await page.reload();
|
|
await expect(
|
|
page.locator('[data-testid="sp-interactive-editor"]').first()
|
|
).toBeVisible();
|
|
});
|
|
});
|