EmployeeWebClient - CreateFacilityMultiStepForm - add interaction tes…

…ts for submitting a form

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/BaseInfoStep/BaseInfoStep.po.ts

@@ -0,0 +1,83 @@
+import { screen, userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import selectEvent from 'react-select-event';
+
+export class BaseInfoStepPo {
+ private elements: {
+ formStepHeader: HTMLElement;
+ nextButton: HTMLElement;
+ nameInput: HTMLInputElement;
+ slugInput: HTMLInputElement;
+ descriptionInput: HTMLInputElement;
+ currencyInput: HTMLInputElement;
+ mainBusinessCategorySelect: HTMLInputElement;
+ subordinateBusinessCategorySelect: HTMLInputElement;
+ };
+
+ protected constructor(protected canvasElement: HTMLElement) {
+ within(canvasElement);
+
+ this.elements = {
+ get formStepHeader() {
+ return screen.getByText("Step 1: Basic facility's data");
+ },
+ get nextButton() {
+ return screen.getByRole('button', { name: /Next/ });
+ },
+ get nameInput() {
+ return screen.getByLabelText(/Facility name/) as HTMLInputElement;
+ },
+ get slugInput() {
+ return screen.getByLabelText(/Slug/) as HTMLInputElement;
+ },
+ get descriptionInput() {
+ return screen.getByLabelText(/Description/) as HTMLInputElement;
+ },
+ get currencyInput() {
+ return screen.getByLabelText(/Currency/) as HTMLInputElement;
+ },
+ get mainBusinessCategorySelect() {
+ return screen.getByLabelText(/Main business category/) as HTMLInputElement;
+ },
+ get subordinateBusinessCategorySelect() {
+ return screen.getByLabelText(/Subordinate business category/) as HTMLInputElement;
+ },
+ };
+ }
+
+ async expectStepTitle() {
+ await expect(this.elements.formStepHeader).toBeInTheDocument();
+ }
+
+ async setName(value: string) {
+ await userEvent.type(this.elements.nameInput, value);
+ }
+
+ async setSlug(value: string) {
+ await userEvent.type(this.elements.slugInput, value);
+ }
+
+ async setDescription(value: string) {
+ await userEvent.type(this.elements.descriptionInput, value);
+ }
+
+ async setCurrency(value: string) {
+ await selectEvent.select(this.elements.currencyInput, value);
+ }
+
+ async setMainBusinessCategory(value: string) {
+ await selectEvent.select(this.elements.mainBusinessCategorySelect, value);
+ }
+
+ async setSubordinateBusinessCategory(options: string[]) {
+ await selectEvent.select(this.elements.subordinateBusinessCategorySelect, options);
+ }
+
+ async goToNextStep() {
+ await userEvent.click(this.elements.nextButton);
+ }
+
+ static render(canvasElement: HTMLElement) {
+ return new BaseInfoStepPo(canvasElement);
+ }
+}

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/ContactStep/ContactPersonInputs.tsx

@@ -18,7 +18,9 @@ const ContactPersonInputs = () => {
  <MaskedTextInput name='contactPerson.fax' mask={masks.phone} colSpan={{ base: 6, md: 4 }} colStart={1} isRequired>
  {formatMessage({ id: 'fax-number', defaultMessage: 'Fax number' })}
  </MaskedTextInput>
- <EmailInput name='contactPerson.email' colSpan={{ base: 6, md: 4 }} isRequired />
+ <EmailInput name='contactPerson.email' colSpan={{ base: 6, md: 4 }} isRequired>
+ {formatMessage({ id: 'contact-email-label', defaultMessage: 'Contact email' })}
+ </EmailInput>
  </>
  );
 };

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/ContactStep/ContactStep.po.ts

