test(e2e): lessons ordering (#366)

Author: AriPerkkio

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

@@ -1,4 +1,4 @@
 ---
 type: chapter
-title: filesystem
+title: File system
 ---

e2e/src/content/tutorial/tests/lesson-order/1-lesson/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page one
+---
+
+# Lesson order test - Page one

e2e/src/content/tutorial/tests/lesson-order/2-lesson/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page two
+---
+
+# Lesson order test - Page two

e2e/src/content/tutorial/tests/lesson-order/3-lesson/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page three
+---
+
+# Lesson order test - Page three

e2e/src/content/tutorial/tests/lesson-order/meta.md

@@ -0,0 +1,8 @@
+---
+type: chapter
+title: Lesson order
+lessons:
+  - 2-lesson
+  - 3-lesson
+  - 1-lesson
+---

e2e/test/lesson-order.test.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = '/tests/lesson-order';
+
+test('developer can configure custom order for lessons', async ({ page }) => {
+  await page.goto(`${BASE_URL}/1-lesson`);
+  await expect(page.getByRole('heading', { level: 1, name: 'Lesson order test - Page one' })).toBeVisible();
+
+  // navigation select can take a while to hydrate on page load, click until responsive
+  await expect(async () => {
+    const button = page.getByRole('button', { name: 'Tests / Lesson order / Page one' });
+    await button.click();
+    await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 });
+  }).toPass();
+
+  const list = page.getByRole('region', { name: 'Lesson order' });
+
+  // configured ordered is [2, 3, 1]
+  await expect(list.getByRole('listitem').nth(0)).toHaveText('Page two');
+  await expect(list.getByRole('listitem').nth(1)).toHaveText('Page three');
+  await expect(list.getByRole('listitem').nth(2)).toHaveText('Page one');
+});

e2e/test/navigation.test.ts

@@ -23,7 +23,13 @@ test('user can navigate between lessons using nav bar links', async ({ page }) =
 test('user can navigate between lessons using breadcrumbs', async ({ page }) => {
   await page.goto(`${BASE_URL}/page-one`);
 
-  await page.getByRole('button', { name: 'Tests / Navigation / Page one' }).click({ force: true });
+  // 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 expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Page three' })).toBeVisible();

e2e/test/terminal.test.ts

@@ -15,10 +15,14 @@ test('user can open terminal', async ({ page }) => {
   // await expect(tab).not.toBeVisible();
   // await expect(panel).not.toBeVisible();
 
-  await page.getByRole('button', { name: 'Toggle Terminal' }).click();
+  // terminal toggle can take a while to hydrate on page load, click until responsive
+  await expect(async () => {
+    await page.getByRole('button', { name: 'Toggle Terminal' }).click();
+
+    await expect(tab).toBeVisible({ timeout: 100 });
+    await expect(panel).toBeVisible({ timeout: 100 });
+  }).toPass();
 
-  await expect(tab).toBeVisible();
-  await expect(panel).toBeVisible();
   await expect(panel).toContainText('~/tutorial', { useInnerText: true });
 });