test(e2e): project preview modal (#51799)

client/src/templates/Challenges/components/preview.tsx

@@ -38,7 +38,10 @@ function Preview({
   const id = previewId ?? mainPreviewId;
 
   return (
-    <div className={`notranslate challenge-preview ${iframeToggle}-iframe`}>
+    <div
+      data-playwright-test-label='preview-iframe'
+      className={`notranslate challenge-preview ${iframeToggle}-iframe`}
+    >
       <iframe
         className={'challenge-preview-frame'}
         id={id}

client/src/templates/Challenges/components/project-preview-modal.tsx

@@ -68,7 +68,12 @@ function ProjectPreviewModal({
         className='project-preview-modal-header fcc-modal'
         closeButton={true}
       >
-        <Modal.Title className='text-center'>{previewTitle}</Modal.Title>
+        <Modal.Title
+          className='text-center'
+          data-playwright-test-label='project-preview-modal-title'
+        >
+          {previewTitle}
+        </Modal.Title>
       </Modal.Header>
       <Modal.Body className='project-preview-modal-body text-center'>
         <Preview
@@ -83,6 +88,7 @@ function ProjectPreviewModal({
           block={true}
           bsSize='lg'
           bsStyle='primary'
+          data-playwright-test-label='project-preview-modal-closeButton'
           onClick={() => {
             closeModal('projectPreview');
             setEditorFocusability(true);

e2e/project-preview-modal.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+import translations from '../client/i18n/locales/english/translations.json';
+
+const currentUrlPath =
+  '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-1';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(currentUrlPath);
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('Exit Project Preview Modal E2E Test Suite', () => {
+  test('Verifies the Correct Rendering of the Project Preview Modal', async ({
+    page
+  }) => {
+    await expect(
+      page.getByRole('button', {
+        name: translations.buttons.close
+      })
+    ).toBeVisible();
+    await expect(page.getByTestId('project-preview-modal-title')).toBeVisible();
+    await expect(
+      page.locator('div.modal-body').getByTestId('preview-iframe')
+    ).toBeVisible();
+    // JS will generate 2 iframes, the right one should be chosen
+    await expect(
+      page.getByTestId('project-preview-modal-closeButton')
+    ).toBeVisible();
+  });
+
+  test('Closes the Project Preview Modal When the User clicks on the close Button', async ({
+    page
+  }) => {
+    await page.getByTestId('project-preview-modal-closeButton').click();
+    await expect(
+      page.getByTestId('project-preview-modal-title')
+    ).not.toBeVisible();
+  });
+
+  test('Closes the Project Preview Modal when the User clicks on X button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: translations.buttons.close })
+      .click();
+    await expect(
+      page.getByTestId('project-preview-modal-title')
+    ).not.toBeVisible();
+  });
+});