chore(publish): improve e2e tests

packages/nextjs-template/.env.test

@@ -0,0 +1 @@
+NEXT_PUBLIC_ASSET_PREFIX=/my_asset_folder

packages/nextjs-template/tests/general.spec.ts → packages/nextjs-template/e2e/general.spec.ts

@@ -2,52 +2,57 @@ import test from "./next-fixture";
 import { expect } from "@playwright/test";
 
 test.describe("GIVEN default viewport", () => {
-  test("THEN should displayed heading anchor pleasantly ", async ({
+  test("THEN should display heading anchor pleasantly ", async ({
     page,
     port,
   }) => {
     await page.goto(`http://localhost:${port}/notes/FSi3bKWQeQXYTjE1PoTB0/`);
 
     const case1 = page.locator("#start-code-end");
     await case1.hover();
-
     expect(await case1.screenshot()).toMatchSnapshot([
       "heading-anchor",
       "start-code-end.png",
     ]);
 
     const case2 = page.locator("#start---end");
     await case2.hover();
-
     expect(await case2.screenshot()).toMatchSnapshot([
       "heading-anchor",
       "start---end.png",
     ]);
 
     const case3 = page.locator("#start-_-end");
     await case3.hover();
-
     expect(await case3.screenshot()).toMatchSnapshot([
       "heading-anchor",
       "start-_-end.png",
     ]);
 
     const case4 = page.locator("#start-test-end");
     await case4.hover();
-
     expect(await case4.screenshot()).toMatchSnapshot([
       "heading-anchor",
       "start-test-end.png",
     ]);
 
     const case5 = page.locator("#start-exampleusername-private-end");
     await case5.hover();
-
     expect(await case5.screenshot()).toMatchSnapshot([
       "heading-anchor",
       "start-exampleusername-private-end.png",
     ]);
   });
+
+  test.describe("AND having NEXT_PUBLIC_ASSET_PREFIX set", () => {
+    test("THEN should render path to favicon", async ({ page, port }) => {
+      await page.goto(`http://localhost:${port}/`);
+      const locator = page.locator(
+        `link[href*='${process.env.NEXT_PUBLIC_ASSET_PREFIX}'][rel='icon']`
+      );
+      expect(await locator.count()).toBe(1);
+    });
+  });
 });
 
 test.describe("GIVEN mobile viewport", () => {

packages/nextjs-template/tests/global-setup.ts → packages/nextjs-template/e2e/global-setup.ts

@@ -1,4 +1,4 @@
-export {};
+/* eslint-disable no-console */
 
 const path = require("path");
 const cli = require("next/dist/cli/next-build");

packages/nextjs-template/tests/next-fixture.ts → packages/nextjs-template/e2e/next-fixture.ts

@@ -18,9 +18,12 @@ import { AddressInfo } from "net";
  */
 
 // Extend base test with our fixtures.
-const test = base.extend<{
-  port: string;
-}>({
+const test = base.extend<
+  {},
+  {
+    port: string;
+  }
+>({
   port: [
     // eslint-disable-next-line no-empty-pattern
     async ({}, use) => {
@@ -49,7 +52,6 @@ const test = base.extend<{
       await use(port);
     },
     {
-      //@ts-ignore
       scope: "worker",
     },
   ],

packages/nextjs-template/env/client.js

@@ -0,0 +1,13 @@
+// @ts-check
+const { parse } = require("@dendronhq/common-all");
+const { clientEnv, clientSchema } = require("./schema");
+
+const _clientEnv = parse(clientSchema, clientEnv);
+
+if (_clientEnv.error) {
+  throw _clientEnv.error;
+}
+
+module.exports = {
+  env: _clientEnv.data
+};

packages/nextjs-template/env/schema.js

@@ -0,0 +1,68 @@
+// @ts-check
+const { z } = require("zod");
+const path = require("path");
+const { FRONTEND_CONSTANTS } = require("@dendronhq/common-frontend");
+
+/**
+ * Here we specify server-side environment variables
+ * This way you can ensure the app isn't built with invalid env vars.
+ */
+const serverSchema = z
+  .object({
+    DATA_DIR: z
+      .string()
+      .default(path.join(__dirname, "..", FRONTEND_CONSTANTS.DEFAULT_DATA_DIR)),
+    PUBLIC_DIR: z.string().default(path.join(__dirname, "..", "public")),
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  })
+  .superRefine((value, ctx) => {
+    /**
+     * Validate that server-side environment variables are not exposed to the client.
+     */
+    Object.keys(value).forEach((key) => {
+      if (key.startsWith("NEXT_PUBLIC_")) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `❌ You are exposing a server-side env-variable: ${key}`,
+        });
+      }
+    });
+  });
+
+/**
+ * Here we specify client-side environment variables.
+ * This way you can ensure the app isn't built with invalid env vars.
+ * To expose them to the client, prefix them with `NEXT_PUBLIC_`.
+ */
+const clientSchema = z
+  .object({
+    NEXT_PUBLIC_ASSET_PREFIX: z.string().optional(),
+  })
+  .superRefine((value, ctx) => {
+    /**
+     * Validate that client-side environment variables are exposed to the client.
+     */
+    Object.keys(value).forEach((key) => {
+      if (!key.startsWith("NEXT_PUBLIC_")) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
+        });
+      }
+    });
+  });
+
+/**
+ * You can't destruct `process.env` as a regular object, so you have to do
+ * it manually here. This is because Next.js evaluates this at build time,
+ * and only used environment variables are included in the build.
+ */
+const clientEnv = {
+  NEXT_PUBLIC_ASSET_PREFIX: process.env.NEXT_PUBLIC_ASSET_PREFIX,
+};
+
+module.exports = {
+  serverSchema,
+  clientSchema,
+  clientEnv,
+};

packages/nextjs-template/env/server.js

@@ -0,0 +1,21 @@
+// @ts-check
+const { parse } = require("@dendronhq/common-all");
+const { serverSchema,  } = require("./schema");
+const { env: clientEnv } = require("./client")
+
+/**
+ * This file is included in `/next.config.js` which ensures the app isn't built with invalid env vars.
+ */
+
+const serverEnv = parse(serverSchema, process.env);
+
+if (serverEnv.error) {
+  throw serverEnv.error;
+}
+
+module.exports = {
+  env: {
+    ...serverEnv.data,
+    ...clientEnv
+  }
+};

packages/nextjs-template/next.config.js

@@ -1,4 +1,4 @@
-const { env } = require('./utils/env')
+const { env } = require('./env/server')
 
 // throws if validation fails
 require('./utils/validation')

packages/nextjs-template/package.json

@@ -20,8 +20,8 @@
     "build:sitemap": "next-sitemap --config sitemap.js",
     "clean": "yarn rimraf public data out",
     "rimraf": "npx rimraf",
-    "test": "playwright test",
-    "test:skipbuild": "SKIP_BUILD=1 playwright test"
+    "test": "NODE_ENV=test playwright test",
+    "test:skipbuild": "SKIP_BUILD=1 yarn test"
   },
   "overrides": {
     "trim": "0.0.3",

packages/nextjs-template/playwright.config.ts

@@ -1,7 +1,11 @@
+import path from "path";
 import { PlaywrightTestConfig, devices } from "@playwright/test";
 
+const testDir = path.join(__dirname, "e2e");
+
 const config: PlaywrightTestConfig = {
-  globalSetup: require.resolve("./tests/global-setup"),
+  testDir,
+  globalSetup: require.resolve(path.join(testDir, "global-setup")),
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   // Limit the number of workers on CI, use default locally

packages/nextjs-template/utils/links.ts

@@ -4,18 +4,17 @@ import {
   NoteProps,
 } from "@dendronhq/common-all";
 import _ from "lodash";
+import { env } from "../env/client";
 
 export function getNoteUrl(opts: { note: NoteProps; noteIndex: NoteProps }) {
   const { note, noteIndex } = opts;
   return note.id === noteIndex.id ? "/" : `/notes/${note.id}`;
 }
 
 export function getAssetUrl(url: string) {
-  const out =
-    process.env.NODE_ENV === "production" &&
-    process.env.NEXT_PUBLIC_ASSET_PREFIX
-      ? process.env.NEXT_PUBLIC_ASSET_PREFIX + url
-      : url;
+  const out = env.NEXT_PUBLIC_ASSET_PREFIX
+    ? env.NEXT_PUBLIC_ASSET_PREFIX + url
+    : url;
   return out;
 }
 

packages/nextjs-template/utils/validation.js

@@ -1,7 +1,7 @@
 const fs = require("fs-extra");
 const path = require("path");
 const { parse, treeMenuSchema } = require("@dendronhq/common-all");
-const { env } = require('./env')
+const { env } = require('../env/server')
 
 const dataDir = env.DATA_DIR
 if (!dataDir) {