chore(publish): improve e2e tests

package.json

@@ -100,7 +100,7 @@
     "ci:test:plugin": "npx lerna run test --scope @dendronhq/plugin-core --stream",
     "ci:test:plugin-web": "npx lerna run compile-web --scope @dendronhq/plugin-core && npx lerna run test-in-browser --scope @dendronhq/plugin-core",
     "ci:test:template": "yarn --cwd packages/nextjs-template run test",
-    "ci:test:template:docker": "docker run -it --rm --ipc=host -v \"$(pwd):/test\" -u \"$(id -u ${USER}):$(id -g ${USER})\" mcr.microsoft.com/playwright:v1.25.0-focal /bin/bash -c 'cd /test; npx playwright install; yarn ci:test:template'",
+    "ci:test:template:docker": "docker run -it --rm --ipc=host -v \"$(pwd):/test\" -u \"$(id -u ${USER}):$(id -g ${USER})\" mcr.microsoft.com/playwright:v1.26.0-focal /bin/bash -c 'cd /test; npx playwright install; yarn ci:test:template $([ \"$0\" = \"/bin/bash\" ] || ([ \"$#\" = 0 ] && echo \"$0\" || echo \"$0 $@\"))'",
     "template:build": "yarn --cwd packages/nextjs-template run build",
     "template:export": "yarn --cwd packages/nextjs-template run export",
     "template:start": "yarn --cwd packages/nextjs-template run start",

packages/nextjs-template/.env.test

@@ -0,0 +1 @@
+NEXT_PUBLIC_ASSET_PREFIX=/testing-asset-prefix

packages/nextjs-template/components/DendronNotePage.tsx

