@websolutespa/bom-mixer-hooks 3.1.0 → 3.1.2

package/src/useHttp/useHttp.test.tsx

@@ -1,197 +1,197 @@
-import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import { getLocalApiUrl } from '@websolutespa/bom-mixer-store';
-import { afterAll, beforeEach, describe, expect, test, vi } from 'vitest';
-import { useHttpDelete, useHttpFetch, useHttpGet, useHttpPatch, useHttpPost, useHttpPut } from './useHttp';
-
-const defaultResponse = {
-  ok: true,
-  status: 200,
-  json: () => Promise.resolve(null),
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function mockFetch(method: string = 'GET', result: any = { message: 'ok' }, overrideResponse: Partial<typeof defaultResponse> = {}, { manual = false } = {}) {
-  const endpoint = '/endpoint';
-  const url = `${getLocalApiUrl(endpoint)}?locale=en&market=ww`;
-  const payload = { data: 'data' };
-  const response = {
-    ...defaultResponse,
-    ...overrideResponse,
-    json: () => Promise.resolve(result),
-  } as Response;
-  // resolve on a later tick, so the loading state is rendered, or when `resolve` is called with `manual`
-  let resolveFetch: () => void = () => { };
-  global.fetch = vi.fn(() =>
-    new Promise<Response>((resolve) => {
-      resolveFetch = () => resolve(response);
-      if (!manual) {
-        setTimeout(resolveFetch, 50);
-      }
-    })
-  );
-  const request: {
-    body?: string;
-    headers: { [key: string]: string },
-    method: string;
-  } = {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method,
-  };
-  if (['POST', 'PATCH', 'PUT'].includes(method)) {
-    request.body = JSON.stringify(payload);
-  }
-  return { endpoint, url, payload, result, request, response, resolve: () => resolveFetch() };
-}
-
-describe('useHttp', () => {
-  const ENV = process.env;
-  const FETCH = global.fetch;
-
-  beforeEach(() => {
-    vi.resetModules();
-    vi.resetAllMocks();
-    vi.spyOn(console, 'error').mockImplementation(() => { });
-    vi.spyOn(console, 'log').mockImplementation(() => { });
-    process.env = {
-      MIXER_SECRET: 'MIXER_SECRET_32_CHARS_LONG_12345',
-      NEXT_PUBLIC_API: '/api',
-      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
-      NEXT_PUBLIC_URL: 'http://localhost:3000',
-      NODE_ENV: 'test',
-      STORE_API_KEY: 'STORE_API_KEY',
-      STORE_API: '/bowl/api',
-      STORE_STRATEGY: 'mock',
-      STORE_URL: 'http://localhost:4000',
-    };
-  });
-
-  afterAll(() => {
-    process.env = ENV;
-    global.fetch = FETCH;
-  });
-
-  /*
-  !!! todo
-  test('useHttpFetch expect loading to be true', async () => {
-    const mock = mockFetch();
-    const { result } = renderHook(() => useHttpFetch(mock.url));
-    await waitFor(() => expect(fetch).toBeCalled());
-    expect(fetch).toHaveBeenCalledTimes(1);
-    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
-    const [response, loading, error, setError] = result.current;
-    expect(loading).toBe(true);
-  });
-  */
-
-  test('useHttpFetch expect result ok', async () => {
-    const mock = mockFetch('GET', undefined, undefined, { manual: true });
-    const Wrapper = () => {
-      const [response, loading, error, setError] = useHttpFetch(mock.url);
-      return (
-        <>
-          {loading && <div data-testid="loading">loading</div>}
-          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
-          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
-        </>
-      );
-    };
-    const { findByTestId } = render(<Wrapper />);
-    const loading = await findByTestId('loading');
-    expect(loading).toHaveTextContent('loading');
-    await waitFor(() => expect(fetch).toBeCalled());
-    mock.resolve();
-    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
-    expect(fetch).toHaveBeenCalledTimes(1);
-    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
-    const result = await waitFor(() => screen.getByTestId('result'));
-    expect(result).toHaveTextContent(JSON.stringify(mock.result));
-  });
-
-  /*
-  !!! todo
-  test('useHttpFetch expect error', async () => {
-    const mock = mockFetch(undefined, undefined, { ok: false, status: 500 });
-    const Wrapper = () => {
-      const [response, loading, error, setError] = useHttpFetch(mock.url);
-      return (
-        <>
-          {loading && <div data-testid="loading">loading</div>}
-          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
-          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
-        </>
-      );
-    };
-    const { findByTestId } = render(<Wrapper />);
-    const loading = await findByTestId('loading');
-    expect(loading).toHaveTextContent('loading');
-    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
-    await waitFor(() => expect(fetch).toBeCalled());
-    expect(fetch).toHaveBeenCalledTimes(1);
-    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
-    const error = await waitFor(() => screen.getByTestId('error'));
-    expect(error).toHaveTextContent('{"ok":false,"status":500}');
-  });
-  */
-
-  test('useHttpGet expect result ok', TestMethod('GET'));
-
-  test('useHttpPost expect result ok', TestMethod('POST'));
-
-  test('useHttpPatch expect result ok', TestMethod('PATCH'));
-
-  test('useHttpPut expect result ok', TestMethod('PUT'));
-
-  test('useHttpDelete expect result ok', TestMethod('DELETE'));
-
-  function TestMethod(method?: string) {
-    const useHook = (mock: ReturnType<typeof mockFetch>) => {
-      switch (method) {
-        case 'GET':
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpGet(mock.url);
-        case 'POST':
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpPost(mock.url, mock.payload);
-        case 'PATCH':
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpPatch(mock.url, mock.payload);
-        case 'PUT':
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpPut(mock.url, mock.payload);
-        case 'DELETE':
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpDelete(mock.url);
-        default:
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          return useHttpFetch(mock.url);
-      }
-    };
-    return async () => {
-      const mock = mockFetch(method, undefined, undefined, { manual: true });
-      const Wrapper = () => {
-        const [response, loading, error, setError] = useHook(mock);
-        return (
-          <>
-            {loading && <div data-testid="loading">loading</div>}
-            {response && <div data-testid="result">{JSON.stringify(response)}</div>}
-            {error && <div data-testid="error">{JSON.stringify(error)}</div>}
-          </>
-        );
-      };
-      const { findByTestId } = render(<Wrapper />);
-      const loading = await findByTestId('loading');
-      expect(loading).toHaveTextContent('loading');
-      await waitFor(() => expect(fetch).toBeCalled());
-      mock.resolve();
-      await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
-      expect(fetch).toHaveBeenCalledTimes(1);
-      expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
-      const result = await waitFor(() => screen.getByTestId('result'));
-      expect(result).toHaveTextContent(JSON.stringify(mock.result));
-    };
-  }
-
-});
-
+import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { getLocalApiUrl } from '@websolutespa/bom-mixer-store';
+import { afterAll, beforeEach, describe, expect, test, vi } from 'vitest';
+import { useHttpDelete, useHttpFetch, useHttpGet, useHttpPatch, useHttpPost, useHttpPut } from './useHttp';
+
+const defaultResponse = {
+  ok: true,
+  status: 200,
+  json: () => Promise.resolve(null),
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function mockFetch(method: string = 'GET', result: any = { message: 'ok' }, overrideResponse: Partial<typeof defaultResponse> = {}, { manual = false } = {}) {
+  const endpoint = '/endpoint';
+  const url = `${getLocalApiUrl(endpoint)}?locale=en&market=ww`;
+  const payload = { data: 'data' };
+  const response = {
+    ...defaultResponse,
+    ...overrideResponse,
+    json: () => Promise.resolve(result),
+  } as Response;
+  // resolve on a later tick, so the loading state is rendered, or when `resolve` is called with `manual`
+  let resolveFetch: () => void = () => { };
+  global.fetch = vi.fn(() =>
+    new Promise<Response>((resolve) => {
+      resolveFetch = () => resolve(response);
+      if (!manual) {
+        setTimeout(resolveFetch, 50);
+      }
+    })
+  );
+  const request: {
+    body?: string;
+    headers: { [key: string]: string },
+    method: string;
+  } = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method,
+  };
+  if (['POST', 'PATCH', 'PUT'].includes(method)) {
+    request.body = JSON.stringify(payload);
+  }
+  return { endpoint, url, payload, result, request, response, resolve: () => resolveFetch() };
+}
+
+describe('useHttp', () => {
+  const ENV = process.env;
+  const FETCH = global.fetch;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+    vi.spyOn(console, 'error').mockImplementation(() => { });
+    vi.spyOn(console, 'log').mockImplementation(() => { });
+    process.env = {
+      MIXER_SECRET: 'MIXER_SECRET_32_CHARS_LONG_12345',
+      NEXT_PUBLIC_API: '/api',
+      NEXT_PUBLIC_MOCK_FALLBACK_URL: 'http://localhost:3000',
+      NEXT_PUBLIC_URL: 'http://localhost:3000',
+      NODE_ENV: 'test',
+      STORE_API_KEY: 'STORE_API_KEY',
+      STORE_API: '/bowl/api',
+      STORE_STRATEGY: 'mock',
+      STORE_URL: 'http://localhost:4000',
+    };
+  });
+
+  afterAll(() => {
+    process.env = ENV;
+    global.fetch = FETCH;
+  });
+
+  /*
+  !!! todo
+  test('useHttpFetch expect loading to be true', async () => {
+    const mock = mockFetch();
+    const { result } = renderHook(() => useHttpFetch(mock.url));
+    await waitFor(() => expect(fetch).toBeCalled());
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const [response, loading, error, setError] = result.current;
+    expect(loading).toBe(true);
+  });
+  */
+
+  test('useHttpFetch expect result ok', async () => {
+    const mock = mockFetch('GET', undefined, undefined, { manual: true });
+    const Wrapper = () => {
+      const [response, loading, error, setError] = useHttpFetch(mock.url);
+      return (
+        <>
+          {loading && <div data-testid="loading">loading</div>}
+          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+        </>
+      );
+    };
+    const { findByTestId } = render(<Wrapper />);
+    const loading = await findByTestId('loading');
+    expect(loading).toHaveTextContent('loading');
+    await waitFor(() => expect(fetch).toBeCalled());
+    mock.resolve();
+    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const result = await waitFor(() => screen.getByTestId('result'));
+    expect(result).toHaveTextContent(JSON.stringify(mock.result));
+  });
+
+  /*
+  !!! todo
+  test('useHttpFetch expect error', async () => {
+    const mock = mockFetch(undefined, undefined, { ok: false, status: 500 });
+    const Wrapper = () => {
+      const [response, loading, error, setError] = useHttpFetch(mock.url);
+      return (
+        <>
+          {loading && <div data-testid="loading">loading</div>}
+          {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+          {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+        </>
+      );
+    };
+    const { findByTestId } = render(<Wrapper />);
+    const loading = await findByTestId('loading');
+    expect(loading).toHaveTextContent('loading');
+    await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+    await waitFor(() => expect(fetch).toBeCalled());
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+    const error = await waitFor(() => screen.getByTestId('error'));
+    expect(error).toHaveTextContent('{"ok":false,"status":500}');
+  });
+  */
+
+  test('useHttpGet expect result ok', TestMethod('GET'));
+
+  test('useHttpPost expect result ok', TestMethod('POST'));
+
+  test('useHttpPatch expect result ok', TestMethod('PATCH'));
+
+  test('useHttpPut expect result ok', TestMethod('PUT'));
+
+  test('useHttpDelete expect result ok', TestMethod('DELETE'));
+
+  function TestMethod(method?: string) {
+    const useHook = (mock: ReturnType<typeof mockFetch>) => {
+      switch (method) {
+        case 'GET':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpGet(mock.url);
+        case 'POST':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPost(mock.url, mock.payload);
+        case 'PATCH':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPatch(mock.url, mock.payload);
+        case 'PUT':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpPut(mock.url, mock.payload);
+        case 'DELETE':
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpDelete(mock.url);
+        default:
+          // eslint-disable-next-line react-hooks/rules-of-hooks
+          return useHttpFetch(mock.url);
+      }
+    };
+    return async () => {
+      const mock = mockFetch(method, undefined, undefined, { manual: true });
+      const Wrapper = () => {
+        const [response, loading, error, setError] = useHook(mock);
+        return (
+          <>
+            {loading && <div data-testid="loading">loading</div>}
+            {response && <div data-testid="result">{JSON.stringify(response)}</div>}
+            {error && <div data-testid="error">{JSON.stringify(error)}</div>}
+          </>
+        );
+      };
+      const { findByTestId } = render(<Wrapper />);
+      const loading = await findByTestId('loading');
+      expect(loading).toHaveTextContent('loading');
+      await waitFor(() => expect(fetch).toBeCalled());
+      mock.resolve();
+      await waitForElementToBeRemoved(() => screen.getByTestId('loading'));
+      expect(fetch).toHaveBeenCalledTimes(1);
+      expect(fetch).toHaveBeenCalledWith(mock.url, mock.request);
+      const result = await waitFor(() => screen.getByTestId('result'));
+      expect(result).toHaveTextContent(JSON.stringify(mock.result));
+    };
+  }
+
+});
+

