add test for inline importmap autoreload

jsenv · Nov 6, 2023 · 5e1f33e · 5e1f33e
1 parent 3ae1177
commit 5e1f33e
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 0 deletions.
diff --git a/tests/dev_server/autoreload_importmap_inline/autoreload_importmap_inline.test.mjs b/tests/dev_server/autoreload_importmap_inline/autoreload_importmap_inline.test.mjs
@@ -0,0 +1,89 @@
+/*
+ * Test the following:
+ * - importmap resolution applies correctly when inline
+ * - updating inline importmap trigger autoreload + correctly update resolution
+ */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { chromium } from "playwright";
+import { assert } from "@jsenv/assert";
+
+import { startDevServer } from "@jsenv/core";
+
+const htmlFileUrl = new URL("./client/main.html", import.meta.url);
+const htmlFileContent = {
+  beforeTest: readFileSync(htmlFileUrl),
+  update: (content) => writeFileSync(htmlFileUrl, content),
+  restore: () => writeFileSync(htmlFileUrl, htmlFileContent.beforeTest),
+};
+const devServer = await startDevServer({
+  logLevel: "warn",
+  serverLogLevel: "warn",
+  sourceDirectoryUrl: new URL("./client/", import.meta.url),
+  outDirectoryUrl: new URL("./.jsenv/", import.meta.url),
+  keepProcessAlive: false,
+});
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({ ignoreHTTPSErrors: true });
+
+try {
+  await page.goto(`${devServer.origin}/main.html`);
+  const getWindowAnswer = () => {
+    return page.evaluate(
+      /* eslint-disable no-undef */
+      () => window.answer,
+      /* eslint-enable no-undef */
+    );
+  };
+
+  {
+    const actual = await getWindowAnswer();
+    const expected = 42;
+    assert({ actual, expected });
+  }
+
+  const pageReloadPromise = page.waitForNavigation();
+  htmlFileContent.update(`<!doctype html>
+  <html>
+    <head>
+      <title>Title</title>
+      <meta charset="utf-8" />
+      <link rel="icon" href="data:," />
+    </head>
+  
+    <body>
+      <script type="importmap">
+        {
+          "imports": {
+            "a": "./b.js"
+          }
+        }
+      </script>
+      <script type="module">
+        // eslint-disable-next-line import/no-unresolved
+        import { answer } from "a";
+  
+        window.answer = answer;
+        console.log(answer);
+      </script>
+    </body>
+  </html>`);
+  await pageReloadPromise;
+  {
+    const actual = await getWindowAnswer();
+    const expected = "b";
+    assert({ actual, expected });
+  }
+  htmlFileContent.restore();
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  {
+    const actual = await getWindowAnswer();
+    const expected = 42;
+    assert({ actual, expected });
+  }
+} finally {
+  htmlFileContent.restore();
+  browser.close();
+  devServer.stop(); // required because for some reason the rooms are kept alive
+}
diff --git a/tests/dev_server/autoreload_importmap_inline/client/a.js b/tests/dev_server/autoreload_importmap_inline/client/a.js
@@ -0,0 +1 @@
+export const answer = 42;
diff --git a/tests/dev_server/autoreload_importmap_inline/client/b.js b/tests/dev_server/autoreload_importmap_inline/client/b.js
@@ -0,0 +1 @@
+export const answer = "b";
diff --git a/tests/dev_server/autoreload_importmap_inline/client/main.html b/tests/dev_server/autoreload_importmap_inline/client/main.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Title</title>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <script type="importmap">
+      {
+        "imports": {
+          "a": "./a.js"
+        }
+      }
+    </script>
+    <script type="module">
+      // eslint-disable-next-line import/no-unresolved
+      import { answer } from "a";
+
+      window.answer = answer;
+      console.log(answer);
+    </script>
+  </body>
+</html>