@@ -104,9 +104,13 @@ export default function Note({
 
   const maybeCollection =
     note.custom?.has_collection && !_.isNull(collectionChildren)
-      ? collectionChildren.map((child: NoteProps) =>
-          DendronCollectionItem({ note: child, noteIndex })
-        )
+      ? collectionChildren.map((child: NoteProps) => (
+          <DendronCollectionItem
+            key={child.id}
+            note={child}
+            noteIndex={noteIndex}
+          />
+        ))
       : null;
 
   return (

packages/nextjs-template/components/DendronTOC.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { NoteProps } from "@dendronhq/common-all";
 import { Anchor } from "antd";
 import _ from "lodash";
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 
 const Link = Anchor.Link;
 
@@ -22,24 +23,21 @@ export const DendronTOC = ({
   note: NoteProps;
 } & ComponentProps<typeof Anchor>) => {
   return (
-    <>
-      <Anchor style={{ zIndex: 1 }} className="dendron-toc" {...rest}>
-        {Object.entries(note?.anchors).map(([key, entry]) =>
-          entry?.type === "header" ? (
+    <Anchor style={{ zIndex: 1 }} className="dendron-toc" {...rest}>
+      {Object.entries(note?.anchors).map(([key, entry]) => (
+        <React.Fragment key={key}>
+          {entry?.type === "header" ? (
             <Link
-              key={key}
               href={`#${key}`}
               // `anchor.text` contains clean, user displayable text for
               // headings. It should always exist for exported notes, but we
               // have this fallback just in case.
               title={entry?.text ?? unslug(entry?.value)}
             />
-          ) : (
-            <></>
-          )
-        )}
-      </Anchor>
-    </>
+          ) : null}
+        </React.Fragment>
+      ))}
+    </Anchor>
   );
 };
 

packages/nextjs-template/components/layout/DendronContent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Divider } from "antd";
-import Layout, { Content, Footer } from "antd/lib/layout/layout";
+import { Content, Footer } from "antd/lib/layout/layout";
 import { DendronBreadCrumb } from "../DendronBreadCrumb";
 import { FooterText } from "../DendronNoteFooter";
 import { DENDRON_STYLE_CONSTANTS } from "../../styles/constants";

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

@@ -9,8 +9,8 @@ import { expect } from "@playwright/test";
  * 3. To run just this test file, `npx playwright test tests/example.spec.ts` from within the `nextjs-template` directory
  * 4. To skip build while testing this test file, `SKIP_BUILD=1 npx playwright test tests/example.spec.ts`
  */
-test("Test home page", async ({ page, port }) => {
-  await page.goto(`http://localhost:${port}/`);
+test("Test home page", async ({ page, url }) => {
+  await page.goto(url);
   const name = await page.innerText("h1");
   expect(name).toBe("Dendron");
 });

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

@@ -0,0 +1,69 @@
+import test from "./next-fixture";
+import { expect } from "@playwright/test";
+
+test.describe("GIVEN default viewport", () => {
+  test("THEN should display heading anchor pleasantly ", async ({
+    page,
+    url,
+  }) => {
+    await page.goto(`${url}/notes/FSi3bKWQeQXYTjE1PoTB0`);
+
+    const case1 = page.locator("#start-code-end");
+    await case1.hover();
+    await expect(case1).toHaveScreenshot([
+      "heading-anchor",
+      "start-code-end.png",
+    ]);
+
+    const case2 = page.locator("#start---end");
+    await case2.hover();
+    await expect(case2).toHaveScreenshot(["heading-anchor", "start---end.png"]);
+
+    const case3 = page.locator("#start-_-end");
+    await case3.hover();
+    await expect(case3).toHaveScreenshot(["heading-anchor", "start-_-end.png"]);
+
+    const case4 = page.locator("#start-test-end");
+    await case4.hover();
+    await expect(case4).toHaveScreenshot([
+      "heading-anchor",
+      "start-test-end.png",
+    ]);
+
+    const case5 = page.locator("#start-exampleusername-private-end");
+    await case5.hover();
+    await expect(case5).toHaveScreenshot([
+      "heading-anchor",
+      "start-exampleusername-private-end.png",
+    ]);
+  });
+
+  test("THEN check if `NEXT_PUBLIC_ASSET_PREFIX` gets considered", async ({
+    page,
+    url,
+    options: { env },
+  }) => {
+    await page.goto(url);
+
+    const faviconLinkLocator = page.locator(
+      `link[rel='icon'][href^='${env.NEXT_PUBLIC_ASSET_PREFIX}']`
+    );
+    expect(await faviconLinkLocator.count()).toBe(1);
+
+    const themeLinkLocator = page.locator(
+      `link[type='text/css'][id*='theme'][href^='${env.NEXT_PUBLIC_ASSET_PREFIX}']`
+    );
+    expect(await themeLinkLocator.count()).toBe(4);
+  });
+});
+
+test.describe("GIVEN mobile viewport", () => {
+  test.use({ viewport: { width: 400, height: 900 } });
+  test("THEN layout should be safe", async ({ page, url }) => {
+    await page.goto(`${url}/notes/ufzjlbxfti6endd1o6egr6r`);
+    expect(await page.locator(".main-content").screenshot()).toMatchSnapshot([
+      "layout",
+      "safe-layout.png",
+    ]);
+  });
+});

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

@@ -1,9 +1,12 @@
+/* eslint-disable no-empty-pattern */
 import { createServer, Server } from "http";
 import { parse } from "url";
 import { test as base } from "@playwright/test";
 import next from "next";
 import path from "path";
 import { AddressInfo } from "net";
+import importFresh from "import-fresh";
+import type { env } from "../env/server";
 
 /**
  * We will use a new Playwright Test feature called Fixtures to boot one instance of our built application for each test worker.
@@ -18,10 +21,15 @@ import { AddressInfo } from "net";
  */
 
 // Extend base test with our fixtures.
-const test = base.extend<{
-  port: string;
-}>({
-  port: [
+const test = base.extend<
+  {
+    url: string;
+  },
+  {
+    options: { port: string; basePath: string; env: typeof env };
+  }
+>({
+  options: [
     // eslint-disable-next-line no-empty-pattern
     async ({}, use) => {
       const app = next({
@@ -45,15 +53,28 @@ const test = base.extend<{
       });
       // get the randomly assigned port from the server
       const port = String((server.address() as AddressInfo).port);
+
+      // now that nextjs has loaded env-vars through dotenv (behind the curtain) we can "fetch" them
+      // import-from allows us to request without cache
+      const { env } = importFresh("../env/server");
+      const basePath = env.NEXT_PUBLIC_ASSET_PREFIX;
+
       // provide port to tests
-      await use(port);
+      await use({ port, basePath, env });
     },
     {
-      //@ts-ignore
       scope: "worker",
     },
   ],
+  url: [
+    async ({ options: { port, basePath }, baseURL }, use) => {
+      const url = new URL(basePath ?? "/", `${baseURL}:${port}/`);
+      await use(url.toString());
+    },
+    { scope: "test" },
+  ],
 });
+
 // this "test" can be used in multiple test files,
 // and each of them will get the fixtures.
 export default test;

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,10 +1,10 @@
-const { env } = require('./utils/env')
+const { env } = require('./env/server')
 
 // throws if validation fails
 require('./utils/validation')
 
 const { NEXT_PUBLIC_ASSET_PREFIX, BUILD_DIR, DATA_DIR, PUBLIC_DIR } = env;
-const isProd = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV !== "development";
 
 // NOTE: __dirname is the dirname where this configuration file is located
 const payload = {

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",
@@ -35,6 +35,7 @@
     "antd": "^4.15.5",
     "fs-extra": "^10.0.0",
     "html-react-parser": "^1.3.0",
+    "import-fresh": "^3.3.0",
     "lodash": "^4.17.21",
     "luxon": "^1.25.0",
     "next": "^12.3.0",
@@ -51,7 +52,7 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^11.1.2",
-    "@playwright/test": "^1.18.1",
+    "@playwright/test": "^1.26.0",
     "@types/fs-extra": "^9.0.12",
     "@types/luxon": "^2.3.1",
     "@types/react": "17.0.39",

packages/nextjs-template/playwright.config.ts

@@ -1,12 +1,17 @@
+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
   workers: process.env.CI ? 3 : undefined,
   use: {
+    baseURL: "http://localhost",
     trace: "on-first-retry",
   },
   projects: [