Merge #7215

7215: Migrate end-to-end tests to Playwright r=jmcameron a=jmcameron This PR enables end-to-end tests that have been migrated from Protractor to Playwright. Note that only 23% of the end-to-end have been converted, but it seems appropriate to start using the tests that have been migrated now to avoid any regressions that they might catch. Note that the old Protractor tests have not been deleted yet, since the obsolete files may still be useful in the migration process. Also the original command `yarn test:ends` are unchanged so it remains broken. Use the new command `yarn test:e2e` instead. Note that a few of these tests still sporadically fail; I'm trying to resolve those problems. See [Issue 6976](#6976) for details about the migration. Note: This PR replaces [PR 7024](#7024). It is essentially a rebase to consolidate all the commit messages (via git diff vs master and patch, not via `git rebase`). ### Testing - Set your .env file for bhima_test - Run `yarn` to update dependencies (you may want to run `yarn upgrade` too) - Install playwright: - `npm install playwright` - Verify the two versions match: - `grep '`@playwright/test@'` yarn.lock` - `npx playwright --version` - Run the tests: `yarn test:e2e` Co-authored-by: Jonathan Cameron <jmcameron@gmail.com>
Third-Culture-Software · Aug 24, 2023 · 3559d54 · 3559d54
2 parents 2a6c8db + 25b20df
commit 3559d54
Show file tree

Hide file tree

Showing 300 changed files with 20,159 additions and 126 deletions.
diff --git a/.eslintrc.local.json b/.eslintrc.local.json
@@ -0,0 +1,48 @@
+{
+  "plugins": [
+    "jsdoc"
+  ],
+  "rules": {
+    "jsdoc/check-access": 1, // Recommended
+    "jsdoc/check-alignment": 1, // Recommended
+    "jsdoc/check-indentation": 1,
+    "jsdoc/check-line-alignment": 1,
+    "jsdoc/check-param-names": 1, // Recommended
+    "jsdoc/check-property-names": 1, // Recommended
+    "jsdoc/check-syntax": 1,
+    "jsdoc/check-tag-names": 1, // Recommended
+    "jsdoc/check-types": 1, // Recommended
+    "jsdoc/check-values": 1, // Recommended
+    "jsdoc/empty-tags": 1, // Recommended
+    "jsdoc/implements-on-classes": 1, // Recommended
+    "jsdoc/multiline-blocks": 1, // Recommended
+    // "jsdoc/newline-after-description": 1, // Deprecated
+    "jsdoc/no-bad-blocks": 1,
+    "jsdoc/no-defaults": 1,
+    "jsdoc/no-multi-asterisks": 1, // Recommended
+    "jsdoc/no-undefined-types": 1, // Recommended
+    "jsdoc/require-asterisk-prefix": 1,
+    "jsdoc/require-description": 1,
+    "jsdoc/require-file-overview": 0,
+    "jsdoc/require-hyphen-before-param-description": 1,
+    "jsdoc/require-jsdoc": 1, // Recommended
+    "jsdoc/require-param": 1, // Recommended
+    "jsdoc/require-param-description": 1, // Recommended
+    "jsdoc/require-param-name": 1, // Recommended
+    "jsdoc/require-param-type": 1, // Recommended
+    "jsdoc/require-property": 1, // Recommended
+    "jsdoc/require-property-description": 1, // Recommended
+    "jsdoc/require-property-name": 1, // Recommended
+    "jsdoc/require-property-type": 1, // Recommended
+    "jsdoc/require-returns": 1, // Recommended
+    "jsdoc/require-returns-check": 1, // Recommended
+    "jsdoc/require-returns-description": 1, // Recommended
+    "jsdoc/require-returns-type": 1, // Recommended
+    "jsdoc/require-throws": 0,
+    "jsdoc/require-yields": 1, // Recommended
+    "jsdoc/require-yields-check": 1, // Recommended
+    "jsdoc/sort-tags": 1,
+    "jsdoc/tag-lines": 0, // Recommended
+    "jsdoc/valid-types": 1 // Recommended
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -46,14 +46,24 @@ sh/build-database-test.sh
 # Ignore local temporary files
 temp/
 
+# Ignore local eslint soft-links
+client/.eslintrc.json
+server/.eslintrc.json
+test/.eslintrc.json
+
 # ignore documentation bad files
 docs/_site/
 docs/.sass-cache/
 
 client/upload/
 
 test/*/report
+test/*/report-stock
 
 migration-*.sql
 yarn-error.log
 *.log
+/test-results
+/playwright-report
+/playwright/.cache
+/tests-examples
diff --git a/.semaphore/semaphore.yml b/.semaphore/semaphore.yml
@@ -43,6 +43,8 @@ blocks:
           value: client/upload
         - name: BUILD_TIMEOUT
           value: '30'
+        - name: CI
+          value: '1'
       jobs:
         - name: Run Test Matrix
           commands:
@@ -55,6 +57,7 @@ blocks:
             - checkout
             - 'echo "Testing node:$NODEJS_VERSION on mysql:$MYSQL_VERSION"'
             - yarn --ignore-engines
+            - npx playwright install
             - 'yarn build:db'
             - yarn build
             - 'yarn test:server-unit'

diff --git a/client/src/i18n/en/form.json b/client/src/i18n/en/form.json
@@ -574,6 +574,7 @@
             "IS_TURNOVER": "Is turnover?",
             "IS_WAREHOUSE": "Is warehouse?",
             "ITEMS" : "Items",
+            "JOB_FUNCTION" : "Job Function",
             "LABEL": "Label",
             "LANGUAGE": "Language",
             "LAST_ENTRY_DATE": "Last Entry Date",
@@ -625,7 +626,7 @@
             "NB_CHILD": "Number of Dependents",
             "NB_CHILDREN": "Number of Children",
             "NB_MONTH": "Number of Months",
-            "NB_SPOUSE": "spouse count",
+            "NB_SPOUSE": "Spouse Count",
             "NET_SALARY": "Net Salary",
             "NEW_EXCHANGE_RATE": "New Exchange Rate",
             "NO_DEBTOR_GROUPS": "No debtor groups",
@@ -873,9 +874,9 @@
             "USE_SIMPLIFIED_CARD": "Use simple patient identity",
             "USE": "Use",
             "VALIDATED": "Validated",
-            "VALIDATED_BY": "Validated by",            
+            "VALIDATED_BY": "Validated by",
             "VALIDATION": "Validation",
-            "VALIDATION_DATE": "Validation date",            
+            "VALIDATION_DATE": "Validation date",
             "VALUE": "Value",
             "VALUE_IN_STOCK": "Value in stock",
             "VARIABLE_CHARGE": "Variable cost",
@@ -946,7 +947,7 @@
               "IN_PROGRESS":"In Progress",
               "PARTIALLY":"Partially delivered",
               "PARTIAL_SURPLUSES" : "Partial with surpluses",
-              "VALIDATED"     : "Validated"              
+              "VALIDATED"     : "Validated"
             }
         },
         "LEGENDS": {

diff --git a/client/src/i18n/en/payroll.json b/client/src/i18n/en/payroll.json
@@ -1,6 +1,6 @@
 {
   "PAYROLL_STATUS": {
-    "CONFIGURED": "configured",
+    "CONFIGURED": "Configured",
     "PAID" : "Paid",
     "PARTIALLY_PAID" : "Partially paid",
     "WAITING_FOR_CONFIGURATION" : "Waiting for configuration",

diff --git a/client/src/i18n/fr/form.json b/client/src/i18n/fr/form.json
@@ -577,6 +577,7 @@
             "IS_TURNOVER": "est ce le chiffre d'affaire?",
             "IS_WAREHOUSE": "Entrepôt ?",
             "ITEMS" : "Items",
+            "JOB_FUNCTION" : "Fontion professional",
             "LABEL": "Désignation",
             "LANGUAGE": "Langue",
             "LAST_ENTRY_DATE": "Date de  la dernière entrée",
@@ -876,7 +877,7 @@
             "VALIDATED": "Validé",
             "VALIDATED_BY": "Validé par",
             "VALIDATION": "Validation",
-            "VALIDATION_DATE": "Date de la validation",            
+            "VALIDATION_DATE": "Date de la validation",
             "VALUE": "Valeur",
             "VALUE_IN_STOCK": "Valeur en stock",
             "VARIABLE_CHARGE": "Charge variable",

diff --git a/client/src/js/components/bhFonctionSelect.js b/client/src/js/components/bhFonctionSelect.js
@@ -21,7 +21,7 @@ FonctionSelectController.$inject = [
 function FonctionSelectController(functions, Notify) {
   const $ctrl = this;
   $ctrl.$onInit = function onInit() {
-    $ctrl.label = $ctrl.label || 'FORM.LABELS.PROFESSION';
+    $ctrl.label = $ctrl.label || 'FORM.LABELS.JOB_FUNCTION';
 
     functions.read()
       .then(fct => {

diff --git a/client/src/js/components/bhStockExitType.js b/client/src/js/components/bhStockExitType.js
@@ -2,7 +2,7 @@ const stockExitTypeTmpl = `
 <div class="col-md-3 col-xs-6" ng-repeat="type in $ctrl.types track by type.label">
   <button
     type="button"
