@promoboxx/use-filter 1.11.1 → 2.0.0

package/src/useSimpleFilter.test.tsx

@@ -0,0 +1,676 @@
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { useEffect, useState } from 'react'
+
+import buildDefaultFilterInfo from './lib/buildDefaultFilterInfo'
+import type { FilterStore } from './store'
+import { setFilterStore } from './store'
+import localStorageStore from './store/localStorageStore'
+import memoryStore from './store/memoryStore'
+import { createUrlParamStore } from './store/urlParamStore'
+import type { SimpleFilterInfo } from './useSimpleFilter'
+import useSimpleFilter from './useSimpleFilter'
+
+async function runFilterTest(testOptions: { store: FilterStore }) {
+  describe('useSimpleFilter', () => {
+    const defaultFilterInfo: any = {
+      filter: {
+        foo: 'bar',
+      },
+    }
+
+    it('calls on mount', async () => {
+      const { onChangeMock, onDebounceChange } = await setup({
+        defaultFilterInfo,
+      })
+      await actAndWait(
+        () => {},
+        // Intentionally wait a little longer to make sure no sneaky hooks are
+        // unintentionally fired.
+        DEBOUNCE_DURATION * 2,
+      )
+
+      expect(onChangeMock).toHaveBeenCalledTimes(1)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: 'bar' } }),
+      )
+      expect(onDebounceChange).toHaveBeenCalledTimes(1)
+      expect(onDebounceChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: 'bar' } }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('initial')
+    })
+
+    it('calls when data changes', async () => {
+      const { onChangeMock, onDebounceChange } = await setup({
+        defaultFilterInfo,
+      })
+
+      await actAndWait(
+        () => {
+          fireEvent.click(screen.getByTestId('updateFilterButton'))
+        },
+        // Intentionally don't wait here, as we're going to test that our debounce
+        // hooks haven't fired too early.
+        0,
+      )
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: '42' } }),
+      )
+      expect(onDebounceChange).toHaveBeenCalledTimes(1)
+      expect(onDebounceChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: 'bar' } }),
+      )
+
+      // Now we can wait and make sure our debounce hook as fired.
+      await actAndWait(() => {})
+      expect(onDebounceChange).toHaveBeenCalledTimes(2)
+      expect(onDebounceChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: '42' } }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('filter')
+    })
+
+    it('uses shallowEqual be default', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      }, 0)
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      }, 0)
+      // 2 is still the correct number of times, as there is one from the initial
+      // mount and the other from updateFilter.
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+    })
+
+    it('can reset and keeps defaults', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('resetFilterButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: 'bar' } }),
+      )
+    })
+
+    it('can setSort', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setSortButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ filter: { foo: 'bar' }, sort: 'foo:bar' }),
+      )
+    })
+
+    it('renders the current filter', async () => {
+      await setup({ defaultFilterInfo })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ filter: { foo: 'bar' } }))
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ filter: { foo: '42' } }))
+    })
+
+    it('persists across mounts', async () => {
+      const TIMES_CALLED_IN_SETUP = 1
+      const { ExampleComponent, onChangeMock, onDebounceChange } = await setup({
+        defaultFilterInfo,
+      })
+
+      const ToggleComponent = () => {
+        const [shouldShow, setShouldShow] = useState(true)
+
+        return (
+          <div>
+            <button
+              data-testid="toggleShouldShow"
+              onClick={() => setShouldShow(!shouldShow)}
+            />
+            {shouldShow ? <ExampleComponent /> : null}
+          </div>
+        )
+      }
+
+      // Simulate the filter being visible.
+      await actAndWait(() => {
+        // Cleanup the render done in `setup`.
+        cleanup()
+        render(<ToggleComponent />)
+      })
+      expect(screen.queryByTestId('updateFilterButton')).toBeTruthy()
+      expect(onChangeMock).toHaveBeenCalledTimes(1 + TIMES_CALLED_IN_SETUP)
+      expect(onDebounceChange).toHaveBeenCalledTimes(1 + TIMES_CALLED_IN_SETUP)
+
+      // Update the filter
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2 + TIMES_CALLED_IN_SETUP)
+      expect(onDebounceChange).toHaveBeenCalledTimes(2 + TIMES_CALLED_IN_SETUP)
+
+      // Simulate removing the filter.
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('toggleShouldShow'))
+      }, 0)
+      expect(screen.queryByTestId('updateFilterButton')).toBeFalsy()
+
+      // Simulate the filter being visible, again.
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('toggleShouldShow'))
+      })
+      expect(screen.queryByTestId('updateFilterButton')).toBeTruthy()
+      expect(onChangeMock).toHaveBeenCalledTimes(3 + TIMES_CALLED_IN_SETUP)
+      expect(onDebounceChange).toHaveBeenCalledTimes(3 + TIMES_CALLED_IN_SETUP)
+
+      // Ensure it's the updated filter.
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ filter: { foo: '42' } }))
+    })
+
+    it('uses onBeforeSaveFilter to control what is saved', async () => {
+      const { ExampleComponent } = await setup({
+        defaultFilterInfo,
+        onBeforeSaveFilter: (filterInfo) => {
+          return {
+            ...filterInfo,
+            filter: {
+              ...filterInfo.filter,
+              somethingAddedInOnBeforeSaveFilter: 'hello world',
+            },
+          }
+        },
+      })
+
+      const ToggleComponent = () => {
+        const [shouldShow, setShouldShow] = useState(true)
+
+        return (
+          <div>
+            <button
+              data-testid="toggleShouldShow"
+              onClick={() => setShouldShow(!shouldShow)}
+            />
+            {shouldShow ? <ExampleComponent /> : null}
+          </div>
+        )
+      }
+
+      // Simulate the filter being visible.
+      await actAndWait(() => {
+        // Cleanup the render done in `setup`.
+        cleanup()
+        render(<ToggleComponent />)
+      })
+      expect(screen.queryByTestId('updateFilterButton')).toBeTruthy()
+
+      // Do something to ensure filter is saved.
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+
+      // Simulate removing the filter.
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('toggleShouldShow'))
+      })
+      expect(screen.queryByTestId('updateFilterButton')).toBeFalsy()
+
+      // Simulate the filter being visible, again.
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('toggleShouldShow'))
+      })
+      expect(screen.queryByTestId('updateFilterButton')).toBeTruthy()
+
+      // Verify that the data we added in `onBeforeSaveFilter` is there.
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(
+        expect.objectContaining({
+          filter: expect.objectContaining({
+            somethingAddedInOnBeforeSaveFilter: 'hello world',
+          }),
+        }),
+      )
+    })
+
+    it('has pagingInfo helper', async () => {
+      await setup({ defaultFilterInfo })
+
+      expect(screen.getByTestId('totalPages').textContent).toEqual('5')
+      expect(screen.getByTestId('totalResults').textContent).toEqual('100')
+    })
+
+    it('can setPageSize', async () => {
+      const defaultFilterInfo = buildDefaultFilterInfo({
+        filter: {
+          foo: 'bar',
+        },
+        pageSize: 20,
+      })
+
+      const children: TestCaseChildren = (api) => (
+        <>
+          <button
+            data-testid="setPageButton"
+            onClick={() => api.setPage(api.filterInfo.page + 1)}
+          />
+          <button
+            data-testid="setPageSizeButton"
+            onClick={() => api.setPageSize(5)}
+          />
+        </>
+      )
+
+      const { onDebounceChange } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setPageButton'))
+      })
+      expect(onDebounceChange).toBeCalledTimes(2)
+      expect(onDebounceChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 2,
+          offset: 20,
+        }),
+      )
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setPageSizeButton'))
+      })
+      expect(onDebounceChange).toBeCalledTimes(3)
+      expect(onDebounceChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 5,
+          offset: 20,
+        }),
+      )
+    })
+
+    it('lets you pass your own store', async () => {
+      const mockStore: FilterStore = {
+        getFilter: vitest.fn(),
+        saveFilter: vitest.fn(),
+        getData: vitest.fn(),
+        saveData: vitest.fn(),
+        clear: vitest.fn(),
+      }
+
+      await setup({
+        defaultFilterInfo,
+        store: mockStore,
+      })
+
+      expect(mockStore.getFilter).toHaveBeenCalled()
+      expect(mockStore.saveFilter).toHaveBeenCalled()
+    })
+
+    it('handles stores not returning a full filterInfo', async () => {
+      const mockStore: FilterStore = {
+        getFilter: vitest
+          .fn()
+          .mockReturnValue({ filter: { fromStore: 'lol' } }),
+        saveFilter: vitest.fn(),
+        getData: vitest.fn(),
+        saveData: vitest.fn(),
+        clear: vitest.fn(),
+      }
+
+      await setup({
+        defaultFilterInfo,
+        store: mockStore,
+      })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(
+        expect.objectContaining({
+          // This asserts that when a store returns a `Partial<FilterInfo>` it's
+          // turned into a full `FilterInfo`.
+          page: 1,
+        }),
+      )
+    })
+
+    it('merges stored filters with whats passed to the hook', async () => {
+      const mockStore: FilterStore = {
+        getFilter: vitest
+          .fn()
+          .mockReturnValue({ filter: { fromStore: 'lol' } }),
+        saveFilter: vitest.fn(),
+        getData: vitest.fn(),
+        saveData: vitest.fn(),
+        clear: vitest.fn(),
+      }
+
+      await setup({
+        defaultFilterInfo,
+        store: mockStore,
+      })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(
+        expect.objectContaining({
+          filter: {
+            // This asserts that whatever the store returns is included.
+            fromStore: 'lol',
+            // This asserts that whatever defaultFilterInfo passed to the hook is
+            // included.
+            foo: 'bar',
+          },
+        }),
+      )
+    })
+  })
+
+  describe('page based', () => {
+    const defaultFilterInfo = buildDefaultFilterInfo({
+      filter: {
+        foo: 'bar',
+      },
+      pageSize: 20,
+      page: 2,
+    })
+
+    const children: TestCaseChildren = (api) => (
+      <button data-testid="setPageButton" onClick={() => api.setPage(3)} />
+    )
+
+    it('accepts initial page', async () => {
+      await setup({ defaultFilterInfo, children })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ page: 2, offset: 20 }))
+    })
+
+    it('can set page', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setPageButton'))
+      })
+
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 3, offset: 40 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+    })
+
+    it('resets pagination when filters change', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setPageButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 3, offset: 40 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(3)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 1 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('filter')
+    })
+  })
+
+  describe('offset based', () => {
+    const defaultFilterInfo = buildDefaultFilterInfo({
+      filter: {
+        foo: 'bar',
+      },
+      pageSize: 20,
+      offset: 80,
+    })
+
+    const children: TestCaseChildren = (api) => (
+      <button
+        data-testid="setOffsetButton"
+        onClick={() => api.setOffset(100)}
+      />
+    )
+
+    it('accepts initial offset', async () => {
+      await setup({ defaultFilterInfo, children })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ offset: 80, page: 5 }))
+    })
+
+    it('can set offset', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setOffsetButton'))
+      })
+
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 6, offset: 100 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+    })
+
+    it('resets offset when filters change', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setOffsetButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 6, offset: 100 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(3)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page: 1 }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('filter')
+    })
+  })
+
+  describe('cursor based', () => {
+    const defaultFilterInfo = buildDefaultFilterInfo({
+      filter: {
+        foo: 'bar',
+      },
+      cursor: 'currentCursor',
+    })
+
+    const children: TestCaseChildren = (api) => (
+      <button
+        data-testid="setCursorButton"
+        onClick={() => api.setCursor('nextCursor')}
+      />
+    )
+
+    it('accepts initial cursor', async () => {
+      await setup({ defaultFilterInfo, children })
+
+      expect(
+        safeJsonParse(screen.getByTestId('filterJson').textContent),
+      ).toEqual(expect.objectContaining({ cursor: 'currentCursor' }))
+    })
+
+    it('can set cursor', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setCursorButton'))
+      })
+
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ cursor: 'nextCursor' }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+    })
+
+    it('resets cursor when filters change', async () => {
+      const { onChangeMock } = await setup({ defaultFilterInfo, children })
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('setCursorButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(2)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ cursor: 'nextCursor' }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('pagination')
+
+      await actAndWait(() => {
+        fireEvent.click(screen.getByTestId('updateFilterButton'))
+      })
+      expect(onChangeMock).toHaveBeenCalledTimes(3)
+      expect(onChangeMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({ cursor: undefined }),
+      )
+      expect(screen.getByTestId('updateReason').textContent).toBe('filter')
+    })
+  })
+
+  function wait(n = 0) {
+    return new Promise((resolve) => setTimeout(resolve, n))
+  }
+
+  function safeJsonParse(input: string | undefined | null = '') {
+    if (input) {
+      return JSON.parse(input)
+    }
+  }
+
+  async function actAndWait(fn: () => void, n = DEBOUNCE_DURATION) {
+    act(fn)
+    await act(async () => {
+      await wait(n)
+    })
+    // You'd think you could just write this:
+    //     await act(async () => {
+    //       fn();
+    //       await wait(n);
+    //     });
+    // But for some reason, doing it that way needs a longer wait duration than
+    // just a single tick. /shrug.
+  }
+
+  type TestCaseChildren = (
+    api: ReturnType<typeof useSimpleFilter>,
+  ) => React.ReactNode
+
+  const DEBOUNCE_DURATION = 100
+
+  async function setup<TFilterInfo extends SimpleFilterInfo<any>>(options: {
+    defaultFilterInfo: TFilterInfo
+    children?: TestCaseChildren
+    onBeforeSaveFilter?: (filterInfo: TFilterInfo) => TFilterInfo
+    store?: FilterStore
+  }) {
+    testOptions.store.clear()
+    setFilterStore(testOptions.store)
+
+    const onChangeMock = vitest.fn()
+    const onDebounceChange = vitest.fn()
+
+    const ExampleComponent = () => {
+      const api = useSimpleFilter('namespace', {
+        defaultFilterInfo: options.defaultFilterInfo,
+        debounceDuration: DEBOUNCE_DURATION,
+        store: options.store,
+        // This is a very annoying warning in TypeScript:
+        //
+        //     'FilterInfo<any>' is assignable to the constraint of type
+        //     'TFilterInfo', but 'TFilterInfo' could be instantiated with a
+        //     different subtype of constraint 'FilterInfo<any>'
+        //
+        // Which I don't think is valid, because you cannot do what's is saying is
+        // possible, as this errors (as expected):
+        //
+        //     setup({
+        //       defaultFilterInfo: {
+        //         lol: '24',
+        //       }
+        //     })
+        //
+        // So I don't know why TS thinks it can be something else, it's already
+        // preventing you from doing that.
+        onBeforeSaveFilter: options.onBeforeSaveFilter as unknown as any,
+      })
+      const pagingInfo = api.pagingInfo(100)
+
+      useEffect(() => {
+        onChangeMock(api.filterInfo)
+      }, [api.filterInfo])
+
+      useEffect(() => {
+        onDebounceChange(api.debouncedFilterInfo)
+      }, [api.debouncedFilterInfo])
+
+      return (
+        <div>
+          {options.children?.(api)}
+          <button
+            data-testid="updateFilterButton"
+            onClick={() => api.updateFilter({ foo: '42' })}
+          />
+          <button
+            data-testid="resetFilterButton"
+            onClick={() => api.resetFilter()}
+          />
+          <button
+            data-testid="forceRefreshButton"
+            onClick={() => api.forceRefresh()}
+          />
+          <button
+            data-testid="setSortButton"
+            onClick={() => api.setSort('foo:bar')}
+          />
+          <div data-testid="totalPages">{pagingInfo.totalPages}</div>
+          <div data-testid="totalResults">{pagingInfo.totalResults}</div>
+          <div data-testid="filterJson">{JSON.stringify(api.filterInfo)}</div>
+          <div data-testid="updateReason">{api.updateReason}</div>
+        </div>
+      )
+    }
+
+    await actAndWait(() => {
+      render(<ExampleComponent />)
+    })
+
+    return {
+      onChangeMock,
+      onDebounceChange,
+      ExampleComponent,
+    }
+  }
+}
+
+runFilterTest({ store: memoryStore })
+runFilterTest({ store: createUrlParamStore() })
+runFilterTest({ store: localStorageStore })