diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts index d39fe951925..aa30d966266 100644 --- a/e2e/editor.spec.ts +++ b/e2e/editor.spec.ts @@ -1,6 +1,23 @@ -import { expect, test } from '@playwright/test'; +import { APIRequestContext, expect, test } from '@playwright/test'; import { clearEditor, focusEditor } from './utils/editor'; +import { authedRequest } from './utils/request'; + +const setTheme = async ( + request: APIRequestContext, + theme: 'default' | 'night' +) => + authedRequest({ + request, + endpoint: '/update-my-theme', + method: 'put', + data: { + theme + } + }); + +const testPage = + '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'; test.describe('Editor Component', () => { test('should allow the user to insert text', async ({ @@ -8,9 +25,7 @@ test.describe('Editor Component', () => { isMobile, browserName }) => { - await page.goto( - '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3' - ); + await page.goto(testPage); await focusEditor({ page, isMobile, browserName }); await page.keyboard.insertText('

FreeCodeCamp

'); @@ -45,66 +60,20 @@ test.describe('Python Terminal', () => { test.describe('Editor theme if the system theme is dark', () => { test.use({ colorScheme: 'dark' }); - test.beforeEach(async ({ page }) => { - await page.goto( - '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3' - ); - }); - test.describe('If the user is signed in', () => { test.use({ storageState: 'playwright/.auth/certified-user.json' }); - test('should be in dark mode if the user selected theme is dark', async ({ - page - }) => { - // Open the nav menu and toggle the theme - await page.getByRole('button', { name: 'Menu' }).click(); - - const toggle = page.getByRole('button', { name: 'Night Mode' }); - await expect(toggle).toBeVisible(); - const isDarkMode = await toggle.getAttribute('aria-pressed'); - - if (isDarkMode === 'false') { - const listItem = page.getByRole('listitem').filter({ has: toggle }); - - // The button's click event is intercepted by the `li`, - // so we need to click on the `li` to trigger the theme change action. - await listItem.click(); - - // Ensure that the action is completed before checking the editor. - await expect( - page.getByText('We have updated your theme') - ).toBeVisible(); - } - + test('should respect the user settings', async ({ page, request }) => { const editor = page.locator("div[role='code'].monaco-editor"); + + await setTheme(request, 'night'); + await page.goto(testPage); + await expect(editor).toHaveClass(/vs-dark/); - }); - test('should be in light mode if the user selected theme is light', async ({ - page - }) => { - // Open the nav menu and toggle the theme - await page.getByRole('button', { name: 'Menu' }).click(); + await setTheme(request, 'default'); + await page.reload(); - const toggle = page.getByRole('button', { name: 'Night Mode' }); - await expect(toggle).toBeVisible(); - const isDarkMode = await toggle.getAttribute('aria-pressed'); - - if (isDarkMode === 'true') { - const listItem = page.getByRole('listitem').filter({ has: toggle }); - - // The button's click event is intercepted by the `li`, - // so we need to click on the `li` to trigger the theme change action. - await listItem.click(); - - // Ensure that the action is completed before checking the editor. - await expect( - page.getByText('We have updated your theme') - ).toBeVisible(); - } - - const editor = page.locator("div[role='code'].monaco-editor"); await expect(editor).toHaveClass(/vs(?!\w)/); }); }); @@ -113,6 +82,7 @@ test.describe('Editor theme if the system theme is dark', () => { test.use({ storageState: { cookies: [], origins: [] } }); test('should be in dark mode', async ({ page }) => { + await page.goto(testPage); const editor = page.locator("div[role='code'].monaco-editor"); await expect(editor).toHaveClass(/vs-dark/); }); @@ -122,72 +92,55 @@ test.describe('Editor theme if the system theme is dark', () => { test.describe('Editor theme if the system theme is light', () => { test.use({ colorScheme: 'light' }); - test.beforeEach(async ({ page }) => { - await page.goto( - '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3' - ); - }); - test.describe('If the user is signed in', () => { test.use({ storageState: 'playwright/.auth/certified-user.json' }); - test('should be in dark mode if the user selected theme is dark', async ({ - page + test('should respect the user settings', async ({ page, request }) => { + const editor = page.locator("div[role='code'].monaco-editor"); + + await setTheme(request, 'night'); + await page.goto(testPage); + + await expect(editor).toHaveClass(/vs-dark/); + + await setTheme(request, 'default'); + await page.reload(); + + await expect(editor).toHaveClass(/vs(?!\w)/); + }); + + // This should be true for both system themes, but we're only testing light mode to save time. + test('should switch the editor theme when the user toggles the theme', async ({ + page, + request }) => { + await setTheme(request, 'default'); + await page.goto(testPage); + // Open the nav menu and toggle the theme await page.getByRole('button', { name: 'Menu' }).click(); const toggle = page.getByRole('button', { name: 'Night Mode' }); await expect(toggle).toBeVisible(); - const isDarkMode = await toggle.getAttribute('aria-pressed'); - if (isDarkMode === 'false') { - const listItem = page.getByRole('listitem').filter({ has: toggle }); + const listItem = page.getByRole('listitem').filter({ has: toggle }); - // The button's click event is intercepted by the `li`, - // so we need to click on the `li` to trigger the theme change action. - await listItem.click(); + // The button's click event is intercepted by the `li`, + // so we need to click on the `li` to trigger the theme change action. + await listItem.click(); - // Ensure that the action is completed before checking the editor. - await expect( - page.getByText('We have updated your theme') - ).toBeVisible(); - } + // Ensure that the action is completed before checking the editor. + await expect(page.getByText('We have updated your theme')).toBeVisible(); const editor = page.locator("div[role='code'].monaco-editor"); await expect(editor).toHaveClass(/vs-dark/); }); - - test('should be in light mode if the user selected theme is light', async ({ - page - }) => { - await page.getByRole('button', { name: 'Menu' }).click(); - - const toggle = page.getByRole('button', { name: 'Night Mode' }); - await expect(toggle).toBeVisible(); - const isDarkMode = await toggle.getAttribute('aria-pressed'); - - if (isDarkMode === 'true') { - const listItem = page.getByRole('listitem').filter({ has: toggle }); - - // The button's click event is intercepted by the `li`, - // so we need to click on the `li` to trigger the theme change action. - await listItem.click(); - - // Ensure that the action is completed before checking the editor. - await expect( - page.getByText('We have updated your theme') - ).toBeVisible(); - } - - const editor = page.locator("div[role='code'].monaco-editor"); - await expect(editor).toHaveClass(/vs(?!\w)/); - }); }); test.describe('If the user is signed out', () => { test.use({ storageState: { cookies: [], origins: [] } }); test('should be in light mode', async ({ page }) => { + await page.goto(testPage); const editor = page.locator("div[role='code'].monaco-editor"); await expect(editor).toHaveClass(/vs(?!\w)/); });