Service Factory - Service Hooks (#141)

* remove cypress

* update package dependencies

* fix linting and build errors

* configuration updates

* add use-abort-signal hook

* refactor service factories to use abortcontroller to cancel requests

* add changesets

* update gh actions

* add mock service worker

* add service hooks

* add todo sample application using service hooks

* add changeset

* add tailwind to todo sample

* update todorecord class name

* update todo example

* update package dependencies

* msw init prepare script

* Add mockServiceWorker.js to .gitignore

* update todo sample README

* Fix setupMockAPI function name in test files

Author: myty

.changeset/sour-ties-peel.md

@@ -0,0 +1,6 @@
+---
+"@rsm-hcd/javascript-react": minor
+"todo": minor
+---
+
+Add service factory service hooks

.gitignore

@@ -37,3 +37,4 @@ yarn-error.log*
 
 # HCD JavaScript specific
 docs/
+samples/todo/public/mockServiceWorker.js

.vscode/css/custom-data.json

@@ -0,0 +1,9 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@apply",
+            "description": "Apply Tailwind Classes"
+        }
+    ]
+}

.vscode/settings.json

@@ -1,10 +1,19 @@
 {
+    "files.associations": {
+        "*.tsx": "typescriptreact",
+        "*.css": "tailwindcss",
+        "*.scss": "tailwindcss"
+    },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescriptreact]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "[scss]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "css.customData": ["./.vscode/css/custom-data.json"],
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.rulers": [100],
@@ -16,5 +25,12 @@
         {
             "mode": "auto"
         }
+    ],
+    "[tailwindcss]": {
+        "tailwindCSS.colorDecorators": true
+    },
+    "tailwindCSS.experimental.classRegex": [
+        ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+        ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
     ]
 }

packages/javascript-react/jest.config.js

@@ -0,0 +1,31 @@
+import type { Config } from "jest";
+
+export default {
+    rootDir: __dirname,
+    /**
+     * @note Include the polyfills in the "setupFiles"
+     * to apply them BEFORE the test environment.
+     */
+    setupFiles: ["<rootDir>/jest.polyfills.ts"],
+    setupFilesAfterEnv: [
+        "<rootDir>/src/setup-tests.ts",
+        // polyfill window.resizeTo
+        "window-resizeto/polyfill",
+    ],
+    transform: {
+        "^.+\\.tsx?$": "@swc/jest",
+    },
+    testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        /**
+         * @note Opt-out from JSDOM using browser-style resolution
+         * for dependencies. This is simply incorrect, as JSDOM is
+         * not a browser, and loading browser-oriented bundles in
+         * Node.js will break things.
+         *
+         * Consider migrating to a more modern test runner if you
+         * don't want to deal with this.
+         */
+        customExportConditions: [""],
+    },
+} satisfies Config;

packages/javascript-react/jest.config.ts

@@ -0,0 +1,31 @@
+/* eslint-disable import/order  -- imports need to be arranged in a specific order */
+/**
+ * @note The block below contains polyfills for Node.js globals
+ * required for Jest to function when running JSDOM tests.
+ * These HAVE to be require's and HAVE to be in this exact
+ * order, since "undici" depends on the "TextEncoder" global API.
+ *
+ * Consider migrating to a more modern test runner if
+ * you don't want to deal with this.
+ */
+
+const { TextDecoder, TextEncoder } = require("node:util");
+
+Object.defineProperties(globalThis, {
+    TextDecoder: { value: TextDecoder },
+    TextEncoder: { value: TextEncoder },
+});
+
+const { Blob } = require("node:buffer");
+
+// eslint-disable-next-line import/no-extraneous-dependencies -- Required for JSDOM tests
+const { fetch, Headers, FormData, Request, Response } = require("undici");
+
+Object.defineProperties(globalThis, {
+    fetch: { value: fetch, writable: true },
+    Blob: { value: Blob },
+    Headers: { value: Headers },
+    FormData: { value: FormData },
+    Request: { value: Request },
+    Response: { value: Response },
+});

packages/javascript-react/jest.polyfills.ts

@@ -23,6 +23,8 @@
         "@rsm-hcd/javascript-core": "workspace:*",
         "@rsm-hcd/javascript-testing": "workspace:*",
         "@rsm-hcd/tsconfig": "workspace:*",
