@availity/hooks 5.2.0 → 6.0.0

package/tests/useProviders.test.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avProvidersApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import renderWithClient from './util';
+import { useProviders } from '../src/index';
+
+vi.mock('@availity/api-axios');
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ log }) => {
+  // Mirror testing methods from react-query instead of relying on timing or booleans
+  // https://github.com/tannerlinsley/react-query/blob/master/src/react/tests/useQuery.test.tsx
+  const state = useProviders({}, { gcTime: 0, retry: false });
+
+  // not directly used in assertions here, but useful for debugging purposes
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  log: PropTypes.func,
+};
+
+describe('useProviders', () => {
+  test('should return an error', async () => {
+    avProvidersApi.getProviders.mockRejectedValueOnce('An error occurred');
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should return providers', async () => {
+    avProvidersApi.getProviders.mockResolvedValueOnce({
+      data: {
+        providers: [
+          {
+            id: 'test',
+            lastName: 'test',
+            firstName: 'test',
+            middleName: 'test',
+            uiDisplayName: 'test',
+          },
+        ],
+      },
+    });
+
+    const { getByText } = renderWithClient(queryClient, <Component log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(
+        `Data: ${JSON.stringify({
+          data: {
+            providers: [
+              {
+                id: 'test',
+                lastName: 'test',
+                firstName: 'test',
+                middleName: 'test',
+                uiDisplayName: 'test',
+              },
+            ],
+          },
+        })}`
+      );
+      expect(el).toBeDefined();
+    });
+  });
+});

package/tests/useStash.test.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { waitFor, cleanup } from '@testing-library/react';
+import { avStashApi } from '@availity/api-axios';
+import { QueryClient } from '@tanstack/react-query';
+import { vi, describe, test, expect, beforeEach, afterEach } from 'vitest';
+import { useStash } from '../src';
+import renderWithClient from './util';
+
+vi.mock('@availity/api-axios', () => ({
+  avStashApi: { get: vi.fn() },
+}));
+
+let queryStates = [];
+beforeEach(() => {
+  queryStates = [];
+});
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+  queryClient.clear();
+  queryStates = [];
+});
+
+const pushState = (state) => {
+  queryStates.push(state);
+};
+
+const Component = ({ sessionId, log }) => {
+  const state = useStash(sessionId, { gcTime: 0, retry: false });
+
+  if (log) log(state);
+
+  const { data, error, status } = state;
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error}</h1>
+    </div>
+  );
+};
+
+Component.propTypes = {
+  sessionId: PropTypes.string,
+  log: PropTypes.func,
+};
+
+describe('useStash', () => {
+  test('should return an error', async () => {
+    avStashApi.get.mockRejectedValueOnce('An error occurred');
+
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="test-session-id" log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText('Status: error');
+      expect(el).toBeDefined();
+    });
+    await waitFor(() => {
+      const el = getByText('Error: An error occurred');
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should return stash data', async () => {
+    const mockData = { key: 'value', nested: { foo: 'bar' } };
+    avStashApi.get.mockResolvedValueOnce({ data: mockData });
+
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="test-session-id" log={pushState} />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      const el = getByText(`Data: ${JSON.stringify(mockData)}`);
+      expect(el).toBeDefined();
+    });
+  });
+
+  test('should not fetch when sessionId is empty', () => {
+    const { getByText } = renderWithClient(queryClient, <Component sessionId="" log={pushState} />);
+
+    getByText('Status: pending');
+    expect(avStashApi.get).not.toHaveBeenCalled();
+  });
+});

package/tests/useTimeout.test.jsx

@@ -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.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent, cleanup } from '@testing-library/react';
+import { useToggle } from '../src/index';
+
+afterEach(cleanup);
+
+// eslint-disable-next-line react/prop-types
+const Component = ({ initialToggle = false }) => {
+  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.jsx

@@ -0,0 +1,46 @@
+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={['/']}>
+        <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.jsx

@@ -0,0 +1,38 @@
+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/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/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/useCurrentRegion.d.ts

@@ -1,12 +0,0 @@
-import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-
-export type CurrentRegion = {
-  code: string;
-  value: string;
-};
-
-declare function useCurrentRegion(
-  options?: UseQueryOptions<CurrentRegion, unknown>
-): UseQueryResult<CurrentRegion, unknown>;
-
-export default useCurrentRegion;

package/types/useCurrentUser.d.ts

@@ -1,21 +0,0 @@
-import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-
-export type CurrentUser = {
-  akaname: string;
-  createDate: string;
-  currentRegion: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  id: string;
-  jobTitle: string;
-  userHasSecurityException: boolean;
-  userId: string;
-  userValidated: boolean;
-};
-
-declare function useCurrentUser(
-  options?: UseQueryOptions<CurrentUser, unknown>
-): UseQueryResult<CurrentUser, unknown>;
-
-export default useCurrentUser;

package/types/useEffectAsync.d.ts

@@ -1,3 +0,0 @@
-import { useEffect } from 'react';
-
-export default useEffect;

package/types/useMount.d.ts

@@ -1,5 +0,0 @@
-import { EffectCallback } from 'react';
-
-declare function useMount(effect: EffectCallback): void;
-
-export default useMount;

package/types/useOrganizations.d.ts

@@ -1,75 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import { AriesHookBase } from './aries';
-
-interface OrganizationsBase {
-  data: {
-    organizations: [
-      {
-        links: {
-          permissions: { href: string };
-          patients: { href: string };
-          self: { href: string };
-          admin: { href: string };
-          businessArrangements: { href: string };
-          users: { href: string };
-        };
-        id: string;
-        customerId: string;
-        name: string;
-        status: string;
-        statusCode: string;
-        types: [{ code: string; value: string }];
-
-        primaryControllingAuthority: {
-          lastName: string;
-          firstName: string;
-          primaryPhone: string;
-          email: string;
-        };
-
-        physicalAddress: {
-          line1: string;
-          city: string;
-          state: string;
-          stateCode: string;
-          zipCode: string;
-        };
-        mailingAddress: {
-          line1: string;
-          city: string;
-          state: string;
-          stateCode: string;
-          zipCode: string;
-        };
-        billingAddress: {
-          line1: string;
-          city: string;
-          state: string;
-          stateCode: string;
-          zipCode: string;
-        };
-        regions: { code: string; value: string }[];
-        npis: { number: string }[];
-        taxIds: { number: string; type: string }[];
-
-        phoneNumber: {
-          areaCode: string;
-          exchange: string;
-          phoneNumber: string;
-        };
-        numberOfLicensedPhysicians: string;
-        numberOfLicensedClinicians: string;
-      }
-    ];
-  };
-}
-
-type Organizations = AriesHookBase & OrganizationsBase;
-
-export declare function useOrganizations(
-  config: AxiosRequestConfig,
-  options?: UseQueryOptions<Organizations, unknown>
-): UseQueryResult<Organizations, unknown>;
-
-export default useOrganizations;

package/types/usePermissions.d.ts

@@ -1,22 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
-import { AriesHookBase } from './aries';
-
-export interface PermissionsBase {
-  data: {
-    permissions: {
-      id: string;
-      description: string;
-      links: { self: { href: string } };
-    }[];
-  };
-}
-
-type Permissions = AriesHookBase & PermissionsBase;
-
-declare function usePermissions(
-  config: AxiosRequestConfig,
-  options?: UseQueryOptions<Permissions, unknown>
-): UseQueryResult<Permissions, unknown>;
-
-export default usePermissions;