Migrate end-to-end tests to Playwright

.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
+  }
+}

.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

.semaphore/semaphore.yml

@@ -55,12 +55,15 @@ 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'
             - 'yarn test:client-unit'
             - 'yarn test:integration'
             - 'yarn test:integration:stock'
+            - 'yarn test:e2e-stock'
+            - 'yarn test:e2e'
           matrix:
             - env_var: MYSQL_VERSION
               values:

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": {

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",

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",

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 => {

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)">

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

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>

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>

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>

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

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>

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"

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>

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>

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

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>

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",
@@ -152,6 +156,7 @@
   },
   "devDependencies": {
     "@ima-worldhealth/rewire": "^4.1.0",
+    "@playwright/test": "1.34.3",
     "@types/node": "^20.5.3",
     "angular-mocks": "^1.8.3",
     "chai": "^4.3.7",