+        "@swc/core": "^1.4.11",
+        "@swc/jest": "^0.2.36",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.2",
         "@testing-library/react-hooks": "^8.0.1",
@@ -41,9 +43,8 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-extended": "^4.0.2",
-        "jest-fetch-mock": "3.0.3",
-        "jest-mock-axios": "^4.7.3",
         "lodash": "4.17.21",
+        "msw": "^2.2.13",
         "prettier": "^3.2.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -52,10 +53,10 @@
         "react-test-renderer": "^18.2.0",
         "rimraf": "^5.0.5",
         "rosie": "^2.1.1",
-        "ts-jest": "^29.1.2",
         "ts-node": "^10.9.2",
         "tsup": "^8.0.2",
         "typescript": "^5.4.3",
+        "undici": "^5.28.3",
         "window-resizeto": "0.0.2"
     },
     "files": [
@@ -92,10 +93,10 @@
         "lint": "eslint \"src/**/*.ts\" --ext .ts --fix",
         "lint:fix": "pnpm run lint --fix",
         "prepublishOnly": "npm run build:prod",
-        "test": "jest ./src",
+        "test": "jest",
         "watch": "tsc --pretty --watch",
-        "watch:coverage": "jest ./src --coverage --watch",
-        "watch:test": "jest ./src --watch"
+        "watch:coverage": "jest --coverage --watch",
+        "watch:test": "jest --watch"
     },
     "lint-staged": {
         "*.{ts,tsx}": [

packages/javascript-react/package.json

@@ -0,0 +1,116 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { Record } from "immutable";
+import { ServiceFactory } from "../../services/service-factory";
+import { setupMockApi } from "../../tests/setup-mock-api";
+import { useCreateService } from "./use-create";
+
+// ---------------------------------------------------------------------------------------------
+// #region Setup
+// ---------------------------------------------------------------------------------------------
+
+const endpoint = "records";
+const baseEndpoint = `http://api.local/${endpoint}`;
+
+const { server, mockPostSuccess } = setupMockApi({
+    baseEndpoint,
+});
+
+class TestRecord extends Record<{ id: number; value: string }>({
+    id: 0,
+    value: "",
+}) {}
+
+const TestService = {
+    create: ServiceFactory.create(TestRecord, baseEndpoint),
+};
+
+// #endregion Setup
+
+describe("useCreateService", () => {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+
+    it("should create a create service hook", () => {
+        // Arrange & Act
+        const { result } = renderHook(() =>
+            useCreateService(TestService.create)
+        );
+
+        // Assert
+        expect(result.current.create).toBeDefined();
+    });
+
+    it("should have a creating state", () => {
+        // Arrange & Act
+        const { result } = renderHook(() =>
+            useCreateService(TestService.create)
+        );
+
+        // Assert
+        expect(result.current.isCreating).toBe(false);
+    });
+
+    it("should not have an error", () => {
+        // Arrange & Act
+        const { result } = renderHook(() =>
+            useCreateService(TestService.create)
+        );
+
+        // Assert
+        expect(result.current.error).toBeUndefined();
+    });
+
+    describe("create", () => {
+        it("should create a record", async () => {
+            // Arrange
+            const record = new TestRecord({ id: 1, value: "test" });
+            mockPostSuccess(record, 100);
+
+            const { result } = renderHook(() =>
+                useCreateService(TestService.create)
+            );
+
+            // Act
+            act(() => {
+                result.current.create(record);
+            });
+
+            // Assert
+            await waitFor(() => {
+                expect(result.current.isCreating).toBe(true);
+            });
+
+            await waitFor(() => {
+                expect(result.current.isCreating).toBe(false);
+                expect(result.current.error).toBeUndefined();
+                expect(result.current.created).toEqual([record]);
+            });
+        });
+
+        describe("when unmounted", () => {
+            it("should not set state", async () => {
+                // Arrange
+                const record = new TestRecord({ id: 1, value: "test" });
+                mockPostSuccess(record, 100);
+
+                const { result, unmount } = renderHook(() =>
+                    useCreateService(TestService.create)
+                );
+
+                // Act
+                act(() => {
+                    result.current.create(record);
+                    unmount();
+                });
+
+                // Assert
+                await waitFor(() => {
+                    expect(result.current.isCreating).toBe(false);
+                    expect(result.current.error).toBeUndefined();
+                    expect(result.current.created).toEqual([]);
+                });
+            });
+        });
+    });
+});