From 554881cfca645567d0791200c610782bea36db79 Mon Sep 17 00:00:00 2001
From: Andria Capai <andria_capai@natural-solutions.eu>
Date: Fri, 13 Dec 2024 19:03:07 +0100
Subject: [PATCH] feat(test): test frontend for context params url

- Synthese test frontend (ok)
- wip : make occhab condition and refact test

Reviewed-by: andriacap
---
 ...ldmapping-context-from-destination-spec.js | 106 ++++++++++++++++++
 .../dynamic-form/dynamic-form.component.html  |  18 +++
 .../dynamic-form/dynamic-form.component.ts    |   1 +
 .../fields-mapping-step.component.html        |   5 +-
 .../mapping-theme.component.html              |   2 +
 5 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 frontend/cypress/e2e/import/fieldmapping-context-from-destination-spec.js

diff --git a/frontend/cypress/e2e/import/fieldmapping-context-from-destination-spec.js b/frontend/cypress/e2e/import/fieldmapping-context-from-destination-spec.js
new file mode 100644
index 0000000000..75a51a337b
--- /dev/null
+++ b/frontend/cypress/e2e/import/fieldmapping-context-from-destination-spec.js
@@ -0,0 +1,106 @@
+import { USERS } from './constants/users';
+import { TIMEOUT_WAIT, VIEWPORTS } from './constants/common';
+import { FILES } from './constants/files';
+
+const USER = USERS[0];
+const VIEWPORT = VIEWPORTS[0];
+
+function testQueryParamField(dataQa, paramName, expectedValue, fieldType) {
+  if (fieldType === 'textarea' || fieldType === 'text' || fieldType === 'number') {
+    cy.get(dataQa)
+      .find(`[data-qa^="field-${fieldType}-${paramName}_default_value_"]`)
+      .should('have.value', expectedValue);
+  }
+}
+
+const paramsByDestination = [
+  {
+    destination: 'synthese',
+    queryParams: [
+      {
+        paramsName: 'nom_cite',
+        paramsValue: 'test_nomcite',
+        fieldType: 'textarea',
+        isTypeComp: false,
+        expectedValue: 'test_nomcite',
+      },
+      {
+        paramsName: 'altitude_max',
+        paramsValue: 10,
+        fieldType: 'number',
+        isTypeComp: false,
+        expectedValue: 10,
+      },
+      {
+        paramsName: 'date_min',
+        paramsValue: '2024-12-12',
+        fieldParentType: 'field-date',
+        fieldType: 'date',
+        isTypeComp: true,
+        expectedValue: '12/12/2024',
+      },
+      {
+        paramsName: 'id_nomenclature_geo_object_nature',
+        paramsValue: 'Inventoriel',
+        fieldParentType: 'field-nomenclature',
+        fieldType: 'nomenclature',
+        isTypeComp: true,
+        expectedValue: 'Inventoriel',
+      },
+    ],
+  },
+  //   {
+  //     destination: 'occhab',
+  //     queryParams: [
+  //       { paramsName: 'nom_cite', paramsValue: 'test_nomcite' },
+  //       { paramsName: 'date_min', paramsValue: '2024-12-12' },
+  //     ],
+  //   },
+];
+
+describe('Import - Upload step', () => {
+  context(`viewport: ${VIEWPORT.width}x${VIEWPORT.height}`, () => {
+    beforeEach(() => {
+      cy.viewport(VIEWPORT.width, VIEWPORT.height);
+      cy.geonatureLogin(USER.login.username, USER.login.password);
+      cy.wait(TIMEOUT_WAIT);
+    });
+
+    paramsByDestination.forEach(({ destination, queryParams }) => {
+      it(`Should handle for destination: ${destination}`, () => {
+        const urlParams = queryParams
+          .map((param) => `${param.paramsName}=${param.paramsValue}`)
+          .join('&');
+        cy.visit(`/#/import/${destination}/process/upload?${urlParams}`);
+
+        cy.pickDataset(USER.dataset);
+        cy.loadImportFile(FILES.synthese.valid.fixture);
+        cy.configureImportFile();
+
+        queryParams.forEach(({ paramsName, paramsValue, fieldType, isTypeComp, expectedValue }) => {
+          let dataQa = `[data-qa="import-fieldmapping-theme-${paramsName}"]`;
+
+          // Récupérer et vérifier la valeur en fonction du type de champ
+          if (!isTypeComp) {
+            testQueryParamField(dataQa, paramsName, expectedValue, fieldType);
+          } else if (fieldType === 'date' || fieldType === 'nomenclature') {
+            // Si c'est un champ de type 'date' ou 'nomenclature'
+            dataQa = `[data-qa="field-${fieldType}-${paramsName}_default_value"]`;
+            cy.get(dataQa)
+              .find(`input`)
+              .each(($el) => cy.wrap($el).scrollIntoView().should('be.visible'));
+
+            if (fieldType === 'date') {
+              cy.get(dataQa).find('[data-qa="input-date"]').should('have.value', expectedValue);
+            } else if (fieldType === 'nomenclature') {
+              cy.get(`${dataQa} .ng-value-container .ng-value-label`).should(
+                'have.text',
+                expectedValue
+              );
+            }
+          }
+        });
+      });
+    });
+  });
+});
diff --git a/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.html b/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.html
index f023e1aa0d..6063bbb6f3 100644
--- a/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.html
+++ b/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.html
@@ -50,6 +50,7 @@
       [formControl]="form.get(formDefComp['attribut_name'])"
       id="{{ formDefComp['attribut_name'] }}_{{ rand }}"
       type="text"