-    id="exit-type-{{type.label}}"
+    id="entry-exit-type-{{type.label}}"
     class="btn-block panel panel-default segment ima-stat-card"
     ng-class="{ 'ima-stat-card-reversed' : $ctrl.isTypeSelected(type) }"
     ng-click="$ctrl.selectExitType(type)">

diff --git a/client/src/js/services/NotifyService.js b/client/src/js/services/NotifyService.js
@@ -12,8 +12,8 @@ NotifyService.$inject = ['$translate'];
 function NotifyService($translate) {
   const service = this;
 
-  // default time to live of 3 seconds
-  const TTL = 3000;
+  // default time to live of 5 seconds
+  const TTL = 5000;
 
   // this will be used to specify how long a major error will be displayed,
   // these errors are usually out of the control of the user, they will probably

diff --git a/client/src/modules/cash/payments/templates/search.modal.html b/client/src/modules/cash/payments/templates/search.modal.html
@@ -92,14 +92,14 @@
                 <strong translate>CASH.REGISTRY.REVERSED_RECORDS</strong>
               </p>
               <label>
-                <input type="radio" name="reversed" ng-value="1" ng-model="$ctrl.searchQueries.reversed">
+                <input type="radio" name="only-reversed" ng-value="1" ng-model="$ctrl.searchQueries.reversed">
                 <span translate>CASH.REGISTRY.INCLUDE_ONLY_REVERSED_RECORDS</span>
               </label>
             </div>
 
             <div class="radio">
               <label>
-                <input type="radio" name="reversed" ng-value="0" ng-model="$ctrl.searchQueries.reversed">
+                <input type="radio" name="exclude-reversed" ng-value="0" ng-model="$ctrl.searchQueries.reversed">
                 <span translate>CASH.REGISTRY.EXCLUDE_REVERSED_RECORDS</span>
               </label>
             </div>

diff --git a/client/src/modules/cost_center/allocation_bases/allocation_bases.html b/client/src/modules/cost_center/allocation_bases/allocation_bases.html
@@ -11,20 +11,22 @@
           ui-sref="cost_center_allocation_bases.create"
           uib-tooltip="{{'COST_CENTER.SET_ALLOCATION_QUANTITIES_TOOLTIP' | translate}}"
           tooltip-append-to-body="true" tooltip-placement="left"
-          data-method="create">
+          data-method="edit">
           <span class="fa fa-edit"></span> <span translate>FORM.LABELS.EDIT</span>
         </button>
         <button
           ng-click="CostCenterAllocationBasesCtrl.showAllocationBasesTable()"
           class="btn btn-default text-capitalize"
           uib-tooltip="{{'COST_CENTER.ALLOCATION_BASIS_TABLE' | translate}}"
-          tooltip-append-to-body="true" tooltip-placement="left">
+          tooltip-append-to-body="true" tooltip-placement="left"
+          data-method="allocation-bases">
           <span class="fa fa-table"></span> <span translate>ALLOCATION_BASES</span>
         </button>
         <button class="btn btn-default text-capitalize"
           uib-tooltip="{{'COST_CENTER.UPDATE_ALLOCATION_QUANTITIES_TOOLTIP' | translate}}"
           tooltip-append-to-body="true" tooltip-placement="left"
-          ng-click="CostCenterAllocationBasesCtrl.updateComputableQuantities()">
+          ng-click="CostCenterAllocationBasesCtrl.updateComputableQuantities()"
+          data-method="update">
           <span class="fa fa-refresh"></span> <span translate>COST_CENTER.UPDATE_ALLOCATION_QUANTITIES</span>
         </button>
       </div>

diff --git a/client/src/modules/cost_center/allocation_bases/templates/action.tmpl.html b/client/src/modules/cost_center/allocation_bases/templates/action.tmpl.html
@@ -11,7 +11,7 @@
       </a>
     </li>
     <li>
-      <a style="color: #a94442;" data-method="edit-record" ng-click="grid.appScope.removeAllocationBasis(row.entity.id)" href>
+      <a style="color: #a94442;" data-method="delete-record" ng-click="grid.appScope.removeAllocationBasis(row.entity.id)" href>
         <i class="fa fa-trash"></i> <span translate>FORM.BUTTONS.DELETE</span>
       </a>
     </li>

diff --git a/client/src/modules/cost_center/cost_center.html b/client/src/modules/cost_center/cost_center.html
@@ -79,7 +79,7 @@
 <!-- main content -->
 <div class="flex-content">
   <div class="container-fluid">
-    <div id="fee-center-grid"
+    <div id="cost-center-grid"
       ui-grid="CostCenterCtrl.gridOptions"
       class="grid-full-height"
       ui-grid-auto-resize

diff --git a/client/src/modules/display_metadata/display_metadata.html b/client/src/modules/display_metadata/display_metadata.html
@@ -11,7 +11,7 @@
             <a class="btn btn-default" uib-dropdown-toggle>
               <span class="fa fa-bars"></span> <span class="hidden-xs" translate>FORM.LABELS.MENU</span> <span class="caret"></span>
             </a>
-  
+
             <ul uib-dropdown-menu role="menu" class="dropdown-menu-right">
               <li role="menuitem">
                 <a download="{{ 'TREE.DISPLAY_METADATA' | translate }}"
@@ -20,31 +20,31 @@
                 </a>
               </li>
 
-              <!-- FIX ME TO DOWMLOAD AS CSV and EXCEL 
+              <!-- FIX ME TO DOWMLOAD AS CSV and EXCEL
               <li role="menuitem">
                 <a>
                   <span class="fa fa-file-excel-o"></span> <span translate>DOWNLOADS.CSV</span>
                 </a>
               </li>
-  
+
               <li role="menuitem">
                 <a>
                   <span class="fa fa-file-excel-o"></span> <span translate>DOWNLOADS.EXCEL</span>
                 </a>
               </li> -->
-  
+
             </ul>
           </div>
       </div>
       <div ng-if="DisplayMetadataCtrl.hasPatientData">
         <div class="toolbar-item">
-          <button class="btn btn-default text-capitalize" id="create" ui-sref="display_metadata.patientfill({id : DisplayMetadataCtrl.collector.id, patient: DisplayMetadataCtrl.patient.uuid})" data-method="create">
+          <button class="btn btn-default text-capitalize" id="fill-form" ui-sref="display_metadata.patientfill({id : DisplayMetadataCtrl.collector.id, patient: DisplayMetadataCtrl.patient.uuid})" data-method="create">
             <span class="fa fa fa-file-text"></span> <span class="hidden-xs" translate>FORM.BUTTONS.FILL_FORM</span>
           </button>
         </div>
 
         <div class="toolbar-item">
-          <button class="btn btn-default text-capitalize" id="create" ui-sref="patientRecord({ patientUuid : DisplayMetadataCtrl.patient.uuid })" data-method="create">
+          <button class="btn btn-default text-capitalize" id="medical-sheets" ui-sref="patientRecord({ patientUuid : DisplayMetadataCtrl.patient.uuid })" data-method="create">
             <span class="fa fa-medkit"></span> <span class="hidden-xs" translate>FORM.LABELS.MEDICAL_SHEETS</span>
           </button>
         </div>
@@ -90,19 +90,19 @@
 </div>
 
 <div class="flex-content" ng-if="DisplayMetadataCtrl.collector">
-  <div class="container-fluid"> 
-    <div id="display-metadata-grid" 
+  <div class="container-fluid">
+    <div id="display-metadata-grid"
       ui-grid="DisplayMetadataCtrl.gridOptions"
       class="grid-full-height-with-filters"
       ui-grid-auto-resize
       ui-grid-move-columns
-      ui-grid-resize-columns> 
-      
-      <bh-grid-loading-indicator 
+      ui-grid-resize-columns>
+
+      <bh-grid-loading-indicator
         loading-state="DisplayMetadataCtrl.loading"
-        empty-state="DisplayMetadataCtrl.gridOptions.data.length === 0" 
-        error-state="DisplayMetadataCtrl.hasError"> 
-      </bh-grid-loading-indicator> 
-    </div> 
-  </div> 
+        empty-state="DisplayMetadataCtrl.gridOptions.data.length === 0"
+        error-state="DisplayMetadataCtrl.hasError">
+      </bh-grid-loading-indicator>
+    </div>
+  </div>
 </div>
diff --git a/client/src/modules/employees/registry/search.modal.html b/client/src/modules/employees/registry/search.modal.html
@@ -81,11 +81,11 @@
             <bh-clear on-clear="ModalCtrl.clear('fonction_id')"></bh-clear>
           </bh-fonction-select>
 
-          <bh-fonction-select
+          <bh-title-select
             fonction-id="ModalCtrl.searchQueries.title_employee_id"
             on-select-callback="ModalCtrl.onSelectTitle(title)">
             <bh-clear on-clear="ModalCtrl.clear('title_employee_id')"></bh-clear>
-          </bh-fonction-select>
+          </bh-title-select>
 
           <bh-service-select
             service-uuid="ModalCtrl.searchQueries.service_uuid"

diff --git a/client/src/modules/login/login.html b/client/src/modules/login/login.html
@@ -49,7 +49,7 @@ <h1 translate class="text-center">INSTALL.TITLE</h1>
               </a>
               <ul role="menu" uib-dropdown-menu>
                 <li role="menuitem" ng-repeat="(key, lang) in LoginCtrl.languages">
-                  <a ng-click="LoginCtrl.languageService.set(key)" href>
+                  <a ng-click="LoginCtrl.languageService.set(key)" lang="{{key}}" href>
                     {{ lang.name }}
                   </a>
                 </li>

diff --git a/client/src/modules/patients/edit/edit.html b/client/src/modules/patients/edit/edit.html
@@ -94,7 +94,7 @@
 
               <div class="form-group">
                 <button
-                  data-update-group-patient
+                  data-update-patient-info
                   class="btn btn-warning btn-block"
                   ui-sref="patientRecord({ patientUuid : PatientEditCtrl.medical.uuid })"><span translate>PATIENT_RECORDS.VISITS.PATIENT_INFO</span>
                 </button>

diff --git a/client/src/modules/patients/record/patient-record.html b/client/src/modules/patients/record/patient-record.html
@@ -95,7 +95,7 @@
 
                 <label class="btn btn-default btn-block">
                     <span class="fa fa-upload"></span> {{ PatientRecordCtrl.uploadButtonText | translate }}
-                    <input type="file" accept="image/*" ngf-max-size="2MB" ngf-select="PatientRecordCtrl.uploadFiles($file, $invalidFiles)" style="display: none;">
+                    <input type="file" id="upload-patient-photo" accept="image/*" ngf-max-size="2MB" ngf-select="PatientRecordCtrl.uploadFiles($file, $invalidFiles)" style="display: none;">
                 </label>
                 <a
                   href

diff --git a/client/src/modules/users/templates/grid/action.cell.html b/client/src/modules/users/templates/grid/action.cell.html
@@ -17,12 +17,12 @@
       </a>
     </li>
     <li>
-      <a data-method="depot" ui-sref="users.depotManagement({ id : row.entity.id })" href>
+      <a data-method="depot-management" ui-sref="users.depotManagement({ id : row.entity.id })" href>
         <i class="fa fa-cubes"></i> <span translate>FORM.BUTTONS.DEPOT_MANAGEMENT</span>
       </a>
     </li>
     <li>
-      <a data-method="depot" ui-sref="users.depotSupervision({ id : row.entity.id })" href>
+      <a data-method="depot-supervision" ui-sref="users.depotSupervision({ id : row.entity.id })" href>
         <i class="fa fa-search"></i> <span translate>FORM.BUTTONS.DEPOT_SUPERVISION</span>
       </a>
     </li>

diff --git a/package.json b/package.json
@@ -11,9 +11,13 @@
     "test:install": "cross-env ./sh/install-tests.sh",
     "test:integration:stock": "cross-env SUITE=\"integration-stock\" ./sh/test.sh",
     "test:ends": "cross-env SUITE=\"end-to-end\" ./sh/test.sh",
+    "test:e2e": "cross-env SUITE=\"end-to-end\" ./sh/test-e2e-pw.sh",
+    "test:e2e-stock": "cross-env SUITE=\"end-to-end-stock\" ./sh/test-e2e-pw-stock.sh",
+    "test:e2e-trace": "cross-env SUITE=\"end-to-end\" ./sh/test-e2e-pw-trace.sh",
     "test:client-unit": "cross-env SUITE=\"client-unit\" ./sh/test.sh",
     "test:server-unit": "cross-env SUITE=\"server-unit\" ./sh/test.sh",
-    "test:show-results": "./sh/show-test-results.sh",
+    "test:show-results": "./sh/test-show-results.sh",
+    "test:clean-reports": "./sh/test-clean-reports.sh",
     "build": "cross-env ./node_modules/.bin/gulp build",
     "build:db": "cross-env ./sh/build-database.sh",
     "build:clean": "cross-env ./sh/build-init-database.sh",
@@ -149,6 +153,7 @@
   },
   "devDependencies": {
     "@ima-worldhealth/rewire": "^4.1.0",
+    "@playwright/test": "1.34.3",
     "@types/node": "^20.5.4",
     "angular-mocks": "^1.8.3",
     "chai": "^4.3.7",
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
           </a>
         </li>
         <li>
-          <a style="color: #a94442;" data-method="edit-record" ng-click="grid.appScope.removeAllocationBasis(row.entity.id)" href>
+          <a style="color: #a94442;" data-method="delete-record" ng-click="grid.appScope.removeAllocationBasis(row.entity.id)" href>
             <i class="fa fa-trash"></i> <span translate>FORM.BUTTONS.DELETE</span>
           </a>
         </li>
@@ Expand Down @@