add hooks tests, make contexts lowerCamelCase

package.json

@@ -43,6 +43,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/node": "^20.14.2",
     "@types/react": "^18.2.66",

src/router/hooks/use-nav-links.tsx

@@ -8,7 +8,7 @@ import {
 import type { Route } from '../types/route.ts';
 
 export function useNavLinks(): UseNavLinks {
-  return useContext(NavLinksContext);
+  return useContext(navLinksContext);
 }
 
 export interface UseNavLinks {
@@ -24,9 +24,9 @@ export interface NavLink {
 export const NavLinksProvider = memo(
   ({ children, navLinks }: PropsWithChildren<NavLinksProviderProps>) => {
     return (
-      <NavLinksContext.Provider value={{ navLinks }}>
+      <navLinksContext.Provider value={{ navLinks }}>
         {children}
-      </NavLinksContext.Provider>
+      </navLinksContext.Provider>
     );
   },
 );
@@ -35,6 +35,6 @@ export interface NavLinksProviderProps {
   navLinks: Array<NavLink>;
 }
 
-const NavLinksContext = createContext<UseNavLinks>({
+const navLinksContext = createContext<UseNavLinks>({
   navLinks: [],
 });

src/subscriptions/hooks/use-subscription-upsert.spec.tsx

@@ -0,0 +1,79 @@
+import {
+  DefaultLayoutProvider,
+  useDefaultLayout,
+  type UseDefaultLayout,
+} from '@/ui/hooks/use-default-layout.tsx';
+import { act, renderHook, type RenderHookResult } from '@testing-library/react';
+import type { FC, PropsWithChildren } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  SubscriptionUpsertProvider,
+  useSubscriptionUpsert,
+  type UseSubscriptionUpsert,
+} from './use-subscription-upsert.tsx';
+
+describe('useSubscriptionUpsert', () => {
+  let hooks: RenderHookResult<HooksCombined, void>['result'];
+
+  beforeEach(() => {
+    const renderResult = renderHook<HooksCombined, void>(
+      () => ({
+        upsert: useSubscriptionUpsert(),
+        defaultLayout: useDefaultLayout(),
+      }),
+      {
+        wrapper,
+      },
+    );
+
+    hooks = renderResult.result;
+  });
+
+  it('should open/close drawer on upsert open/close', () => {
+    expect(hooks.current.defaultLayout.isDrawerOpened).toBeFalsy();
+
+    act(() => {
+      hooks.current.upsert.dispatch({ type: 'open' });
+    });
+
+    expect(hooks.current.defaultLayout.isDrawerOpened).toBeTruthy();
+
+    act(() => {
+      hooks.current.upsert.dispatch({ type: 'close' });
+    });
+
+    expect(hooks.current.defaultLayout.isDrawerOpened).toBeFalsy();
+  });
+
+  it('should close upsert on drawer close', () => {
+    expect(hooks.current.defaultLayout.isDrawerOpened).toBeFalsy();
+
+    act(() => {
+      hooks.current.upsert.dispatch({ type: 'open' });
+    });
+
+    expect(hooks.current.defaultLayout.isDrawerOpened).toBeTruthy();
+
+    act(() => {
+      hooks.current.defaultLayout.drawer.close();
+    });
+
+    expect(hooks.current.upsert.state.mode).toBeFalsy();
+  });
+});
+
+const wrapper: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <BrowserRouter>
+      <DefaultLayoutProvider>
+        <SubscriptionUpsertProvider>{children}</SubscriptionUpsertProvider>
+      </DefaultLayoutProvider>
+    </BrowserRouter>
+  );
+};
+
+interface HooksCombined {
+  upsert: UseSubscriptionUpsert;
+  defaultLayout: UseDefaultLayout;
+}

src/subscriptions/hooks/use-subscription-upsert.tsx

@@ -13,7 +13,7 @@ import {
 import type { SubscriptionModel } from '../models/subscription.model.ts';
 
 export function useSubscriptionUpsert() {
-  return useContext(SubscriptionUpsertContext);
+  return useContext(subscriptionUpsertContext);
 }
 
 export interface UseSubscriptionUpsert {
@@ -91,14 +91,14 @@ export const SubscriptionUpsertProvider = memo(
     }, [layout, prevLayout, prevState, state]);
 
     return (
-      <SubscriptionUpsertContext.Provider value={{ state, dispatch }}>
+      <subscriptionUpsertContext.Provider value={{ state, dispatch }}>
         {children}
-      </SubscriptionUpsertContext.Provider>
+      </subscriptionUpsertContext.Provider>
     );
   },
 );
 
-const SubscriptionUpsertContext = createContext<UseSubscriptionUpsert>({
+const subscriptionUpsertContext = createContext<UseSubscriptionUpsert>({
   state: {
     subscription: null,
     mode: null,

src/subscriptions/hooks/use-subscriptions.tsx

@@ -14,7 +14,7 @@ import type { SubscriptionModel } from '../models/subscription.model.ts';
 import { findSubscriptions } from '../models/subscription.table.ts';
 
 export function useSubscriptions(): UseSubscriptions {
-  return useContext(SubscriptionsContext);
+  return useContext(subscriptionsContext);
 }
 
 export interface UseSubscriptions {
@@ -53,19 +53,19 @@ export const SubscriptionsProvider = memo(({ children }: PropsWithChildren) => {
   );
 
   return (
-    <SubscriptionsContext.Provider
+    <subscriptionsContext.Provider
       value={{
         subscriptions,
         tags: tags ?? [],
         selectedTag,
         selectTag,
       }}>
       {children}
-    </SubscriptionsContext.Provider>
+    </subscriptionsContext.Provider>
   );
 });
 
-const SubscriptionsContext = createContext<UseSubscriptions>({
+const subscriptionsContext = createContext<UseSubscriptions>({
   subscriptions: [],
   tags: [],
   selectedTag: null,

src/subscriptions/models/subscription.mock.ts

@@ -1,3 +1,4 @@
+import { findSubscriptions } from '@/subscriptions/models/subscription.table.ts';
 import dayjs from 'dayjs';
 import type { SubscriptionModel } from './subscription.model.ts';
 
@@ -26,3 +27,9 @@ export const yearlySubscription = {
   },
   tags: [],
 } as const satisfies SubscriptionModel;
+
+export async function findSubscriptionsMock(): ReturnType<
+  typeof findSubscriptions
+> {
+  return [monthlySubscription, yearlySubscription];
+}

src/ui/hooks/use-default-layout.tsx

@@ -10,7 +10,7 @@ import { useLocation } from 'react-router-dom';
 import type { Disclosure } from '../types/disclosure.ts';
 
 export function useDefaultLayout(): UseDefaultLayout {
-  return useContext(DefaultLayoutContext);
+  return useContext(defaultLayoutContext);
 }
 
 export interface UseDefaultLayout {
@@ -33,14 +33,14 @@ export const DefaultLayoutProvider = memo(({ children }: PropsWithChildren) => {
   }, [nav, pathname, prevPathname]);
 
   return (
-    <DefaultLayoutContext.Provider
+    <defaultLayoutContext.Provider
       value={{ isDrawerOpened, drawer, isNavOpened, nav }}>
       {children}
-    </DefaultLayoutContext.Provider>
+    </defaultLayoutContext.Provider>
   );
 });
 
-const DefaultLayoutContext = createContext<UseDefaultLayout>({
+const defaultLayoutContext = createContext<UseDefaultLayout>({
   isDrawerOpened: false,
   drawer: {
     open: () => {},

test-setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});

vite.config.mjs

@@ -14,6 +14,8 @@ export default defineConfig({
   test: {
     environment: 'happy-dom',
     root: './src',
+    setupFiles: ['./test-setup.ts'],
+    mockReset: true,
   },
   build: {
     rollupOptions: {