test: e2e init and starter

.github/workflows/e2e-tests.yml

@@ -0,0 +1,50 @@
+name: E2E Tests
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Prepare
+        uses: ./.github/actions/prepare
+
+      - name: Setup E2E Environment
+        uses: ./.github/actions/setup-e2e-env
+
+      - name: Install Templates Dependencies
+        run: ./scripts/install-deps
+
+      - name: Run tests
+        run: |
+          juno dev start --headless &
+          ./scripts/e2e-starter e2e:ci
+
+      - name: Upload Playwright report on failure
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 3
+
+      - name: Upload Playwright results on failure
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 3
+
+  may-merge:
+    needs: ['e2e']
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cleared for merging
+        run: echo OK

.gitignore

@@ -36,4 +36,10 @@ target/
 out/
 
 
-templates/**/package-lock.json
+templates/**/package-lock.json
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  juno-satellite:
+    image: junobuild/satellite:latest
+    ports:
+      - 4943:5987
+      - 5999:5999
+    volumes:
+      - juno_satellite:/juno/.juno
+      - ./juno.dev.config.js:/juno/juno.dev.config.js
+      - ./target/deploy:/juno/target/deploy/
+
+volumes:
+  juno_satellite:

e2e/starter.spec.ts

@@ -0,0 +1,72 @@
+import {expect, test} from '@playwright/test';
+
+const TEMPLATE = process.env.TEMPLATE ?? '';
+
+(['light', 'dark'] as const).forEach((mode) => {
+  test.describe(`${mode} mode`, () => {
+    test.use({colorScheme: mode});
+
+    test('match screenshot', async ({page}) => {
+      await page.goto('/');
+
+      await expect(page.getByText('Welcome to Juno')).toBeVisible();
+
+      await expect(page).toHaveScreenshot(`${mode}-mode.png`, {fullPage: true});
+    });
+  });
+});
+
+test('has title', async ({page}) => {
+  await page.goto('/');
+
+  const capitalize = (s: string): string => s[0].toUpperCase() + s.slice(1);
+  const mapTemplateToTitle = (s: string): string =>
+    s
+      .replaceAll('-ts-', '-')
+      .replaceAll('kit', 'Kit')
+      .replaceAll('nextjs', 'next.js')
+      .replaceAll('-', ' ')
+      .split(' ')
+      .map(capitalize)
+      .join(' ');
+
+  await expect(page).toHaveTitle(`Juno / ${mapTemplateToTitle(TEMPLATE)}`);
+});
+
+test('get quickstart link', async ({page}) => {
+  await page.goto('/');
+
+  const link = page.locator('a[aria-label="Open quickstart guides on Juno\'s website"]');
+
+  const framework = TEMPLATE.split('-')[0];
+
+  await expect(link).toHaveAttribute('href', `https://juno.build/docs/guides/${framework}`);
+});
+
+test('get documentation link', async ({page}) => {
+  await page.goto('/');
+
+  const link = page.locator(
+    'a[aria-label="Open the list of features for building apps on Juno\'s website"]'
+  );
+
+  await expect(link).toHaveAttribute('href', 'https://juno.build/docs/category/build');
+});
+
+test('get ci link', async ({page}) => {
+  await page.goto('/');
+
+  const link = page.locator('a[aria-label="Open the guide to setting up GitHub Actions for Juno"]');
+
+  await expect(link).toHaveAttribute('href', 'https://juno.build/docs/guides/github-actions');
+});
+
+test('get discord link', async ({page}) => {
+  await page.goto('/');
+
+  const link = page.locator(
+    'a[aria-label="Join Juno\'s Discord channel for questions or to share the fun"]'
+  );
+
+  await expect(link).toHaveAttribute('href', 'https://discord.gg/wHZ57Z2RAG');
+});

juno.dev.config.js

@@ -0,0 +1,11 @@
+import {defineDevConfig} from '@junobuild/config';
+
+/** @type {import('@junobuild/config').JunoDevConfig} */
+export default defineDevConfig(() => ({
+  satellite: {
+    collections: {
+      datastore: [],
+      storage: []
+    }
+  }
+}));

package.json

@@ -18,7 +18,11 @@
     "build": "tsc --noEmit && node rmdir.mjs && node esbuild.mjs",
     "dev": "node rmdir.mjs && NODE_ENV=development node esbuild.mjs",
     "lint": "eslint --max-warnings 0 \"src/**/*\"",
-    "update:juno": "./scripts/update-juno"
+    "update:juno": "./scripts/update-juno",
+    "e2e": "NODE_ENV=development playwright test",
+    "e2e:snapshots": "NODE_ENV=development playwright test --update-snapshots --reporter=list",
+    "e2e:ci": "playwright test --reporter=html",
+    "e2e:ci:snapshots": "playwright test --update-snapshots --reporter=html"
   },
   "repository": {
     "type": "git",
@@ -42,6 +46,7 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@junobuild/config": "^0.1.0",
+    "@playwright/test": "^1.51.1",
     "@types/node": "^22.13.4",
     "@types/prompts": "^2.4.9",
     "@types/tar-stream": "^3.1.3",

playwright.config.ts

@@ -0,0 +1,40 @@
+import {defineConfig, devices} from '@playwright/test';
+
+const DEV = (process.env.NODE_ENV ?? 'production') === 'development';
+const TEMPLATE = process.env.TEMPLATE ?? 'test';
+
+const PORT = TEMPLATE.includes('angular')
+  ? 4200
+  : TEMPLATE.includes('astro')
+    ? 4321
+    : TEMPLATE.includes('next')
+      ? 3000
+      : 5173;
+
+export default defineConfig({
+  webServer: [
+    {
+      command: `npm run dev --prefix templates/${TEMPLATE}`,
+      reuseExistingServer: true,
+      port: PORT
+    }
+  ],
+  testDir: 'e2e',
+  testMatch: ['**/*.e2e.ts', '**/*.spec.ts'],
+  timeout: 60000,
+  use: {
+    testIdAttribute: 'data-tid',
+    trace: 'on',
+    ...(DEV && {headless: false}),
+    screenshot: 'only-on-failure',
+    baseURL: `http://localhost:${PORT}`
+  },
+  projects: [
+    {
+      name: 'Google Chrome',
+      use: {...devices['Desktop Chrome'], channel: 'chrome'}
+    }
+  ],
+  workers: process.env.CI ? 1 : undefined,
+  snapshotPathTemplate: `{testDir}/__screenshots__/${TEMPLATE}/${process.env.NODE_ENV ?? 'production'}/{testFilePath}/{arg}{ext}`
+});

scripts/e2e-starter

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+TEST_TYPE=${1:-e2e}
+
+function run_test() {
+  local template=$1
+
+  echo -e "\n***** $TEST_TYPE for $template *****\n"
+
+  TEMPLATE=$template npm run "$TEST_TYPE"
+}
+
+STARTERS=angular-starter,astro-starter,nextjs-starter,react-starter,react-ts-starter,sveltekit-starter,vue-starter
+
+for template in $(echo $STARTERS | sed "s/,/ /g"); do
+  run_test "$template"
+done

scripts/install-deps

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+function install_deps() {
+  local template=$1
+
+  echo -e "\n***** Install dependencies for $template *****\n"
+
+  npm i --prefix "templates/$template"
+}
+
+STARTERS=angular-starter,astro-starter,nextjs-starter,react-starter,react-ts-starter,sveltekit-starter,vue-starter
+
+for template in $(echo $STARTERS | sed "s/,/ /g"); do
+  install_deps "$template"
+done