✨ add useAsyncTaskLazy and its tests

Author: VitorLuizC

src/hooks/AsyncTask.ts src/AsyncTask.tssrc/hooks/AsyncTask.ts renamed to src/AsyncTask.ts

@@ -1,6 +1,4 @@
-export type AsyncTaskParams = {
-  signal?: AbortSignal;
-};
+import type AsyncTaskParams from './AsyncTaskParams';
 
 type AsyncTask<Result> = (params: AsyncTaskParams) => Promise<Result>;
 

src/AsyncTaskParams.ts

@@ -0,0 +1,5 @@
+type AsyncTaskParams = {
+  signal?: AbortSignal;
+};
+
+export default AsyncTaskParams;

src/hooks/useImmediateAsyncTask.ts

@@ -1,34 +1,33 @@
 import { useLayoutEffect, useRef } from 'react';
-import type AsyncTask from './AsyncTask';
-import useLazyAsyncTask from './useLazyAsyncTask';
+import useLazyAsyncTask from '../useAsyncTaskLazy';
+import type AsyncTask from '../AsyncTask';
 
 export type ImmediateAsyncTask<Result> = Readonly<{
   error: Error | null;
   result: Result | null;
   pending: boolean;
-  executeTask: () => Promise<void>;
 }>;
 
 function useImmediateAsyncTask<Result>(
   task: AsyncTask<Result>,
 ): ImmediateAsyncTask<Result> {
   const firstRenderRef = useRef(true);
 
-  const { error, result, pending, executeTask } = useLazyAsyncTask(task);
+  const { error, result, pending, executeAsyncTask } =
+    useLazyAsyncTask<Result>();
 
   useLayoutEffect(() => {
-    executeTask();
+    executeAsyncTask(task);
 
     return () => {
       firstRenderRef.current = false;
     };
-  }, [executeTask]);
+  }, [task, executeAsyncTask]);
 
   return {
     error,
     result,
     pending: firstRenderRef.current || pending,
-    executeTask,
   };
 }
 

src/hooks/useLazyAsyncTask.ts

@@ -1,6 +1,4 @@
-export { default as useLazyAsyncTask } from './hooks/useLazyAsyncTask';
+export { default as useAsyncTaskLazy } from './useAsyncTaskLazy';
 export { default as useImmediateAsyncTask } from './hooks/useImmediateAsyncTask';
-export { default as useImperativeAsyncTask } from './hooks/useImperativeAsyncTask';
-export type { LazyAsyncTask } from './hooks/useLazyAsyncTask';
+export type { AsyncTaskLazyResult } from './useAsyncTaskLazy';
 export type { ImmediateAsyncTask } from './hooks/useImmediateAsyncTask';
-export type { ImperativeAsyncTask } from './hooks/useImperativeAsyncTask';

src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './useAsyncTaskLazy';
+export type { AsyncTaskLazyResult } from './useAsyncTaskLazy';

src/hooks/AbortError.ts src/useAsyncTaskLazy/AbortError.tssrc/hooks/AbortError.ts renamed to src/useAsyncTaskLazy/AbortError.ts

@@ -0,0 +1,29 @@
+/** @jest-environment jsdom */
+
+import isAbortError from '../isAbortError';
+
+describe('isAbortError | unit tests', () => {
+  describe("when environment doesn't support DOMException", () => {
+    const ORIGINAL_DOM_EXCEPTION = window.DOMException;
+
+    beforeEach(() => {
+      // @ts-expect-error it simulates the absence of 'DOMException'.
+      delete window.DOMException;
+    });
+
+    afterEach(() => {
+      window.DOMException = ORIGINAL_DOM_EXCEPTION;
+    });
+
+    it("doesn't throw an error", () => {
+      expect(isAbortError(new Error('Oops!'))).toBe(false);
+    });
+  });
+
+  it('checks if the error is an AbortError', () => {
+    expect(isAbortError(new DOMException('Oops!', 'AbortError'))).toBe(true);
+    expect(isAbortError(new DOMException('Oops!', 'OtherError'))).toBe(false);
+    expect(isAbortError(new Error('AbortError'))).toBe(false);
+    expect(isAbortError('AbortError')).toBe(false);
+  });
+});

src/useAsyncTaskLazy/index.ts

@@ -0,0 +1,91 @@
+/** @jest-environment jsdom */
+
+import { act, renderHook } from '@testing-library/react';
+import useAsyncTaskLazy from './useAsyncTaskLazy';
+
+describe('useAsyncTaskLazy | integration tests', () => {
+  it('keep track of the pending state', async () => {
+    // eslint-disable-next-line prettier/prettier
+    const { result } = renderHook(useAsyncTaskLazy<void>);
+
+    expect(result.current.pending).toBe(false);
+
+    act(() => {
+      result.current.executeAsyncTask(() => Promise.resolve());
+    });
+
+    expect(result.current.pending).toBe(true);
+
+    await act(() => Promise.resolve());
+
+    expect(result.current.pending).toBe(false);
+  });
+
+  describe('when task finishes', () => {
+    it('returns the result', async () => {
+      // eslint-disable-next-line prettier/prettier
+      const { result } = renderHook(useAsyncTaskLazy<number>);
+
+      expect(result.current.result).toBe(null);
+
+      act(() => {
+        result.current.executeAsyncTask(() => Promise.resolve(10));
+      });
+
+      expect(result.current.result).toBe(null);
+
+      await act(() => Promise.resolve());
+
+      expect(result.current.result).toBe(10);
+    });
+  });
+
+  describe('when task fails', () => {
+    it('returns the error', async () => {
+      // eslint-disable-next-line prettier/prettier
+      const { result } = renderHook(useAsyncTaskLazy<number>);
+
+      expect(result.current.result).toBe(null);
+
+      const error = new Error('Ooops!');
+
+      act(() => {
+        result.current.executeAsyncTask(() => Promise.reject(error));
+      });
+
+      expect(result.current.error).toBe(null);
+
+      await act(() => Promise.resolve());
+
+      expect(result.current.error).toBe(error);
+    });
+  });
+
+  describe('when component unmounts', () => {
+    it('aborts the task', async () => {
+      // eslint-disable-next-line prettier/prettier
+      const { result, unmount } = renderHook(useAsyncTaskLazy<number>);
+
+      const handler = jest.fn();
+
+      act(() => {
+        result.current.executeAsyncTask(({ signal }) => {
+          return new Promise((resolve, reject) => {
+            signal?.addEventListener('abort', () => {
+              handler();
+              reject(new DOMException('Aborted!', 'AbortError'));
+            });
+
+            setTimeout(() => resolve(Math.random()), 100);
+          });
+        });
+      });
+
+      expect(handler).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(handler).toHaveBeenCalled();
+    });
+  });
+});