+      data-qa="field-text-{{ formDefComp['attribut_name'] }}_{{ rand }}"
     />
     <div
       *ngIf="
@@ -66,6 +67,7 @@
       [formControl]="form.get(formDefComp['attribut_name'])"
       id="{{ formDefComp['attribut_name'] }}_{{ rand }}"
       type="time"
+      [attr.data-qa]="'field-time' + formDefComp['attribut_name'] + '_' + rand"
     />
 
     <input
@@ -76,6 +78,7 @@
       type="number"
       min="{{ formDefComp['min'] }}"
       max="{{ formDefComp['max'] }}"
+      [attr.data-qa]="'field-number' + '-' + formDefComp['attribut_name'] + '_' + rand"
     />
 
     <textarea
@@ -85,6 +88,7 @@
       id="{{ formDefComp['attribut_name'] }}_{{ rand }}"
       type="textarea"
       rows="{{ formDefComp['rows'] }}"
+      [attr.data-qa]="'field-textarea' + '-' + formDefComp['attribut_name'] + '_' + rand"
     ></textarea>
 
     <span *ngSwitchCase="'select'">
@@ -93,6 +97,7 @@
         class="form-control form-control-sm"
         id="{{ formDefComp['attribut_name'] }}_{{ rand }}"
         [formControl]="form.get(formDefComp['attribut_name'])"
+        [attr.data-qa]="'field-select-' + '-' + formDefComp['attribut_name'] + '_' + rand"
       >
         <option
           [ngValue]="null"
@@ -224,6 +229,7 @@
             name="{{ formDefComp['attribut_name'] }}_{{ rand }}_{{ item.value }}"
             [value]="item.value"
             [formControl]="form.get(formDefComp['attribut_name'])"
+            [attr.data-qa]="'field-radio' + formDefComp['attribut_name'] + '_' + rand"
           />
           <label
             class="custom-control-label"
@@ -290,6 +296,7 @@
       [regne]="formDefComp['regne']"
       [group2Inpn]="formDefComp['group2Inpn']"
       [bindAllItem]="formDefComp['bind_all_item']"
+      [attr.data-qa]="'field-nomenclature' + '-' + formDefComp['attribut_name']"
     ></pnx-nomenclature>
 
     <pnx-taxonomy
@@ -299,6 +306,7 @@
       [idList]="formDefComp['id_list']"
       [charNumber]="3"
       [listLength]="20"
+      [attr.data-qa]="'field-taxonomy' + '-' + formDefComp['attribut_name']"
     ></pnx-taxonomy>
 
     <pnx-datasets
@@ -308,6 +316,7 @@
       [multiSelect]="formDef.multi_select"
       [moduleCode]="formDef.module_code"
       [creatableInModule]="formDef.creatable_in_module"
+      [attr.data-qa]="'field-dataset' + '-' + formDefComp['attribut_name']"
     ></pnx-datasets>
 
     <pnx-observers
