feat: add basic e2e test (#52)

* feat: add basic e2e test

* feat: add process exit clean

* feat: vitest test filter e2e

* feat: add playground

* ci: add jsdom dep

* style: pref code

* ci: update lock

* ci: add e2e test

* test: add log

* test: prepare

* test: prepare

* feat: rm e2e test step

* feat: add e2e test

* ci: fix npm i

* ci: fix npm i

* style: rm useless code

.github/workflows/test.yml

@@ -44,3 +44,6 @@ jobs:
 
       - name: Test unit
         run: pnpm run test
+
+      - name: Test e2e
+        run: pnpm run e2e:test

.nvmrc

@@ -0,0 +1 @@
+v16.16

example/quick-learning/docs/index.md

@@ -0,0 +1 @@
+# Hello World

example/quick-learning/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "quick-learning",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "dev": "island dev docs",
+    "build": "island build docs",
+    "preview": "island start docs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "islandjs": "file:../.."
+  }
+}

package.json

@@ -33,6 +33,8 @@
     "lint": "eslint --ext .ts,.tsx,.js,.jsx ./",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx --quiet ./",
     "test": "vitest run",
+    "e2e:test": "playwright test",
+    "e2e:prepare": "tsx ./scripts/prepare-e2e.cts",
     "prepublishOnly": "pnpm build",
     "release": "release-it",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -103,6 +105,7 @@
     "@babel/traverse": "^7.19.0",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@playwright/test": "^1.26.1",
     "@release-it/conventional-changelog": "^5.1.0",
     "@types/babel__core": "^7.1.19",
     "@types/babel__helper-plugin-utils": "^7.10.0",
@@ -129,6 +132,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "execa": "^6.1.0",
     "lint-staged": "^13.0.3",
     "pnpm": "7.9.2",
     "prettier": "^2.7.1",

playwright.config.ts

@@ -0,0 +1,22 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const siteUrl = 'http://localhost:5173/';
+
+const config: PlaywrightTestConfig = {
+  testDir: './src/node/__tests__/e2e',
+  timeout: 50000,
+  webServer: {
+    command: 'npm run e2e:prepare',
+    url: siteUrl,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  },
+  use: {
+    baseURL: siteUrl,
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry'
+  }
+};
+export default config;

scripts/prepare-e2e.cts

@@ -0,0 +1,41 @@
+import path from 'path';
+import fse from 'fs-extra';
+import * as execa from 'execa';
+
+const exampleDir = path.resolve(__dirname, '../example/quick-learning');
+const defaultExecaOpts = {
+  cwd: exampleDir,
+  stdout: process.stdout,
+  stdin: process.stdin,
+  stderr: process.stderr
+};
+
+async function prepareE2E() {
+  await fse.ensureDir(exampleDir);
+
+  // ensure after build
+  if (!fse.existsSync(path.resolve(__dirname, '../dist'))) {
+    // exec build command
+    execa.execaCommandSync('npm run build', {
+      cwd: path.resolve(__dirname, '../')
+    });
+  }
+
+  execa.execaCommandSync('npx playwright install', {
+    cwd: path.join(__dirname, '../'),
+    stdout: process.stdout,
+    stdin: process.stdin,
+    stderr: process.stderr
+  });
+
+  // exec install
+  execa.execaCommandSync(
+    'npm i --registry=https://registry.npmmirror.com/',
+    defaultExecaOpts
+  );
+
+  // exec dev command
+  execa.execaCommandSync('npm run dev', defaultExecaOpts);
+}
+
+prepareE2E();

src/node/__tests__/e2e/sample.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+const siteUrl = 'http://localhost:5173/';
+
+test('Verify that the page renders properly', async ({ page }) => {
+  await page.goto(siteUrl);
+
+  await page.waitForTimeout(2000);
+
+  const res = await page.evaluate(async () => {
+    const pageContent = document.body.innerText;
+    return pageContent.includes('Hello');
+  });
+  expect(res).toBe(true);
+});

vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    passWithNoTests: true,
+    exclude: ['node_modules', 'src/node/__tests__/e2e', 'playground'],
+    threads: true,
+    maxThreads: 2,
+    minThreads: 1
+  }
+});