From 0cc19fc4f8b63cf663e072b76828648e62816855 Mon Sep 17 00:00:00 2001
From: weilirs <62249815+weilirs@users.noreply.github.com>
Date: Fri, 27 Oct 2023 04:15:22 -0500
Subject: [PATCH] test(e2e,playwright):lower-jaw (#52058)

---
 .../Challenges/classic/lower-jaw.tsx          | 11 +++++-
 .../Challenges/components/reset-modal.tsx     |  1 +
 e2e/lower-jaw.spec.ts                         | 39 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 e2e/lower-jaw.spec.ts

diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx
index e241f0adee1..f01cb22179d 100644
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/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}`}
diff --git a/client/src/templates/Challenges/components/reset-modal.tsx b/client/src/templates/Challenges/components/reset-modal.tsx
index c0ec30d9223..8c31c76cf34 100644
--- a/client/src/templates/Challenges/components/reset-modal.tsx
+++ b/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}
diff --git a/e2e/lower-jaw.spec.ts b/e2e/lower-jaw.spec.ts
new file mode 100644
index 00000000000..d3ba7198b0f
--- /dev/null
+++ b/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();
+});