@promoboxx/use-filter 1.0.3 → 1.0.4

package/src/useFilter.test.tsx

@@ -1,449 +0,0 @@
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
-import React, { useState } from 'react'
-
-import buildDefaultFilterInfo from './lib/buildDefaultFilterInfo'
-import { setFilterStore } from './store'
-import memoryStore from './store/memoryStore'
-import useFilter, { FilterInfo } from './useFilter'
-
-describe('useFilter', () => {
-  const defaultFilterInfo = buildDefaultFilterInfo({
-    filter: {
-      foo: 'bar',
-    },
-  })
-
-  it('calls on mount', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    expect(onChangeMock).toHaveBeenCalledTimes(1)
-    expect(onChangeMock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ filter: { foo: 'bar' } }),
-    )
-  })
-
-  it('calls when data changes', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('updateFilterButton'))
-    })
-    expect(onChangeMock).toHaveBeenCalledTimes(2)
-    expect(onChangeMock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ filter: { foo: '42' } }),
-    )
-  })
-
-  it('uses shallowEqual be default', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('updateFilterButton'))
-    })
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('updateFilterButton'))
-    })
-    // 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('handles onChange.filterInfo', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalResults: 1 }),
-    )
-
-    // Say the server response with a new totalResults.
-    onChangeMock.mockImplementation(() => ({
-      filterInfo: {
-        totalResults: 100,
-      },
-    }))
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('forceRefreshButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalResults: 100 }),
-    )
-  })
-
-  it('handles onChange.filterInfo.totalResults', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    // Say the server response with a new totalResults.
-    onChangeMock.mockImplementation(() => ({
-      filterInfo: {
-        totalResults: 99,
-      },
-    }))
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('forceRefreshButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalResults: 99 }),
-    )
-  })
-
-  // it("handles onChange.data", async () => {
-  //   onChangeMock.mockImplementation((filterInfo) => ({
-  //     data: [{ name: filterInfo.filter.foo }],
-  //   }));
-
-  //   getByTestId(wrapper, "updateFilterButton").simulate("click");
-  //   await actWrapperUpdate(wrapper);
-
-  //   expect(JSON.parse(getByTestId(wrapper, "responseDataJson").text())).toEqual(
-  //     [{ name: "42" }]
-  //   );
-
-  //   getByTestId(wrapper, "resetFilterButton").simulate("click");
-  //   await actWrapperUpdate(wrapper);
-
-  //   expect(JSON.parse(getByTestId(wrapper, "responseDataJson").text())).toEqual(
-  //     [{ name: "bar" }]
-  //   );
-  // });
-
-  it('handles async onChange.filterInfo', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalResults: 1 }),
-    )
-
-    // Say the server response with a new totalResults.
-    onChangeMock.mockImplementation(() =>
-      Promise.resolve({
-        filterInfo: {
-          totalResults: 100,
-        },
-      }),
-    )
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('forceRefreshButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalResults: 100 }),
-    )
-  })
-
-  it('handles async onChange.filterInfo.totalResults', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo })
-
-    // Say the server response with a new totalResults.
-    onChangeMock.mockImplementation(() =>
-      Promise.resolve({
-        filterInfo: {
-          totalResults: 99,
-        },
-      }),
-    )
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('forceRefreshButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ totalPages: 5 }),
-    )
-  })
-
-  // it("handles async onChange.data", async () => {
-  //   onChangeMock.mockImplementation((filterInfo) =>
-  //     Promise.resolve({
-  //       data: [{ name: filterInfo.filter.foo }],
-  //     })
-  //   );
-
-  //   getByTestId(wrapper, "updateFilterButton").simulate("click");
-  //   await actWrapperUpdate(wrapper);
-
-  //   expect(JSON.parse(getByTestId(wrapper, "responseDataJson").text())).toEqual(
-  //     [{ name: "42" }]
-  //   );
-
-  //   getByTestId(wrapper, "resetFilterButton").simulate("click");
-  //   await actWrapperUpdate(wrapper);
-
-  //   expect(JSON.parse(getByTestId(wrapper, "responseDataJson").text())).toEqual(
-  //     [{ name: "bar" }]
-  //   );
-  // });
-
-  it('persists across mounts', async () => {
-    const { onChangeMock, ExampleComponent } = 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()
-
-    // 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()
-
-    // onChange should still only be called once.
-    expect(onChangeMock).toHaveBeenCalledTimes(1)
-  })
-})
-
-describe('page based', () => {
-  const defaultFilterInfo = buildDefaultFilterInfo({
-    filter: {
-      foo: 'bar',
-    },
-    pageSize: 20,
-    page: 2,
-  })
-
-  const children: Wut = (wut) => (
-    <button data-testid="setPageButton" onClick={() => wut.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 }),
-    )
-  })
-
-  it('can handle onChange.filterInfo.page', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo, children })
-
-    // Intentionally respond with numbers that don't match what the button
-    // actually does.
-    // This is to test the actual response, the view updates immediately.
-    onChangeMock.mockImplementation(() => ({
-      filterInfo: {
-        page: 20,
-      },
-    }))
-
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('setPageButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ page: 20, offset: 380 }),
-    )
-  })
-})
-
-describe('offset based', () => {
-  const defaultFilterInfo = buildDefaultFilterInfo({
-    filter: {
-      foo: 'bar',
-    },
-    pageSize: 20,
-    offset: 80,
-  })
-
-  const children: Wut = (wut) => (
-    <button data-testid="setOffsetButton" onClick={() => wut.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 }),
-    )
-  })
-
-  it('can handle onChange.filterInfo.offset', async () => {
-    const { onChangeMock } = await setup({ defaultFilterInfo, children })
-
-    // Intentionally respond with numbers that don't match what the button
-    // actually does.
-    // This is to test the actual response, the view updates immediately.
-    onChangeMock.mockImplementation(() => ({
-      filterInfo: {
-        offset: 380,
-      },
-    }))
-    await actAndWait(() => {
-      fireEvent.click(screen.getByTestId('setOffsetButton'))
-    })
-
-    expect(safeJsonParse(screen.getByTestId('filterJson').textContent)).toEqual(
-      expect.objectContaining({ page: 20, offset: 380 }),
-    )
-  })
-})
-
-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 = 0) {
-  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 Wut = (wut: ReturnType<typeof useFilter>) => React.ReactNode
-
-async function setup<TFilterInfo extends FilterInfo<any>>(options: {
-  defaultFilterInfo: TFilterInfo
-  children?: Wut
-}) {
-  memoryStore.clear()
-  setFilterStore(memoryStore)
-
-  const onChangeMock = jest.fn()
-
-  const ExampleComponent = () => {
-    const wut = useFilter('namespace', {
-      defaultFilterInfo: options.defaultFilterInfo,
-      debounceDuration: 0,
-      onChange: onChangeMock,
-    })
-
-    return (
-      <div>
-        {options.children?.(wut)}
-        <button
-          data-testid="updateFilterButton"
-          onClick={() => wut.updateFilter({ foo: '42' })}
-        />
-        <button
-          data-testid="resetFilterButton"
-          onClick={() => wut.resetFilter()}
-        />
-        <button
-          data-testid="forceRefreshButton"
-          onClick={() => wut.forceRefresh()}
-        />
-        <button
-          data-testid="setSortButton"
-          onClick={() => wut.setSort('foo:bar')}
-        />
-        <div data-testid="filterJson">{JSON.stringify(wut.filterInfo)}</div>
-        {/* <div data-testid="responseDataJson">
-            {JSON.stringify(wut.responseData)}
-          </div> */}
-      </div>
-    )
-  }
-
-  await actAndWait(() => {
-    render(<ExampleComponent />)
-  })
-
-  return {
-    onChangeMock,
-    ExampleComponent,
-  }
-}