test: failing test for #405

Author: AriPerkkio

e2e/src/content/tutorial/tests/navigation/layout-change-all-off/content.md

@@ -0,0 +1,11 @@
+---
+type: lesson
+title: Layout change all off
+previews: false
+terminal: false
+editor: false
+---
+
+# Navigation test - Layout change all off
+
+This page should not show previw, editor or terminal.

e2e/src/content/tutorial/tests/navigation/meta.md

@@ -5,6 +5,7 @@ lessons:
   - page-one
   - page-two
   - page-three
+  - layout-change-all-off
   - layout-change-from
   - layout-change-to
 mainCommand: ''

e2e/test/navigation.test.ts

@@ -1,4 +1,21 @@
-import { test, expect } from '@playwright/test';
+import { test as base, expect } from '@playwright/test';
+
+const test = base.extend<{ menu: { navigate: (name: { from: string; to: string }) => Promise<void> } }>({
+  menu: async ({ page }, use) => {
+    async function navigate({ from, to }: { from: string; to: string }) {
+      // navigation select can take a while to hydrate on page load, click until responsive
+      await expect(async () => {
+        const button = page.getByRole('button', { name: `Tests / Navigation / ${from}` });
+        await button.click();
+        await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 });
+      }).toPass();
+
+      await page.getByRole('region', { name: 'Navigation' }).getByRole('link', { name: to }).click();
+    }
+
+    await use({ navigate });
+  },
+});
 
 const BASE_URL = '/tests/navigation';
 
@@ -20,17 +37,10 @@ test('user can navigate between lessons using nav bar links', async ({ page }) =
   }
 });
 
-test('user can navigate between lessons using breadcrumbs', async ({ page }) => {
+test('user can navigate between lessons using breadcrumbs', async ({ page, menu }) => {
   await page.goto(`${BASE_URL}/page-one`);
 
-  // navigation select can take a while to hydrate on page load, click until responsive
-  await expect(async () => {
-    const button = page.getByRole('button', { name: 'Tests / Navigation / Page one' });
-    await button.click();
-    await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 });
-  }).toPass();
-
-  await page.getByRole('region', { name: 'Navigation' }).getByRole('link', { name: 'Page three' }).click();
+  await menu.navigate({ from: 'Page one', to: 'Page three' });
 
   await expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Page three' })).toBeVisible();
 });
@@ -56,3 +66,21 @@ test("user should see metadata's layout changes after navigation (#318)", async
     useInnerText: true,
   });
 });
+
+test('user should not see preview on lessons that disable it (#405)', async ({ page, menu }) => {
+  await page.goto(`${BASE_URL}/layout-change-from`);
+
+  // first page should have preview visible
+  await expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Layout change from' })).toBeVisible();
+
+  const preview = page.frameLocator('[title="Custom preview"]');
+  await expect(preview.getByText('Index page')).toBeVisible();
+
+  await menu.navigate({ from: 'Layout change from', to: 'Layout change all off' });
+
+  // page should open
+  await expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Layout change all off' })).toBeVisible();
+
+  // preview should not be visible
+  await expect(page.locator('iframe[title="Custom preview"]')).not.toBeVisible();
+});