Set up Jest and add a few tests

Author: akd-io

packages/create-next-stack/jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+// eslint-disable-next-line no-undef
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testPathIgnorePatterns: ["/node_modules/", "/lib/", "/src/tests/"],
+}

packages/create-next-stack/package.json

@@ -52,6 +52,7 @@
     "clean": "rimraf lib && pnpm run clean-tests-dir",
     "clean-tests-dir": "ts-node src/tests/e2e/clean-tests-dir.ts",
     "test": "pnpm build && ts-node src/tests/e2e/test.ts",
+    "jest": "jest",
     "test:manual": "pnpm build && ts-node src/tests/e2e/test-manual.ts --debug",
     "test:small": "pnpm build && ts-node src/tests/e2e/test-manual.ts --debug --package-manager=pnpm --styling=css-modules",
     "test:large": "pnpm build && ts-node src/tests/e2e/test-manual.ts --debug --package-manager=pnpm --styling=emotion --react-hook-form --formik --prettier --formatting-pre-commit-hook --chakra --framer-motion --github-actions",
@@ -74,6 +75,7 @@
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
+    "@jest/globals": "^29.5.0",
     "@types/inquirer": "^9.0.3",
     "@types/node": "^18.15.13",
     "@types/uuid": "^9.0.1",
@@ -82,7 +84,9 @@
     "@typescript-eslint/parser": "^5.59.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
+    "jest": "^29.5.0",
     "next": "^13.3.1",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "uuid": "^9.0.0"
   }

packages/create-next-stack/src/main/helpers/sort-by-order.ts

@@ -0,0 +1,20 @@
+import { logDebug } from "../logging"
+
+/**
+ * Compares two string values by their order in an array.
+ * @param a a string value
+ * @param b a string value
+ * @param order an array of string values specifying the order
+ * @returns a negative number if `a` comes before `b` in `order`, a positive number if `b` comes before `a` in `order`, or `0` if `a` and `b` are equal in `order` or if either `a` or `b` are not in `order`
+ */
+export const compareByOrder = (a: string, b: string, order: string[]) => {
+  const aIndex = order.indexOf(a)
+  const bIndex = order.indexOf(b)
+  if (aIndex === -1 || bIndex === -1) {
+    logDebug(
+      `WARNING: One or both of the values being compared are not in the order array. This should be caught by a test.`
+    )
+    return 0
+  }
+  return aIndex - bIndex
+}

packages/create-next-stack/src/main/plugins/create-next-stack/add-readme/generate-script-table-rows.ts

@@ -1,16 +1,12 @@
 import { ValidCNSInputs } from "../../../create-next-stack-types"
-import { filterPlugins } from "../../../setup/setup"
+import { getSortedFilteredScripts } from "../scripts/sort-order"
 
 export const generateScriptTableRows = async (
   inputs: ValidCNSInputs
 ): Promise<string> => {
-  const pluginScripts = filterPlugins(inputs).flatMap(
-    (plugin) => plugin.scripts ?? []
-  )
-
-  const scriptRowsString = pluginScripts
+  const scripts = getSortedFilteredScripts(inputs)
+  const scriptRowsString = scripts
     .map((script) => `|\`${script.name}\`|${script.description}|`)
     .join("\n")
-
   return scriptRowsString
 }

packages/create-next-stack/src/main/plugins/create-next-stack/create-next-stack.ts

@@ -22,6 +22,7 @@ import { generateIndexPage } from "./add-content/pages/generate-index"
 import { generateLandingPageTemplate } from "./add-content/templates/LandingPage/generate-LandingPageTemplate"
 import { generateTechnologies } from "./add-content/templates/LandingPage/generate-technologies"
 import { generateReadme } from "./add-readme/generate-readme"
+import { getSortedFilteredScripts } from "./scripts/sort-order"
 
 const gitAttributesFilename = ".gitattributes"
 
