fix: #666 Remove unnecessary data from test logs for clarity

packages/webapp-libs/webapp-api-client/src/hooks/useApiForm/__tests__/useApiForm.hook.spec.tsx

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react-hooks';
+import { act } from '@testing-library/react';
 import { GraphQLError } from 'graphql/error/GraphQLError';
 
 import { renderHook } from '../../../tests/utils/rendering';

packages/webapp-libs/webapp-api-client/src/hooks/usePagedPaginatedQuery/__tests__/usePagedPaginatedQuery.hook.spec.tsx

@@ -14,23 +14,22 @@ describe('usePagedPaginatedQuery: Hook', () => {
       id: `item-${i + 1}`,
     })
   );
+  const pageCursors = {
+    around: [
+      { cursor: 'page-1', isCurrent: true, page: 1 },
+      { cursor: 'page-2', isCurrent: false, page: 2 },
+    ],
+    first: null,
+    last: null,
+    next: {
+      cursor: 'next-cursor',
+      isCurrent: false,
+      page: 2,
+    },
+    previous: null,
+  };
 
   const init = async (mocks?: MockedResponse<Record<string, any>, Record<string, any>>[]) => {
-    const pageCursors = {
-      around: [
-        { cursor: 'page-1', isCurrent: true, page: 1 },
-        { cursor: 'page-2', isCurrent: false, page: 2 },
-      ],
-      first: null,
-      last: null,
-      next: {
-        cursor: 'next-cursor',
-        isCurrent: false,
-        page: 2,
-      },
-      previous: null,
-    };
-
     const initMockedResponse = fillPagedPaginationItemListQuery(initData, pageCursors, { first: 10 });
     const useEffectCleanMock = initMockedResponse;
 
@@ -73,7 +72,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
   });
 
   it('should handle page size correctly', async () => {
-    const { result } = await init();
+    const { result } = await init([fillPagedPaginationItemListQuery(initData, pageCursors, { first: 25 })]);
 
     expect(result.current.pageSize).toBe(10);
 
@@ -117,7 +116,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const { result } = await init([nextPageMock]);
 
-    result.current.onPageClick('next-cursor');
+    act(() => result.current.onPageClick('next-cursor'));
 
     await waitFor(() => {
       expect(result.current.data?.allCrudDemoItems?.edges[0]?.node.id).toBe('item-11');
@@ -128,7 +127,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
   it('should handle search params changes', async () => {
     const { result } = await init();
 
-    result.current.onSearchChangeWithCursorClear({ search: 'test-query', pageSize: '10' });
+    act(() => result.current.onSearchChangeWithCursorClear({ search: 'test-query', pageSize: '10' }));
 
     await waitFor(() => {
       expect(result.current.searchParams).toEqual(
@@ -144,9 +143,8 @@ describe('usePagedPaginatedQuery: Hook', () => {
   it('should handle search reset', async () => {
     const { result } = await init();
 
-    result.current.onSearchChangeWithCursorClear({ search: 'test-query', pageSize: '25' });
-
-    await act(async () => {
+    act(() => {
+      result.current.onSearchChangeWithCursorClear({ search: 'test-query', pageSize: '25' });
       result.current.onSearchReset();
     });
 
@@ -174,11 +172,13 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const { result } = await init([searchParamsMock]);
 
-    result.current.onSearchChangeWithCursorClear({
-      search: 'test',
-      filter: 'active',
-      pageSize: '10',
-      sortBy: 'name',
+    act(() => {
+      result.current.onSearchChangeWithCursorClear({
+        search: 'test',
+        filter: 'active',
+        pageSize: '10',
+        sortBy: 'name',
+      });
     });
 
     await waitFor(() => {
@@ -222,7 +222,9 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const { result } = await init([nextPageMock]);
 
-    result.current.loadCursor('direct-cursor');
+    act(() => {
+      result.current.loadCursor('direct-cursor');
+    });
 
     await waitFor(() => {
       expect(result.current.data?.allCrudDemoItems?.edges[0]?.node.id).toBe('item-11');
@@ -232,7 +234,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
   it('should handle invalid page size gracefully', async () => {
     const { result } = await init();
 
-    await act(async () => {
+    act(() => {
       result.current.onSearchChangeWithCursorClear({ pageSize: '999' });
     });
 
@@ -295,7 +297,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const onPageClickSpy = jest.spyOn(result.current, 'onPageClick');
 
-    await act(async () => {
+    act(() => {
       result.current.onPageClick('same-cursor');
     });
 
@@ -333,7 +335,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const onPageClickSpy = jest.spyOn(result.current, 'onPageClick');
 
-    await act(async () => {
+    act(() => {
       result.current.onPageClick('next-cursor');
     });
 
@@ -364,7 +366,7 @@ describe('usePagedPaginatedQuery: Hook', () => {
 
     const onPageClickSpy = jest.spyOn(result.current, 'onPageClick');
 
-    await act(async () => {
+    act(() => {
       result.current.onPageClick('next-cursor');
     });
 

packages/webapp-libs/webapp-api-client/src/tests/mocks/server/handlers/graphql.ts

@@ -3,11 +3,11 @@ import { DefaultBodyType, PathParams, rest } from 'msw';
 import { apiURL } from '../../../../api/helpers';
 
 export const mockGraphQuery = (response?: DefaultBodyType) =>
-  rest.post<DefaultBodyType, PathParams>(apiURL('/api/graphql'), (req, res, ctx) => {
+  rest.post<DefaultBodyType, PathParams>(apiURL('/graphql'), (req, res, ctx) => {
     return res(ctx.json(response));
   });
 
 export const mockGraphWS = (response?: DefaultBodyType) =>
-  rest.get<DefaultBodyType, PathParams>(apiURL('/api/graphql'), (req, res, ctx) => {
+  rest.get<DefaultBodyType, PathParams>(apiURL('/graphql'), (req, res, ctx) => {
     return res(ctx.json(response));
   });

packages/webapp-libs/webapp-api-client/src/tests/utils/fixtures.ts

@@ -83,6 +83,7 @@ export function composeMockedQueryResult<T extends DocumentNode>(
 type ComposeMockedListQueryResultProps = ComposeMockedQueryResultProps & {
   data: Array<any>;
   pageInfo?: PageInfo;
+  pageCursors?: PageCursors;
   additionalData?: Record<string, any>;
 };
 
@@ -98,12 +99,14 @@ const defaultPageInfo = {
  * @param data - The array of data to map.
  * @param typename - The typename of the nodes in the edges.
  * @param pageInfo - Optional PageInfo object.
+ * @param pageCursors - Optional PageCursors object.
  * @returns The mapped Relay-style edges object.
  */
-export const mapRelayEdges = (data: Array<any>, typename: string, pageInfo?: PageInfo) => {
+export const mapRelayEdges = (data: Array<any>, typename: string, pageInfo?: PageInfo, pageCursors?: PageCursors) => {
   return {
     edges: data.map((obj) => ({ node: { __typename: typename, ...obj }, cursor: defaultPageInfo.endCursor })),
     pageInfo: pageInfo || defaultPageInfo,
+    pageCursors: pageCursors || {},
   };
 };
 

packages/webapp-libs/webapp-contentful/src/hooks/useFavoriteDemoItem/__tests__/useFavoriteDemoItem.hook.spec.tsx

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react-hooks';
+import { act } from '@testing-library/react';
 import { append } from 'ramda';
 
 import {

packages/webapp-libs/webapp-contentful/src/routes/demoItems/__tests__/demoItems.component.spec.tsx

@@ -28,6 +28,7 @@ const getApolloMocks = () => [
   fillDemoItemsAllQuery(mockedItems),
   fillUseFavouriteDemoItemListQuery([
     {
+      id: 'id',
       item: { pk: 'item-1' },
     },
   ]),

packages/webapp-libs/webapp-contentful/src/routes/demoItems/demoItemListItem/__tests__/demoItemListItem.component.spec.tsx

@@ -144,7 +144,7 @@ describe('DemoItemListItem: Component', () => {
       it('should call create mutation', async () => {
         const itemsMock = mockItemsResponse();
         const { waitForApolloMocks } = render(<Component id={id} />, {
-          apolloMocks: (defaultMocks) => defaultMocks.concat(itemsMock, createFavoriteItemMockResponse),
+          apolloMocks: (defaultMocks) => defaultMocks.concat(itemsMock, createFavoriteItemMockResponse, itemsMock),
         });
         await waitForApolloMocks(1);
         const checkbox = await screen.findByLabelText(/is favorite/i);

packages/webapp-libs/webapp-core/src/components/forms/dropzone/__tests__/dropzone.component.spec.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 
 import { render } from '../../../../tests/utils/rendering';
 import { Dropzone, DropzoneProps } from '../dropzone.component';
@@ -10,9 +11,7 @@ describe('Dropzone: Component', () => {
   const Component = (props: Partial<DropzoneProps>) => <Dropzone {...defaultProps} {...props} />;
 
   const fireInputChange = async (files: File[]) => {
-    fireEvent.change(await screen.findByTestId('file-input'), {
-      target: { files },
-    });
+    await userEvent.upload(await screen.findByTestId('file-input'), files);
   };
 
   const file = new File(['content'], 'file.png', { type: 'image/png' });
@@ -23,7 +22,7 @@ describe('Dropzone: Component', () => {
 
     render(<Component onDrop={onDrop} />);
 
-    fireInputChange([file]);
+    await fireInputChange([file]);
 
     const input = await screen.findByTestId('file-input');
     await waitFor(() => expect(input.val));
@@ -37,7 +36,7 @@ describe('Dropzone: Component', () => {
 
     render(<Component onDrop={onDrop} maxFiles={1} />);
 
-    fireInputChange([file, secondFile]);
+    await fireInputChange([file, secondFile]);
 
     const input = await screen.findByTestId('file-input');
     await waitFor(() => expect(input.val));

packages/webapp-libs/webapp-core/src/components/ui/__tests__/separator.component.spec.tsx

@@ -5,7 +5,7 @@ import { Separator } from '../separator';
 
 describe('UI/Separator: Component', () => {
   it('should render', async () => {
-    render(<Separator data-testId="Separator" />);
+    render(<Separator data-testid="Separator" />);
 
     expect(screen.getByTestId('Separator')).toBeDefined();
   });

packages/webapp-libs/webapp-core/src/tests/setupTests.ts

@@ -1,3 +1,4 @@
+import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev';
 import '@testing-library/jest-dom';
 import 'core-js/stable';
 import 'isomorphic-fetch';
@@ -9,6 +10,9 @@ import { ENV } from '../config/env';
 import './mocks/icons';
 import './mocks/reactIntl';
 
+loadDevMessages();
+loadErrorMessages();
+
 MockDate.set('2020-11-22');
 
 jest.disableAutomock();

packages/webapp-libs/webapp-core/src/tests/utils/rendering.tsx

@@ -3,7 +3,7 @@ import { RenderOptions, RenderResult, render, renderHook } from '@testing-librar
 import { ComponentClass, ComponentType, FC, PropsWithChildren, ReactElement } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, MemoryRouterProps } from 'react-router-dom';
+import { MemoryRouter, MemoryRouterProps } from 'react-router';
 
 import { TooltipProvider } from '../../components/ui/tooltip';
 import { DEFAULT_LOCALE, Locale, TranslationMessages, translationMessages } from '../../config/i18n';
@@ -33,7 +33,7 @@ export type CoreTestProvidersProps = PropsWithChildren<{
  */
 export function CoreTestProviders({ children, routerProps, intlMessages, intlLocale }: CoreTestProvidersProps) {
   return (
-    <MemoryRouter {...routerProps}>
+    <MemoryRouter future={{ v7_relativeSplatPath: true, v7_startTransition: true }} {...routerProps}>
       <HelmetProvider>
         <ResponsiveThemeProvider>
           <LocalesProvider>

packages/webapp-libs/webapp-crud-demo/src/routes/crudDemoItem/addCrudDemoItem/__tests__/addCrudDemoItem.component.spec.tsx

@@ -6,6 +6,7 @@ import { tenantFactory } from '@sb/webapp-tenants/tests/factories/tenant';
 import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
+import { crudDemoItemFactory, fillCrudDemoItemPaginationListQuery } from '../../../../tests/factories';
 import { render } from '../../../../tests/utils/rendering';
 import { crudDemoItemListQuery } from '../../crudDemoItemList/crudDemoItemList.component';
 import { AddCrudDemoItem, addCrudDemoItemMutation } from '../addCrudDemoItem.component';
@@ -49,6 +50,12 @@ describe('AddCrudDemoItem: Component', () => {
           },
         },
       };
+      const refetchData = {
+        allCrudDemoItems: {
+          edges: [{ node: crudDemoItemFactory() }],
+          pageCursors: {},
+        },
+      };
       const requestMock = composeMockedQueryResult(addCrudDemoItemMutation, {
         variables,
         data,
@@ -59,15 +66,15 @@ describe('AddCrudDemoItem: Component', () => {
           tenantId,
           first: DEFAULT_PAGE_SIZE,
         },
-        data: [data],
+        data: refetchData,
       });
 
       requestMock.newData = jest.fn(() => ({
         data,
       }));
 
       refetchMock.newData = jest.fn(() => ({
-        data: [data],
+        data: refetchData,
       }));
 
       render(<Component />, { apolloMocks: [commonQueryMock, requestMock, refetchMock] });
@@ -105,9 +112,14 @@ describe('AddCrudDemoItem: Component', () => {
         variables,
         data,
       });
+      const refetchMock = fillCrudDemoItemPaginationListQuery(
+        [crudDemoItemFactory()],
+        {},
+        { tenantId, first: DEFAULT_PAGE_SIZE }
+      );
 
       render(<Component />, {
-        apolloMocks: [commonQueryMock, requestMock],
+        apolloMocks: [commonQueryMock, requestMock, refetchMock],
       });
 
       await userEvent.type(await screen.findByPlaceholderText(/name/i), 'new item');

packages/webapp-libs/webapp-crud-demo/src/routes/crudDemoItem/crudDemoItemForm/crudDemoItemForm.hook.ts

@@ -8,7 +8,7 @@ type UseCrudDemoItemFormProps = Omit<CrudDemoItemFormProps, 'loading'>;
 export const useCrudDemoItemForm = ({ error, onSubmit, initialData }: UseCrudDemoItemFormProps) => {
   const form = useApiForm<CrudDemoItemFormFields>({
     defaultValues: {
-      name: initialData?.name,
+      name: initialData?.name ?? '',
     },
   });
 

packages/webapp-libs/webapp-crud-demo/src/routes/crudDemoItem/crudDemoItemList/__tests__/crudDemoItemList.component.spec.tsx

@@ -42,7 +42,6 @@ describe('CrudDemoItemList: Component', () => {
         })
       ),
       fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: DEFAULT_PAGE_SIZE }),
-      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: DEFAULT_PAGE_SIZE }),
     ];
     render(<Component />, { routerProps, apolloMocks });
 
@@ -62,8 +61,7 @@ describe('CrudDemoItemList: Component', () => {
           ],
         })
       ),
-      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
-      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: 8 }),
+      fillCrudDemoItemPaginationListQuery(allItems, {}, { tenantId, first: DEFAULT_PAGE_SIZE }),
     ];
 
     render(<Component />, { routerProps, apolloMocks });

packages/webapp-libs/webapp-crud-demo/src/routes/crudDemoItem/crudDemoItemList/crudDemoItemListItem/__tests__/crudDemoItemListItem.component.spec.tsx

@@ -144,6 +144,14 @@ describe('CrudDemoItemListItem: Component', () => {
           input: { id: item.id, tenantId },
         },
       }),
+      composeMockedQueryResult(crudDemoItemListItemTestQuery, {
+        data: {
+          item: {
+            ...item,
+            __typename: 'CrudDemoItemType',
+          },
+        },
+      }),
     ];
 
     render(<Component />, { apolloMocks });
@@ -186,6 +194,14 @@ describe('CrudDemoItemListItem: Component', () => {
           input: { id: item.id, tenantId },
         },
       }),
+      composeMockedQueryResult(crudDemoItemListItemTestQuery, {
+        data: {
+          item: {
+            ...item,
+            __typename: 'CrudDemoItemType',
+          },
+        },
+      }),
     ];
 
     render(<Component />, { apolloMocks });