gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use api requests to simplify editor spec (#54911)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2024-05-21 19:55:49 +02:00
committed by GitHub
parent b19a58c763
commit 672e1105f8
1 changed files with 55 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/editor.spec.ts
+55 -102
View File
@@ -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('<h2>FreeCodeCamp</h2>');
@@ -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)/);
});