richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/utils/test/factories/factories.ts

@@ -7,10 +7,10 @@ type Subset<K> = {
   [attr in keyof K]?: K[attr] extends object
     ? Subset<K[attr]>
     : K[attr] extends object | null
-    ? Subset<K[attr]> | null
-    : K[attr] extends object | null | undefined
-    ? Subset<K[attr]> | null | undefined
-    : K[attr];
+      ? Subset<K[attr]> | null
+      : K[attr] extends object | null | undefined
+        ? Subset<K[attr]> | null | undefined
+        : K[attr];
 };
 
 interface FactoryBuilderOptions {

package/js/utils/test/factories/joanie.spec.ts

@@ -0,0 +1,7 @@
+import * as joanieFactories from './joanie';
+
+describe('Factories joanie', () => {
+  it.each(Object.entries(joanieFactories))('can instanciate %s', (name, Factory) => {
+    expect(() => Factory().one()).not.toThrow(Error);
+  });
+});

package/js/utils/test/factories/joanie.ts

@@ -13,23 +13,79 @@ import {
   CreditCardBrand,
   Enrollment,
   EnrollmentState,
-  Order,
   OrderLite,
   OrderState,
-  OrderWithPaymentInfo,
   Organization,
   OrganizationLight,
   Payment,
   PaymentProviders,
-  Product,
   ProductType,
   TargetCourse,
+  JoanieFile,
+  Contract,
+  OrderEnrollment,
+  ContractDefinition,
+  NestedCredentialOrder,
+  NestedCertificateOrder,
+  Order,
+  CertificateOrder,
+  CredentialOrder,
+  CertificateOrderWithPaymentInfo,
+  CredentialOrderWithPaymentInfo,
+  EnrollmentLight,
+  OrderGroup,
+  CertificateProduct,
+  CredentialProduct,
 } from 'types/Joanie';
 import { CourseStateFactory } from 'utils/test/factories/richie';
 import { FactoryHelper } from 'utils/test/factories/helper';
+import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
 import { factory } from './factories';
 
+export const JoanieUserProfileFactory = factory((): JoanieUserProfile => {
+  return {
+    id: faker.string.uuid(),
+    username: faker.internet.userName(),
+    full_name: faker.person.fullName(),
+    is_superuser: false,
+    is_staff: false,
+    abilities: {
+      [JoanieUserApiAbilityActions.DELETE]: true,
+      [JoanieUserApiAbilityActions.GET]: true,
+      [JoanieUserApiAbilityActions.PATCH]: true,
+      [JoanieUserApiAbilityActions.PUT]: true,
+      [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
+      [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: true,
+    },
+  };
+});
+
+export const JoanieFileFactory = factory((): JoanieFile => {
+  return {
+    filename: faker.lorem.words(1),
+    src: '/image/url',
+    height: 40,
+    width: 60,
+    srcset: '/image/url',
+    size: 300,
+  };
+});
+
 export const EnrollmentFactory = factory((): Enrollment => {
+  return {
+    id: faker.string.uuid(),
+    course_run: CourseRunWithCourseFactory().one(),
+    is_active: true,
+    product_relations: CourseProductRelationFactory().many(1),
+    state: EnrollmentState.SET,
+    was_created_by_order: false,
+    created_on: faker.date.past({ years: 1 }).toISOString(),
+    orders: [],
+    certificate_id: null,
+  };
+});
+
+export const EnrollmentLightFactory = factory((): EnrollmentLight => {
   return {
     id: faker.string.uuid(),
     course_run: CourseRunWithCourseFactory().one(),
@@ -54,20 +110,33 @@ export const TargetCourseFactory = factory((): TargetCourse => {
   };
 });
 
+export const ContractDefinitionFactory = factory((): ContractDefinition => {
+  return {
+    id: faker.string.uuid(),
+    description: faker.lorem.paragraph(),
+    language: faker.location.countryCode(),
+    title: faker.lorem.sentence(),
+  };
+});
+
+export const ContractFactory = factory((): Contract => {
+  return {
+    id: faker.string.uuid(),
+    student_signed_on: faker.date.past().toISOString(),
+    organization_signed_on: null,
+    organization_signatory: null,
+    created_on: faker.date.past().toISOString(),
+    definition: ContractDefinitionFactory().one(),
+    order: NestedCredentialOrderFactory().one(),
+  };
+});
+
 export const OrganizationFactory = factory((): Organization => {
-  const uuid = faker.string.uuid();
   return {
-    id: uuid,
+    id: faker.string.uuid(),
     code: faker.string.alphanumeric(5),
-    title: faker.lorem.words(1),
-    logo: {
-      filename: faker.lorem.words(1),
-      src: `/organizations/${uuid}`,
-      srcset: [],
-      height: 40,
-      width: 60,
-      size: 300,
-    },
+    title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
+    logo: JoanieFileFactory().one(),
   };
 });
 
@@ -90,24 +159,35 @@ export const CertificateFactory = factory((): Certificate => {
   return {
     id: faker.string.uuid(),
     certificate_definition: CertificationDefinitionFactory().one(),
-    order: OrderWithFullCourseFactory().one(),
+    order: NestedCredentialOrderFactory().one(),
     issued_on: faker.date.past().toISOString(),
   };
 });
 
-export const CertificateProductFactory = factory((): Product => {
+export const CredentialProductFactory = factory((): CredentialProduct => {
   return {
     id: faker.string.uuid(),
     created_on: faker.date.past().toISOString(),
     title: FactoryHelper.sequence((counter) => `Certificate Product ${counter}`),
-    type: ProductType.CERTIFICATE,
+    type: ProductType.CREDENTIAL,
     price: faker.number.int(),
     price_currency: faker.finance.currencyCode(),
     call_to_action: faker.lorem.words(3),
     certificate_definition: CertificationDefinitionFactory().one(),
-    orders: [],
+    contract_definition: ContractDefinitionFactory().one(),
     target_courses: TargetCourseFactory().many(5),
     remaining_order_count: faker.number.int({ min: 1, max: 100 }),
+    state: CourseStateFactory().one(),
+    instructions: null,
+  };
+});
+
+export const CertificateProductFactory = factory((): CertificateProduct => {
+  return {
+    ...CredentialProductFactory().one(),
+    type: ProductType.CERTIFICATE,
+    target_courses: [],
+    instructions: faker.lorem.paragraphs(5),
   };
 });
 
@@ -115,17 +195,17 @@ export const CertificateCourseProductFactory = factory((): CourseProduct => {
   return {
     ...CertificateProductFactory().one(),
     order: OrderLiteFactory().one(),
-    target_courses: TargetCourseFactory().many(3),
   };
 });
 
-// ProductFactory is an alias for CertificateProductFactory
+// ProductFactory is an alias for CredentialProductFactory
 // in the future we'll have differents types of products,
 // factories.js need a feature that return a random factory from a list.
-export const ProductFactory = CertificateProductFactory;
+export const ProductFactory = CredentialProductFactory;
 
 export const CourseRunFactory = factory((): CourseRun => {
   return {
+    course: CourseLightFactory().one(),
     end: faker.date.future({ years: 0.75 }).toISOString(),
     enrollment_end: faker.date.future({ years: 0.5 }).toISOString(),
     enrollment_start: faker.date.past({ years: 0.5 }).toISOString(),
@@ -158,15 +238,38 @@ export const CourseFactory = factory((): CourseListItem => {
     organizations: OrganizationFactory().many(1),
     selling_organizations: OrganizationFactory().many(3),
     title: FactoryHelper.sequence((counter) => `Course ${counter}`),
-    products: CertificateCourseProductFactory().many(3),
-    course_runs: CourseRunFactory().many(3),
+    product_ids: [faker.string.uuid()],
+    course_run_ids: [faker.string.uuid()],
     state: CourseStateFactory().one(),
-    cover: {
-      filename: 'course_cover_image.jpg',
-      url: '/static/course_cover_image.jpg',
-      height: 100,
-      width: 200,
-    },
+    cover: JoanieFileFactory().one(),
+  };
+});
+
+export const CourseLightFactory = factory((): CourseLight => {
+  return {
+    id: faker.string.uuid(),
+    code: faker.string.alphanumeric(5),
+    title: FactoryHelper.sequence((counter) => `Course ${counter}`),
+    cover: JoanieFileFactory().one(),
+  };
+});
+
+export const OrderGroupFactory = factory((): OrderGroup => {
+  const seats = faker.number.int({ min: 5, max: 100 });
+  return {
+    id: faker.string.uuid(),
+    is_active: true,
+    nb_seats: seats,
+    nb_available_seats: faker.number.int({ min: 2, max: seats }),
+  };
+});
+
+export const OrderGroupFullFactory = factory((): OrderGroup => {
+  return {
+    id: faker.string.uuid(),
+    is_active: true,
+    nb_seats: faker.number.int({ min: 5, max: 100 }),
+    nb_available_seats: 0,
   };
 });
 
@@ -176,6 +279,8 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     created_on: faker.date.past().toISOString(),
     course: CourseFactory().one(),
     product: ProductFactory().one(),
+    organizations: OrganizationFactory().many(1),
+    order_groups: [],
   };
 });
 
@@ -186,83 +291,129 @@ export const CourseListItemFactory = factory((): CourseListItem => {
     created_on: faker.date.past().toISOString(),
     organizations: OrganizationFactory().many(1),
     selling_organizations: OrganizationFactory().many(1),
-    products: ProductFactory().many(2),
+    product_ids: [faker.string.uuid()],
     title: FactoryHelper.sequence((counter) => `Course list item ${counter}`),
-    course_runs: [],
+    course_run_ids: [],
     state: CourseStateFactory().one(),
-    cover: {
-      filename: 'course_cover_image.jpg',
-      url: '/static/course_cover_image.jpg',
-      height: 100,
-      width: 200,
-    },
+    cover: JoanieFileFactory().one(),
   };
 });
 
-export const CourseLightFactory = factory((): CourseLight => {
+export const OrderEnrollmentFactory = factory((): OrderEnrollment => {
   return {
     id: faker.string.uuid(),
-    code: faker.string.alphanumeric(5),
-    organizations: OrganizationLightFactory().many(1),
-    title: FactoryHelper.sequence((counter) => `Course light ${counter}`),
-    products: CertificateCourseProductFactory().many(3),
-    course_runs: [],
-    orders: [],
+    product_id: faker.string.uuid(),
+    state: OrderState.VALIDATED,
   };
 });
 
 export const OrderLiteFactory = factory((): OrderLite => {
   return {
     created_on: faker.date.past().toISOString(),
-    enrollments: [],
+    target_enrollments: [],
     id: faker.string.uuid(),
-    main_proforma_invoice: faker.string.uuid(),
+    main_invoice_reference: faker.string.uuid(),
     total: faker.number.int(),
-    product: faker.string.uuid(),
+    product_id: faker.string.uuid(),
     state: OrderState.VALIDATED,
   };
 });
 
-export const OrderFactory = factory((): Order => {
+export const NestedCertificateOrderFactory = factory((): NestedCertificateOrder => {
+  return {
+    id: faker.string.uuid(),
+    course: undefined,
+    enrollment: EnrollmentLightFactory().one(),
+    organization: OrganizationFactory().one(),
+    product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
+    owner_name: faker.internet.userName(),
+  };
+});
+
+export const NestedCredentialOrderFactory = factory((): NestedCredentialOrder => {
+  return {
+    id: faker.string.uuid(),
+    course: CourseLightFactory().one(),
+    enrollment: undefined,
+    organization: OrganizationFactory().one(),
+    product_title: FactoryHelper.unique(faker.lorem.words, { args: [1] }),
+    owner_name: faker.internet.userName(),
+  };
+});
+
+const AbstractOrderFactory = factory((): Order => {
   return {
     id: faker.string.uuid(),
     created_on: faker.date.past({ years: 1 }).toISOString(),
     owner: faker.internet.userName(),
     total: faker.number.int(),
     total_currency: faker.finance.currencyCode(),
-    main_proforma_invoice: faker.string.uuid(),
+    main_invoice_reference: faker.string.uuid(),
     state: OrderState.VALIDATED,
-    product: faker.string.uuid(),
+    product_id: faker.string.uuid(),
     target_courses: TargetCourseFactory().many(5),
-    course: CourseLightFactory().one(),
-    enrollments: [],
+    target_enrollments: [],
+    enrollment: undefined,
+    course: undefined,
+    organization_id: faker.string.uuid(),
   };
 });
 
-export const OrderWithFullCourseFactory = factory((): Order => {
+export const CredentialOrderFactory = factory((): CredentialOrder => {
   return {
-    ...OrderFactory().one(),
+    ...AbstractOrderFactory().one(),
     course: CourseLightFactory().one(),
+    enrollment: undefined,
   };
 });
 
-export const OrderWithPaymentFactory = factory((): OrderWithPaymentInfo => {
+export const CredentialOrderWithPaymentFactory = factory((): CredentialOrderWithPaymentInfo => {
   return {
-    ...OrderFactory().one(),
+    ...CredentialOrderFactory().one(),
     payment_info: PaymentFactory().one(),
   };
 });
 
-export const OrderWithOneClickPaymentFactory = factory((): OrderWithPaymentInfo => {
+export const CredentialOrderWithOneClickPaymentFactory = factory(
+  (): CredentialOrderWithPaymentInfo => {
+    return {
+      ...CredentialOrderFactory().one(),
+      payment_info: {
+        ...PaymentFactory().one(),
+        is_paid: true,
+      },
+    };
+  },
+);
+
+export const CertificateOrderFactory = factory((): CertificateOrder => {
   return {
-    ...OrderFactory().one(),
-    payment_info: {
-      ...PaymentFactory().one(),
-      is_paid: true,
-    },
+    ...AbstractOrderFactory().one(),
+    course: undefined,
+    target_courses: [],
+    enrollment: EnrollmentLightFactory().one(),
   };
 });
 
+export const CertificateOrderWithPaymentFactory = factory((): CertificateOrderWithPaymentInfo => {
+  return {
+    ...CertificateOrderFactory().one(),
+    payment_info: PaymentFactory().one(),
+  };
+});
+
+export const CertificateOrderWithOneClickPaymentFactory = factory(
+  (): CertificateOrderWithPaymentInfo => {
+    return {
+      ...CertificateOrderFactory().one(),
+      payment_info: {
+        ...PaymentFactory().one(),
+        is_paid: true,
+      },
+    };
+  },
+);
+
 export const AddressFactory = factory((): Address => {
   return {
     address: faker.location.streetAddress(),
@@ -292,7 +443,7 @@ export const CreditCardFactory = factory((): CreditCard => {
 export const PaymentFactory = factory((): Payment => {
   return {
     payment_id: faker.finance.routingNumber(),
-    provider: PaymentProviders.DUMMY,
+    provider_name: PaymentProviders.DUMMY,
     url: faker.internet.url(),
   };
 });

package/js/utils/test/factories/reactQuery.ts

@@ -1,5 +1,5 @@
 import type { DehydratedState, MutationKey, QueryKey, QueryState } from '@tanstack/react-query';
-import type { MutationState } from '@tanstack/query-core/build/lib/mutation';
+import type { MutationState } from '@tanstack/query-core';
 import { PersistedClient } from '@tanstack/react-query-persist-client';
 
 export const QueryStateFactory = (key: QueryKey, state: Partial<QueryState>) => ({

package/js/utils/test/factories/richie.ts

@@ -55,7 +55,6 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     enrollment_end: faker.date.past().toISOString(),
     languages: [faker.location.countryCode('alpha-2')],
     state: CourseStateFactory().one(),
-    starts_in_message: null,
     dashboard_link: null,
     title: faker.lorem.sentence(3),
     display_mode: CourseRunDisplayMode.DETAILED,
@@ -154,7 +153,7 @@ export const EnrollmentFactory = factory<Enrollment>(() => {
 
 export const UserFactory = factory<User>(() => ({
   access_token: faker.lorem.word(12),
-  fullname: faker.person.fullName(),
+  full_name: faker.person.fullName(),
   email: faker.internet.email(),
   username: faker.internet.userName(),
 }));
@@ -182,6 +181,9 @@ export const RichieContextFactory = factory<CommonDataProps['context']>(() => ({
   release: faker.system.semver(),
   sentry_dsn: null,
   web_analytics_providers: null,
+  site_urls: {
+    terms_and_conditions: null,
+  },
 }));
 
 export const CourseLightFactory = factory<Course>(() => {

package/js/utils/test/mockCourseProductWithOrder.ts

@@ -0,0 +1,28 @@
+import fetchMock from 'fetch-mock';
+import { CredentialOrder } from 'types/Joanie';
+import {
+  ContractDefinitionFactory,
+  CourseFactory,
+  CourseProductRelationFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
+
+export const mockCourseProductWithOrder = (order: CredentialOrder) => {
+  const courseCode = order.course.code;
+  const productId = order.product_id;
+  const relation = CourseProductRelationFactory({
+    product: ProductFactory({
+      id: order.product_id,
+      contract_definition: order.contract ? ContractDefinitionFactory().one() : undefined,
+    }).one(),
+    course: CourseFactory({
+      code: courseCode,
+    }).one(),
+  }).one();
+
+  fetchMock.get(
+    `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${productId}/`,
+    relation,
+  );
+  return relation;
+};

package/js/utils/test/mockPaginatedResponse.ts

@@ -8,7 +8,7 @@ export const mockPaginatedResponse: <Data>(
   return {
     count: totalCount,
     next: haveNextPage ? 'next' : null,
-    prev: null,
+    previous: null,
     results,
   };
 };

package/js/utils/test/render.tsx

@@ -0,0 +1,72 @@
+import { RenderResult, screen, render as testingLibraryRender } from '@testing-library/react';
+import React, { ReactElement } from 'react';
+import { Nullable } from 'types/utils';
+import { AppWrapperProps } from './wrappers/types';
+import { JoanieAppWrapper } from './wrappers/JoanieAppWrapper';
+
+//  ------- setup -------
+
+type CustomRenderResult = Omit<RenderResult, 'rerender'> & {
+  elementContainer: Nullable<HTMLElement>;
+  rerender: (
+    element: ReactElement,
+    options?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
+  ) => void;
+};
+
+type RenderFunction = (
+  element: ReactElement,
+  options?: Partial<AppWrapperProps>,
+) => CustomRenderResult;
+
+/**
+ *
+ * Custom render method base on react-testing-library render method.
+ * This will render {@param element} in JSDom and read options to configure context and render.
+ * It also override react-testing-library rerender method to also wrap the provided component in
+ * the same contexts.
+ *
+ * The provided {@param element} is to be wrapped in :
+ * - react router (react-router-dom)
+ * - react i18n context (react-intl)
+ * - query context (react-query)
+ *
+ * This function uses default values:
+ * options.intlOptions.locale : 'en'
+ * options.routerOptions.path : '/'
+ * options.queryOptions.client : {@see queryClient}
+ *
+ *
+ * @param element element to wrap in application contexts and test
+ * @param options options to configure and/or customize wrapped context for the test {@see RenderOptions}
+ * @returns an object with all values return by react-testing-library render methods
+ * and an other property {@property elementContainer} refering to the exact element containing the {@param element} to test
+ *
+ *
+ * @example
+ * customRender(<SomeComponentToTest />);
+ * customRender(<SomeComponentToTest />, { wrapper: WrapperPresentationalApp });
+ */
+export const render: RenderFunction = (
+  element: ReactElement,
+  options?: Partial<AppWrapperProps>,
+) => {
+  const Wrapper = options?.wrapper === undefined ? JoanieAppWrapper : options?.wrapper;
+  const renderResult = testingLibraryRender(
+    Wrapper === null ? element : <Wrapper {...options}>{element}</Wrapper>,
+    options?.testingLibraryOptions,
+  );
+
+  return {
+    ...renderResult,
+    elementContainer: screen.queryByTestId('test-component-container'),
+    rerender: (
+      rerenderElement: ReactElement,
+      rerenderOptions?: Partial<Omit<AppWrapperProps, 'testingLibraryOptions'>>,
+    ) => {
+      return renderResult.rerender(
+        Wrapper === null ? element : <Wrapper {...rerenderOptions}>{rerenderElement}</Wrapper>,
+      );
+    },
+  };
+};

package/js/utils/test/wrappers/IntlWrapper.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
+
+export interface IntlWrapperProps extends PropsWithChildren, ComponentProps<typeof IntlProvider> {}
+
+export const IntlWrapper = ({ children, ...options }: IntlWrapperProps) => (
+  <IntlProvider
+    onError={(err) => {
+      // https://github.com/formatjs/formatjs/issues/465
+      if (
+        err.code === ReactIntlErrorCode.MISSING_TRANSLATION ||
+        err.code === ReactIntlErrorCode.MISSING_DATA
+      ) {
+        return;
+      }
+      throw err;
+    }}
+    {...options}
+    locale={options?.locale || 'en'}
+  >
+    {children}
+  </IntlProvider>
+);

package/js/utils/test/wrappers/JoanieAppWrapper.tsx

@@ -0,0 +1,42 @@
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { PropsWithChildren } from 'react';
+import fetchMock from 'fetch-mock';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { RouterWrapper } from './RouterWrapper';
+import { AppWrapperProps } from './types';
+
+export const setupJoanieSession = () => {
+  beforeEach(() => {
+    // JoanieSessionProvider inital requests
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  return {
+    nbSessionApiRequest: 3,
+  };
+};
+
+export const JoanieSessionWrapper = ({ children }: PropsWithChildren) => {
+  return <JoanieSessionProvider>{children}</JoanieSessionProvider>;
+};
+
+export const JoanieAppWrapper = ({
+  children,
+  options,
+}: PropsWithChildren<{ options?: AppWrapperProps }>) => {
+  return (
+    <IntlWrapper {...(options?.intlOptions || { locale: 'en' })}>
+      <CunninghamProvider>
+        <ReactQueryWrapper {...(options?.queryOptions || {})}>
+          <JoanieSessionWrapper>
+            <RouterWrapper {...options?.routerOptions}>{children}</RouterWrapper>
+          </JoanieSessionWrapper>
+        </ReactQueryWrapper>
+      </CunninghamProvider>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/PresentationalAppWrapper.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { IntlWrapper } from './IntlWrapper';
+import { RouterWrapper } from './RouterWrapper';
+import { AppWrapperProps } from './types';
+
+export const PresentationalAppWrapper = ({
+  children,
+  options,
+}: PropsWithChildren<{ options?: AppWrapperProps }>) => {
+  return (
+    <IntlWrapper {...(options?.intlOptions || { locale: 'en' })}>
+      <CunninghamProvider>
+        <RouterWrapper {...options?.routerOptions}>{children}</RouterWrapper>
+      </CunninghamProvider>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/ReactQueryWrapper.tsx

@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/query-core';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+import { createTestQueryClient } from '../createTestQueryClient';
+
+interface ReactQueryWrapperProps extends PropsWithChildren {
+  client?: QueryClient;
+}
+
+export const ReactQueryWrapper = ({ children, client }: ReactQueryWrapperProps) => {
+  return (
+    <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
+      {children}
+    </QueryClientProvider>
+  );
+};