From cc2580444942f92102c375adba3eaa2fa47e3446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 9 Oct 2024 10:44:52 +0300
Subject: [PATCH] test(e2e): lessons ordering

---
 .../content/tutorial/tests/filesystem/meta.md |  2 +-
 .../tests/lesson-order/1-lesson/content.md    |  6 +++++
 .../tests/lesson-order/2-lesson/content.md    |  6 +++++
 .../tests/lesson-order/3-lesson/content.md    |  6 +++++
 .../tutorial/tests/lesson-order/meta.md       |  8 +++++++
 e2e/test/lesson-order.test.ts                 | 22 +++++++++++++++++++
 e2e/test/navigation.test.ts                   |  8 ++++++-
 e2e/test/terminal.test.ts                     | 10 ++++++---
 8 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 e2e/src/content/tutorial/tests/lesson-order/1-lesson/content.md
 create mode 100644 e2e/src/content/tutorial/tests/lesson-order/2-lesson/content.md
 create mode 100644 e2e/src/content/tutorial/tests/lesson-order/3-lesson/content.md
 create mode 100644 e2e/src/content/tutorial/tests/lesson-order/meta.md
 create mode 100644 e2e/test/lesson-order.test.ts

diff --git a/e2e/src/content/tutorial/tests/filesystem/meta.md b/e2e/src/content/tutorial/tests/filesystem/meta.md
index 06e99f712..3af191d41 100644
--- a/e2e/src/content/tutorial/tests/filesystem/meta.md
+++ b/e2e/src/content/tutorial/tests/filesystem/meta.md
@@ -1,4 +1,4 @@
 ---
 type: chapter
-title: filesystem
+title: File system
 ---
diff --git a/e2e/src/content/tutorial/tests/lesson-order/1-lesson/content.md b/e2e/src/content/tutorial/tests/lesson-order/1-lesson/content.md
new file mode 100644
index 000000000..235df7ad5
--- /dev/null
+++ b/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
diff --git a/e2e/src/content/tutorial/tests/lesson-order/2-lesson/content.md b/e2e/src/content/tutorial/tests/lesson-order/2-lesson/content.md
new file mode 100644
index 000000000..2f233131b
--- /dev/null
+++ b/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
diff --git a/e2e/src/content/tutorial/tests/lesson-order/3-lesson/content.md b/e2e/src/content/tutorial/tests/lesson-order/3-lesson/content.md
new file mode 100644
index 000000000..4241748c8
--- /dev/null
+++ b/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
diff --git a/e2e/src/content/tutorial/tests/lesson-order/meta.md b/e2e/src/content/tutorial/tests/lesson-order/meta.md
new file mode 100644
index 000000000..7a758b8a2
--- /dev/null
+++ b/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
+---
diff --git a/e2e/test/lesson-order.test.ts b/e2e/test/lesson-order.test.ts
new file mode 100644
index 000000000..29f4435da
--- /dev/null
+++ b/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');
+});
diff --git a/e2e/test/navigation.test.ts b/e2e/test/navigation.test.ts
index ac91090e6..7ec33e0d4 100644
--- a/e2e/test/navigation.test.ts
+++ b/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();
diff --git a/e2e/test/terminal.test.ts b/e2e/test/terminal.test.ts
index a75744e0b..375048592 100644
--- a/e2e/test/terminal.test.ts
+++ b/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 });
 });