From 0fa65def5a9cc13333af86e24830725fca5018fa Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 25 Apr 2024 23:11:39 +0200
Subject: [PATCH] test: improve project preview modal spec (#54528)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
---
 e2e/project-preview-modal.spec.ts | 52 ++++++++-----------------------
 1 file changed, 13 insertions(+), 39 deletions(-)

diff --git a/e2e/project-preview-modal.spec.ts b/e2e/project-preview-modal.spec.ts
index 9e66cf3f3f7..74f73789fe8 100644
--- a/e2e/project-preview-modal.spec.ts
+++ b/e2e/project-preview-modal.spec.ts
@@ -2,50 +2,26 @@ 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.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();
+test.describe('When it renders', () => {
+  test.beforeEach(async ({ page }) => {
+    const urlWithProjectPreview =
+      '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-1';
+    await page.goto(urlWithProjectPreview);
+  });
 
+  test('it can be closed by the Start Coding! button', async ({ page }) => {
     const dialog = page.getByRole('dialog', {
       name: translations.learn['project-preview-title']
     });
     await expect(dialog).toBeVisible();
     await expect(dialog.getByTitle('CatPhotoApp preview')).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Start Coding!' })
-    ).toBeVisible();
-  });
-
-  test('Closes the Project Preview Modal When the User clicks on the close Button', async ({
-    page
-  }) => {
-    const dialog = page.getByRole('dialog', {
-      name: translations.learn['project-preview-title']
-    });
-
-    await expect(dialog).toBeVisible();
 
     await page.getByRole('button', { name: 'Start Coding!' }).click();
 
     await expect(dialog).not.toBeVisible();
   });
 
-  test('Closes the Project Preview Modal when the User clicks on X button', async ({
-    page
-  }) => {
+  test('it can be closed by the close button', async ({ page }) => {
     const dialog = page.getByRole('dialog', {
       name: translations.learn['project-preview-title']
     });
@@ -60,26 +36,24 @@ test.describe('Exit Project Preview Modal E2E Test Suite', () => {
   });
 });
 
-test.describe('Project Preview Modal Conditional Rendering', () => {
-  test('Does not render on second step of a project', async ({ page }) => {
+test.describe('It should on appear', () => {
+  test('on the second step of a project', async ({ page }) => {
     await page.goto(
       '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
     );
     const dialog = page.getByRole('dialog', {
       name: translations.learn['project-preview-title']
     });
-    await expect(dialog).toHaveCount(0);
+    await expect(dialog).not.toBeVisible();
   });
 
-  test('Does not render on first step of a project without a preview', async ({
-    page
-  }) => {
+  test('on first step of a project without a preview', async ({ page }) => {
     await page.goto(
       '/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1'
     );
     const dialog = page.getByRole('dialog', {
       name: translations.learn['project-preview-title']
     });
-    await expect(dialog).toHaveCount(0);
+    await expect(dialog).not.toBeVisible();
   });
 });