test: integration tests for 404 and error pages, static and server

gracile-web · Aug 4, 2024 · 33c48e1 · 33c48e1
1 parent c31fb4d
commit 33c48e1
Show file tree

Hide file tree

Showing 65 changed files with 659 additions and 65 deletions.
diff --git a/integration/__fixtures__/server-express/dist_expected/server/chunk/404.js b/integration/__fixtures__/server-express/dist_expected/server/chunk/404.js
@@ -0,0 +1,15 @@
+import { defineRoute } from '@gracile/gracile/route';
+import { html } from '@gracile/gracile/server-html';
+import { d as document } from './document.js';
+import '@gracile/gracile/document';
+
+const _404 = defineRoute({
+  document: (context) => document({ ...context, title: "Gracile - 404" }),
+  template: (context) => html`
+		<h1>⚠️ 404 !!</h1>
+
+		<p><code>${context.url.toString()}</code> not found.</p>
+	`
+});
+
+export { _404 as default };
diff --git a/integration/__fixtures__/server-express/dist_expected/server/chunk/throws.js b/integration/__fixtures__/server-express/dist_expected/server/chunk/throws.js
@@ -0,0 +1,13 @@
+import { defineRoute } from '@gracile/gracile/route';
+import '@gracile/gracile/server-html';
+import { d as document } from './document.js';
+import '@gracile/gracile/document';
+
+const throws = defineRoute({
+  document: (context) => document({ ...context, title: "Gracile - Oh no" }),
+  template: (context) => {
+    throw new Error("!!! OH NO !!! I AM A FAKE ERROR !!!");
+  }
+});
+
+export { throws as default };
diff --git a/integration/__fixtures__/server-express/dist_expected/server/entrypoint.js b/integration/__fixtures__/server-express/dist_expected/server/entrypoint.js
@@ -14,6 +14,15 @@ const routes = new Map([
       ]
     }
   ],
