test: lessons in root and part

Author: AriPerkkio

e2e/configs/lessons-in-part.ts

@@ -0,0 +1,10 @@
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+  server: { port: 4332 },
+  outDir: './dist-lessons-in-part',
+  integrations: [tutorialkit()],
+  srcDir: './src-custom/lessons-in-part',
+});

e2e/configs/lessons-in-root.ts

@@ -0,0 +1,10 @@
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+  server: { port: 4331 },
+  outDir: './dist-lessons-in-root',
+  integrations: [tutorialkit()],
+  srcDir: './src-custom/lessons-in-root',
+});

e2e/package.json

@@ -7,6 +7,10 @@
     "preview": "astro build && astro preview",
     "dev:override-components": "astro dev --config ./configs/override-components.ts",
     "preview:override-components": "astro build --config ./configs/override-components.ts && astro preview --config ./configs/override-components.ts",
+    "dev:lessons-in-root": "astro dev --config ./configs/lessons-in-root.ts",
+    "preview:lessons-in-root": "astro build --config ./configs/lessons-in-root.ts && astro preview --config ./configs/lessons-in-root.ts",
+    "dev:lessons-in-part": "astro dev --config ./configs/lessons-in-part.ts",
+    "preview:lessons-in-part": "astro build --config ./configs/lessons-in-part.ts && astro preview --config ./configs/lessons-in-part.ts",
     "test": "playwright test",
     "test:ui": "pnpm run test --ui"
   },

e2e/playwright.config.ts

@@ -1,33 +1,59 @@
 import { defineConfig } from '@playwright/test';
 
+const serverOptions = {
+  reuseExistingServer: !process.env.CI,
+  stdout: 'ignore',
+  stderr: 'pipe',
+} as const;
+
 export default defineConfig({
   projects: [
     {
       name: 'Default',
       testMatch: 'test/*.test.ts',
-      testIgnore: 'test/*.override-components.test.ts',
+      testIgnore: [
+        'test/*.override-components.test.ts',
+        'test/*.lessons-in-part.test.ts',
+        'test/*.lessons-in-root.test.ts',
+      ],
       use: { baseURL: 'http://localhost:4329' },
     },
     {
       name: 'Override Components',
       testMatch: 'test/*.override-components.test.ts',
       use: { baseURL: 'http://localhost:4330' },
     },
+    {
+      name: 'Lessons in root',
+      testMatch: 'test/*.lessons-in-root.test.ts',
+      use: { baseURL: 'http://localhost:4331' },
+    },
+    {
+      name: 'Lessons in part',
+      testMatch: 'test/*.lessons-in-part.test.ts',
+      use: { baseURL: 'http://localhost:4332' },
+    },
   ],
   webServer: [
     {
       command: 'pnpm preview',
       url: 'http://localhost:4329',
-      reuseExistingServer: !process.env.CI,
-      stdout: 'ignore',
-      stderr: 'pipe',
+      ...serverOptions,
     },
     {
       command: 'pnpm preview:override-components',
       url: 'http://localhost:4330',
-      reuseExistingServer: !process.env.CI,
-      stdout: 'ignore',
-      stderr: 'pipe',
+      ...serverOptions,
+    },
+    {
+      command: 'pnpm preview:lessons-in-root',
+      url: 'http://localhost:4331',
+      ...serverOptions,
+    },
+    {
+      command: 'pnpm preview:lessons-in-part',
+      url: 'http://localhost:4332',
+      ...serverOptions,
     },
   ],
   expect: {

e2e/src-custom/lessons-in-part/content/config.ts

@@ -0,0 +1,9 @@
+import { contentSchema } from '@tutorialkit/types';
+import { defineCollection } from 'astro:content';
+
+const tutorial = defineCollection({
+  type: 'content',
+  schema: contentSchema,
+});
+
+export const collections = { tutorial };

e2e/src-custom/lessons-in-part/content/tutorial/meta.md

@@ -0,0 +1,5 @@
+---
+type: tutorial
+mainCommand: ''
+prepareCommands: []
+---

e2e/src-custom/lessons-in-part/content/tutorial/part-one/lesson-one/content.md

@@ -0,0 +1,8 @@
+---
+type: lesson
+title: Lesson one
+---
+
+# Lessons in part test - Lesson one
+
+Lesson in part without chapter

e2e/src-custom/lessons-in-part/content/tutorial/part-one/lesson-two/content.md

@@ -0,0 +1,8 @@
+---
+type: lesson
+title: Lesson two
+---
+
+# Lessons in part test - Lesson two
+
+Lesson in part without chapter

e2e/src-custom/lessons-in-part/content/tutorial/part-one/meta.md

@@ -0,0 +1,4 @@
+---
+type: part
+title: 'Part one'
+---

e2e/src-custom/lessons-in-part/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../../.astro/types.d.ts" />
+/// <reference types="@tutorialkit/astro/types" />
+/// <reference types="astro/client" />

e2e/src-custom/lessons-in-root/content/config.ts

@@ -0,0 +1,9 @@
+import { contentSchema } from '@tutorialkit/types';
+import { defineCollection } from 'astro:content';
+
+const tutorial = defineCollection({
+  type: 'content',
+  schema: contentSchema,
+});
+
+export const collections = { tutorial };

e2e/src-custom/lessons-in-root/content/tutorial/lesson-one/content.md

@@ -0,0 +1,8 @@
+---
+type: lesson
+title: Lesson one
+---
+
+# Lessons in root test - Lesson one
+
+Lesson in root without part

e2e/src-custom/lessons-in-root/content/tutorial/lesson-two/content.md

@@ -0,0 +1,8 @@
+---
+type: lesson
+title: Lesson two
+---
+
+# Lessons in root test - Lesson two
+
+Lesson in root without part

e2e/src-custom/lessons-in-root/content/tutorial/meta.md

@@ -0,0 +1,5 @@
+---
+type: tutorial
+mainCommand: ''
+prepareCommands: []
+---

e2e/src-custom/lessons-in-root/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../../.astro/types.d.ts" />
+/// <reference types="@tutorialkit/astro/types" />
+/// <reference types="astro/client" />

e2e/test/navigation.lessons-in-part.test.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('user can navigate between lessons using breadcrumbs', async ({ page }) => {
+  await page.goto('/part-one/lesson-one');
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Lessons in part test - Lesson one' })).toBeVisible();
+  await expect(page.getByText('Lesson in part without chapter')).toBeVisible();
+
+  // navigation select can take a while to hydrate on page load, click until responsive
+  await expect(async () => {
+    const button = page.getByRole('button', { name: 'Part one / Lesson one' });
+    await button.click();
+    await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 });
+  }).toPass();
+
+  await page.getByRole('navigation').getByRole('link', { name: 'Lesson two' }).click();
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Lessons in part test - Lesson two' })).toBeVisible();
+});

e2e/test/navigation.lessons-in-root.test.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('user can navigate between lessons using breadcrumbs', async ({ page }) => {
+  await page.goto('/lesson-one');
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Lessons in root test - Lesson one' })).toBeVisible();
+  await expect(page.getByText('Lesson in root without part')).toBeVisible();
+
+  // navigation select can take a while to hydrate on page load, click until responsive
+  await expect(async () => {
+    const button = page.getByRole('button', { name: 'Lesson one' });
+    await button.click();
+    await expect(page.locator('[data-state="open"]', { has: button })).toBeVisible({ timeout: 50 });
+  }).toPass();
+
+  await page.getByRole('navigation').getByRole('link', { name: 'Lesson two' }).click();
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Lessons in root test - Lesson two' })).toBeVisible();
+});