feat: Add MockPlugin (#3622)

Author: ntucker

.changeset/clever-houses-beam.md

@@ -0,0 +1,11 @@
+---
+'@data-client/core': patch
+---
+
+Add @data-client/core/mock
+
+New exports:
+- `MockController` - Controller wrapper for mocking endpoints
+- `collapseFixture` - Resolves fixture responses (handles function responses)
+- `createFixtureMap` - Separates fixtures into static map and interceptors
+- Types: `MockProps`, `Fixture`, `SuccessFixture`, `ErrorFixture`, `Interceptor`, `ResponseInterceptor`, `FetchInterceptor`, `FixtureEndpoint`, `SuccessFixtureEndpoint`, `ErrorFixtureEndpoint`

.changeset/gentle-heads-rule.md

@@ -0,0 +1,68 @@
+---
+'@data-client/vue': patch
+---
+
+Add MockPlugin
+
+Example usage:
+
+```ts
+import { createApp } from 'vue';
+import { DataClientPlugin } from '@data-client/vue';
+import { MockPlugin } from '@data-client/vue/test';
+
+const app = createApp(App);
+app.use(DataClientPlugin);
+app.use(MockPlugin, {
+  fixtures: [
+    {
+      endpoint: MyResource.get,
+      args: [{ id: 1 }],
+      response: { id: 1, name: 'Test' },
+    },
+  ],
+});
+app.mount('#app');
+```
+
+Interceptors allow dynamic responses based on request arguments:
+
+```ts
+app.use(MockPlugin, {
+  fixtures: [
+    {
+      endpoint: MyResource.get,
+      response: (...args) => {
+        const [{ id }] = args;
+        return {
+          id,
+          name: `Dynamic ${id}`,
+        };
+      },
+    },
+  ],
+});
+```
+
+Interceptors can also maintain state across calls:
+
+```ts
+const interceptorData = { count: 0 };
+
+app.use(MockPlugin, {
+  fixtures: [
+    {
+      endpoint: MyResource.get,
+      response: function (this: { count: number }, ...args) {
+        this.count++;
+        const [{ id }] = args;
+        return {
+          id,
+          name: `Call ${this.count}`,
+        };
+      },
+    },
+  ],
+  getInitialInterceptorData: () => interceptorData,
+});
+```

jest.config.js

@@ -28,6 +28,7 @@ const baseConfig = {
     'packages/graphql',
     'packages/rest/src/next',
     'packages/core/src/next',
+    'packages/core/src/mock',
     'packages/react/src/next',
     'packages/react/src/server',
     'packages/react/src/components/DevToolsButton.tsx',

packages/core/package.json

@@ -16,6 +16,9 @@
       "next": [
         "lib/next/index.d.ts"
       ],
+      "mock": [
+        "lib/mock/index.d.ts"
+      ],
       "*": [
         "lib/index.d.ts"
       ]
@@ -27,6 +30,9 @@
       "next": [
         "ts3.4/next/index.d.ts"
       ],
+      "mock": [
+        "ts3.4/mock/index.d.ts"
+      ],
       "*": [
         "ts3.4/index.d.ts"
       ]
@@ -48,6 +54,13 @@
       "react-native": "./lib/next/index.js",
       "default": "./lib/next/index.js"
     },
+    "./mock": {
+      "types": "./lib/mock/index.d.ts",
+      "require": "./lib/mock/index.js",
+      "browser": "./lib/mock/index.js",
+      "react-native": "./lib/mock/index.js",
+      "default": "./lib/mock/index.js"
+    },
     "./package.json": "./package.json"
   },
   "type": "module",

packages/vue/src/test/MockController.ts packages/core/src/mock/MockController.tspackages/vue/src/test/MockController.ts renamed to packages/core/src/mock/MockController.ts

@@ -3,23 +3,18 @@ import {
   Controller,
   DataClientDispatch,
   GenericDispatch,
-} from '@data-client/core';
+} from '../index.js';
+import { collapseFixture } from './collapseFixture.js';
+import { createFixtureMap } from './createFixtureMap.js';
+import type { Fixture, Interceptor } from './fixtureTypes.js';
+import { MockProps } from './mockTypes.js';
 