@@ -318,18 +327,21 @@
       [idList]="formDefComp['id_list']"
       [codeList]="formDefComp['code_list']"
       [multiSelect]="formDefComp['multi_select']"
+      [attr.data-qa]="'field-observers' + '-' + formDefComp['attribut_name']"
     ></pnx-observers>
 
     <pnx-observers-text
       *ngSwitchCase="'observers-text'"
       [label]="formDefComp['attribut_label']"
       [parentFormControl]="form.get(formDefComp['attribut_name'])"
+      [attr.data-qa]="'field-observers-txt' + '-' + formDefComp['attribut_name']"
     ></pnx-observers-text>
 
     <pnx-date
       *ngSwitchCase="'date'"
       [label]="formDefComp['attribut_label']"
       [parentFormControl]="form.get(formDefComp['attribut_name'])"
+      [attr.data-qa]="'field-date' + '-' + formDefComp['attribut_name']"
     ></pnx-date>
 
     <pnx-areas
@@ -338,6 +350,7 @@
       [parentFormControl]="form.get(formDefComp.attribut_name)"
       [valueFieldName]="formDefComp.value_field_name"
       [typeCodes]="formDefComp.type_codes"
+      [attr.data-qa]="'field-areas' + '-' + formDefComp['attribut_name']"
     ></pnx-areas>
 
     <pnx-municipalities
@@ -345,6 +358,7 @@
       [label]="formDefComp['attribut_label']"
       [parentFormControl]="form.get(formDefComp['attribut_name'])"
       [valueFieldName]="formDefComp['value_field_name']"
+      [attr.data-qa]="'field-municipalities' + '-' + formDefComp['attribut_name']"
     ></pnx-municipalities>
 
     <pnx-multiselect
@@ -356,6 +370,7 @@
       [label]="formDefComp['attribut_label']"
       [searchBar]="false"
       [disabled]="form.get(formDefComp['attribut_name'])?.disabled"
+      [attr.data-qa]="'field-multiselect' + '-' + formDefComp['attribut_name']"
     ></pnx-multiselect>
     <pnx-datalist
       *ngSwitchCase="'datalist'"
@@ -377,6 +392,9 @@
       [filters]="formDefComp['filters']"
       [default]="formDefComp['default']"
       [nullDefault]="formDefComp['nullDefault']"
+      [attr.data-qa]="
+        'field-datalist' + '-' + formDefComp['attribut_label'] + '-' + formDefComp['attribut_name']
+      "
     ></pnx-datalist>
 
     <small class="form-text text-muted">{{ formDefComp['help'] }}</small>
diff --git a/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.ts b/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.ts
index a9974a841b..82da52e24b 100644
--- a/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.ts
+++ b/frontend/src/app/GN2CommonModule/form/dynamic-form/dynamic-form.component.ts
@@ -40,6 +40,7 @@ export class DynamicFormComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     this.setFormDefComp(true);
+    console.log("this.formDefComp", this.formDefComp);
     // Disable the form if a value is provided and is not in the select list
     // In case list value change and data are still in database
     if (this.formDef.type_widget == 'select') {
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
index 9e18b1af59..c6be531db4 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/fields-mapping-step.component.html
@@ -146,7 +146,10 @@ <h5 class="card-title mb-0">{{ 'Import.FieldMapping.Title' | translate }}</h5>
         </span>
       </ng-template>
       <form>
-        <div class="form-group">
+        <div
+          class="form-group"
+          [attr.data-qa]="'import-fieldmapping-' + '-' + Import.FieldMapping.MappingName"
+        >
           <label
             for="mappingName"
             *ngIf="this.updateAvailable"
diff --git a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.html b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.html
index a1ec086102..7ebdde2b12 100644
--- a/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.html
+++ b/frontend/src/app/modules/imports/components/import_process/fields-mapping-step/mapping-theme/mapping-theme.component.html
@@ -13,6 +13,7 @@
           <div
             *ngIf="!field.autogenerated"
             class="form-group"
+            [attr.data-qa]="'import-fieldmapping-theme-' + field.name_field"
           >
             <small>
               {{ field.fr_label }} :
@@ -96,6 +97,7 @@
           <div
             *ngIf="field.autogenerated"
             class="form-group"
+            [attr.data-qa]="'import-fieldmapping-theme-' + field.name_field"
           >
             <p
               *ngIf="displayAlert(field)"