@@ -0,0 +1,92 @@
+import { screen, userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export class ContactStepPo {
+ private elements: {
+ formStepHeader: HTMLElement;
+ nextButton: HTMLElement;
+ contactTypeInputs: HTMLInputElement[];
+ contactPhoneInputs: HTMLInputElement[];
+ contactEmailInputs: HTMLInputElement[];
+ contactPersonNameInput: HTMLInputElement;
+ contactPersonPhoneNumberInput: HTMLInputElement;
+ contactPersonFaxNumberInput: HTMLInputElement;
+ contactPersonEmailInput: HTMLInputElement;
+ };
+
+ protected constructor(protected canvasElement: HTMLElement) {
+ within(canvasElement);
+
+ this.elements = {
+ get formStepHeader() {
+ return screen.getByText('Step 3: Contact and administration info');
+ },
+ get nextButton() {
+ return screen.getByRole('button', { name: /Next/ });
+ },
+ get contactTypeInputs() {
+ return screen.getAllByLabelText(/Type/) as HTMLInputElement[];
+ },
+ get contactPhoneInputs() {
+ return screen.getAllByLabelText(/Phone/) as HTMLInputElement[];
+ },
+ get contactEmailInputs() {
+ return screen.getAllByLabelText(/Email/) as HTMLInputElement[];
+ },
+ get contactPersonNameInput() {
+ return screen.getByLabelText(/Name/) as HTMLInputElement;
+ },
+ get contactPersonPhoneNumberInput() {
+ return screen.getByLabelText(/Phone number/) as HTMLInputElement;
+ },
+ get contactPersonFaxNumberInput() {
+ return screen.getByLabelText(/Fax number/) as HTMLInputElement;
+ },
+ get contactPersonEmailInput() {
+ return screen.getByLabelText(/Contact email/) as HTMLInputElement;
+ },
+ };
+ }
+
+ async expectStepTitle() {
+ await waitFor(async () => {
+ await expect(this.elements.formStepHeader).toBeInTheDocument();
+ });
+ }
+
+ async setContactType(index: number, value: string) {
+ await userEvent.type(this.elements.contactTypeInputs[0], value);
+ }
+
+ async setContactEmail(index: number, value: string) {
+ await userEvent.type(this.elements.contactEmailInputs[0], value);
+ }
+
+ async setContactPhone(index: number, value: string) {
+ await userEvent.type(this.elements.contactPhoneInputs[0], value);
+ }
+
+ async setContactPersonName(value: string) {
+ await userEvent.type(this.elements.contactPersonNameInput, value);
+ }
+
+ async setContactPersonPhoneNumber(value: string) {
+ await userEvent.type(this.elements.contactPersonPhoneNumberInput, value);
+ }
+
+ async setContactPersonFaxNumber(value: string) {
+ await userEvent.type(this.elements.contactPersonFaxNumberInput, value);
+ }
+
+ async setContactPersonEmail(value: string) {
+ await userEvent.type(this.elements.contactPersonEmailInput, value);
+ }
+
+ async goToNextStep() {
+ await userEvent.click(this.elements.nextButton);
+ }
+
+ static render(canvasElement: HTMLElement) {
+ return new ContactStepPo(canvasElement);
+ }
+}

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/CreateFacilityMultiStepForm.stories.tsx

@@ -5,22 +5,32 @@ import { FacilityFixture, generateID } from 'utils';
 import { managementMockService } from 'utils/mock';
 
 import { CreateFacilityMultiStepForm } from './index';
-import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
 import { CreateFacilityMapper } from 'modules/facility/application';
+import { BaseInfoStepPo } from './BaseInfoStep/BaseInfoStep.po';
+import { WorkingDaysAndAddressStepPo } from './WorkingDaysAndAddressStep/WorkingDaysAndAddressStep.po';
+import { ContactStepPo } from './ContactStep/ContactStep.po';
+import { SummaryStepPo } from './SummaryStep/SummaryStep.po';
 
 const ENTERPRISE_ID = generateID();
 const EMPLOYEE_ID = generateID();
 
+const facility = CreateFacilityMapper.modelToForm(
+ FacilityFixture.createPermutation({
+ contactPerson: {
+ name: 'John Doe',
+ phone: '+48 555444333',
+ fax: '+48 555444333',
+ email: '[email protected]',
+ },
+ }),
+);
+
 export default {
  title: 'modules/facility/AddFacilityForm/Form',
  component: CreateFacilityMultiStepForm,
  decorators: [
  Story => {
  managementMockService.post(`enterprises/${ENTERPRISE_ID}/facilities`, {});
- useFacilityFormStore.setState({
- data: CreateFacilityMapper.modelToForm(FacilityFixture.toStructure()),
- step: FacilityFormStep.Base_info,
- });
 
  return <Story />;
  },
@@ -31,4 +41,49 @@ const Template: ComponentStory<typeof CreateFacilityMultiStepForm> = () => {
  return <CreateFacilityMultiStepForm enterpriseId={ENTERPRISE_ID} employeeId={EMPLOYEE_ID} />;
 };
 
-export const Form = Template.bind({});
+export const CreateFacilityForm = Template.bind({});
+CreateFacilityForm.play = async ({ canvasElement }) => {
+ const baseInfoStepPo = BaseInfoStepPo.render(canvasElement);
+ const workingHoursStepPo = WorkingDaysAndAddressStepPo.render(canvasElement);
+ const contactStepPo = ContactStepPo.render(canvasElement);
+ const summaryStepPo = SummaryStepPo.render(canvasElement);
+
+ await baseInfoStepPo.expectStepTitle();
+
+ await baseInfoStepPo.setName(facility.facilityName);
+ await baseInfoStepPo.setSlug(facility.slug);
+ await baseInfoStepPo.setDescription(facility.facilityDescription ?? '');
+ await baseInfoStepPo.setCurrency('EU');
+ await baseInfoStepPo.setMainBusinessCategory('Barber');
+ await baseInfoStepPo.setSubordinateBusinessCategory(['Barber', 'Hairdresser']);
+
+ await baseInfoStepPo.goToNextStep();
+
+ await workingHoursStepPo.expectStepTitle();
+
+ await workingHoursStepPo.setWeekDay(0, 'Monday');
+ await workingHoursStepPo.setHourUntil(0, '09:00');
+ await workingHoursStepPo.setHourTo(0, '16:00');
+ await workingHoursStepPo.setPostCode(facility.address.postCode);
+ await workingHoursStepPo.setCity(facility.address.city);
+ await workingHoursStepPo.setStreet(facility.address.street);
+
+ await workingHoursStepPo.goToNextStep();
+
+ await contactStepPo.expectStepTitle();
+
+ await contactStepPo.setContactPhone(0, '+48 555444333');
+ await contactStepPo.setContactType(1, 'Email');
+ await contactStepPo.setContactEmail(0, '[email protected]');
+ await contactStepPo.setContactPersonName(facility.contactPerson?.name ?? '');
+ await contactStepPo.setContactPersonPhoneNumber(facility.contactPerson?.phone ?? '');
+ await contactStepPo.setContactPersonFaxNumber(facility.contactPerson?.fax ?? '');
+ await contactStepPo.setContactPersonEmail(facility.contactPerson?.email ?? '');
+
+ await contactStepPo.goToNextStep();
+
+ await summaryStepPo.expectStepTitle();
+
+ await summaryStepPo.submitForm();
+ await summaryStepPo.expectFacilityNotificationAppeared();
+};

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/SummaryStep/SummaryStep.po.ts

@@ -0,0 +1,46 @@
+import { screen, userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export class SummaryStepPo {
+ private elements: {
+ formStepHeader: HTMLElement;
+ submitButton: HTMLElement;
+ createFacilityNotification: HTMLElement;
+ };
+
+ protected constructor(protected canvasElement: HTMLElement) {
+ within(canvasElement);
+
+ this.elements = {
+ get formStepHeader() {
+ return screen.getByText('Step 4: Summary');
+ },
+ get submitButton() {
+ return screen.getByRole('button', { name: /Submit/ });
+ },
+ get createFacilityNotification() {
+ return screen.getByText('New facility created successfully');
+ },
+ };
+ }
+
+ async expectStepTitle() {
+ await waitFor(async () => {
+ await expect(this.elements.formStepHeader).toBeInTheDocument();
+ });
+ }
+
+ async submitForm() {
+ await userEvent.click(this.elements.submitButton);
+ }
+
+ async expectFacilityNotificationAppeared() {
+ await waitFor(async () => {
+ await expect(this.elements.createFacilityNotification).toBeInTheDocument();
+ });
+ }
+
+ static render(canvasElement: HTMLElement) {
+ return new SummaryStepPo(canvasElement);
+ }
+}