Update e2e

Author: inokawa

.gitignore

@@ -1,5 +1,6 @@
 lib
 node_modules
+e2e/temp
 /test-results/
 /playwright-report/
 /blob-report/

e2e/index.html

@@ -1,40 +1,43 @@
 import { test, expect } from "@playwright/test";
 import { readdirSync } from "node:fs";
+import { writeFile } from "node:fs/promises";
 import path from "node:path";
 import { bundle } from "../src/plugin/bundler";
+import { wrapWithWebViewHTML } from "../src/plugin/html";
 import { WEB_ROOT_ID } from "../src/constants";
 
 test.beforeEach(async ({}, testInfo) => {
   // https://github.com/microsoft/playwright/issues/7575#issuecomment-1168800666
   testInfo.snapshotSuffix = "";
 });
 
-test.describe("smoke webview code", () => {
+test.describe("smoke webview", () => {
   const fixturePath = path.join(process.cwd(), "fixtures");
+  const tempPath = path.join(process.cwd(), "e2e/temp");
+
   readdirSync(fixturePath).forEach((filename) => {
     if (filename.endsWith(".jsx") || filename.endsWith(".tsx")) {
       test(filename, async ({ page }) => {
-        await page.goto("localhost:3000");
+        const code = await bundle(
+          path.join(fixturePath, filename),
+          wrapWithWebViewHTML
+        );
+        const html = eval(code);
+
+        await writeFile(path.join(tempPath, filename) + ".html", html, "utf-8");
 
-        const code = await bundle(path.join(fixturePath, filename));
+        await page.goto(`localhost:3000/temp/${filename}.html`);
 
         const rootHandle = await page.waitForFunction(
           (id) => document.getElementById(id)!,
           WEB_ROOT_ID
         );
 
-        await page.evaluate((code) => {
-          const rawCode = eval(code);
-          eval(rawCode);
-        }, code);
-
-        await page.waitForFunction((e) => e.innerHTML, rootHandle);
-        await expect(
-          await rootHandle.evaluate((e) => e.innerHTML)
-        ).toMatchSnapshot();
-        await expect(
+        expect(await rootHandle.evaluate((e) => e.innerHTML)).toMatchSnapshot();
+        expect(
           await page.evaluate(() => document.head.innerHTML)
         ).toMatchSnapshot();
+        expect(html).toMatchSnapshot();
       });
     }
   });

e2e/index.spec.tsx

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-commonjs-jsx-1-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-commonjs-jsx-1-chromium.txt

@@ -1,8 +1,7 @@
 
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Testing Page</title>
-  <style type="text/css">html {
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style type="text/css">html {
   background-color: #e2e2e2;
   margin: 0;
   padding: 0;

e2e/index.spec.tsx-snapshots/smoke-webview-app-export-commonjs-jsx-2-chromium.txt

@@ -1,8 +1,7 @@
 
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Testing Page</title>
-  <style type="text/css">html {
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style type="text/css">html {
   background-color: #e2e2e2;
   margin: 0;
   padding: 0;

e2e/index.spec.tsx-snapshots/smoke-webview-app-export-commonjs-jsx-3-chromium.txt

@@ -1,8 +1,7 @@
 
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Testing Page</title>
-  <style type="text/css">html {
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style type="text/css">html {
   background-color: #e2e2e2;
   margin: 0;
   padding: 0;

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-jsx-1-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-jsx-1-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-tsx-2-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-jsx-2-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-jsx-3-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-react-jsx-1-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-react-jsx-1-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-issue45-jsx-2-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-react-jsx-2-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-react-jsx-3-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-tsx-1-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-tsx-1-chromium.txt

@@ -0,0 +1,3 @@
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-jsx-2-chromium.txt e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-tsx-2-chromium.txt

@@ -1,8 +1,7 @@
 
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Testing Page</title>
-  <style type="text/css">html {
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<style type="text/css">html {
   background-color: #e2e2e2;
   margin: 0;
   padding: 0;

e2e/index.spec.tsx-snapshots/smoke-webview-app-export-default-tsx-3-chromium.txt

@@ -35,8 +35,8 @@
   "scripts": {
     "build": "rollup -c",
     "test": "vitest --run",
-    "pretest": "npm run build",
     "tsc": "tsc -p . --noEmit",
+    "pree2e": "npm run build",
     "e2e": "npx playwright test",
     "typedoc": "typedoc",
     "prepublishOnly": "npm run typedoc && rimraf lib && npm run build"