chore(e2e): create test to ensure --fcc-expected-- does not show up in the hint text (#56581)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Anna
2024-10-08 17:25:13 -04:00
committed by GitHub
parent cdadae8dfe
commit 20a8c1d59b

View File

@@ -2,15 +2,12 @@ import { test, expect } from '@playwright/test';
import { clearEditor, focusEditor, getEditors } from './utils/editor';
import { signout } from './utils/logout';
test.beforeEach(async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
});
test('Check the initial states of submit button and "check your code" button', async ({
page
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const checkButton = page.getByTestId('lowerJaw-check-button');
const submitButton = page.getByTestId('lowerJaw-submit-button');
@@ -21,6 +18,9 @@ test('Check the initial states of submit button and "check your code" button', a
});
test('Click on the "check your code" button', async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
await checkButton.click();
@@ -32,6 +32,9 @@ test('Click on the "check your code" button', async ({ page }) => {
});
test('Resets the lower jaw when prompted', async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
await checkButton.click();
@@ -58,6 +61,9 @@ test('Checks hotkeys when instruction is focused', async ({
page,
browserName
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const editor = getEditors(page);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
const description = page.locator('#description');
@@ -82,6 +88,9 @@ test('Focuses on the submit button after tests passed', async ({
browserName,
isMobile
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const editor = getEditors(page);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
const submitButton = page.getByRole('button', {
@@ -103,6 +112,9 @@ test('Prompts unauthenticated user to sign in to save progress', async ({
browserName,
isMobile
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
await signout(page);
await page.reload();
const editor = getEditors(page);
@@ -129,6 +141,9 @@ test('Prompts unauthenticated user to sign in to save progress', async ({
});
test('Should render UI correctly', async ({ page }) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const codeCheckButton = page.getByRole('button', {
name: 'Check Your Code'
});
@@ -142,6 +157,9 @@ test('Should display the text of the check code button accordingly based on devi
isMobile,
browserName
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
if (isMobile) {
await expect(
page.getByRole('button', { name: 'Check Your Code', exact: true })
@@ -162,6 +180,9 @@ test('should display the text of submit and go to next challenge button accordin
isMobile,
browserName
}) => {
await page.goto(
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
);
const editor = getEditors(page);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
@@ -195,3 +216,30 @@ test('should display the text of submit and go to next challenge button accordin
).toBeVisible();
}
});
test('Hint text should not contain placeholders `fcc-expected`', async ({
page,
isMobile,
browserName
}) => {
await page.goto(
'learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-4'
);
const editor = getEditors(page);
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
await focusEditor({ page, isMobile });
await clearEditor({ page, browserName });
await editor.fill(
'body{background:linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));margin:0;padding:0;width:5%;height:100vh}'
);
await checkButton.click();
const failingHint = page.getByTestId('lowerJaw-failing-hint');
const hintDescriptionElement = failingHint.locator('.hint-description');
const hintDescription = hintDescriptionElement.locator('p');
await expect(hintDescription).toContainText(
'You should give body a width of 100%, but found 5%',
{ useInnerText: true }
);
});