From 20a8c1d59b756830cd6bb1bae2b0eb3467af107e Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Tue, 8 Oct 2024 17:25:13 -0400
Subject: [PATCH] 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>
---
 e2e/lower-jaw.spec.ts | 60 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/e2e/lower-jaw.spec.ts b/e2e/lower-jaw.spec.ts
index 75cd313e04f..5b78413f68a 100644
--- a/e2e/lower-jaw.spec.ts
+++ b/e2e/lower-jaw.spec.ts
@@ -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 }
+  );
+});