Files
freeCodeCamp/e2e/progress-bar.spec.ts
2024-10-21 07:57:40 -07:00

66 lines
2.1 KiB
TypeScript

import { expect, test } from '@playwright/test';
import { clearEditor, focusEditor } from './utils/editor';
test.use({ storageState: 'playwright/.auth/certified-user.json' });
test.describe('Progress bar component', () => {
test('Should appear with the correct content after the user has submitted their code', async ({
page,
isMobile,
browserName
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
// If focusEditor fails, typically it's because the instructions are too
// large. There's a bug that means `scrollIntoView` does not work in the
// editor and so we have to pick less verbose challenges until that's fixed.
await focusEditor({ page, isMobile });
await clearEditor({ page, browserName });
await page.keyboard.insertText(
'<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2><p>Everyone loves cute cats online!</p></body></html>'
);
await page.getByRole('button', { name: 'Check Your Code' }).click();
const progressBarContainer = page.getByTestId('progress-bar-container');
await expect(progressBarContainer).toContainText(
'Learn HTML by Building a Cat Photo App'
);
await expect(progressBarContainer).toContainText(/\d% complete/);
await page
.getByRole('button', { name: 'Submit and go to next challenge' })
.click();
});
test('should appear in the completion modal after user has submitted their code', async ({
page,
isMobile,
browserName
}) => {
await page.goto(
'/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
);
await focusEditor({ page, isMobile });
await clearEditor({ page, browserName });
await page.keyboard.insertText('var myName;');
await page
.getByRole('button', {
name: 'Run',
exact: false
})
.click();
await expect(page.locator('.completion-block-meta')).toContainText(
/\d% complete/
);
await page
.getByRole('button', { name: 'Submit and go to next challenge' })
.click();
});
});