test(e2e,playwright):lower-jaw (#52058)

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -98,6 +98,7 @@ const LowerButtonsPanel = ({
       <hr />
       <div className='utility-bar'>
         <button
+          data-playwright-test-label='lowerJaw-reset-button'
           className='btn fade-in'
           data-cy='reset-code-button'
           onClick={resetButtonEvent}
@@ -131,6 +132,7 @@ const LowerJawTips = ({
   return (
     <>
       <div
+        data-playwright-test-label='lowerJaw-failing-test-feedback'
         data-cy='failing-test-feedback'
         className='test-status fade-in'
         aria-hidden={showFeedback}
@@ -138,7 +140,11 @@ const LowerJawTips = ({
         <Fail aria-hidden='true' />
         <p>{learnEncouragementText}</p>
       </div>
-      <div className='hint-status fade-in' aria-hidden={showFeedback}>
+      <div
+        data-playwright-test-label='lowerJaw-failing-hint'
+        className='hint-status fade-in'
+        aria-hidden={showFeedback}
+      >
         <LightBulb aria-hidden='true' />
         <div
           className='hint-description'
@@ -301,6 +307,7 @@ const LowerJaw = ({
         </Button>
       )}
       <button
+        data-playwright-test-label='lowerJaw-submit-button'
         className={lowerJawButtonStyle}
         data-cy='submit-lowerJaw-button'
         onClick={tryToSubmitChallenge}
@@ -310,6 +317,7 @@ const LowerJaw = ({
         {t('buttons.submit-and-go')}
       </button>
       <button
+        data-playwright-test-label='lowerJaw-check-button'
         className={lowerJawButtonStyle}
         data-cy='check-lowerJaw-button'
         onClick={tryToExecuteChallenge}
@@ -350,6 +358,7 @@ const LowerJaw = ({
         )}
         {hintRef.current && !challengeIsCompleted && (
           <LowerJawTips
+            data-testid='lowerJaw-tips'
             showFeedback={isFeedbackHidden}
             testText={t('learn.test')}
             htmlDescription={`${hintRef.current}`}

client/src/templates/Challenges/components/reset-modal.tsx

@@ -52,6 +52,7 @@ function ResetModal({ reset, close, isOpen }: ResetModalProps): JSX.Element {
   }
   return (
     <Modal
+      data-playwright-test-label='reset-modal'
       animation={false}
       dialogClassName='reset-modal'
       keyboard={true}

e2e/lower-jaw.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+  );
+});
+
+test('Check the initial states of submit button and "check your code" button', async ({
+  page
+}) => {
+  const checkButton = page.getByTestId('lowerJaw-check-button');
+
+  const submitButton = page.getByTestId('lowerJaw-submit-button');
+  const checkButtonState = await checkButton.getAttribute('aria-hidden');
+  const submitButtonState = await submitButton.getAttribute('aria-hidden');
+  expect(checkButtonState).toBe(null);
+  expect(submitButtonState).toBe('true');
+});
+
+test('Click on the "check your code" button', async ({ page }) => {
+  const checkButton = page.getByTestId('lowerJaw-check-button');
+
+  await checkButton.click();
+
+  const failing = page.getByTestId('lowerJaw-failing-test-feedback');
+  const hint = page.getByTestId('lowerJaw-failing-hint');
+  await expect(failing).toBeVisible();
+  await expect(hint).toBeVisible();
+});
+
+test('Click on the "Reset" button', async ({ page }) => {
+  const resetButton = page.getByTestId('lowerJaw-reset-button');
+  await resetButton.click();
+
+  const resetModal = page.getByTestId('reset-modal');
+
+  await expect(resetModal).toBeVisible();
+});