Added jest and playwright, added tests

Author: Ante-Koceic

apps/contact/.gitignore

@@ -39,3 +39,10 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/contact/app/api/contact/route.ts

@@ -1,3 +1,4 @@
+import { notifyContactCreated } from "../../../utils/notifyContactCreated";
 import { Client, isFullPage } from "@notionhq/client";
 import { nanoid } from "nanoid";
 import z from "zod";
@@ -16,97 +17,11 @@ const bodyValidationSchema = z.object({
 
 type RequestBody = z.infer<typeof bodyValidationSchema>;
 
-const {
-  NOTION_TOKEN,
-  SLACK_CHANNEL,
-  SLACK_BOT_TOKEN,
-  MENTION_EMAILS,
-  MENTION_IDS,
-  NOTION_DATABASE_ID,
-  IS_OFFLINE,
-} = process.env;
+const { NOTION_TOKEN, MENTION_EMAILS, MENTION_IDS, NOTION_DATABASE_ID } =
+  process.env;
 
 const notion = new Client({ auth: NOTION_TOKEN });
 
-const createPayload = (name: string, email: string, url: string) => ({
-  channel: SLACK_CHANNEL,
-  blocks: [
-    {
-      type: "header",
-      text: {
-        type: "plain_text",
-        text: "We have 1 new message(s).",
-        emoji: true,
-      },
-    },
-    {
-      type: "section",
-      text: {
-        type: "mrkdwn",
-        text: `We got a new message from _${name}_ (_${email}_).`,
-      },
-    },
-    {
-      type: "divider",
-    },
-    {
-      type: "section",
-      text: {
-        type: "mrkdwn",
-        text: " ",
-      },
-      accessory: {
-        type: "button",
-        text: {
-          type: "plain_text",
-          text: "Show me the message",
-          emoji: true,
-        },
-        value: "new_message_click",
-        url,
-        action_id: "button-action",
-      },
-    },
-  ],
-});
-
-const notifyContactCreated = async (
-  name: string,
-  email: string,
-  url: string,
-) => {
-  const payload = createPayload(name, email, url);
-  const payloadStringify = JSON.stringify(payload);
-
-  if (IS_OFFLINE) {
-    console.log(payload);
-  } else {
-    try {
-      const result = await fetch("https://slack.com/api/chat.postMessage", {
-        method: "POST",
-        body: payloadStringify,
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-          "Content-Length": payloadStringify.length.toString(),
-          Authorization: `Bearer ${SLACK_BOT_TOKEN}`,
-          Accept: "application/json",
-        },
-      });
-      if (result.status !== 200) {
-        throw {
-          statusCode: result.status,
-          headers: {
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Allow-Credentials": true,
-          },
-        };
-      }
-    } catch (error) {
-      throw error;
-    }
-  }
-};
-
 const mentionPerson = ({ id, email }: { id: string; email: string }) => [
   {
     mention: {

apps/contact/jest.config.ts

@@ -0,0 +1,235 @@
+// /**
+//  * For a detailed explanation regarding each configuration property, visit:
+//  * https://jestjs.io/docs/configuration
+//  */
+
+// /** @type {import('jest').Config} */
+// const config = {
+//   // All imported modules in your tests should be mocked automatically
+//   // automock: false,
+
+//   // Stop running tests after `n` failures
+//   // bail: 0,
+
+//   // The directory where Jest should store its cached dependency information
+//   // cacheDirectory: "/tmp/jest_rs",
+
+//   // Automatically clear mock calls, instances, contexts and results before every test
+//   // clearMocks: false,
+
+//   // Indicates whether the coverage information should be collected while executing the test
+//   // collectCoverage: false,
+
+//   // An array of glob patterns indicating a set of files for which coverage information should be collected
+//   // collectCoverageFrom: undefined,
+
+//   // The directory where Jest should output its coverage files
+//   // coverageDirectory: undefined,
+
+//   // An array of regexp pattern strings used to skip coverage collection
+//   // coveragePathIgnorePatterns: [
+//   //   "/node_modules/"
+//   // ],
+
+//   // Indicates which provider should be used to instrument code for coverage
+//   coverageProvider: "v8",
+
+//   // A list of reporter names that Jest uses when writing coverage reports
+//   // coverageReporters: [
+//   //   "json",
+//   //   "text",
+//   //   "lcov",
+//   //   "clover"
+//   // ],
+
+//   // An object that configures minimum threshold enforcement for coverage results
+//   // coverageThreshold: undefined,
+
+//   // A path to a custom dependency extractor
+//   // dependencyExtractor: undefined,
+
+//   // Make calling deprecated APIs throw helpful error messages
+//   // errorOnDeprecated: false,
+
+//   // The default configuration for fake timers
+//   // fakeTimers: {
+//   //   "enableGlobally": false
+//   // },
+
+//   // Force coverage collection from ignored files using an array of glob patterns
+//   // forceCoverageMatch: [],
+
+//   // A path to a module which exports an async function that is triggered once before all test suites
+//   // globalSetup: undefined,
+
+//   // A path to a module which exports an async function that is triggered once after all test suites
+//   // globalTeardown: undefined,
+
+//   // A set of global variables that need to be available in all test environments
+//   globals: {
+//     "ts-jest": {
+//       useESM: true,
+//     },
+//   },
+
+//   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+//   // maxWorkers: "50%",
+
+//   // An array of directory names to be searched recursively up from the requiring module's location
+//   // moduleDirectories: [
+//   //   "node_modules"
+//   // ],
+
+//   // An array of file extensions your modules use
+//   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+//   // moduleFileExtensions: [
+//   //   "js",
+//   //   "mjs",
+//   //   "cjs",
+//   //   "jsx",
+//   //   "ts",
+//   //   "mts",
+//   //   "cts",
+//   //   "tsx",
+//   //   "json",
+//   //   "node"
+//   // ],
+
+//   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+//   moduleNameMapper: {
+//     "^(\\.{1,2}/.*)\\.js$": "$1",
+//   },
+
+//   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+//   // modulePathIgnorePatterns: [],
+
+//   // Activates notifications for test results
+//   // notify: false,
+
+//   // An enum that specifies notification mode. Requires { notify: true }
+//   // notifyMode: "failure-change",
+
+//   // A preset that is used as a base for Jest's configuration
+//   preset: "ts-jest/presets/default-esm",
+
+//   // Run tests from one or more projects
+//   // projects: undefined,
+
+//   // Use this configuration option to add custom reporters to Jest
+//   // reporters: undefined,
+
+//   // Automatically reset mock state before every test
+//   // resetMocks: false,
+
+//   // Reset the module registry before running each individual test
+//   // resetModules: false,
+
+//   // A path to a custom resolver
+//   // resolver: undefined,
+
+//   // Automatically restore mock state and implementation before every test
+//   // restoreMocks: false,
+
+//   // The root directory that Jest should scan for tests and modules within
+//   // rootDir: undefined,
+
+//   // A list of paths to directories that Jest should use to search for files in
+//   // roots: [
+//   //   "<rootDir>"
+//   // ],
+
+//   // Allows you to use a custom runner instead of Jest's default test runner
+//   // runner: "jest-runner",
+
+//   // The paths to modules that run some code to configure or set up the testing environment before each test
+//   // setupFiles: ["./jest.setup.ts"],
+
+//   // A list of paths to modules that run some code to configure or set up the testing framework before each test
+//   setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+
+//   // The number of seconds after which a test is considered as slow and reported as such in the results.
+//   // slowTestThreshold: 5,
+
+//   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+//   // snapshotSerializers: [],
+
+//   // The test environment that will be used for testing
+//   testEnvironment: "node",
+
+//   // Options that will be passed to the testEnvironment
+//   testEnvironmentOptions: {
+//     customExportConditions: ["react-native"],
+//   },
+
+//   // Adds a location field to test results
+//   // testLocationInResults: false,
+
+//   // The glob patterns Jest uses to detect test files
+//   // testMatch: [
+//   //   "**/__tests__/**/*.?([mc])[jt]s?(x)",
+//   //   "**/?(*.)+(spec|test).?([mc])[jt]s?(x)"
+//   // ],
+
+//   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+//   // testPathIgnorePatterns: [
+//   //   "/node_modules/"
+//   // ],
+
+//   // The regexp pattern or array of patterns that Jest uses to detect test files
+//   // testRegex: [],
+
+//   // This option allows the use of a custom results processor
+//   // testResultsProcessor: undefined,
+
+//   // This option allows use of a custom test runner
+//   // testRunner: "jest-circus/runner",
+
+//   // A map from regular expressions to paths to transformers
+//   transform: {},
+
+//   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+//   transformIgnorePatterns: [
+//     "/node_modules/(?!nanoid|undici)/", // transform nanoid and undici
+//   ],
+
+//   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+//   // unmockedModulePathPatterns: undefined,
+
+//   // Indicates whether each individual test should be reported during the run
+//   // verbose: undefined,
+
+//   // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+//   // watchPathIgnorePatterns: [],
+
+//   // Whether to use watchman for file crawling
+//   // watchman: true,
+
+//   extensionsToTreatAsEsm: [".ts"],
+// };
+
+// module.exports = config;
+
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest/presets/js-with-ts",
+  testEnvironment: "node",
+  extensionsToTreatAsEsm: [".ts"],
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        useESM: false,
+        tsconfig: "tsconfig.json",
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!(nanoid)/)", // ensure nanoid gets transformed
+  ],
+  moduleFileExtensions: ["cjs", "js", "ts", "tsx", "json", "node"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],
+  testPathIgnorePatterns: ["/node_modules/", "/tests/e2e/"],
+};
+
+export default config;

apps/contact/jest.setup.ts

@@ -0,0 +1,31 @@
+// Step 1: Polyfill encoders
+import { TextEncoder, TextDecoder } from "util";
+(globalThis as any).TextEncoder = TextEncoder;
+(globalThis as any).TextDecoder = TextDecoder;
+
+// Step 2: Polyfill ReadableStream
+import { ReadableStream } from "web-streams-polyfill";
+(globalThis as any).ReadableStream = ReadableStream;
+
+// Step 3: Polyfill Web Fetch APIs using undici
+import { fetch, Response, Request, Headers } from "undici";
+(globalThis as any).fetch = fetch;
+(globalThis as any).Response = Response;
+(globalThis as any).Request = Request;
+(globalThis as any).Headers = Headers;
+
+if (typeof clearImmediate === "undefined") {
+  (global as any).clearImmediate = (id: any) => {
+    return clearTimeout(id);
+  };
+}
+
+if (typeof setImmediate === "undefined") {
+  (global as any).setImmediate = (fn: Function, ...args: any[]) => {
+    return setTimeout(fn, 0, ...args);
+  };
+}
+
+afterEach(async () => {
+  jest.resetAllMocks();
+});