Test improvements (#2917)

* test(frontend): speed up applicant test by changing the input function * test(frontend): change findByRole to a Selector query to get rid of warnings
City-of-Helsinki · Apr 5, 2024 · ea2ab9a · ea2ab9a
1 parent c55a06e
commit ea2ab9a
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 127 deletions.
diff --git a/frontend/benefit/applicant/browser-tests/page-model/ApplicantPageComponent.ts b/frontend/benefit/applicant/browser-tests/page-model/ApplicantPageComponent.ts
@@ -4,6 +4,7 @@ import {
   containsRegexp,
   replaceValues,
 } from '@frontend/shared/src/__tests__/utils/translation-utils';
+import { Selector } from 'testcafe';
 
 import en from '../../public/locales/en/common.json';
 import fi from '../../public/locales/fi/common.json';
@@ -25,5 +26,12 @@ abstract class ApplicantPageComponent extends TranslatedComponent<ApplicantTrans
       options
     );
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected findRadioLabelWithGroupText = (
+    groupText: string,
+    labelText: string
+  ): Selector =>
+    Selector('fieldset').withText(groupText).find('label').withText(labelText);
 }
 export default ApplicantPageComponent;
diff --git a/frontend/benefit/applicant/browser-tests/page-model/step1.ts b/frontend/benefit/applicant/browser-tests/page-model/step1.ts
@@ -1,4 +1,4 @@
-import { t } from 'testcafe';
+import { Selector, t } from 'testcafe';
 
 import WizardStep from './WizardStep';
 
@@ -63,53 +63,29 @@ class Step1 extends WizardStep {
     ),
   });
 
-  private businessActivitiesFalse = 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.no,
-  });
+  private businessActivitiesFalse = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields
+      .associationHasBusinessActivities.label,
+    this.translations.applications.sections.company.fields
+      .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 businessActivitiesTrue = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields
+      .associationHasBusinessActivities.label,
+    this.translations.applications.sections.company.fields
+      .associationHasBusinessActivities.yes
+  );
 
-  private deMinimisAidFalse = this.within(
-    this.component.getByRole('group', {
-      name: this.regexp(
-        this.translations.applications.sections.company.fields.deMinimisAid
-          .label
-      ),
-    })
-  ).findByRole('radio', {
-    name: this.translations.applications.sections.company.fields.deMinimisAid
-      .no,
-  });
+  private deMinimisAidFalse = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields.deMinimisAid.label,
+    this.translations.applications.sections.company.fields.deMinimisAid.no
+  );
 
-  private deMinimisAidTrue = this.within(
-    this.component.getByRole('group', {
-      name: this.regexp(
-        this.translations.applications.sections.company.fields.deMinimisAid
-          .label
-      ),
-    })
-  ).findByRole('radio', {
-    name: this.translations.applications.sections.company.fields.deMinimisAid
-      .yes,
-  });
+  private deMinimisAidTrue = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields.deMinimisAid.label,
+    this.translations.applications.sections.company.fields.deMinimisAid.yes
+  );
 
   hasImmediateManagerCheckbox = this.component.findByRole('checkbox', {
     name: this.regexp(
@@ -118,29 +94,19 @@ class Step1 extends WizardStep {
     ),
   });
 
-  private coOperationNegotiationsFalse = 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.no,
-  });
+  private coOperationNegotiationsFalse = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields
+      .coOperationNegotiations.label,
+    this.translations.applications.sections.company.fields
+      .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 coOperationNegotiationsTrue = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.company.fields
+      .coOperationNegotiations.label,
+    this.translations.applications.sections.company.fields
+      .coOperationNegotiations.yes
+  );
 
   private coOperationNegotiationsDescription = this.component.findByRole(
     'textbox',
@@ -169,30 +135,27 @@ class Step1 extends WizardStep {
     phoneNumber: string,
     email: string
   ): Promise<void> {
-    await this.fillInput(this.firstName, firstName);
-    await this.fillInput(this.lastName, lastName);
-    await this.fillInput(this.phoneNumber, phoneNumber);
-    return this.fillInput(this.email, email);
+    await t.typeText(this.firstName, firstName);
+    await t.typeText(this.lastName, lastName);
+    await t.typeText(this.phoneNumber, phoneNumber);
+    return t.typeText(this.email, email);
   }
 
   public async fillDeminimisAid(
     granter?: string,
     amount?: string,
     grantedAt?: string
   ): Promise<void> {
-    if (granter) await this.fillInput(this.deminimisGranter, granter);
-    if (amount) await this.fillInput(this.deminimisAmount, amount);
-    if (grantedAt) await this.fillInput(this.deminimisGrantedAt, grantedAt);
+    if (granter) await t.typeText(this.deminimisGranter, granter);
+    if (amount) await t.typeText(this.deminimisAmount, amount);
+    if (grantedAt) await t.typeText(this.deminimisGrantedAt, grantedAt);
     return this.clickDeminimisSave();
   }
 
   public async fillCoOperationNegotiationsDescription(
     clarification: string
   ): Promise<void> {
-    await this.fillInput(
-      this.coOperationNegotiationsDescription,
-      clarification
-    );
+    await t.typeText(this.coOperationNegotiationsDescription, clarification);
   }
 
   private deminimisSave = this.component.findByRole('button', {

diff --git a/frontend/benefit/applicant/browser-tests/page-model/step2.ts b/frontend/benefit/applicant/browser-tests/page-model/step2.ts
@@ -1,3 +1,5 @@
+import { t } from 'testcafe';
+
 import WizardStep from './WizardStep';
 
 class Step2 extends WizardStep {
@@ -31,46 +33,26 @@ class Step2 extends WizardStep {
     ),
   });
 
-  private paidSubsidyDefault = this.within(
-    this.component.getByRole('group', {
-      name: this.regexp(
-        this.translations.applications.sections.employee.fields
-          .paySubsidyGranted.label
-      ),
-    })
-  ).findByRole('radio', {
-    name: this.translations.applications.sections.employee.fields
-      .paySubsidyGranted.paySubsidyDefault,
-  });
-
-  private apprenticeshipProgramFalse = 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.no,
-  });
+  private paidSubsidyDefault = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.employee.fields.paySubsidyGranted
+      .label,
+    this.translations.applications.sections.employee.fields.paySubsidyGranted
+      .paySubsidyDefault
+  );
 
