richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/utils/ObjectHelper/index.spec.ts

@@ -1,19 +1,27 @@
 import { ObjectHelper } from 'utils/ObjectHelper/index';
 
 describe('ObjectHelper', () => {
-  it('should return true if object is empty', () => {
-    expect(ObjectHelper.isEmpty({})).toBe(true);
-  });
+  describe('isEmpty', () => {
+    it('should return true if object is empty', () => {
+      expect(ObjectHelper.isEmpty({})).toBe(true);
+    });
 
-  it('should return false if object is not empty', () => {
-    expect(ObjectHelper.isEmpty({ foo: 'bar' })).toBe(false);
-  });
+    it('should return false if object is not empty', () => {
+      expect(ObjectHelper.isEmpty({ foo: 'bar' })).toBe(false);
+    });
+
+    it('should return true if array is empty', () => {
+      expect(ObjectHelper.isEmpty([])).toBe(true);
+    });
 
-  it('should return true if array is empty', () => {
-    expect(ObjectHelper.isEmpty([])).toBe(true);
+    it('should return true if array is not empty', () => {
+      expect(ObjectHelper.isEmpty(['foo'])).toBe(false);
+    });
   });
 
-  it('should return true if array is not empty', () => {
-    expect(ObjectHelper.isEmpty(['foo'])).toBe(false);
+  describe('omit', () => {
+    it('should return an object without the given keys', () => {
+      expect(ObjectHelper.omit({ foo: 1, bar: 2, baz: 3 }, 'foo', 'baz')).toEqual({ bar: 2 });
+    });
   });
 });

package/js/utils/ObjectHelper/index.ts

@@ -2,4 +2,13 @@ export class ObjectHelper {
   static isEmpty(obj: object): boolean {
     return !Object.entries(obj).length;
   }
+
+  static omit<Obj, Keys extends Array<keyof Obj>>(
+    obj: Obj,
+    ...keys: Keys
+  ): Omit<Obj, (typeof keys)[number]> {
+    const cleanedObject = { ...obj };
+    keys.forEach((key) => delete cleanedObject[key]);
+    return cleanedObject;
+  }
 }

package/js/utils/OrderHelper/index.ts

@@ -0,0 +1,32 @@
+import {
+  OrderEnrollment,
+  ACTIVE_ORDER_STATES,
+  Order,
+  OrderState,
+  ContractDefinition,
+} from 'types/Joanie';
+
+/**
+ * Helper class for orders
+ */
+export class OrderHelper {
+  /**
+   * return an Order from the given list that match given productId
+   */
+  static getActiveEnrollmentOrder(orders: OrderEnrollment[], productId: string) {
+    const filter = (order: OrderEnrollment) =>
+      ACTIVE_ORDER_STATES.includes(order.state) && order.product_id === productId;
+    return orders.find(filter);
+  }
+
+  /**
+   * tell us if a order need to be sign by it's owner (the learner user).
+   */
+  static orderNeedsSignature(order: Order, contractDefinition?: ContractDefinition) {
+    return (
+      order?.state === OrderState.VALIDATED &&
+      contractDefinition &&
+      !(order.contract && order.contract.student_signed_on)
+    );
+  }
+}

package/js/utils/ProductHelper/index.ts

@@ -1,5 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { Product, TargetCourse } from 'types/Joanie';
+import { CourseProductRelation, Product, TargetCourse } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import { IntlHelper } from 'utils/IntlHelper';
 
@@ -41,4 +41,8 @@ export class ProductHelper {
 
     return IntlHelper.getLocalizedLanguages(uniqueLanguages, intl);
   }
+
+  static getActiveOrderGroups(courseProductRelation: CourseProductRelation) {
+    return courseProductRelation.order_groups?.filter((orderGroup) => orderGroup.is_active);
+  }
 }

package/js/utils/StringHelper/index.spec.tsx

@@ -4,18 +4,23 @@ describe('StringHelper', () => {
   it('is a string', () => {
     expect(StringHelper.isString('Hello')).toBe(true);
   });
+
   it('is a ReactNode', () => {
     expect(StringHelper.isString(<div>Hello</div>)).toBe(false);
   });
+
   it('is null', () => {
     expect(StringHelper.isString(null)).toBe(false);
   });
+
   it('is a number', () => {
     expect(StringHelper.isString(10)).toBe(false);
   });
+
   it('is zero', () => {
     expect(StringHelper.isString(0)).toBe(false);
   });
+
   it('capitalizes first letter of a string', () => {
     expect(StringHelper.capitalizeFirst('a')).toBe('A');
     expect(StringHelper.capitalizeFirst('A')).toBe('A');
@@ -26,4 +31,10 @@ describe('StringHelper', () => {
     expect(StringHelper.capitalizeFirst(null)).toBe(null);
     expect(StringHelper.capitalizeFirst(undefined)).toBe(undefined);
   });
+
+  it('abbreviates a string', () => {
+    expect(StringHelper.abbreviate('John Doe')).toBe('JD');
+    expect(StringHelper.abbreviate('John doe')).toBe('JD');
+    expect(StringHelper.abbreviate('John Doe', 1)).toBe('J');
+  });
 });

package/js/utils/StringHelper/index.ts

@@ -11,4 +11,12 @@ export class StringHelper {
     }
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
+
+  static abbreviate(str: string, maxLength?: number): string {
+    return str
+      .split(' ', maxLength)
+      .map((word) => word[0])
+      .join('')
+      .toUpperCase();
+  }
 }

package/js/utils/UserHelper/index.spec.ts

@@ -0,0 +1,18 @@
+import { UserFactory } from 'utils/test/factories/richie';
+import { UserHelper } from 'utils/UserHelper/index';
+
+describe('UserHelper', () => {
+  describe('getName', () => {
+    it("should return the user's full name if it exists", () => {
+      const user = UserFactory({ full_name: 'Richie Cunningham' }).one();
+
+      expect(UserHelper.getName(user)).toEqual('Richie Cunningham');
+    });
+
+    it("should return the user's username if full name is not defined", () => {
+      const user = UserFactory({ full_name: undefined, username: 'richie_cunningham' }).one();
+
+      expect(UserHelper.getName(user)).toEqual('richie_cunningham');
+    });
+  });
+});

package/js/utils/UserHelper/index.ts

@@ -0,0 +1,8 @@
+import { User } from 'types/User';
+
+export class UserHelper {
+  /* Return the user's full name if it exists, otherwise return the user's username */
+  static getName(user: User) {
+    return user?.full_name || user.username;
+  }
+}

package/js/utils/download.ts

@@ -0,0 +1,43 @@
+import { handle } from './errors/handle';
+
+/**
+ * browserDownloadFromBlob handle direct download of a file api response.
+ *
+ * @param downloadFunction, an api promise that return a File
+ * @param newWindow, does it open in a new window or not
+ * @returns boolean, true for success
+ */
+export const browserDownloadFromBlob = async (
+  downloadFunction: () => Promise<File>,
+  newWindow: boolean = false,
+) => {
+  try {
+    const file = await downloadFunction();
+
+    // eslint-disable-next-line compat/compat
+    const url = URL.createObjectURL(file);
+
+    if (newWindow) {
+      window.open(url);
+      return;
+    }
+
+    const $link = document.createElement('a');
+    $link.href = url;
+    $link.download = file.name;
+
+    const revokeObject = () => {
+      // eslint-disable-next-line compat/compat
+      URL.revokeObjectURL(url);
+      window.removeEventListener('blur', revokeObject);
+    };
+
+    window.addEventListener('blur', revokeObject);
+    $link.click();
+    return true;
+  } catch (error) {
+    handle(error);
+  }
+
+  return false;
+};

package/js/utils/errors/HttpError.ts

@@ -22,3 +22,13 @@ export class HttpError extends Error {
 export function isHttpError(error: any): error is HttpError {
   return typeof error === 'object' && error instanceof HttpError;
 }
+
+export enum HttpStatusCode {
+  OK = 200,
+  NO_CONTENT = 204,
+  UNAUTHORIZED = 401,
+  BAD_REQUEST = 400,
+  FORBIDDEN = 403,
+  NOT_FOUND = 404,
+  INTERNAL_SERVER_ERROR = 500,
+}

package/js/utils/indirection/window.ts

@@ -1,2 +1,2 @@
 // Layer of indirection to facilitate testing of code that would use location facilities
-export const { confirm, history, location, matchMedia, scroll } = window;
+export const { confirm, history, location, matchMedia, scroll, alert } = window;

package/js/utils/react-query/createQueryClient.ts

@@ -1,10 +1,10 @@
 import { QueryClient, QueryClientConfig } from '@tanstack/react-query';
 import { persistQueryClient } from '@tanstack/react-query-persist-client';
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
-import { handle } from 'utils/errors/handle';
+import { QueryCache } from '@tanstack/query-core';
 import { REACT_QUERY_SETTINGS } from 'settings';
-import { noop } from 'utils';
-import context from 'utils/context';
+import { handle } from 'utils/errors/handle';
+import { HttpError } from 'utils/errors/HttpError';
 
 export interface QueryClientOptions {
   logger?: boolean;
@@ -12,34 +12,25 @@ export interface QueryClientOptions {
 }
 
 const createQueryClient = (options?: QueryClientOptions) => {
-  const environment = context?.environment;
-
   const configuration: QueryClientConfig = {
+    queryCache: new QueryCache({
+      onError: (error) => {
+        // Only trigger error handler for server errors
+        if (error instanceof HttpError && error.code >= 500) {
+          handle(error);
+        }
+      },
+    }),
     defaultOptions: {
       queries: {
-        cacheTime: REACT_QUERY_SETTINGS.cacheTime,
+        gcTime: REACT_QUERY_SETTINGS.gcTime,
         refetchOnWindowFocus: false,
         retry: false,
         staleTime: REACT_QUERY_SETTINGS.staleTimes.default,
       },
     },
-    logger: {
-      log: noop,
-      warn: noop,
-      error: noop,
-    },
   };
 
-  if (options?.logger) {
-    // Link react-query logger to our error handler
-    configuration.logger = {
-      // eslint-disable-next-line no-console
-      log: environment === 'development' ? console.log : noop,
-      warn: environment === 'development' ? console.warn : noop,
-      error: handle,
-    };
-  }
-
   const queryClient = new QueryClient(configuration);
 
   if (options?.persister) {

package/js/utils/react-query/useLocalizedQueryKey.ts

@@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
 const useLocalizedQueryKey = (queryKey: QueryKey): readonly unknown[] => {
   const { locale } = useIntl();
 
-  return typeof queryKey === 'string' ? [queryKey, locale] : [...queryKey, locale];
+  return [...queryKey, locale];
 };
 
 export default useLocalizedQueryKey;

package/js/utils/react-query/useSessionMutation/index.spec.tsx

@@ -7,6 +7,7 @@ import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { useSession } from 'contexts/SessionContext';
 import { checkStatus } from 'api/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { useSessionMutation } from '.';
 
 jest.mock('utils/context', () => ({
@@ -32,18 +33,17 @@ describe('useSessionMutation', () => {
   });
 
   it('should invalidate user queries if it fails with a 401 response status', async () => {
-    fetchMock.post('http://api.endpoint/orders/create', 401);
-    fetchMock.get('https://endpoint.test/api/user/v1/me', 401);
+    fetchMock.post('http://api.endpoint/orders/create', HttpStatusCode.UNAUTHORIZED);
+    fetchMock.get('https://endpoint.test/api/user/v1/me', HttpStatusCode.UNAUTHORIZED);
     const handleError = jest.fn();
 
     const useHooks = () => {
       const session = useSession();
-      const mutation = useSessionMutation<unknown, void, unknown>(
-        () => fetch('http://api.endpoint/orders/create', { method: 'POST' }).then(checkStatus),
-        {
-          onError: handleError,
-        },
-      );
+      const mutation = useSessionMutation<unknown, void, unknown>({
+        mutationFn: () =>
+          fetch('http://api.endpoint/orders/create', { method: 'POST' }).then(checkStatus),
+        onError: handleError,
+      });
 
       return { session, mutation };
     };

package/js/utils/react-query/useSessionMutation/index.ts

@@ -1,10 +1,6 @@
-import type {
-  MutationFunction,
-  UseMutationOptions,
-  UseMutationResult,
-} from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { HttpError } from 'utils/errors/HttpError';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
 /**
  * Hook to use when the mutation relies on the current session. In this way, if the
@@ -14,8 +10,7 @@ import { HttpError } from 'utils/errors/HttpError';
  * @param options
  */
 export function useSessionMutation<TData = unknown, TVariables = void, TContext = unknown>(
-  mutationFn: MutationFunction<TData, TVariables>,
-  options?: Omit<UseMutationOptions<TData, HttpError, TVariables, TContext>, 'mutationFn'>,
+  options?: UseMutationOptions<TData, HttpError, TVariables, TContext>,
 ): UseMutationResult<TData, HttpError, TVariables, TContext> {
   const queryClient = useQueryClient();
 
@@ -24,8 +19,8 @@ export function useSessionMutation<TData = unknown, TVariables = void, TContext
     variables: TVariables,
     context: TContext | undefined,
   ) => {
-    if (error.code === 401) {
-      await queryClient.invalidateQueries(['user'], { exact: true });
+    if (error.code === HttpStatusCode.UNAUTHORIZED) {
+      await queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
     }
 
     if (options?.onError) {
@@ -33,7 +28,7 @@ export function useSessionMutation<TData = unknown, TVariables = void, TContext
     }
   };
 
-  return useMutation<TData, HttpError, TVariables, TContext>(mutationFn, {
+  return useMutation<TData, HttpError, TVariables, TContext>({
     ...options,
     onError: handleError,
   });

package/js/utils/react-query/useSessionQuery/index.spec.tsx

@@ -7,6 +7,8 @@ import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { checkStatus } from 'api/joanie';
 import { useSession } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
+import { handle as mockHandle } from 'utils/errors/handle';
 import { useSessionQuery } from '.';
 
 jest.mock('utils/context', () => ({
@@ -19,6 +21,10 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
+jest.mock('utils/errors/handle', () => ({
+  handle: jest.fn(),
+}));
+
 describe('useSessionQuery', () => {
   const wrapper = ({ children }: PropsWithChildren) => (
     <QueryClientProvider client={createTestQueryClient({ user: { username: 'John Doe' } })}>
@@ -32,15 +38,12 @@ describe('useSessionQuery', () => {
   });
 
   it('should invalidate user queries if it fails with a 401 response status', async () => {
-    fetchMock.get('http://api.endpoint/orders/', 401);
-    fetchMock.get('https://endpoint.test/api/user/v1/me', 401);
-    const handleError = jest.fn();
+    fetchMock.get('http://api.endpoint/orders/', HttpStatusCode.UNAUTHORIZED);
+    fetchMock.get('https://endpoint.test/api/user/v1/me', HttpStatusCode.UNAUTHORIZED);
 
     const useHooks = () => {
       const session = useSession();
-      useSessionQuery(['orders'], () => fetch('http://api.endpoint/orders/').then(checkStatus), {
-        onError: handleError,
-      });
+      useSessionQuery(['orders'], () => fetch('http://api.endpoint/orders/').then(checkStatus));
 
       return session;
     };
@@ -63,7 +66,32 @@ describe('useSessionQuery', () => {
 
     // - The second request should be the query to get the user
     expect(fetchMock.calls()[1][0]).toEqual('https://endpoint.test/api/user/v1/me');
-    // - Finally the provided onError should have been executed
-    expect(handleError).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle error if the request fails due to a server error', async () => {
+    fetchMock.get('http://api.endpoint/orders/', HttpStatusCode.INTERNAL_SERVER_ERROR);
+
+    const useHooks = () => {
+      const session = useSession();
+      useSessionQuery(['orders'], () => fetch('http://api.endpoint/orders/').then(checkStatus));
+
+      return session;
+    };
+
+    const { result } = renderHook(() => useHooks(), {
+      wrapper,
+    });
+
+    // - At the first render, query state should be retrieved from the sessionStorage
+    expect(fetchMock.calls().length).toEqual(1);
+    expect(result.current.user).toStrictEqual({ username: 'John Doe' });
+
+    // Then user orders should have been fetched
+    expect(fetchMock.lastCall()![0]).toEqual('http://api.endpoint/orders/');
+
+    // - As the order query failed with a 500 error, the error should have been handled
+    await waitFor(() => {
+      expect(mockHandle).toHaveBeenNthCalledWith(1, new HttpError(500, 'Internal Server Error'));
+    });
   });
 });

package/js/utils/react-query/useSessionQuery/index.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import type {
   QueryFunction,
   QueryKey,
@@ -8,7 +8,7 @@ import type {
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSession } from 'contexts/SessionContext';
 import { REACT_QUERY_SETTINGS } from 'settings';
-import type { HttpError } from 'utils/errors/HttpError';
+import { HttpStatusCode, type HttpError } from 'utils/errors/HttpError';
 import type { TSessionQueryKey } from 'utils/react-query/useSessionKey';
 import useSessionQueryKey from 'utils/react-query/useSessionKey';
 
@@ -40,16 +40,6 @@ export function useSessionQuery<
   const { user } = useSession();
   const sessionQueryKey = useSessionQueryKey(queryKey);
 
-  const handleError = async (error: HttpError) => {
-    if (error.code === 401) {
-      queryClient.invalidateQueries(['user'], { exact: true });
-    }
-
-    if (options?.onError) {
-      return options.onError(error);
-    }
-  };
-
   const enabled = useMemo(() => {
     return options?.enabled !== undefined ? options.enabled : !!user;
   }, [user, options?.enabled]);
@@ -61,16 +51,19 @@ export function useSessionQuery<
     return REACT_QUERY_SETTINGS.staleTimes.sessionItems;
   }, [options?.staleTime]);
 
-  const queryHandler = useQuery<TQueryFnData, HttpError, TData, TSessionQueryKey>(
-    sessionQueryKey,
+  const queryHandler = useQuery<TQueryFnData, HttpError, TData, TSessionQueryKey>({
+    ...options,
+    queryKey: sessionQueryKey,
     queryFn,
-    {
-      ...options,
-      enabled,
-      staleTime,
-      onError: handleError,
-    },
-  );
+    enabled,
+    staleTime,
+  });
+
+  useEffect(() => {
+    if (queryHandler.error?.code === HttpStatusCode.UNAUTHORIZED) {
+      queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
+    }
+  }, [queryHandler.error]);
 
   return [queryHandler, sessionQueryKey];
 }

package/js/utils/search/getSuggestionsSection/index.spec.ts

@@ -1,6 +1,7 @@
 import fetchMock from 'fetch-mock';
 
 import { handle } from 'utils/errors/handle';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { getSuggestionsSection } from '.';
 
 const mockHandle: jest.Mock<typeof handle> = handle as any;
@@ -47,7 +48,7 @@ describe('utils/search/getSuggestionsSection', () => {
   it('reports the error when the server returns an error code', async () => {
     fetchMock.get('/api/v1.0/courses/autocomplete/?query=some%20search', {
       body: {},
-      status: 403,
+      status: HttpStatusCode.FORBIDDEN,
     });
     await getSuggestionsSection('courses', 'Courses', 'some search');
     expect(mockHandle).toHaveBeenCalledWith(
@@ -60,7 +61,7 @@ describe('utils/search/getSuggestionsSection', () => {
       body: {
         errors: ['Missing autocomplete "query" for request to richie_courses.'],
       },
-      status: 400,
+      status: HttpStatusCode.BAD_REQUEST,
     });
     await getSuggestionsSection('courses', 'Courses', 'error');
     expect(mockHandle).toHaveBeenCalledWith(
@@ -77,7 +78,7 @@ describe('utils/search/getSuggestionsSection', () => {
     expect(mockHandle).toHaveBeenCalledWith(
       new Error(
         'Failed to decode JSON in getSuggestionSection FetchError: invalid json response body at ' +
-          '/api/v1.0/courses/autocomplete/?query=some%20search reason: Unexpected token o in JSON at position 1',
+          '/api/v1.0/courses/autocomplete/?query=some%20search reason: Unexpected token \'o\', "not json" is not valid JSON',
       ),
     );
   });

package/js/utils/search/getSuggestionsSection/index.ts

@@ -2,6 +2,7 @@ import take from 'lodash-es/take';
 import queryString from 'query-string';
 
 import { Suggestion } from 'types/Suggestion';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { handle } from 'utils/errors/handle';
 
 /**
@@ -29,7 +30,9 @@ export const getSuggestionsSection = async (kind: string, title: string, query:
   // The ok flag is the way to discriminate
   if (!response.ok) {
     const error = new Error(`Failed to get list from ${kind} autocomplete : ${response.status}`);
-    return response.status === 400 ? handle(error, await response.json()) : handle(error);
+    return response.status === HttpStatusCode.BAD_REQUEST
+      ? handle(error, await response.json())
+      : handle(error);
   }
 
   let responseData: Suggestion<string>[];

package/js/utils/search/index.tsx

@@ -7,6 +7,7 @@ import {
   SearchSuggestionSection,
 } from 'types/Suggestion';
 import { handle } from 'utils/errors/handle';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { getSuggestionsSection } from './getSuggestionsSection';
 
 /**
@@ -62,9 +63,13 @@ const onSuggestionsFetchRequested = async (
   );
 };
 
-export const onSuggestionsFetchRequestedDebounced = debounce(onSuggestionsFetchRequested, 200, {
-  maxWait: 1000,
-});
+export const onSuggestionsFetchRequestedDebounced = debounce(
+  onSuggestionsFetchRequested,
+  HttpStatusCode.OK,
+  {
+    maxWait: 1000,
+  },
+);
 
 /**
  * Helper to pick out the relevant filter for a suggestion from the general filters object.

package/js/utils/test/createTestQueryClient.ts

@@ -18,22 +18,22 @@ export interface CreateTestQueryClientParams extends QueryClientOptions {
  *
  * @param params
  */
-export const createTestQueryClient = (params?: CreateTestQueryClientParams) => {
+export const createTestQueryClient = (params: CreateTestQueryClientParams = {}) => {
   let userToUse: Maybe<Nullable<User>>;
-  if (params?.user === true) {
+  if (params.user === true) {
     userToUse = UserFactory().one();
-  } else if (params?.user) {
-    userToUse = params.user as User;
-  } else if (params?.user === null) {
+  } else if (params.user) {
+    userToUse = params.user;
+  } else if (params.user === null) {
     userToUse = null;
   }
 
   const queries: DehydratedState['queries'] = [];
-  if (userToUse || userToUse === null) {
+  if (userToUse !== undefined) {
     queries.push(QueryStateFactory(['user'], { data: userToUse }));
   }
 
-  params?.queriesCallback?.(queries);
+  params.queriesCallback?.(queries);
 
   const { clientState } = PersistedClientFactory({
     queries,

package/js/utils/test/expectBanner.ts

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