Tests - Move the manual tests about DND form into playwright, add utils method to fetch latest ID

tests/end2end/playwright/dnd-form.spec.js

@@ -1,89 +1,143 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
+import {ProjectPage} from "./pages/project";
+import {editedFeatureIds} from "./globals";
 
-test.describe('Drag and drop from', function () {
-    test.beforeEach(async function ({ page }) {
-        // Runs before each tests in the block
-        await page.goto(
-            '/index.php/view/map/?repository=testsrepository&project=dnd_form'
-        );
-        await page.locator('#button-attributeLayers').click();
+
+test.describe(
+    'Drag and drop from, editing test data',
+    {
+        tag: ['@write'],
+    }, () =>
+{
+
+    test('With new geom data creation, not remove data', async function ({ page }) {
+        const project = new ProjectPage(page, 'dnd_form');
+        await project.open();
+        await project.openEditingFormWithLayer('dnd_form_geom');
+        await project.dock.getByText('tab2').click();
+        await project.editingField('field_in_dnd_form').fill('value in DND form');
+        await project.clickOnMapLegacy(600, 200);
+
+        await project.editingSubmitForm();
+        const ids = await editedFeatureIds(page);
+
+        await project.clickOnMap(600, 200);
+        await expect(project.popupContent).toBeVisible();
+
+        // Fixme if there is a better way to get the table from the ID in the cell
+        // if the test is run multiple times, Postgres will increment the ID
+        const table = await project.popupContent.getByRole("row", { name: ids['id'] }).locator("..");
+        await expect(table).toBeVisible();
+
+        // First row
+        await expect(table.locator('tr:nth-child(1) th')).toHaveText('id');
+        await expect(table.locator('tr:nth-child(1) td')).toHaveText(ids['id']);
+        ///Second row
+        await expect(table.locator('tr:nth-child(2) > th')).toHaveText('field_in_dnd_form');
+        await expect(table.locator('tr:nth-child(2) > td')).toHaveText('value in DND form');
+        // Third row should be hidden
+        await expect(table.locator('tr:nth-child(3)')).toHaveClass('empty-data');
+        await expect(table.locator('tr:nth-child(3) > th')).toHaveText('field_not_in_dnd_form');
+        await expect(table.locator('tr:nth-child(3) > td')).toBeEmpty();
     });
 
-    test('should not remove data', async function ({ page }) {
-        await page
-            .locator('button[value="dnd_form_geom"].btn-open-attribute-layer')
-            .click({ force: true });
-        await page.locator('.btn-detail-attributeTable').click({ force: true });
-        await page
-            .locator('#attribute-layer-table-dnd_form_geom tbody tr')
-            .first()
-            .click({ force: true });
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(2) > td'
-            )
-        ).not.toBeEmpty();
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(3) > td'
-            )
-        ).not.toBeEmpty();
-
-        // Assert data has not been removed after form submission w/o modification
-        await page
-            .locator('#attribute-layer-table-dnd_form_geom .feature-edit')
-            .click({ force: true });
-        await page.locator('#jforms_view_edition__submit_submit').click();
-        await page.waitForTimeout(300);
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(2) > td'
-            )
-        ).not.toBeEmpty();
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(3) > td'
-            )
-        ).not.toBeEmpty();
-
-        // Assert data has changed after form submission w modification
-        await page
-            .locator('#attribute-layer-table-dnd_form_geom .feature-edit')
-            .click({ force: true });
-        await page.locator('#jforms_view_edition-tabs > li:nth-child(2)').click();
-        await page.locator('#jforms_view_edition_field_in_dnd_form').clear();
-        await page
-            .locator('#jforms_view_edition_field_in_dnd_form')
-            .fill('modified');
-        await page.locator('#jforms_view_edition__submit_submit').click();
-
-        // Click on line to refresh popup info
-        await page
-            .locator('#attribute-layer-table-dnd_form_geom tbody tr')
-            .first()
-            .click({ force: true });
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(2) > td'
-            )
-        ).toHaveText('modified');
-        await expect(
-            page.locator(
-                '#attribute-table-panel-dnd_form_geom > div.lizmapPopupSingleFeature > div > table > tbody > tr:nth-child(3) > td'
-            )
-        ).toHaveText('test_geom');
-
-        // Write back original data (TODO: refresh database data?)
+    test('With non spatial data creation, not remove data', async function ({ page }) {
+        const project = new ProjectPage(page, 'dnd_form');
+        await project.open();
+        await project.openAttributeTable('dnd_form');
+
+        await project.bottomDock.locator(".btn-createFeature-attributeTable").click();
+        await expect(project.dock).toBeVisible();
+
+        await project.dock.getByText('tab2').click();
+        await project.editingField('field_in_dnd_form').fill('value in DND form');
+        await project.editingSubmitForm('close');
+        const ids = await editedFeatureIds(page);
+
+        const table = await project.attributeTableHtml('dnd_form');
+        // Columns
+        await expect(table.locator('thead tr th:nth-child(2)')).toHaveText('id');
+        await expect(table.locator('thead tr th:nth-child(3)')).toHaveText('Field in');
+        await expect(table.locator('thead tr th:nth-child(4)')).toHaveText('Field not in');
+
+        // Last row in the table, if the test run multiple times
+        await expect(table.locator('tbody tr:last-child td:nth-child(2)')).toHaveText(ids['id']);
+        await expect(table.locator('tbody tr:last-child td:nth-child(3)')).toHaveText('value in DND form');
+        await expect(table.locator('tbody tr:last-child td:nth-child(4)')).toBeEmpty();
+    });
+
+    test('With editing existing data, not remove data', async function ({ page }) {
+        const project = new ProjectPage(page, 'dnd_form');
+        await project.open();
+        await project.openAttributeTable('dnd_form_geom');
+
+        // Button detail to open the popup inside the attribute table panel
+        await page.locator('.btn-detail-attributeTable').click();
+
+        // Define some locator
+        // The popup inside the attribute table panel
+        const popup = project.bottomDock.locator('.lizmapPopupSingleFeature > div > table > tbody');
+        // First should be the test data, without any new feature, in theory
+        const firstLine = await project.attributeTableHtml('dnd_form_geom').locator("tbody tr").first();
+        const featureEdit = await firstLine.locator('.feature-edit').first();
+
+        await firstLine.click();
+
+        // Check the auto popup
+        await expect(popup.locator('tr:nth-child(1) > th')).toHaveText('id');
+        await expect(popup.locator('tr:nth-child(1) > td')).toHaveText('1');
+
+        await expect(popup.locator('tr:nth-child(2) > th')).toHaveText('field_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(2) > td')).toHaveText('test_geom');
+
+        await expect(popup.locator('tr:nth-child(3) > th')).toHaveText('field_not_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(3) > td')).toHaveText('test_geom');
+
+        // Assert data has not been removed after form submission without modification
+        await featureEdit.click();
+        await project.editingSubmitForm();
+
+        // Check popup content again
+        // Fixme, strange, the test doesn't re-click on the row, so the test is false, because the popup is not refreshed
+        // Check the auto popup
+        await expect(popup.locator('tr:nth-child(1) > th')).toHaveText('id');
+        await expect(popup.locator('tr:nth-child(1) > td')).toHaveText('1');
+
+        await expect(popup.locator('tr:nth-child(2) > th')).toHaveText('field_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(2) > td')).toHaveText('test_geom');
+
+        await expect(popup.locator('tr:nth-child(3) > th')).toHaveText('field_not_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(3) > td')).toHaveText('test_geom');
+
+        // Assert data has changed after form submission with modification
+        await featureEdit.click();
+        // Switch to the second tab
+        await project.dock.getByText('tab2').click();
+        await project.editingField('field_in_dnd_form').clear();
+        await project.editingField('field_in_dnd_form').fill('modified');
+        await project.editingSubmitForm();
+
+        // Click on the line to refresh popup info
+        await firstLine.first().click();
+
+        // Check popup content again
+        await expect(popup.locator('tr:nth-child(1) > th')).toHaveText('id');
+        await expect(popup.locator('tr:nth-child(1) > td')).toHaveText('1');
+
+        await expect(popup.locator('tr:nth-child(2) > th')).toHaveText('field_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(2) > td')).toHaveText('modified');
+
+        await expect(popup.locator('tr:nth-child(3) > th')).toHaveText('field_not_in_dnd_form');
+        await expect(popup.locator('tr:nth-child(3) > td')).toHaveText('test_geom');
+
+        // Write back original data
+        // Fixme refresh database data?
         await page.waitForTimeout(300);