+  [
+    "/404/",
+    {
+      "filePath": "src/routes/404.ts",
+      "pattern": {},
+      "hasParams": false,
+      "pageAssets": []
+    }
+  ],
   [
     "/about/",
     {
@@ -87,6 +96,15 @@ const routes = new Map([
       "hasParams": false,
       "pageAssets": []
     }
+  ],
+  [
+    "/throws/",
+    {
+      "filePath": "src/routes/throws.ts",
+      "pattern": {},
+      "hasParams": false,
+      "pageAssets": []
+    }
   ]
 ]);
 routes.forEach((route, pattern) => {
@@ -96,6 +114,7 @@ routes.forEach((route, pattern) => {
 const routeImports = new Map(
 	[
 	  ['/', () => import('./chunk/(home).js')],
+['/404/', () => import('./chunk/404.js')],
 ['/about/', () => import('./chunk/about.js')],
 ['/api/basic/', () => import('./chunk/basic.js')],
 ['/api/:path*/', () => import('./chunk/_...path_.js')],
@@ -104,10 +123,15 @@ const routeImports = new Map(
 ['/foo/bar/', () => import('./chunk/bar.js')],
 ['/private/', () => import('./chunk/index.js')],
 ['/redirect/', () => import('./chunk/redirect.js')],
+['/throws/', () => import('./chunk/throws.js')],
 	]
 );
 
 const routeAssets = new Map([
+  [
+    "/404.html",
+    "\t<script type=\"module\" crossorigin src=\"/assets/document.client-Cu8CxlfV.js\"></script>\n\n\t<link rel=\"stylesheet\" crossorigin href=\"/assets/document-aADsc6DG.css\">\n"
+  ],
   [
     "/about/",
     "\t<script type=\"module\" crossorigin src=\"/assets/document.client-Cu8CxlfV.js\"></script>\n\n\t<link rel=\"stylesheet\" crossorigin href=\"/assets/document-aADsc6DG.css\">\n"
@@ -143,6 +167,10 @@ const routeAssets = new Map([
   [
     "/redirect/",
     null
+  ],
+  [
+    "/throws/",
+    "\t<script type=\"module\" crossorigin src=\"/assets/document.client-Cu8CxlfV.js\"></script>\n\n\t<link rel=\"stylesheet\" crossorigin href=\"/assets/document-aADsc6DG.css\">\n"
   ]
 ]);
 

diff --git a/integration/__fixtures__/server-express/src/routes/404.ts b/integration/__fixtures__/server-express/src/routes/404.ts
@@ -0,0 +1,14 @@
+import { defineRoute } from '@gracile/gracile/route';
+import { html } from '@gracile/gracile/server-html';
+
+import { document } from '../document.js';
+
+export default defineRoute({
+	document: (context) => document({ ...context, title: 'Gracile - 404' }),
+
+	template: (context) => html`
+		<h1>⚠️ 404 !!</h1>
+
+		<p><code>${context.url.toString()}</code> not found.</p>
+	`,
+});
diff --git a/integration/__fixtures__/server-express/src/routes/_404_dev_expected._html b/integration/__fixtures__/server-express/src/routes/_404_dev_expected._html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script type="module" src="/@vite/client"></script>
+
+    <!-- Helpers -->
+
+    <script
+      type="module"
+      src="/@id/__x00__/404/index.html?html-proxy&index=0.js"
+    ></script>
+
+    <!--  -->
+
+    <script
+      type="module"
+      src="/@id/__x00__/404/index.html?html-proxy&index=1.js"
+    ></script>
+
+    <!--  -->
+
+    <script
+      type="module"
+      src="/@id/__x00__/404/index.html?html-proxy&index=2.js"
+    ></script>
+
+    <script>
+      // REQUEST IDLE CALLBACK - POLYFILL
+
+      window.requestIdleCallback =
+        window.requestIdleCallback ||
+        function (cb) {
+          const start = Date.now();
+          return setTimeout(() => {
+            cb({
+              didTimeout: false,
+              timeRemaining: () => {
+                return Math.max(0, 50 - (Date.now() - start));
+              },
+            });
+          }, 1);
+        };
+
+      window.cancelIdleCallback =
+        window.cancelIdleCallback ||
+        function (id) {
+          clearTimeout(id);
+        };
+    </script>
+
+    <!-- Global assets -->
+    <link rel="stylesheet" href="__REPLACED_FOR_TESTS__/src/document.css" />
+    <script
+      type="module"
+      src="__REPLACED_FOR_TESTS__/src/document.client.ts"
+    ></script>
+
+    <!-- Page assets -->
+
+    <!-- PAGE ASSETS -->
+
+    <!-- /PAGE ASSETS -->
+
+    <!-- SEO and page metadata -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg" href="/favicon.svg" />
+
+    <title>Gracile - 404</title>
+  </head>
+
+  <body>
+    <h1>⚠️ 404 !!</h1>
+
+    <p><code>http://localhost:9874/404/</code> not found.</p>
+  </body>
+</html>
diff --git a/integration/__fixtures__/server-express/src/routes/_404_prod_expected._html b/integration/__fixtures__/server-express/src/routes/_404_prod_expected._html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Helpers -->
+
+    <script type="module">
+      if (import.meta.hot) {
+        import.meta.hot.on("gracile:ssr-error", (error) => {
+          throw new Error(error.message);
+        });
+      }
+    </script>
+
+    <!--  -->
+
+    <script type="module">
+      // HYDRATE
+      import "@gracile/gracile/hydrate";
+    </script>
+
+    <!--  -->
+
+    <script type="module">
+      // DECLARATIVE SHADOW DOM
+      import "@gracile/gracile/polyfills/declarative-shadow-dom";
+    </script>
+
+    <script>
+      // REQUEST IDLE CALLBACK - POLYFILL
+
+      window.requestIdleCallback =
+        window.requestIdleCallback ||
+        function (cb) {
+          const start = Date.now();
+          return setTimeout(() => {
+            cb({
+              didTimeout: false,
+              timeRemaining: () => {
+                return Math.max(0, 50 - (Date.now() - start));
+              },
+            });
+          }, 1);
+        };
+
+      window.cancelIdleCallback =
+        window.cancelIdleCallback ||
+        function (id) {
+          clearTimeout(id);
+        };
+    </script>
+
+    <!-- Global assets -->
+    <link
+      rel="stylesheet"
+      href="__REPLACED_FOR_TESTS__/__fixtures__/server-express/dist/server/chunk/document.css"
+    />
+    <script
+      type="module"
+      src="__REPLACED_FOR_TESTS__/__fixtures__/server-express/dist/server/chunk/document.client.ts"
+    ></script>
+
+    <!-- Page assets -->
+
+    <!-- PAGE ASSETS -->
+
+    <!-- /PAGE ASSETS -->
+
+    <!-- SEO and page metadata -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg" href="/favicon.svg" />
+
+    <title>Gracile - 404</title>
+  </head>
+
+  <body>
+    <h1>⚠️ 404 !!</h1>
+
+    <p><code>http://localhost:9874/404/</code> not found.</p>
+  </body>
+</html>
diff --git a/integration/__fixtures__/server-express/src/routes/_throws_dev_expected._html b/integration/__fixtures__/server-express/src/routes/_throws_dev_expected._html
@@ -0,0 +1,62 @@
+<!--  -->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <script type="module" src="/@vite/client"></script>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Error</title>
+  </head>
+  <body>
+    <style>
+      html {
+        color-scheme: dark;
+        font-size: 16px;
+        line-height: 1.23rem;
+        font-family: system-ui;
+      }
+      body {
+        padding: 1rem;
+      }
+
+      pre {
+        padding: 1rem;
+
+        overflow-y: auto;
+      }
+      button {
+        font-size: 2rem;
+      }
+
+      h1 {
+        color: tomato;
+      }
+    </style>
+
+    <main>
+      <h1>😵 An error has occurred!</h1>
+      <button id="reload">Reload</button>
+      <!--  -->
+      <hr />
+
+      <pre>
+Error: !!! OH NO !!! I AM A FAKE ERROR !!!
+    at RouteModule.template (__REPLACED_FOR_TESTS__/__fixtures__/server-express/src/routes/throws.ts:7:2)
+    at renderRouteTemplate (/Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/render/route-template.js:86:27)
+    at async middleware (file:///Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/server/request.js:136:26)
+    at async nodeMiddleware (file:///Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/server/node.js:19:24)</pre
+      >
+      <!-- <pre>$ {e.name}</pre> -->
+      <!-- <pre>$ {e.message}</pre> -->
+      <!-- <pre>$ {e.cause}</pre> -->
+      <hr />
+    </main>
+
+    <script>
+      reload.addEventListener("click", () => document.location.reload());
+    </script>
+  </body>
+</html>
diff --git a/integration/__fixtures__/server-express/src/routes/_throws_prod_expected._html b/integration/__fixtures__/server-express/src/routes/_throws_prod_expected._html
@@ -0,0 +1,60 @@
+<!--  -->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Error</title>
+  </head>
+  <body>
+    <style>
+      html {
+        color-scheme: dark;
+        font-size: 16px;
+        line-height: 1.23rem;
+        font-family: system-ui;
+      }
+      body {
+        padding: 1rem;
+      }
+
+      pre {
+        padding: 1rem;
+
+        overflow-y: auto;
+      }
+      button {
+        font-size: 2rem;
+      }
+
+      h1 {
+        color: tomato;
+      }
+    </style>
+
+    <main>
+      <h1>😵 An error has occurred!</h1>
+      <button id="reload">Reload</button>
+      <!--  -->
+      <hr />
+
+      <pre>
+Error: !!! OH NO !!! I AM A FAKE ERROR !!!
+    at RouteModule.template (file://__REPLACED_FOR_TESTS__/__fixtures__/server-express/dist/server/chunk/throws.js:9:11)
+    at renderRouteTemplate (file:///Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/render/route-template.js:110:74)
+    at async middleware (file:///Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/server/request.js:136:26)
+    at async nodeMiddleware (file:///Volumes/n_1024a-Projects/Repositories/packages/@gracile/gracile/packages/engine/dist/server/node.js:19:24)</pre
+      >
+      <!-- <pre>$ {e.name}</pre> -->
+      <!-- <pre>$ {e.message}</pre> -->
+      <!-- <pre>$ {e.cause}</pre> -->
+      <hr />
+    </main>
+
+    <script>
+      reload.addEventListener("click", () => document.location.reload());
+    </script>
+  </body>
+</html>