jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

fix(e2e, playwright): resolved mobile test failures progress-bar.spec.ts (#52520)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Rahul Suresh
2023-12-28 11:57:01 -06:00
committed by GitHub
parent f9c48b8cb8
commit 50263d28ee
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
e2e/progress-bar.spec.ts
View File

@@ -1,4 +1,5 @@
import { test, expect, type Page } from '@playwright/test';
import { expect, test, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
let page: Page;
@@ -10,9 +11,22 @@ test.beforeAll(async ({ browser }) => {
});
test.describe('Progress bar component', () => {
test('Should appear with the correct content after the user has submitted their code', async () => {
test('Should appear with the correct content after the user has submitted their code', async ({
isMobile,
browserName
}) => {
const monacoEditor = page.getByLabel('Editor content');
await monacoEditor.click();
// The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
// This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
// in place of `.click()` to focus on the editor.
// Ref: https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if (isMobile && browserName === 'webkit') {
await monacoEditor.focus();
} else {
await monacoEditor.click();
}
await page.keyboard.press('Control+A');
//Meta + A works in webkit
await page.keyboard.press('Meta+A');
@@ -21,9 +35,16 @@ test.describe('Progress bar component', () => {
await page.keyboard.insertText(
'<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2></body></html>'
);
await page
.getByRole('button', { name: 'Check Your Code (Ctrl + Enter)' })
.click();
if (isMobile) {
await page
.getByRole('button', { name: translations.buttons['check-code-2'] })
.click();
} else {
await page
.getByRole('button', { name: translations.buttons['check-code'] })
.click();
}
const progressBarContainer = page.getByTestId('progress-bar-container');
await expect(progressBarContainer).toContainText(