@@ -36,11 +37,7 @@ export const createNextStackPlugin = createPlugin({
       id: "addScripts",
       description: "adding scripts to package.json",
       run: async (inputs) => {
-        const scripts = filterPlugins(inputs).flatMap(
-          (plugin) => plugin.scripts ?? []
-        )
-
-        // TODO: Add a scripts sort order here. Use TypeScript to force setting all plugin scripts.
+        const scripts = getSortedFilteredScripts(inputs)
 
         await modifyJsonFile("package.json", (packageJson) => ({
           ...packageJson,

packages/create-next-stack/src/main/plugins/create-next-stack/scripts/sort-order.test.ts

@@ -0,0 +1,31 @@
+import { test } from "@jest/globals"
+import { plugins } from "../../../setup/setup"
+import { scriptsSortOrder } from "./sort-order"
+
+test("`scriptsSortOrder` contains no duplicates", () => {
+  const seenScripts = new Set<string>()
+  for (const script of scriptsSortOrder) {
+    if (seenScripts.has(script)) {
+      throw new Error(
+        `Duplicate script with name "${script}" found in sort-order.ts`
+      )
+    }
+    seenScripts.add(script)
+  }
+})
+
+test("`scriptsSortOrder` includes all plugins' scripts", () => {
+  const requiredScripts = plugins.flatMap((plugin) =>
+    plugin.scripts //
+      ? Object.values(plugin.scripts).map((script) => script.name)
+      : []
+  )
+  const actualScriptIDs = new Set(scriptsSortOrder)
+  for (const requiredScript of requiredScripts) {
+    if (!actualScriptIDs.has(requiredScript)) {
+      throw new Error(
+        `Missing script with name "${requiredScript}" in sort-order.ts`
+      )
+    }
+  }
+})

packages/create-next-stack/src/main/plugins/create-next-stack/scripts/sort-order.ts

@@ -0,0 +1,23 @@
+import { ValidCNSInputs } from "../../../create-next-stack-types"
+import { compareByOrder } from "../../../helpers/sort-by-order"
+import { filterPlugins } from "../../../setup/setup"
+
+export const scriptsSortOrder: string[] = [
+  "prepare",
+  "test",
+  "dev",
+  "build",
+  "start",
+  "lint",
+  "format",
+  "format:check",
+]
+
+export const getSortedFilteredScripts = (inputs: ValidCNSInputs) => {
+  const pluginScripts = filterPlugins(inputs).flatMap(
+    (plugin) => plugin.scripts ?? []
+  )
+  return pluginScripts.sort((a, b) =>
+    compareByOrder(a.name, b.name, scriptsSortOrder)
+  )
+}

packages/create-next-stack/src/main/setup/plugins.test.ts

@@ -0,0 +1,14 @@
+import { test } from "@jest/globals"
+import { plugins } from "./setup"
+
+test("`plugins` contains no duplicates", () => {
+  const seenPluginIDs = new Set<string>()
+  for (const plugin of plugins) {
+    if (seenPluginIDs.has(plugin.id)) {
+      throw new Error(
+        `Duplicate plugin with ID "${plugin.id}" found in setup.ts`
+      )
+    }
+    seenPluginIDs.add(plugin.id)
+  }
+})

packages/create-next-stack/src/main/setup/setup.ts

@@ -31,7 +31,9 @@ import { yarnPlugin } from "../plugins/yarn"
 import { steps } from "../steps"
 import { printFinalMessages } from "./print-final-messages"
 
-// Ordered by relevance to the user for use in technology lists // TODO: Fix this by having separate ordered lists of plugins where other sortings are needed.
+// Ordered by relevance to the user for use in technology lists
+// TODO: Fix this by having separate ordered lists of plugins where other sortings are needed.
+
 export const plugins: Plugin[] = [
   createNextStackPlugin,
   nextPlugin,

packages/create-next-stack/src/main/steps.ts

@@ -13,16 +13,6 @@ import { sassPlugin } from "./plugins/sass/sass"
 import { tailwindCSSPlugin } from "./plugins/tailwind-css"
 import { yarnPlugin } from "./plugins/yarn"
 
-console.log("createNextApp", typeof nextPlugin?.steps?.createNextApp)
-console.log(
-  "removeOfficialCNAContent",
-  typeof nextPlugin?.steps?.removeOfficialCNAContent
-)
-console.log(
-  "installDependencies:",
-  typeof createNextStackPlugin?.steps?.installDependencies
-)
-
 export const steps: Step[] = [
   // Update package manager
   pnpmPlugin.steps.updatePnpm,