EmployeeWebClient - extend mock service, update tests

employee-web-client/src/modules/offers/presentation/OffersCollection/Table/Table.test.tsx

@@ -41,7 +41,7 @@ describe('OffersCollection', function () {
  const { collection } = mockOffers();
  renderTable();
 
- expect(screen.getByTestId('loading-skeleton')).toBeInTheDocument();
+ expect(screen.getByTestId('table-loader')).toBeInTheDocument();
 
  await waitFor(() => {
  collection.forEach(offer => {

employee-web-client/src/pages/Customers/Customers.test.tsx

@@ -6,7 +6,7 @@ import { screen, waitFor } from '@testing-library/react';
 
 import { ContactType } from 'types';
 import { managementMockService } from 'utils/mock';
-import { CustomerFixture, FacilityFixture, MetaFixture, mockResponseFactory, renderWithProviders } from 'utils';
+import { CustomerFixture, FacilityFixture, MetaFixture, renderWithProviders } from 'utils';
 import { IAddCustomerDto, ICustomerCollection } from 'modules/customers/application/types';
 import { customersQueryKey } from 'modules/customers/infrastructure/query';
 import { FacilityProvider } from 'modules/context/application';
@@ -47,25 +47,20 @@ const newCustomer = CustomerFixture.createPermutation({
  ],
 });
 
-const mockCustomers = mockResponseFactory<ICustomerCollection>(
- {
- meta: MetaFixture.createPermutation({ total: 2 }),
- collection: [existingCustomer],
- },
- resp => managementMockService.get(customersQueryKey(FACILITY_ID)[0], resp),
+managementMockService.post<IAddCustomerDto>(
+ `facilities/${FACILITY_ID}/customers`,
+ pick(newCustomer, ['fullName', 'birthDate', 'address', 'contacts', 'description']) as IAddCustomerDto,
 );
+managementMockService.get<ICustomerCollection>(customersQueryKey(FACILITY_ID)[0], {
+ meta: MetaFixture.createPermutation({ total: 2 }),
+ collection: [existingCustomer],
+});
 
 muteConsoleBeforeEach();
 
 it(
  'should add new customer to the list',
  async function () {
- mockCustomers();
- managementMockService.post<IAddCustomerDto>(
- `facilities/${FACILITY_ID}/customers`,
- pick(newCustomer, ['fullName', 'birthDate', 'address', 'contacts', 'description']) as IAddCustomerDto,
- );
-
  renderView();
 
  await userEvent.click(screen.getByText('Add customer'));

employee-web-client/src/pages/Offers/Offers.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import selectEvent from 'react-select-event';
 
-import { FacilityFixture, OfferFixture, renderWithProviders, mockResponseFactory, MetaFixture, muteConsoleBeforeEach } from 'utils';
+import { FacilityFixture, OfferFixture, renderWithProviders, MetaFixture, muteConsoleBeforeEach } from 'utils';
 import { managementMockService } from 'utils/mock';
 
 import { IOfferCollection, OfferStatus, PriceModel } from 'modules/offers/application/types';
@@ -16,18 +16,25 @@ import { Currency } from '../../types';
 const FACILITY_ID = '1';
 const OFFER_ID_1 = '123';
 const OFFER_ID_2 = '456';
+const OFFER_ID_3 = '789';
 
 const facility = FacilityFixture.createPermutation({ facilityId: FACILITY_ID });
-const existingOffer = OfferFixture.createPermutation({
+const existingOffer1 = OfferFixture.createPermutation({
  facilityId: FACILITY_ID,
  offerId: OFFER_ID_1,
- name: 'First offer',
+ name: 'Existing offer',
  status: OfferStatus.Active,
 });
-const newOffer = OfferFixture.createPermutation({
+const existingOffer2 = OfferFixture.createPermutation({
  facilityId: FACILITY_ID,
  offerId: OFFER_ID_2,
- name: 'Brand new offer',
+ name: 'Existing offer',
+ status: OfferStatus.Active,
+});
+const newOffer = OfferFixture.createPermutation({
+ facilityId: FACILITY_ID,
+ offerId: OFFER_ID_3,
+ name: 'New offer',
  status: OfferStatus.Active,
  duration: 60,
  price: {
@@ -37,28 +44,30 @@ const newOffer = OfferFixture.createPermutation({
  },
 });
 
-const mockOffers = mockResponseFactory<IOfferCollection>(
- {
- meta: MetaFixture.createPermutation({ total: 2 }),
- collection: [existingOffer],
- },
- resp => managementMockService.get(offersQueryKey(FACILITY_ID)[0], resp),
-);
+managementMockService.post(`facilities/${FACILITY_ID}/offers`, {
+ offerName: newOffer.name,
+ duration: newOffer.duration.toString(),
+ price: newOffer.price,
+});
+managementMockService.get<IOfferCollection>(offersQueryKey(FACILITY_ID)[0], {
+ meta: MetaFixture.createPermutation({ total: 3 }),
+ collection: [existingOffer1, existingOffer2, newOffer],
+});
 
 // jest.setTimeout(10 * 1000);
 muteConsoleBeforeEach();
 
 it(
  'should add new offer to the list',
  async function () {
- mockOffers();
- managementMockService.post(`facilities/${FACILITY_ID}/offers`, {
- offerName: newOffer.name,
- duration: newOffer.duration.toString(),
- price: newOffer.price,
+ managementMockService.getOnce<IOfferCollection>(offersQueryKey(FACILITY_ID)[0], {
+ meta: MetaFixture.createPermutation({ total: 2 }),
+ collection: [existingOffer1, existingOffer2],
  });
 
  renderView();
+ await waitForElementToBeRemoved(screen.queryByTestId('table-loader'));
+ expect(screen.getAllByText('Existing offer').length).toBe(2);
 
  await userEvent.click(screen.getByText('Add offer'));
 
@@ -83,6 +92,7 @@ it(
  await waitFor(() => {
  expect(form).not.toBeInTheDocument();
  expect(screen.getByText('New offer added successfully')).toBeInTheDocument();
+ expect(screen.queryByText('New offer')).toBeInTheDocument();
  });
  },
  10 * 1000,

employee-web-client/src/shared/GridTable/Skeleton.tsx

@@ -5,7 +5,7 @@ interface IProps extends SkeletonProps {}
 
 const Skeleton = (props: IProps) => {
  return (
- <VStack data-testid='loading-skeleton' w='100%'>
+ <VStack data-testid='table-loader' w='100%'>
  {Array.from(Array(11).keys()).map(value => (
  <ChSkeleton key={value} w='100%' h='46px' {...props} />
  ))}

employee-web-client/src/shared/Table/TableLoader.tsx

@@ -5,7 +5,7 @@ interface IProps extends SkeletonProps {}
 
 const TableLoader = (props: IProps) => {
  return (
- <VStack w='100%'>
+ <VStack data-testid='table-loader' w='100%'>
  <Skeleton w='100%' h='36px' {...props} />
  {Array.from(Array(10).keys()).map(value => (
  <Skeleton key={value} w='100%' h='53px' {...props} />

employee-web-client/src/utils/logger/Logger.test.tsx

@@ -3,6 +3,9 @@ import { fireEvent, render } from '@testing-library/react';
 
 import { Logger } from './index';
 import { LogLevel } from './Logger';
+import { muteConsoleBeforeEach } from "../muteConsoleBeforeEach";
+
+muteConsoleBeforeEach();
 
 const ThrowableComponent = () => {
  return (

employee-web-client/src/utils/mock/MockService.ts

@@ -44,6 +44,25 @@ class MockService {
  };
  }
 
+ public getOnce<R>(url: string, reply: R | Callback<R>): Function {
+ const data: any = reply instanceof Function ? reply() : reply;
+ const endpoint = parse(this.host, url);
+
+ const handler = rest.get(endpoint, (req, res, ctx) => {
+ if (data?.status) {
+ return res.once(ctx.status(500), ctx.json(data));
+ }
+
+ return res.once(ctx.status(200), ctx.json(data));
+ });
+
+ msw().use(handler);
+
+ return () => {
+ throw Error('Not implemented clear function');
+ };
+ }
+
  public post<R>(url: string, reply: R | Callback<R>): Function {
  const data: any = reply instanceof Function ? reply() : reply;
  const handler = rest.post(parse(this.host, url), (req, res, ctx) => {