-  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 apprenticeshipProgramFalse = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.employee.fields
+      .apprenticeshipProgram.label,
+    this.translations.applications.sections.employee.fields
+      .apprenticeshipProgram.no
+  );
 
-  private benefitTypeEmployment = this.component.findByRole('radio', {
-    name: this.translations.applications.sections.employee.fields.benefitType
-      .employment,
-  });
+  private apprenticeshipProgramTrue = this.findRadioLabelWithGroupText(
+    this.translations.applications.sections.employee.fields
+      .apprenticeshipProgram.label,
+    this.translations.applications.sections.employee.fields
+      .apprenticeshipProgram.yes
+  );
 
   private startDate = this.component.findByRole('textbox', {
     name: this.regexp(
@@ -128,9 +110,9 @@ class Step2 extends WizardStep {
     lastName: string,
     ssn: string
   ): Promise<void> {
-    await this.fillInput(this.firstName, firstName);
-    await this.fillInput(this.lastName, lastName);
-    await this.fillInput(this.ssn, ssn);
+    await t.typeText(this.firstName, firstName);
+    await t.typeText(this.lastName, lastName);
+    await t.typeText(this.ssn, ssn);
     await this.clickSelectRadioButton(this.isLivingInHelsinkiCheckbox);
   }
 
@@ -149,9 +131,9 @@ class Step2 extends WizardStep {
     startDate: string,
     endDate: string
   ): Promise<void> {
-    await this.fillInput(this.endDate, endDate);
+    await t.typeText(this.endDate, endDate);
 
-    await this.fillInput(this.startDate, startDate);
+    await t.typeText(this.startDate, startDate);
   }
 
   public async fillEmploymentInfo(
@@ -162,15 +144,15 @@ class Step2 extends WizardStep {
     otherExpenses: string,
     vacationMoney: string
   ): Promise<void> {
-    await this.fillInput(this.jobTitle, jobTitle);
-    await this.fillInput(this.workingHours, workingHours);
-    await this.fillInput(
+    await t.typeText(this.jobTitle, jobTitle);
+    await t.typeText(this.workingHours, workingHours);
+    await t.typeText(
       this.collectiveBargainingAgreement,
       collectiveBargainingAgreement
     );
-    await this.fillInput(this.monthlyPay, String(monthlyPay));
-    await this.fillInput(this.vacationMoney, String(vacationMoney));
-    await this.fillInput(this.otherExpenses, otherExpenses);
+    await t.typeText(this.monthlyPay, String(monthlyPay));
+    await t.typeText(this.vacationMoney, String(vacationMoney));
+    await t.typeText(this.otherExpenses, otherExpenses);
   }
 }