test: confirm that lab project previews can be viewed (#59570)

e2e/project-preview-modal.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
 
-test.describe('When it renders', () => {
+test.describe('Should be shown automatically', () => {
   test.beforeEach(async ({ page }) => {
     const urlWithProjectPreview =
       '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-1';
@@ -49,7 +49,34 @@ test.describe('When it renders', () => {
   });
 });
 
-test.describe('It should NOT appear', () => {
+test.describe('Should be shown manually', () => {
+  test.beforeEach(async ({ page }) => {
+    const urlWithProjectPreview =
+      '/learn/full-stack-developer/lab-drum-machine/build-drum-machine';
+    await page.goto(urlWithProjectPreview);
+  });
+
+  test("when the user clicks on 'this example project'", async ({ page }) => {
+    const dialog = page.getByRole('dialog', {
+      name: translations.learn['demo-project-title']
+    });
+    await expect(dialog).not.toBeVisible();
+    await page
+      .getByRole('button', {
+        name: 'this example project'
+      })
+      .click();
+    await expect(dialog).toBeVisible();
+    const previewFrame = dialog.frameLocator('#fcc-project-preview-frame');
+    await expect(
+      // This is a part of the Drum Machine that we expect to see. Essentially,
+      // it's a proxy for "not empty"
+      previewFrame.getByText('Power: On')
+    ).toBeVisible();
+  });
+});
+
+test.describe('Should not render', () => {
   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'