fix: application is no longer 404'd on creation and navigation (#2338)

* fix: get rid of isReadOnly flag the data already exists in prop so no need to make router checks * chore: add more form filling tests * feat: use env to skip console.log on tests * docs: add missing env for running tests * refactor: rename types * fix: disable tests that fail on CI
City-of-Helsinki · Oct 16, 2023 · ccbed72 · ccbed72
1 parent d28703c
commit ccbed72
Show file tree

Hide file tree

Showing 28 changed files with 644 additions and 227 deletions.
diff --git a/.env.benefit-backend.example b/.env.benefit-backend.example
@@ -5,6 +5,7 @@ ENABLE_DEBUG_ENV=1
 APPLY_MIGRATIONS=1
 CREATE_SUPERUSER=1
 LOAD_FIXTURES=1
+LOAD_DEFAULT_TERMS=1
 COMPILE_TRANSLATIONS=1
 CORS_ALLOW_ALL_ORIGINS=1
 

diff --git a/frontend/.testcaferc.base.js b/frontend/.testcaferc.base.js
@@ -25,11 +25,13 @@ module.exports = (envPath) => {
     hooks: {
       test: {
         after: async (t) => {
-          const { error, warn, log, info } = await t.getBrowserConsoleMessages();
-          console.log('Console logs:', JSON.stringify(log, null, 2));
-          console.info('Console infos:', JSON.stringify(info, null, 2));
-          console.warn('Console warnings:', JSON.stringify(warn, null, 2));
-          console.error('Console errors:', JSON.stringify(error, null, 2));
+          if (!process.env.TESTCAFE_SKIP_CONSOLE_LOG) {
+            const { error, warn, log, info } = await t.getBrowserConsoleMessages();
+            console.log('Console logs:', JSON.stringify(log, null, 2));
+            console.info('Console infos:', JSON.stringify(info, null, 2));
+            console.warn('Console warnings:', JSON.stringify(warn, null, 2));
+            console.error('Console errors:', JSON.stringify(error, null, 2));
+          }
         },
       },
     },

diff --git a/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts b/frontend/benefit/applicant/browser-tests/page-model/deminimis.ts
@@ -46,7 +46,7 @@ class DeMinimisAid {
       '050001234',
       'tester@example.com'
     );
-    await this.step1.selectNocoOperationNegotiations();
+    await this.step1.selectCoOperationNegotiations(false);
   };
 
   public getRowCount = async (): Promise<number> =>
@@ -144,7 +144,7 @@ class DeMinimisAid {
       t: TestController,
       action: SAVE_ACTIONS
     ): Promise<void> => {
-      await this.step1.selectNoDeMinimis();
+      await this.step1.selectDeMinimis(false);
 
       if (action === SAVE_ACTIONS.CONTINUE) {
         await this.actions.saveStep1AndReturn();
@@ -153,7 +153,7 @@ class DeMinimisAid {
         await this.saveExitAndEdit(t);
       }
 
-      await this.step1.selectYesDeMinimis();
+      await this.step1.selectDeMinimis(true);
       await t.scrollIntoView(this.getSelectorContinueButton());
       await t.expect(await this.getRowCount()).eql(0);
     },

diff --git a/frontend/benefit/applicant/browser-tests/page-model/step1.ts b/frontend/benefit/applicant/browser-tests/page-model/step1.ts
@@ -75,6 +75,18 @@ class Step1 extends WizardStep {
       .associationHasBusinessActivities.no,
   });
 