-        await page
-            .locator('#attribute-layer-table-dnd_form_geom .feature-edit')
-            .click({ force: true });
-        await page.locator('#jforms_view_edition-tabs > li:nth-child(2)').click();
-        await page.locator('#jforms_view_edition_field_in_dnd_form').clear();
-        await page
-            .locator('#jforms_view_edition_field_in_dnd_form')
-            .fill('test_geom');
-        await page.locator('#jforms_view_edition__submit_submit').click();
+        await featureEdit.click();
+        await project.dock.getByText('tab2').click();
+        await project.editingField('field_in_dnd_form').clear();
+        await project.editingField('field_in_dnd_form').fill('test_geom');
+        await project.editingSubmitForm();
     });
 });

tests/end2end/playwright/globals.js

@@ -97,6 +97,19 @@ export async function reloadMap(page, check = true) {
     }
 }
 
+
+/**
+ * editedFeatureIds function
+ * Get the last IDs when saving features as JSON
+ * @param {Page} page The page object
+ *
+ * @return {JSON} The JSON response, like {"id":"31"}
+ */
+export async function editedFeatureIds(page) {
+    const values = await page.locator('#liz_close_feature_pk_vals').inputValue();
+    return JSON.parse(values);
+}
+
 /**
  * Re-send the request with additional "__echo__" param to retrieve the OGC Request search params
  * @param {Page} page The page object

tests/end2end/playwright/pages/project.js

@@ -16,6 +16,18 @@ export class ProjectPage extends BasePage {
      */
     repository;
 