package/src/usePagination/usePagination.test.ts

@@ -1,79 +1,79 @@
-import { act, renderHook } from '@testing-library/react';
-import { describe, expect, test } from 'vitest';
-import { usePagination } from './usePagination';
-
-describe('usePagination', () => {
-
-  test('should paginate items', () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items));
-    expect(result.current.page).toEqual(1);
-    expect(result.current.pages).toEqual(9);
-    expect(result.current.total).toEqual(100);
-    expect(result.current.items.length).toEqual(12);
-    expect(result.current.items[0]).toEqual(1);
-  });
-
-  test('should paginate items with params', () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items, {
-      page: 2,
-      perPage: 10,
-    }));
-    expect(result.current.page).toEqual(2);
-    expect(result.current.pages).toEqual(10);
-    expect(result.current.total).toEqual(100);
-    expect(result.current.items.length).toEqual(10);
-    expect(result.current.items[0]).toEqual(11);
-  });
-
-  test('should call nextPage and paginate items', async () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items, {
-      page: 2,
-      perPage: 10,
-    }));
-    act(() => { result.current.goToNextPage(); });
-    expect(result.current.page).toEqual(3);
-    expect(result.current.items.length).toEqual(10);
-    expect(result.current.items[0]).toEqual(21);
-  });
-
-  test('should call previousPage and paginate items', async () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items, {
-      page: 2,
-      perPage: 10,
-    }));
-    act(() => { result.current.goToPreviousPage(); });
-    expect(result.current.page).toEqual(1);
-    expect(result.current.items.length).toEqual(10);
-    expect(result.current.items[0]).toEqual(1);
-  });
-
-  test('should call goToPage and paginate items', async () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items, {
-      page: 2,
-      perPage: 10,
-    }));
-    act(() => { result.current.goToPage(4); });
-    expect(result.current.page).toEqual(4);
-    expect(result.current.items.length).toEqual(10);
-    expect(result.current.items[0]).toEqual(31);
-  });
-
-  test('should call setPerPage and paginate items', async () => {
-    const items = new Array(100).fill(0).map((_, i) => i + 1);
-    const { result } = renderHook(() => usePagination(items, {
-      page: 2,
-      perPage: 10,
-    }));
-    act(() => { result.current.setPerPage(20); });
-    expect(result.current.pages).toEqual(5);
-    expect(result.current.page).toEqual(2);
-    expect(result.current.items.length).toEqual(20);
-    expect(result.current.items[0]).toEqual(21);
-  });
-
-});
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { usePagination } from './usePagination';
+
+describe('usePagination', () => {
+
+  test('should paginate items', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items));
+    expect(result.current.page).toEqual(1);
+    expect(result.current.pages).toEqual(9);
+    expect(result.current.total).toEqual(100);
+    expect(result.current.items.length).toEqual(12);
+    expect(result.current.items[0]).toEqual(1);
+  });
+
+  test('should paginate items with params', () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, {
+      page: 2,
+      perPage: 10,
+    }));
+    expect(result.current.page).toEqual(2);
+    expect(result.current.pages).toEqual(10);
+    expect(result.current.total).toEqual(100);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(11);
+  });
+
+  test('should call nextPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, {
+      page: 2,
+      perPage: 10,
+    }));
+    act(() => { result.current.goToNextPage(); });
+    expect(result.current.page).toEqual(3);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(21);
+  });
+
+  test('should call previousPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, {
+      page: 2,
+      perPage: 10,
+    }));
+    act(() => { result.current.goToPreviousPage(); });
+    expect(result.current.page).toEqual(1);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(1);
+  });
+
+  test('should call goToPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, {
+      page: 2,
+      perPage: 10,
+    }));
+    act(() => { result.current.goToPage(4); });
+    expect(result.current.page).toEqual(4);
+    expect(result.current.items.length).toEqual(10);
+    expect(result.current.items[0]).toEqual(31);
+  });
+
+  test('should call setPerPage and paginate items', async () => {
+    const items = new Array(100).fill(0).map((_, i) => i + 1);
+    const { result } = renderHook(() => usePagination(items, {
+      page: 2,
+      perPage: 10,
+    }));
+    act(() => { result.current.setPerPage(20); });
+    expect(result.current.pages).toEqual(5);
+    expect(result.current.page).toEqual(2);
+    expect(result.current.items.length).toEqual(20);
+    expect(result.current.items[0]).toEqual(21);
+  });
+
+});

package/src/usePaginationLegacy/usePaginationLegacy.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test } from 'vitest';
 // readme https://testing-library.com/
 import { act, renderHook } from '@testing-library/react';
 import { usePaginationLegacy } from './usePaginationLegacy';