richie-education 2.25.0-b2.dev136 → 2.25.0-b2.dev139

package/js/hooks/useUnionResource/index.spec.tsx

@@ -8,6 +8,7 @@ import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
 
@@ -314,4 +315,53 @@ describe('useUnionResource', () => {
     expect(calledUrls).toHaveLength(4);
     expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
   });
+
+  it.each([
+    {
+      testLabel: 'with some results',
+      testDataAList: [{ name: 'TestDataA', id: '1', created_on: '2022-01-01' }],
+    },
+    {
+      testLabel: 'without results',
+      testDataAList: [],
+    },
+  ])('should refetch data when a query $testLabel is invalidate', async ({ testDataAList }) => {
+    fetchMock.get(
+      'http://data.a/?page=1',
+      mockPaginatedResponse(testDataAList, testDataAList.length, false),
+    );
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    const queryClient = createTestQueryClient({ user: true });
+    const { result, rerender } = renderHook(
+      (queries: {
+        queryA?: QueryConfig<TestDataA, TestDataAFilters>;
+        queryB?: QueryConfig<TestDataB, PaginatedResourceQuery>;
+      }) =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig: queries?.queryA || queryAConfig,
+          queryBConfig: queries?.queryB || queryBConfig,
+        }),
+      {
+        wrapper: ({ children }) => (
+          <BaseAppWrapper queryOptions={{ client: queryClient }}>{children}</BaseAppWrapper>
+        ),
+      },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    let calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(2);
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+
+    queryClient.invalidateQueries({ queryKey: queryAConfig.queryKey });
+    rerender({ queryA: { ...queryAConfig }, queryB: queryBConfig });
+    await waitFor(() => {
+      calledUrls = fetchMock.calls().map((call) => call[0]);
+      expect(calledUrls).toHaveLength(3);
+    });
+    expect(calledUrls.filter((url) => url === 'http://data.a/?page=1')).toHaveLength(2);
+    expect(calledUrls.filter((url) => url === 'http://data.b/?page=1')).toHaveLength(1);
+  });
 });

package/js/hooks/useUnionResource/index.ts

@@ -90,8 +90,10 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
-  const [unionQueryKey, setUnionQueryKey] = useState<string>();
+  const [update, setForceUpdate] = useState<number>();
 
+  // to force execution of useEffect::fetchNewPage(),
+  // reset need to generate a uniq key that is part of it's dependencies.
   const reset = () => {
     setStack([]);
     setPage(0);
@@ -99,23 +101,21 @@ const useUnionResource = <
     setError(undefined);
     setCursor(perPage);
     setIntegrityCount(0);
+    setForceUpdate(new Date().getTime());
   };
 
+  // we manualy observe key invalidation to trigger new search
+  // by generating a new update key
   if (refetchOnInvalidation) {
     useQueryKeyInvalidateListener(queryAConfig.queryKey, reset);
     useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
   }
 
+  // filters have changes, new results will be fetch.
+  // let's reset every previous fetches states
+  // and re-generate update
   useEffect(() => {
-    // filters have changes, new results will be fetch.
-    // let's reset every previous fetches states
     reset();
-
-    // We need to fetch new results.
-    // reset all states isn't enought. If we've a research without results
-    // then the next reset would do nothing.
-    // to force execution of useEffect::fetchNewPage(), we use a uniq key build with current queries filters.
-    setUnionQueryKey(JSON.stringify(queryAConfig.filters) + JSON.stringify(queryBConfig.filters));
   }, [JSON.stringify(queryAConfig.filters), JSON.stringify(queryBConfig.filters)]);
 
   useEffect(() => {
@@ -165,11 +165,8 @@ const useUnionResource = <
     }
   }, [
     cursor,
-    // FIXME(rlecellier): when stack.length === 0, invalidate the query will not refetch.
-    // stack.length is added in the dependency array to force a new fetch on reset.
-    stack.length,
-    // unionQueryKey assure that we refetch data when query filters change.
-    unionQueryKey,
+    // update assure that we refetch data on reset
+    update,
   ]);
 
   const cursorToUse = Math.min(cursor, integrityCount);

package/js/pages/DashboardCourses/index.spec.tsx

@@ -123,7 +123,7 @@ describe('<DashboardCourses/>', () => {
     enrollmentsDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
 
     await expectNoSpinner('Loading orders and enrollments...');
-    expectBannerInfo('You have no enrollments nor orders yet.');
+    await expectBannerInfo('You have no enrollments nor orders yet.');
     expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
   });
 

package/js/utils/test/expectBanner.ts

@@ -1,34 +1,34 @@
 import { screen, waitFor } from '@testing-library/react';
 import { BannerType, getBannerTestId } from 'components/Banner';
 
-export const expectBannerError = async (message: string, rootElement: ParentNode = document) => {
+export const expectBannerError = (message: string, rootElement: ParentNode = document) => {
   return expectBanner(BannerType.ERROR, message, rootElement);
 };
-export const expectBannerInfo = async (message: string, rootElement: ParentNode = document) => {
+export const expectBannerInfo = (message: string, rootElement: ParentNode = document) => {
   return expectBanner(BannerType.INFO, message, rootElement);
 };
 
-export const expectBanner = async (
+export const expectBanner = (
   type: BannerType,
   message: string,
   rootElement: ParentNode = document,
 ) => {
-  await waitFor(async () => {
+  return waitFor(async () => {
     const banner = rootElement.querySelector('.banner--' + type) as HTMLElement;
     expect(banner).not.toBeNull();
     expect(banner).toHaveTextContent(message);
   });
 };
 
-export const expectNoBannerError = async (message: string) => {
+export const expectNoBannerError = (message: string) => {
   return expectNoBanner(BannerType.ERROR, message);
 };
-export const expectNoBannerInfo = async (message: string) => {
+export const expectNoBannerInfo = (message: string) => {
   return expectNoBanner(BannerType.INFO, message);
 };
 
-export const expectNoBanner = async (type: BannerType, message: string) => {
-  await waitFor(() => {
+export const expectNoBanner = (type: BannerType, message: string) => {
+  return waitFor(() => {
     expect(screen.queryByTestId(getBannerTestId(message, type))).toBeNull();
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev136",
+  "version": "2.25.0-b2.dev139",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {