refactor: Merge dudykr/js-utils into the monorepo (#14)

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "react"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
+};

.github/workflows/CI.yml

@@ -7,37 +7,55 @@ on:
     types: [opened, synchronize]
   merge_group:
 
+env:
+  CI: 1
+
 jobs:
   build:
     name: Build and Test
     timeout-minutes: 15
     runs-on: ubuntu-latest
-    # To use Remote Caching, uncomment the next lines and follow the steps below.
-    # env:
-    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+    env:
+      DISPLAY: ":99"
 
     steps:
       - name: Check out code
         uses: actions/checkout@v3
         with:
           fetch-depth: 2
 
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
       - uses: pnpm/[email protected]
         with:
-          version: 6.32.2
+          version: 8.6.3
+          run_install: false
 
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v3
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
         with:
-          node-version: 18
-          cache: "pnpm"
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      # Install dependencies
+      - run: pnpm install
+
+      - uses: nanasess/setup-chromedriver@v2
 
-      - name: Install dependencies
-        run: pnpm install
+      - run: |
+          chromedriver --url-base=/wd/hub &
 
-      #   - name: Build
-      #     run: pnpm build
+      - uses: browser-actions/setup-firefox@v1
 
-      - name: Test
-        run: pnpm test:ci
+      - run: pnpm turbo run test:ci

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "editor.formatOnSave": true,
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
@@ -11,5 +10,12 @@
     "**/.turbo": true,
     "**/.vercel": true,
     "**/.swc": true
+  },
+  "editor.formatOnSave": true,
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
   }
 }

README.md

@@ -22,6 +22,14 @@ A vscode extension that adds a preview action to Tailwind components in **jest s
 
 A collection of utility functions.
 
+### `packages/jest-expect-image/`
+
+A jest matcher for comparing images.
+
+### `packages/next-image-snapshot/`
+
+A test utility for comparing UI as images in Next.js projects.
+
 ## Docs (`docs/`)
 
 ### `docs/stc/`

packages/jest-expect-image/.gitignore

@@ -0,0 +1,7 @@
+yarn.lock
+node_modules
+_/
+*.tgz
+lib/*.js
+*.d.ts
+*.map

packages/jest-expect-image/.npmignore

@@ -0,0 +1,9 @@
+node_modules/
+package-lock.json
+*.log
+.swcrc
+.yarn
+*.tgz
+.dprint.json
+out/
+tests/

packages/jest-expect-image/lib/index.ts

@@ -0,0 +1,28 @@
+import { expect } from "@jest/globals";
+import "@jest/expect";
+//@ts-ignore
+import { toMatchImageSnapshot } from "jest-image-snapshot";
+expect.extend({ toMatchImageSnapshot });
+
+export interface MatchOptions {}
+
+export interface CustomMatcherResult {}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Matchers<R> {
+      toMatchImageSnapshot(options?: MatchOptions): CustomMatcherResult;
+    }
+  }
+}
+
+declare module "@jest/expect" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Matchers<R> {
+    toMatchImageSnapshot(options?: MatchOptions): CustomMatcherResult;
+  }
+}
+
+export {};

packages/jest-expect-image/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "jest-expect-image",
+  "packageManager": "[email protected]",
+  "version": "0.1.3",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "prepublishOnly": "turbo run build:tsc",
+    "build:tsc": "tsc",
+    "build": "true"
+  },
+  "keywords": [],
+  "author": "강동윤 <[email protected]>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dudykr/js-utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dudykr/js-utils/issues"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@jest/expect": "^29.6.3",
+    "@jest/globals": "^29.6.3",
+    "jest": "^29.6.2",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "jest-image-snapshot": "^6.2.0"
+  },
+  "peerDependencies": {
+    "@jest/globals": "^29.6.3"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  }
+}

packages/jest-expect-image/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "useDefineForClassFields": true,
+    "module": "commonjs",
+    "baseUrl": "./",
+    "paths": {},
+    "resolveJsonModule": true,
+    "declaration": true,
+    "sourceMap": true,
+    "downlevelIteration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "rootDir": "./lib"
+  }
+}

packages/next-image-snapshot/.gitignore

@@ -0,0 +1,8 @@
+yarn.lock
+node_modules
+_/
+*.tgz
+lib/*.js
+tests/*.js
+*.d.ts
+*.map

packages/next-image-snapshot/.npmignore

@@ -0,0 +1,10 @@
+examples/
+node_modules/
+package-lock.json
+*.log
+.swcrc
+.yarn
+*.tgz
+.dprint.json
+out/
+tests/

packages/next-image-snapshot/README.md

@@ -0,0 +1,84 @@
+# next-image-snapshot
+
+## Usage
+
+Assuming you are using `jest`, you can use this package like
+
+```ts
+// This import will add `toMatchImageSnapshot` to the `expect` global, and will make IDE autocomplete work.
+import "jest-expect-image";
+import { Browsers, NextTestServer, closeAll } from "next-image-snapshot";
+
+describe("User sign up page", () => {
+  let server!: NextTestServer;
+  let browsers!: Browsers;
+
+  beforeAll(async () => {
+    server = await NextTestServer.create({
+      dir: "./examples/next-app",
+      dev: true,
+    });
+    browsers = await Browsers.all(server, ["chrome", "firefox", "edge"], {
+      common: {
+        headless: true,
+      },
+    });
+  });
+
+  afterAll(async () => {
+    await closeAll(browsers, server);
+  });
+
+  it("renders properly in all browsers", async () => {
+    for (const browser of browsers) {
+      await browser.load("/");
+
+      const screenshot = await browser.driver.takeScreenshot();
+
+      expect(screenshot).toMatchImageSnapshot();
+    }
+  });
+});
+```
+
+Note the `NestTestServer`, `Browser` and `Browsers` all support `[Symbol.asyncDispose]`.
+It means, once TypeScript 5.2 is released, you will be able to do this:
+
+```ts
+import "jest-expect-image";
+import { Browsers, NextTestServer, closeAll } from "next-image-snapshot";
+
+describe("User sign up page", () => {
+  it("renders properly in all browsers", async () => {
+    using server = await NextTestServer.create({
+        dir: "./examples/next-app",
+        dev: true,
+    });
+    using browsers = await Browsers.all(server, ["chrome", "firefox", "edge"], {
+        common: {
+            headless: true,
+        },
+    });
+
+    for (const browser of browsers) {
+      await browser.load("/");
+
+      const screenshot = await browser.driver.takeScreenshot();
+
+      expect(screenshot).toMatchImageSnapshot();
+    }
+  });
+});
+```
+
+### TODO: `renderAppPage`
+
+```ts
+const page = await renderAppPage(() => import("./page.tsx"));
+```
+
+### TODO: `renderPage`
+
+```ts
+const page = await renderPage(() => import("./page.tsx"));
+```

packages/next-image-snapshot/examples/next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

packages/next-image-snapshot/examples/next-app/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts