@beatzball/create-litro 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-litro
 
+## 0.2.1
+
+### Patch Changes
+
+- 338e2c7: Add Playwright e2e setup to all recipe templates. Each scaffolded project now includes `playwright.config.ts` and `e2e/index.spec.ts` with 3 starter tests, and `@playwright/test` in `devDependencies`.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/recipes/11ty-blog/template/e2e/index.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('home renders page-home component', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});
+
+test('blog index renders', async ({ page }) => {
+  await page.goto('/blog');
+  await page.waitForSelector('page-blog');
+  await expect(page.locator('page-blog')).toBeVisible();
+});
+
+test('blog post renders with h1', async ({ page }) => {
+  await page.goto('/blog/hello-world');
+  await page.waitForSelector('page-blog-slug');
+  await expect(page.locator('page-blog-slug h1')).toBeVisible();
+});

package/dist/recipes/11ty-blog/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/dist/recipes/11ty-blog/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/dist/recipes/fullstack/template/e2e/index.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('SSR renders without JavaScript (DSD in source)', async ({ request }) => {
+  const response = await request.get('/');
+  const body = await response.text();
+  expect(body).toContain('shadowrootmode');
+});
+
+test('__litro_data__ is injected into HTML', async ({ request }) => {
+  const response = await request.get('/');
+  const body = await response.text();
+  expect(body).toContain('__litro_data__');
+});
+
+test('page-home is visible after hydration', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});

package/dist/recipes/fullstack/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/dist/recipes/fullstack/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/dist/recipes/starlight/template/e2e/index.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+const PRERENDERED_ROUTES = [
+  '/',
+  '/docs/getting-started',
+  '/docs/installation',
+  '/docs/configuration',
+  '/docs/guides-first-page',
+  '/docs/guides-deploying',
+  '/blog',
+  '/blog/welcome',
+  '/blog/release-notes',
+];
+
+test('home renders page-home component', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});
+
+test('/docs/getting-started renders', async ({ page }) => {
+  await page.goto('/docs/getting-started');
+  await page.waitForSelector('page-docs-slug');
+  await expect(page.locator('page-docs-slug')).toBeVisible();
+});
+
+test('all prerendered routes return 200', async ({ request }) => {
+  for (const route of PRERENDERED_ROUTES) {
+    const response = await request.get(route);
+    expect(response.status(), `Expected 200 for ${route}`).toBe(200);
+  }
+});

package/dist/recipes/starlight/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/dist/recipes/starlight/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beatzball/create-litro",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Create a new Litro app",
   "license": "Apache-2.0",
   "repository": {

package/recipes/11ty-blog/template/e2e/index.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('home renders page-home component', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});
+
+test('blog index renders', async ({ page }) => {
+  await page.goto('/blog');
+  await page.waitForSelector('page-blog');
+  await expect(page.locator('page-blog')).toBeVisible();
+});
+
+test('blog post renders with h1', async ({ page }) => {
+  await page.goto('/blog/hello-world');
+  await page.waitForSelector('page-blog-slug');
+  await expect(page.locator('page-blog-slug h1')).toBeVisible();
+});

package/recipes/11ty-blog/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/recipes/11ty-blog/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/recipes/fullstack/template/e2e/index.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('SSR renders without JavaScript (DSD in source)', async ({ request }) => {
+  const response = await request.get('/');
+  const body = await response.text();
+  expect(body).toContain('shadowrootmode');
+});
+
+test('__litro_data__ is injected into HTML', async ({ request }) => {
+  const response = await request.get('/');
+  const body = await response.text();
+  expect(body).toContain('__litro_data__');
+});
+
+test('page-home is visible after hydration', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});

package/recipes/fullstack/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/recipes/fullstack/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/recipes/starlight/template/e2e/index.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+const PRERENDERED_ROUTES = [
+  '/',
+  '/docs/getting-started',
+  '/docs/installation',
+  '/docs/configuration',
+  '/docs/guides-first-page',
+  '/docs/guides-deploying',
+  '/blog',
+  '/blog/welcome',
+  '/blog/release-notes',
+];
+
+test('home renders page-home component', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForSelector('page-home');
+  await expect(page.locator('page-home')).toBeVisible();
+});
+
+test('/docs/getting-started renders', async ({ page }) => {
+  await page.goto('/docs/getting-started');
+  await page.waitForSelector('page-docs-slug');
+  await expect(page.locator('page-docs-slug')).toBeVisible();
+});
+
+test('all prerendered routes return 200', async ({ request }) => {
+  for (const route of PRERENDERED_ROUTES) {
+    const response = await request.get(route);
+    expect(response.status(), `Expected 200 for ${route}`).toBe(200);
+  }
+});

package/recipes/starlight/template/package.json

@@ -9,7 +9,8 @@
     "dev": "litro dev",
     "build": "litro build",
     "preview": "litro preview",
-    "generate": "litro generate"
+    "generate": "litro generate",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@beatzball/litro": "latest",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "nitropack": "^2.13.1",
     "vite": "^5.4.11",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@playwright/test": "^1.48.0"
   }
 }

package/recipes/starlight/template/playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3030',
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3030',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60000,
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    exclude: [
+      '**/node_modules/**',
+      '**/recipes/**/template/**',
+    ],
+  },
+});