Tests - POM, switch from ts to spec.js file

tests/end2end/playwright/pages/project.ts → tests/end2end/playwright/pages/project.js

@@ -1,36 +1,92 @@
-import {expect, type Locator, type Page} from '@playwright/test';
+// @ts-check
+import {expect, Locator, Page} from '@playwright/test';
 import { gotoMap } from '../globals';
 
 export class ProjectPage {
-    readonly page: Page;
+    /** @type {Page} */
+    page;
+
     // Metadata
-    readonly project: string;
-    readonly repository: string;
+    /**
+     * Project name metadata
+     * @type {string}
+     */
+    project;
+    /**
+     * Repository name metadata
+     * @type {string}
+     */
+    repository;
 
     // Menu
-    readonly switcher: Locator;
-    readonly buttonEditing: Locator;
+    /**
+     * Layer switcher menu
+     * @type {Locator}
+     */
+    switcher;
+    /**
+     * Editing menu
+     * @type {Locator}
+     */
+    buttonEditing;
 
     // Docks
-    readonly attributeTable: Locator;
-    readonly dock: Locator;
-    readonly rightDock: Locator;
-    readonly bottomDock: Locator;
-    readonly miniDock: Locator;
-
-    readonly search: Locator;
+    /**
+     * Attribute table dock
+     * @type {Locator}
+     */
+    attributeTable;
+    /**
+     * Main left dock
+     * @type {Locator}
+     */
+    dock;
+    /**
+     * Right dock
+     * @type {Locator}
+     */
+    rightDock;
+    /**
+     * Bottom dock
+     * @type {Locator}
+     */
+    bottomDock;
+    /**
+     * Mini dock
+     * @type {Locator}
+     */
+    miniDock;
+    /**
+     * Top search bar
+     * @type {Locator}
+     */
+    search;
 
     // Messages
-    readonly warningMessage: Locator;
+    /**
+     * Foreground message bar
+     * @type {Locator}
+     */
+    warningMessage;
 
-    // Attribute table for the given layer name
-    readonly attributeTableHtml = (name: string) =>
+    /**
+     * Attribute table for the given layer name
+     * @param {string} name Name of the layer
+     * @returns {Locator}
+     */
+    attributeTableHtml = (name) =>
         this.page.locator(`#attribute-layer-table-${name}`);
 
-    constructor(page: Page, project: string) {
+    /**
+     * Constructor
+     * @param {Page} page The playwright page
+     * @param {string} project The project name
+     * @param {string} repository The repository name, default to testsrepository
+     */
+    constructor(page, project, repository = 'testsrepository') {
         this.page = page;
         this.project = project;
-        this.repository = 'testsrepository';
+        this.repository = repository;
         this.dock = page.locator('#dock');
         this.rightDock = page.locator('#right-dock');
         this.bottomDock = page.locator('#bottom-dock');
@@ -43,7 +99,7 @@ export class ProjectPage {
 
     /**
      * open function
-     * Open the project
+     * Open the URL for the given project and repository
      */
     async open(){
         await gotoMap(`/index.php/view/map?repository=${this.repository}&project=${this.project}`, this.page);
@@ -55,7 +111,7 @@ export class ProjectPage {
      * @param {string} layer Name of the layer
      * @param {boolean} maximise If the attribute table must be maximised
      */
-    async openAttributeTable(layer: string, maximise: boolean = false){
+    async openAttributeTable(layer, maximise = false){
         await this.page.locator('a#button-attributeLayers').click();
         if (maximise) {
             await this.page.getByRole('button', { name: 'Maximize' }).click();
@@ -68,10 +124,10 @@ export class ProjectPage {
      * Submit the form
      * @param {string} futureAction The action to do after submit : can be close/create/edit.
      */
-    async editingSubmitForm(futureAction: string = 'close'){
+    async editingSubmitForm(futureAction = 'close'){
         await this.page.locator('#jforms_view_edition_liz_future_action').selectOption(futureAction);
         await this.page.locator('#jforms_view_edition__submit_submit').click();
-        if (futureAction == 'close'){
+        if (futureAction === 'close'){
             await expect(this.page.locator('#edition-form-container')).toBeHidden();
         } else {
             await expect(this.page.locator('#edition-form-container')).toBeVisible();
@@ -84,7 +140,7 @@ export class ProjectPage {
      * Open the editing panel with the given layer name form
      * @param {string} layer Name of the layer
      */
-    async openEditingFormWithLayer(layer: string){
+    async openEditingFormWithLayer(layer){
         await this.buttonEditing.click();
         await this.page.locator('#edition-layer').selectOption({ label: layer });
         await this.page.locator('a#edition-draw').click();
@@ -96,7 +152,7 @@ export class ProjectPage {
      * @param {number} x Position X on the map
      * @param {number} y Position Y on the map
      */
-    async clickOnMap(x: number, y: number){
+    async clickOnMap(x, y){
         await this.page.locator('#newOlMap').click({
             position: {
                 x: x,