From 56878f647ea0f1066fa3e222d7aa0d83057f496d Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 13 Nov 2023 17:45:59 +0100 Subject: refactor(components): rewrite PostsList component * remove NoResults component and move logic to Search page * add a usePostsList hook * remove Pagination from PostsList (it is only used if javascript is disabled and not on every posts list) * replace `byYear` prop with `sortByYear` * replace `loadMore` prop with `onLoadMore` * remove `showLoadMoreBtn` (we can use `loadMore` prop instead to determine if we need to display the button) * replace `titleLevel` prop with `headingLvl` * add `firstNewResult` prop to handle focus on the new results when loading more article (we should not focus a useless span but the item directly) --- .../hooks/use-posts-list/use-posts-list.test.ts | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/utils/hooks/use-posts-list/use-posts-list.test.ts (limited to 'src/utils/hooks/use-posts-list/use-posts-list.test.ts') diff --git a/src/utils/hooks/use-posts-list/use-posts-list.test.ts b/src/utils/hooks/use-posts-list/use-posts-list.test.ts new file mode 100644 index 0000000..1d11111 --- /dev/null +++ b/src/utils/hooks/use-posts-list/use-posts-list.test.ts @@ -0,0 +1,24 @@ +import { describe, expect, it } from '@jest/globals'; +import { act, renderHook } from '@testing-library/react'; +import { getArticles } from '../../../services/graphql'; +import { usePostsList } from './use-posts-list'; + +describe('usePostsList', () => { + it('can return the first new result index when loading more posts', async () => { + const perPage = 5; + const { result } = renderHook(() => + usePostsList({ fetcher: getArticles, perPage }) + ); + + expect.assertions(2); + + expect(result.current.firstNewResultIndex).toBeUndefined(); + + await act(async () => { + await result.current.loadMore(); + }); + + // Assuming there is more than one page. + expect(result.current.firstNewResultIndex).toBe(perPage + 1); + }); +}); -- cgit v1.2.3