+    // Maps
+    /**
+     * The OpenLayers main map
+     * @type {Locator}
+     */
+    map;
+    /**
+     * The OpenLayers OL2 legacy map
+     * @type {Locator}
+     */
+    mapOl2;
+
     // Menu
     /**
      * Layer switcher menu
@@ -98,6 +110,8 @@ export class ProjectPage extends BasePage {
         super(page);
         this.project = project;
         this.repository = repository;
+        this.map = page.locator('#newOlMap');
+        this.mapOl2 = page.locator('#map');
         this.dock = page.locator('#dock');
         this.rightDock = page.locator('#right-dock');
         this.bottomDock = page.locator('#bottom-dock');
@@ -165,11 +179,26 @@ export class ProjectPage extends BasePage {
      * @param {number} y Position Y on the map
      */
     async clickOnMap(x, y){
-        await this.page.locator('#newOlMap').click({
-            position: {
-                x: x,
-                y: y
-            }
-        });
+        await this.map.click({position: {x: x, y: y}});
+    }
+
+    /**
+     * clickOnMapLegacy function
+     * Click on the OL 2map at the given position
+     * @param {number} x Position X on the map
+     * @param {number} y Position Y on the map
+     */
+    async clickOnMapLegacy(x, y){
+        await this.mapOl2.click({position: {x: x, y: y}});
+    }
+
+    /**
+     * dblClickOnMapLegacy function
+     * Double click on the OL 2map at the given position
+     * @param {number} x Position X on the map
+     * @param {number} y Position Y on the map
+     */
+    async dblClickOnMapLegacy(x, y){
+        await this.mapOl2.dblclick({position: {x: x, y: y}});
     }
 }

tests/qgis-projects/tests/dnd_form.md

@@ -4,22 +4,6 @@
 
 ## Procedure
 
-### Create features
-
-* [ ] Create a new `dnd_form_geom` feature
-  * [ ] Set `Field in` input value and draw a point
-  * [ ] Save the new `dnd_form_geom` feature and get no error message
-  * [ ] Check that a new point is displayed on the map
-* [ ] Click on the new `dnd_form_geom` feature
-  * [ ] Check that `Field in`  field should not be empty
-  * [ ] Check that `Field not in` field should not be visible
-
-* [ ] Open attribute table tool then `dnd_form` layer details
-  * [ ] Click Add a feature button, set `Field in` input value and save
-  * [ ] Check that a new line has been added to the table
-  * [ ] Check that `Field in` field should not be empty
-  * [ ] Check that `Field not in` field should be empty
-
 ### Display forms
 
 * [ ] In desktop and mobile context, launch `dnd_form` edition and look at `dnd_form` form