-import { collapseFixture } from './collapseFixture';
-import { createFixtureMap } from './createFixtureMap';
-import type { Fixture, Interceptor } from './fixtureTypes';
-
-export interface MockProps<T = any> {
-  fixtures?: (Fixture | Interceptor<T>)[];
-  getInitialInterceptorData?: () => T;
-}
-
-export default function MockController<TBase extends typeof Controller, T>(
+export function MockController<TBase extends typeof Controller, T>(
   Base: TBase,
   {
     fixtures = [],
     getInitialInterceptorData = () => ({}) as any,
-  }: MockProps<T> = {},
+  }: MockProps<T>,
 ): TBase {
   const [fixtureMap, interceptors] = createFixtureMap(fixtures);
 
@@ -63,11 +58,11 @@ export default function MockController<TBase extends typeof Controller, T>(
           let fixture: Fixture | Interceptor | undefined;
           if (this.fixtureMap.has(key)) {
             fixture = this.fixtureMap.get(key) as Fixture;
-            if (!args) args = (fixture as any).args;
+            if (!args) args = fixture.args;
             // exact matches take priority; now test ComputedFixture
           } else {
             for (const cfix of this.interceptors) {
-              if ((cfix.endpoint as any).testKey(key)) {
+              if (cfix.endpoint.testKey(key)) {
                 fixture = cfix;
                 break;
               }
@@ -79,15 +74,15 @@ export default function MockController<TBase extends typeof Controller, T>(
               ...action,
             };
             const delayMs =
-              typeof (fixture as any).delay === 'function' ?
-                (fixture as any).delay(...(args as any))
-              : ((fixture as any).delay ?? 0);
+              typeof fixture.delay === 'function' ?
+                fixture.delay(...(args as any))
+              : (fixture.delay ?? 0);
 
             if ('fetchResponse' in fixture) {
-              const { fetchResponse } = fixture as any;
+              const { fetchResponse } = fixture;
               fixture = {
                 endpoint: fixture.endpoint,
-                response(...args: any[]) {
+                response(...args) {
                   const endpoint = (action.endpoint as any).extend({
                     fetchResponse: (input: RequestInfo, init: RequestInit) => {
                       const ret = fetchResponse.call(this, input, init);
@@ -103,23 +98,23 @@ export default function MockController<TBase extends typeof Controller, T>(
                   });
                   return (endpoint as any)(...args);
                 },
-              } as any;
+              };
             }
             const fetch = async () => {
               if (!fixture) {
                 throw new Error('No fixture found');
               }
               // delayCollapse determines when the fixture function is 'collapsed' (aka 'run')
               // collapsed: https://en.wikipedia.org/wiki/Copenhagen_interpretation
-              if ((fixture as any).delayCollapse) {
+              if (fixture.delayCollapse) {
                 await new Promise(resolve => setTimeout(resolve, delayMs));
               }
               const result = await collapseFixture(
                 fixture as any,
                 args as any,
                 this.interceptorData,
               );
-              if (!(fixture as any).delayCollapse && delayMs) {
+              if (!fixture.delayCollapse && delayMs) {
                 await new Promise(resolve => setTimeout(resolve, delayMs));
               }
               if (result.error) {

packages/vue/src/test/collapseFixture.ts packages/core/src/mock/collapseFixture.tspackages/vue/src/test/collapseFixture.ts renamed to packages/core/src/mock/collapseFixture.ts

@@ -1,4 +1,4 @@
-import type { Fixture, ResponseInterceptor } from './fixtureTypes';
+import type { Fixture, ResponseInterceptor } from './fixtureTypes.js';
 
 export async function collapseFixture(
   fixture: Fixture | ResponseInterceptor,

packages/vue/src/test/createFixtureMap.ts …ckages/core/src/mock/createFixtureMap.tspackages/vue/src/test/createFixtureMap.ts renamed to packages/core/src/mock/createFixtureMap.ts packages/vue/src/test/createFixtureMap.ts renamed to packages/core/src/mock/createFixtureMap.ts

@@ -1,4 +1,4 @@
-import type { Fixture, Interceptor } from './fixtureTypes';
+import type { Fixture, Interceptor } from './fixtureTypes.js';
 
 export function createFixtureMap(fixtures: (Fixture | Interceptor)[] = []) {
   const map: Map<string, Fixture> = new Map();

packages/vue/src/test/fixtureTypes.ts packages/core/src/mock/fixtureTypes.tspackages/vue/src/test/fixtureTypes.ts renamed to packages/core/src/mock/fixtureTypes.ts

@@ -1,4 +1,4 @@
-import type { EndpointInterface, ResolveType } from '@data-client/core';
+import type { EndpointInterface, ResolveType } from '@data-client/endpoint';
 
 type Updater = (
   result: any,

packages/core/src/mock/index.ts

@@ -0,0 +1,15 @@
+export { MockController } from './MockController.js';
+export type { MockProps } from './mockTypes.js';
+export type {
+  Fixture,
+  SuccessFixture,
+  ErrorFixture,
+  Interceptor,
+  ResponseInterceptor,
+  FetchInterceptor,
+  FixtureEndpoint,
+  SuccessFixtureEndpoint,
+  ErrorFixtureEndpoint,
+} from './fixtureTypes.js';
+export { collapseFixture } from './collapseFixture.js';
+export { createFixtureMap } from './createFixtureMap.js';

packages/core/src/mock/mockTypes.ts

@@ -0,0 +1,6 @@
+import type { Fixture, Interceptor } from './fixtureTypes.js';
+
+export interface MockProps<T = any> {
+  readonly fixtures?: (Fixture | Interceptor<T>)[];
+  getInitialInterceptorData?: () => T;
+}