test: add couple tests for MobxMutation

Author: js2me

src/mobx-mutation.test.ts

@@ -0,0 +1,96 @@
+import { DefaultError, QueryClient } from '@tanstack/query-core';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MobxMutation } from './mobx-mutation';
+import { MobxMutationConfig } from './mobx-mutation.types';
+
+class MobxMutationMock<
+  TData = unknown,
+  TVariables = void,
+  TError = DefaultError,
+  TContext = unknown,
+> extends MobxMutation<TData, TVariables, TError, TContext> {
+  spies = {
+    mutationFn: null as unknown as ReturnType<typeof vi.fn>,
+    dispose: vi.fn(),
+    reset: vi.fn(),
+    onDone: vi.fn(),
+    onError: vi.fn(),
+  };
+
+  constructor(
+    options: Omit<
+      MobxMutationConfig<TData, TVariables, TError, TContext>,
+      'queryClient'
+    >,
+  ) {
+    const mutationFn = vi.fn((...args: any[]) => {
+      // @ts-ignore
+      const result = options.mutationFn?.(...args);
+      return result;
+    });
+    super({
+      ...options,
+      queryClient: new QueryClient({}),
+      // @ts-ignore
+      mutationFn,
+    });
+
+    this.spies.mutationFn = mutationFn as any;
+
+    this.onDone(this.spies.onDone);
+    this.onError(this.spies.onError);
+  }
+
+  reset(): void {
+    const result = super.reset();
+    this.spies.reset.mockReturnValue(result)();
+    return result;
+  }
+
+  dispose(): void {
+    const result = super.dispose();
+    this.spies.dispose.mockReturnValue(result)();
+    return result;
+  }
+}
+
+describe('MobxMutation', () => {
+  it('should call mutationFn', async () => {
+    const mobxMutation = new MobxMutationMock({
+      mutationKey: ['test'],
+      mutationFn: async () => {},
+    });
+
+    await mobxMutation.mutate();
+
+    expect(mobxMutation.spies.mutationFn).toHaveBeenCalled();
+  });
+
+  it('should have result with finished data', async () => {
+    const mobxMutation = new MobxMutationMock({
+      mutationKey: ['test'],
+      mutationFn: async () => {
+        return 'OK';
+      },
+    });
+
+    await mobxMutation.mutate();
+
+    expect(mobxMutation.result).toStrictEqual({
+      ...mobxMutation.result,
+      context: undefined,
+      data: 'OK',
+      error: null,
+      failureCount: 0,
+      failureReason: null,
+      isError: false,
+      isIdle: false,
+      isPaused: false,
+      isPending: false,
+      isSuccess: true,
+      status: 'success',
+      variables: undefined,
+    });
+  });
+});

src/mobx-mutation.ts

@@ -42,7 +42,7 @@ export class MobxMutation<
       disposer.add(() => this.dispose());
     }
 
-    observable.ref(this, 'result');
+    observable.deep(this, 'result');
     action.bound(this, 'updateResult');
 
     makeObservable(this);
@@ -56,17 +56,17 @@ export class MobxMutation<
       TContext
     >(queryClient, this.mutationOptions);
 
-    this.updateResult();
+    this.updateResult(this.mutationObserver.getCurrentResult());
 
     const subscription = this.mutationObserver.subscribe(this.updateResult);
 
-    this.abortController.signal.addEventListener('abort', subscription);
+    this.abortController.signal.addEventListener('abort', () => {
+      subscription();
 
-    if (resetOnDispose) {
-      this.abortController.signal.addEventListener('abort', () => {
+      if (resetOnDispose) {
         this.reset();
-      });
-    }
+      }
+    });
 
     onInit?.(this);
   }
@@ -76,19 +76,15 @@ export class MobxMutation<
     options?: MutationOptions<TData, TError, TVariables, TContext>,
   ) {
     await this.mutationObserver.mutate(variables, options);
-
     return this.result;
   }
 
-  reset() {
-    this.mutationObserver.reset();
-  }
-
   /**
    * Modify this result so it matches the tanstack query result.
    */
-  private updateResult() {
-    const nextResult = this.mutationObserver.getCurrentResult();
+  private updateResult(
+    nextResult: MutationObserverResult<TData, TError, TVariables, TContext>,
+  ) {
     this.result = nextResult || {};
   }
 
@@ -120,6 +116,10 @@ export class MobxMutation<
     );
   }
 
+  reset() {
+    this.mutationObserver.reset();
+  }
+
   dispose() {
     this.abortController.abort();
   }