+  private businessActivitiesTrue = this.within(
+    this.component.getByRole('group', {
+      name: this.regexp(
+        this.translations.applications.sections.company.fields
+          .associationHasBusinessActivities.label
+      ),
+    })
+  ).findByRole('radio', {
+    name: this.translations.applications.sections.company.fields
+      .associationHasBusinessActivities.yes,
+  });
+
   private deMinimisAidFalse = this.within(
     this.component.getByRole('group', {
       name: this.regexp(
@@ -118,6 +130,28 @@ class Step1 extends WizardStep {
       .coOperationNegotiations.no,
   });
 
+  private coOperationNegotiationsTrue = this.within(
+    this.component.getByRole('group', {
+      name: this.regexp(
+        this.translations.applications.sections.company.fields
+          .coOperationNegotiations.label
+      ),
+    })
+  ).findByRole('radio', {
+    name: this.translations.applications.sections.company.fields
+      .coOperationNegotiations.yes,
+  });
+
+  private coOperationNegotiationsDescription = this.component.findByRole(
+    'textbox',
+    {
+      name: this.regexp(
+        this.translations.applications.sections.company.fields
+          .coOperationNegotiationsDescription.label
+      ),
+    }
+  );
+
   public async fillEmployerInfo(
     iban: string,
     isAssociation: boolean
@@ -152,6 +186,15 @@ class Step1 extends WizardStep {
     return this.clickDeminimisSave();
   }
 
+  public async fillCoOperationNegotiationsDescription(
+    clarification: string
+  ): Promise<void> {
+    await this.fillInput(
+      this.coOperationNegotiationsDescription,
+      clarification
+    );
+  }
+
   private deminimisSave = this.component.findByRole('button', {
     name: this.translations.applications.sections.company.deMinimisAidsAdd,
   });
@@ -167,19 +210,19 @@ class Step1 extends WizardStep {
     return t.click(this.deminimisRemove(index));
   }
 
-  public selectNoBusinessActivities(): Promise<void> {
-    return this.clickSelectRadioButton(this.businessActivitiesFalse);
+  public selectBusinessActivities(yes: boolean): Promise<void> {
+    if (yes) return this.clickSelectRadioButton(this.businessActivitiesFalse);
+    return this.clickSelectRadioButton(this.businessActivitiesTrue);
   }
 
-  public selectNoDeMinimis(): Promise<void> {
+  public selectDeMinimis(yes: boolean): Promise<void> {
+    if (yes) return this.clickSelectRadioButton(this.deMinimisAidTrue);
     return this.clickSelectRadioButton(this.deMinimisAidFalse);
   }
 
-  public selectYesDeMinimis(): Promise<void> {
-    return this.clickSelectRadioButton(this.deMinimisAidTrue);
-  }
-
-  public selectNocoOperationNegotiations(): Promise<void> {
+  public selectCoOperationNegotiations(yes: boolean): Promise<void> {
+    if (yes)
+      return this.clickSelectRadioButton(this.coOperationNegotiationsTrue);
     return this.clickSelectRadioButton(this.coOperationNegotiationsFalse);
   }
 }

diff --git a/frontend/benefit/applicant/browser-tests/page-model/step2.ts b/frontend/benefit/applicant/browser-tests/page-model/step2.ts
@@ -55,6 +55,18 @@ class Step2 extends WizardStep {
       .apprenticeshipProgram.no,
   });
 
+  private apprenticeshipProgramTrue = this.within(
+    this.component.getByRole('group', {
+      name: this.regexp(
+        this.translations.applications.sections.employee.fields
+          .apprenticeshipProgram.label
+      ),
+    })
+  ).findByRole('radio', {
+    name: this.translations.applications.sections.employee.fields
+      .apprenticeshipProgram.yes,
+  });
+
   private benefitTypeEmployment = this.component.findByRole('radio', {
     name: this.translations.applications.sections.employee.fields.benefitType
       .employment,
@@ -122,8 +134,14 @@ class Step2 extends WizardStep {
     await this.clickSelectRadioButton(this.isLivingInHelsinkiCheckbox);
   }
 
-  public async fillPaidSubsidyGrant(): Promise<void> {
+  public async fillPaidSubsidyGrant(
+    apprenticeshipProgram: boolean
+  ): Promise<void> {
     await this.clickSelectRadioButton(this.paidSubsidyDefault);
+    if (apprenticeshipProgram) {
+      await this.clickSelectRadioButton(this.apprenticeshipProgramTrue);
+      return;
+    }
     await this.clickSelectRadioButton(this.apprenticeshipProgramFalse);
   }
 

diff --git a/frontend/benefit/applicant/browser-tests/page-model/step3.ts b/frontend/benefit/applicant/browser-tests/page-model/step3.ts
@@ -10,29 +10,41 @@ class Step3 extends WizardStep {
   private employmentContract = this.component.findByTestId(
     'employment_contract'
   );
+
   private paySubsidyDecision = this.component.findByTestId(
     'pay_subsidy_decision'
   );
+
   private helsinkiBenefitVoucher = this.component.findByTestId(
     'helsinki_benefit_voucher'
   );
+
   private educationContract = this.component.findByTestId('education_contract');
 
-  async employmentContractNeeded() {
+  async employmentContractNeeded(): Promise<void> {
     await t.expect(this.employmentContract.exists).ok();
   }
 
-  async paySubsidyDecisionNeeded() {
+  async paySubsidyDecisionNeeded(): Promise<void> {
     await t.expect(this.paySubsidyDecision.exists).ok();
   }
 
-  async helsinkiBenefitVoucherNeeded() {
+  async helsinkiBenefitVoucherNeeded(): Promise<void> {
     await t.expect(this.helsinkiBenefitVoucher.exists).ok();
   }
 
-  async educationContractNeeded() {
+  async educationContractNeeded(): Promise<void> {
     await t.expect(this.educationContract.exists).ok();
   }
+
+  async stageUploadFiles(uploadIds: string[]): Promise<void> {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const id of uploadIds) {
+      // eslint-disable-next-line no-await-in-loop
+      await t.setFilesToUpload(id, 'sample.pdf');
+    }
+    await t.wait(500);
+  }
 }
 
 export default Step3;
diff --git a/frontend/benefit/applicant/browser-tests/page-model/step4.ts b/frontend/benefit/applicant/browser-tests/page-model/step4.ts
@@ -0,0 +1,26 @@
+import { t } from 'testcafe';
+
+import WizardStep from './WizardStep';
+
+class Step4 extends WizardStep {
+  constructor() {
+    super(4);
+  }
+
+  private employeeConsent = this.component.findByTestId('employee_consent');
+
+  async employeeConsentNeeded(): Promise<void> {
+    await t.expect(this.employeeConsent.exists).ok();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async stageUploadFiles(): Promise<void> {
+    await t.setFilesToUpload(
+      '#upload_attachment_employee_consent',
+      'sample.pdf'
+    );
+    await t.wait(500);
+  }
+}
+
+export default Step4;
diff --git a/frontend/benefit/applicant/browser-tests/page-model/step5.ts b/frontend/benefit/applicant/browser-tests/page-model/step5.ts
@@ -0,0 +1,69 @@
+import { Selector, t } from 'testcafe';
+
+import { ApplicationFormData } from '../types';
+import {
+  ApplicationField,
+  mapFullForm as mapFieldsExtra,
+  mapRequiredForm as mapFieldsMandatory,
+} from '../utils/fieldMaps';
+import WizardStep from './WizardStep';
+
+class Step5 extends WizardStep {
+  private fieldsRequired: ApplicationField[];
+
+  private fieldsExtra: ApplicationField[];
+
+  private Selector = Selector;
+
+  constructor(form: ApplicationFormData) {
+    super(5);
+
+    this.fieldsRequired = mapFieldsMandatory(form);
+    this.fieldsExtra = mapFieldsExtra(form);
+  }
+
+  private associationFieldNames = [
+    'application-field-associationImmediateManagerCheck',
+  ];
+
+  private fieldIsVisible = async (testId: string): Promise<boolean> =>
+    this.component.findByTestId(testId).visible;
+
+  private fieldValueIsVisible = async (
+    testId: string,
+    value: string
+  ): Promise<boolean> =>
+    this.Selector(`[data-testid="${testId}"]`).withText(value).visible;
+
+  async fieldsExistFor(
+    organizationType: 'company' | 'association'
+  ): Promise<void> {
+    const fullForm = [...this.fieldsRequired, ...this.fieldsExtra];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const field of fullForm) {
+      // eslint-disable-next-line no-await-in-loop
+      await t.scrollIntoView(`[data-testid="${field.testId}"]`);
+      // eslint-disable-next-line no-await-in-loop
+      await t.expect(await this.fieldIsVisible(field.testId)).ok();
+      if (field.value) {
+        // eslint-disable-next-line no-await-in-loop
+        const fieldIsVisible = await this.fieldValueIsVisible(
+          field.testId,
+          field.value
+        );
+        // eslint-disable-next-line no-await-in-loop
+        await t.expect(fieldIsVisible).ok();
+      }
+    }
+
+    if (organizationType === 'association') {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const testId of this.associationFieldNames) {
+        // eslint-disable-next-line no-await-in-loop
+        await t.expect(await this.fieldIsVisible(testId)).ok();
+      }
+    }
+  }
+}
+
+export default Step5;
diff --git a/frontend/benefit/applicant/browser-tests/page-model/step6.ts b/frontend/benefit/applicant/browser-tests/page-model/step6.ts
@@ -0,0 +1,44 @@
+import { Selector, t } from 'testcafe';
+
+import WizardStep from './WizardStep';
+
+class Step6 extends WizardStep {
+  constructor() {
+    super(6);
+  }
+
+  protected nextButton = this.component.findByRole('button', {
+    name: this.translations.applications.actions.send,
+  });
+
+  public submitSuccessLabel = this.component.findByText(
+    this.translations.notifications.applicationSubmitted.label,
+    { selector: 'h1' }
+  );
+
+  public async isShowingSubmitSuccess(): Promise<void> {
+    await t
+      .expect(
+        await Selector('h1').withText(
+          this.translations.notifications.applicationSubmitted.label
+        ).visible
+      )
+      .ok();
+  }
+
+  public applicantTerms = this.component.findByTestId('');
+
+  /**
+   * Click through all applicant terms.
+   * Assume terms are loaded from fixture default_terms.json using LOAD_DEFAULT_TERMS=1
+   */
+  public async checkApplicantTerms(): Promise<void> {
+    const consentSelector = '[data-testid="application-terms-consent"]';
+    await t.click(Selector(consentSelector).nth(0));
+    await t.click(Selector(consentSelector).nth(1));
+    await t.click(Selector(consentSelector).nth(2));
+    await t.click(Selector(consentSelector).nth(3));
+  }
+}
+
+export default Step6;
diff --git a/...er-tests/testruns/association.testcafe.ts → ...owser-tests/pages/association.testcafe.ts b/...er-tests/testruns/association.testcafe.ts → ...owser-tests/pages/association.testcafe.ts
@@ -44,14 +44,14 @@ test.skip('New application', async () => {
     'need.email@example.com'
   );
 
-  await step1.selectNocoOperationNegotiations();
+  await step1.selectCoOperationNegotiations(false);
   await step1.clickSubmit();
 
   const step2 = new Step2();
   await step2.isLoaded();
 
   await step2.fillEmployeeInfo('Truu', 'Koos', '121148-8060');
-  await step2.fillPaidSubsidyGrant();
+  await step2.fillPaidSubsidyGrant(false);
   const currentYear: number = new Date().getFullYear();
   await step2.fillBenefitPeriod(
     `1.3.${currentYear}`,