@availity/hooks 5.2.0 → 6.0.1

package/tests/useCurrentUser.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { USER_A2 } from '@availity/mock/src/routes';
+import { useCurrentUser } from '../src/index';
+import renderWithClient from './util';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = () => {
+  const { data, error, status } = useCurrentUser({ gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('useCurrentUser', () => {
+  test('should set error on rejected promise', async () => {
+    server.use(http.get(USER_A2, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('should return user', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(/aka123456789/)).toBeDefined();
+    });
+    await waitFor(() => {
+      expect(getByText(/Sanchez/)).toBeDefined();
+    });
+  });
+});

package/tests/useEffectAsync.test.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { render, waitFor, act, cleanup } from '@testing-library/react';
+import { useEffectAsync } from '../src/index';
+
+afterEach(cleanup);
+
+const Component = ({ asyncFunc }: { asyncFunc: () => Promise<string> }) => {
+  const [state, setState] = useState('Hello');
+
+  useEffectAsync(async () => {
+    const newState = await asyncFunc();
+
+    act(() => setState(newState));
+  }, []);
+
+  return <div data-testid="effect-test">{state}</div>;
+};
+const asyncFunc = () => Promise.resolve('World');
+
+describe('useEffectAsync', () => {
+  test('should render "Hello" then "World"', async () => {
+    const { getByTestId } = render(<Component asyncFunc={asyncFunc} />);
+
+    expect(getByTestId('effect-test').textContent).toEqual('Hello');
+
+    await waitFor(() => getByTestId('effect-test'));
+
+    expect(getByTestId('effect-test').textContent).toEqual('World');
+  });
+});

package/tests/useMount.test.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { useMount } from '../src/index';
+
+afterEach(cleanup);
+
+const Component = () => {
+  const [state, setState] = useState<string | undefined>();
+
+  useMount(() => {
+    setState('test');
+  });
+
+  return <p data-testid="mount-test">{state}</p>;
+};
+
+describe('useMount', () => {
+  test('should render "test"', () => {
+    const { getByTestId } = render(<Component />);
+
+    expect(getByTestId('mount-test').textContent).toEqual('test');
+  });
+});

package/tests/useOrganizations.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { USER_A2 } from '@availity/mock/src/routes';
+import renderWithClient from './util';
+import { useOrganizations } from '../src/index';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = () => {
+  const { data, error, status } = useOrganizations({}, { gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data?.data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('useOrganizations', () => {
+  test('should return an error', async () => {
+    server.use(http.get(USER_A2, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('should return organizations', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(/Techmania/)).toBeDefined();
+    });
+  });
+});

package/tests/usePermissions.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { PERMISSIONS } from '@availity/mock/src/routes';
+import renderWithClient from './util';
+import { usePermissions } from '../src/index';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = () => {
+  const { data, error, status } = usePermissions({}, { gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data?.data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('usePermissions', () => {
+  test('should return an error', async () => {
+    server.use(http.get(PERMISSIONS, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('should return permissions', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(/"id":"123"/)).toBeDefined();
+    });
+    await waitFor(() => {
+      expect(getByText(/Do the thing/)).toBeDefined();
+    });
+  });
+});

package/tests/useProviders.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { PROVIDERS } from '@availity/mock/src/routes';
+import renderWithClient from './util';
+import { useProviders } from '../src/index';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = () => {
+  const { data, error, status } = useProviders({}, { gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data?.data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('useProviders', () => {
+  test('should return an error', async () => {
+    server.use(http.get(PROVIDERS, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('should return providers', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(/BITREX/)).toBeDefined();
+    });
+  });
+});

package/tests/useStash.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { STASH } from '@availity/mock/src/routes';
+import { useStash } from '../src';
+import renderWithClient from './util';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = ({ sessionId }: { sessionId: string }) => {
+  const { data, error, status } = useStash(sessionId, { gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('useStash', () => {
+  test('should return an error', async () => {
+    server.use(http.get(STASH, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="test-session-id" />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('should return stash data', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="test-session-id" />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(/"key":"value"/)).toBeDefined();
+    });
+    await waitFor(() => {
+      expect(getByText(/"nested":\{"foo":"bar"\}/)).toBeDefined();
+    });
+  });
+
+  test('should not fetch when sessionId is empty', () => {
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="" />);
+
+    expect(getByText('Status: pending')).toBeDefined();
+  });
+});

package/tests/useTimeout.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { useTimeout } from '../src/index';
+
+const Component = () => {
+  const timeout = useTimeout(1000);
+
+  return <p data-testid="timeout-test">{timeout ? 'True' : 'False'}</p>;
+};
+
+vi.useFakeTimers();
+
+describe('useTimeout', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('should render "False"', () => {
+    const { getByTestId } = render(<Component />);
+
+    expect(getByTestId('timeout-test').textContent).toEqual('False');
+  });
+
+  test.todo('should render "True"', async () => {
+    const { getByTestId } = render(<Component />);
+
+    vi.runAllTimers();
+
+    await waitFor(() => {
+      expect(getByTestId('timeout-test').textContent).toEqual('True');
+    });
+  });
+});

package/tests/useToggle.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { useToggle } from '../src/index';
+
+afterEach(cleanup);
+
+const Component = ({ initialToggle = false }: { initialToggle?: boolean }) => {
+  const [isToggled, toggle] = useToggle(initialToggle);
+
+  return (
+    <button type="button" data-testid="toggle-test" onClick={toggle}>
+      {isToggled ? 'Hello' : 'World'}
+    </button>
+  );
+};
+
+describe('useToggle', () => {
+  test('should render "Hello"', () => {
+    const { getByTestId } = render(<Component />);
+
+    expect(getByTestId('toggle-test').textContent).toEqual('World');
+  });
+
+  test('should render "World"', () => {
+    const { getByTestId } = render(<Component initialToggle />);
+
+    expect(getByTestId('toggle-test').textContent).toEqual('Hello');
+  });
+
+  test('should toggle the state when clicked', () => {
+    const { getByTestId } = render(<Component />);
+
+    const button = getByTestId('toggle-test');
+
+    expect(button.textContent).toEqual('World');
+
+    fireEvent.click(button);
+
+    expect(getByTestId('toggle-test').textContent).toEqual('Hello');
+  });
+});

package/tests/useUpdateNav.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MemoryRouter, useNavigate, Routes, Route } from 'react-router-dom';
+import avMessageMock from '@availity/message-core';
+
+import useUpdateNav from '../src/useUpdateNav';
+
+vi.mock('@availity/message-core');
+
+const Component = () => {
+  const navigate = useNavigate();
+
+  useUpdateNav();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        navigate('/test');
+      }}
+    >
+      Click
+    </button>
+  );
+};
+
+describe('useUpdateNav', () => {
+  test.todo('calls avMessage on location change', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>n        <Routes>
+          <Route path="/" element={<Component />} />
+          <Route path="/test" element={<div>Example</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    const button = screen.getByText('Click');
+
+    fireEvent.click(button);
+
+    expect(avMessageMock.send).toHaveBeenCalledWith({
+      event: 'navChange',
+      url: 'http://localhost:3000/',
+    });
+  });
+});

package/tests/useWindowDimensions.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, waitFor, act, fireEvent } from '@testing-library/react';
+import { useWindowDimensions } from '../src/index';
+
+const Component = () => {
+  const { height, width } = useWindowDimensions();
+  return (
+    <div data-testid="window_dimensions">
+      <span data-testid="window_height">{height}</span>
+      <span data-testid="window_width">{width}</span>
+    </div>
+  );
+};
+
+describe('useWindowDimensions', () => {
+  test('should show window dimensions', async () => {
+    const { getByTestId } = render(<Component />);
+
+    const element = getByTestId('window_dimensions');
+    expect(element).not.toBeNull();
+
+    act(() => {
+      window.innerWidth = 500;
+      window.innerHeight = 500;
+
+      fireEvent(window, new Event('resize'));
+    });
+
+    const heightEl = getByTestId('window_height');
+    const widthEl = getByTestId('window_width');
+
+    await waitFor(() => {
+      expect(heightEl.textContent).toBe('500');
+      expect(widthEl.textContent).toBe('500');
+    });
+  });
+});

package/tests/util.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+export default function renderWithClient(client: QueryClient, ui: React.ReactElement) {
+  return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>);
+}

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineProject } from 'vitest/config';
+
+export default defineProject({
+  test: {
+    name: 'hooks',
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['../../vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx,js,jsx}', 'tests/**/*.test.{ts,tsx,js,jsx}'],
+    env: { TZ: 'UTC' },
+    server: {
+      deps: {
+        inline: [/lodash/, /@availity\/yup/],
+      },
+    },
+  },
+});

package/index.d.ts

@@ -1,12 +0,0 @@
-export { default as useEffectAsync } from './types/useEffectAsync';
-export { default as useMount } from './types/useMount';
-export { default as useTimeout } from './types/useTimeout';
-export { default as useToggle } from './types/useToggle';
-export { default as useCurrentRegion } from './types/useCurrentRegion';
-export { default as useCurrentUser } from './types/useCurrentUser';
-export { default as useProviders } from './types/useProviders';
-export { default as usePermissions } from './types/usePermissions';
-export { default as useOrganizations } from './types/useOrganizations';
-export { default as useUpdateNav } from './types/useUpdateNav';
-export { default as useWindowDimensions } from './types/useWindowDimensions';
-export { default as useStash } from './types/useStash';

package/index.js

@@ -1,12 +0,0 @@
-export { default as useEffectAsync } from './src/useEffectAsync';
-export { default as useMount } from './src/useMount';
-export { default as useTimeout } from './src/useTimeout';
-export { default as useToggle } from './src/useToggle';
-export { default as useCurrentRegion } from './src/useCurrentRegion';
-export { default as useCurrentUser } from './src/useCurrentUser';
-export { default as useProviders } from './src/useProviders';
-export { default as usePermissions } from './src/usePermissions';
-export { default as useOrganizations } from './src/useOrganizations';
-export { default as useUpdateNav } from './src/useUpdateNav';
-export { default as useWindowDimensions } from './src/useWindowDimensions';
-export { default as useStash } from './src/useStash';

package/jest.config.js

@@ -1,7 +0,0 @@
-const global = require('../../jest/global-config');
-
-module.exports = {
-  ...global,
-  displayName: 'hooks',
-  coverageDirectory: '../../coverage/hooks',
-};

package/src/useCurrentRegion.js

@@ -1,15 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { avRegionsApi } from '@availity/api-axios';
-
-async function fetchRegion() {
-  const response = await avRegionsApi.getCurrentRegion();
-
-  return {
-    code: response?.data?.regions?.[0]?.id || '',
-    value: response?.data?.regions?.[0]?.value || '',
-  };
-}
-
-export default function useCurrentRegion(options) {
-  return useQuery(['region'], fetchRegion, options);
-}

package/src/useCurrentUser.js

@@ -1,8 +0,0 @@
-import { avUserApi } from '@availity/api-axios';
-import { useQuery } from '@tanstack/react-query';
-
-const fetchUser = async () => avUserApi.me();
-
-export default function useCurrentUser(options) {
-  return useQuery(['user'], fetchUser, options);
-}

package/src/useEffectAsync.js

@@ -1,8 +0,0 @@
-import { useEffect } from 'react';
-
-export default function useEffectAsync(effect, inputs) {
-  useEffect(() => {
-    effect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, inputs);
-}

package/src/useMount.js

@@ -1,6 +0,0 @@
-import { useEffect } from 'react';
-
-export default function useMount(effect) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(effect, []);
-}

package/src/useOrganizations.js

@@ -1,8 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { avOrganizationsApi } from '@availity/api-axios';
-
-const fetchOrganization = async (config) => avOrganizationsApi.getOrganizations(config);
-
-export default function useOrganization(config, options) {
-  return useQuery(['organizations', config], () => fetchOrganization(config), options);
-}

package/src/usePermissions.js

@@ -1,8 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { avPermissionsApi } from '@availity/api-axios';
-
-const fetchPermissions = async (config) => avPermissionsApi.getPermissions(config);
-
-export default function usePermissions(config, options) {
-  return useQuery(['permissions', config], () => fetchPermissions(config), options);
-}

package/src/useProviders.js

@@ -1,8 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { avProvidersApi } from '@availity/api-axios';
-
-const fetchProviders = async (config) => avProvidersApi.getProviders(config.customerId, config);
-
-export default function useProviders(config, options) {
-  return useQuery(['providers', config], () => fetchProviders(config), options);
-}

package/src/useStash.js

@@ -1,14 +0,0 @@
-import { avStashApi } from '@availity/api-axios';
-import { useQuery } from '@tanstack/react-query';
-
-const fetchStash = async (sessionId) => {
-  const response = await avStashApi.get(sessionId);
-  return response?.data;
-};
-
-export default function useStash(sessionId, options) {
-  return useQuery(['stash', sessionId], () => fetchStash(sessionId), {
-    enabled: !!sessionId,
-    ...options,
-  });
-}

package/tests/util.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { QueryClientProvider } from '@tanstack/react-query';
-
-// Taken from https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/utils.tsx#L6
-export default function renderWithClient(client, ui) {
-  return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>);
-}

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
-    "allowJs": true
-  },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}

package/types/aries.d.ts

@@ -1,12 +0,0 @@
-export interface AriesHookBase {
-  data: {
-    totalCount: number;
-    count: number;
-    offSet: number;
-    links: {
-      next: { href: string };
-      last: { href: string };
-      self: { href: string };
-    };
-  };
-}