jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-16 04:00:53 -05:00
Code Issues Projects Releases Wiki Activity

test(e2e,playwright): mobile layout (#52521)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
weilirs
2024-01-04 10:36:28 -05:00
committed by GitHub
parent ac57d0fb5e
commit ccc0f65405
1 changed files with 91 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
e2e/mobile-layout.spec.ts Normal file
View File

@@ -0,0 +1,91 @@
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Classic challenge - 5 tabs mobile layout component', () => {
test.skip(
({ isMobile }) => isMobile === false,
'Skip testing on desktop as this component is only used for mobile'
);
test('The page has mobile layout with "Instruction", "Code", "Console", "Preview", "Portal Preview" tabs', async ({
page
}) => {
await page.goto(
'learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
);
const tabs = page.getByRole('tablist');
await expect(tabs).toBeVisible();
const instructions = page.getByRole('tab', {
name: translations.learn['editor-tabs'].instructions
});
await expect(instructions).toBeVisible();
const code = page.getByRole('tab', {
name: translations.learn['editor-tabs'].code
});
await expect(code).toBeVisible();
const console = page.getByRole('tab', {
name: translations.learn['editor-tabs'].console
});
await expect(console).toBeVisible();
const preview = page.getByRole('tab', {
name: translations.learn['editor-tabs'].preview
});
await expect(preview).toBeVisible();
const portalButton = page.getByRole('button', {
name: translations.aria['move-preview-to-new-window']
});
await expect(portalButton).toBeVisible();
const help = page.getByRole('button', { name: translations.buttons.help });
await expect(help).toBeVisible();
const save = page.getByRole('button', { name: translations.buttons.save });
await expect(save).toBeVisible();
const run = page.getByRole('button', { name: translations.buttons.run });
await expect(run).toBeVisible();
});
});
test.describe('Classic challenge - 3 tabs mobile layout component', () => {
test.skip(
({ isMobile }) => isMobile === false,
'Skip testing on desktop as this component is only used for mobile'
);
test('The page has mobile layout with "Instruction", "Code", "Console" tabs', async ({
page
}) => {
await page.goto(
'learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers'
);
const tabs = page.getByRole('tablist');
await expect(tabs).toBeVisible();
const instructions = page.getByRole('tab', {
name: translations.learn['editor-tabs'].instructions
});
await expect(instructions).toBeVisible();
const code = page.getByRole('tab', {
name: translations.learn['editor-tabs'].code
});
await expect(code).toBeVisible();
const console = page.getByRole('tab', {
name: translations.learn['editor-tabs'].console
});
await expect(console).toBeVisible();
const help = page.getByRole('button', { name: translations.buttons.help });
await expect(help).toBeVisible();
const reset = page.getByRole('button', {
name: translations.buttons.reset
});
await expect(reset).toBeVisible();
const run = page.getByRole('button', { name: translations.buttons.run });
await expect(run).toBeVisible();
});
});