From f33082ff5958261097a2dde804ac0588b7440b6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Thu, 7 Nov 2024 19:00:51 +0200 Subject: [PATCH 1/2] test: failing test for #405 --- .../layout-change-all-off/content.md | 11 +++++ .../content/tutorial/tests/navigation/meta.md | 1 + e2e/test/navigation.test.ts | 48 +++++++++++++++---- 3 files changed, 50 insertions(+), 10 deletions(-) create mode 100644 e2e/src/content/tutorial/tests/navigation/layout-change-all-off/content.md diff --git a/e2e/src/content/tutorial/tests/navigation/layout-change-all-off/content.md b/e2e/src/content/tutorial/tests/navigation/layout-change-all-off/content.md new file mode 100644 index 000000000..e9eb7d9a2 --- /dev/null +++ b/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. diff --git a/e2e/src/content/tutorial/tests/navigation/meta.md b/e2e/src/content/tutorial/tests/navigation/meta.md index b6de05d28..c5fe6e2c6 100644 --- a/e2e/src/content/tutorial/tests/navigation/meta.md +++ b/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: '' diff --git a/e2e/test/navigation.test.ts b/e2e/test/navigation.test.ts index 7ec33e0d4..6dff8aa0f 100644 --- a/e2e/test/navigation.test.ts +++ b/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 } }>({ + 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(); +}); From f5931701383e13faf766a250d0c98b5c5c6bdbef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ari=20Perkki=C3=B6?= Date: Mon, 11 Nov 2024 16:56:29 +0200 Subject: [PATCH 2/2] fix: hide preview container when `previews: false` --- e2e/test/navigation.test.ts | 13 ++++++++++--- packages/astro/src/default/pages/[...slug].astro | 2 +- packages/react/src/Panels/PreviewPanel.tsx | 9 ++++++++- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/e2e/test/navigation.test.ts b/e2e/test/navigation.test.ts index 6dff8aa0f..31f558749 100644 --- a/e2e/test/navigation.test.ts +++ b/e2e/test/navigation.test.ts @@ -11,6 +11,8 @@ const test = base.extend<{ menu: { navigate: (name: { from: string; to: string } }).toPass(); await page.getByRole('region', { name: 'Navigation' }).getByRole('link', { name: to }).click(); + + await expect(page.getByRole('heading', { level: 1, name: `Navigation test - ${to}` })).toBeVisible(); } await use({ navigate }); @@ -78,9 +80,14 @@ test('user should not see preview on lessons that disable it (#405)', async ({ p 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(); + + // navigate back and check preview is visible once again + await menu.navigate({ from: 'Layout change all off', to: 'Layout change from' }); + + { + const preview = page.frameLocator('[title="Custom preview"]'); + await expect(preview.getByText('Index page')).toBeVisible(); + } }); diff --git a/packages/astro/src/default/pages/[...slug].astro b/packages/astro/src/default/pages/[...slug].astro index b03f55d74..1a88bfefb 100644 --- a/packages/astro/src/default/pages/[...slug].astro +++ b/packages/astro/src/default/pages/[...slug].astro @@ -24,7 +24,7 @@ meta.description ??= 'A TutorialKit interactive lesson'; -
+
diff --git a/packages/react/src/Panels/PreviewPanel.tsx b/packages/react/src/Panels/PreviewPanel.tsx index 50bc0a6ab..edef3f3d2 100644 --- a/packages/react/src/Panels/PreviewPanel.tsx +++ b/packages/react/src/Panels/PreviewPanel.tsx @@ -62,7 +62,14 @@ export const PreviewPanel = memo( useEffect(() => { // we update the iframes position at max fps if we have any if (hasPreviews) { - return requestAnimationFrameLoop(onResize); + const cancel = requestAnimationFrameLoop(onResize); + + previewsContainer.style.display = 'block'; + + return () => { + previewsContainer.style.display = 'none'; + cancel(); + }; } return undefined;