test: Add region index tests and enhance LSF test helpers

Added new utility methods for handling regions, labels, and localStorage in LSF helpers. Introduced customizable callbacks for `init` and improved functionality for ordering and deleting regions in the Sidebar.

web/libs/frontend-test/src/helpers/LSF/LabelStudio.ts

@@ -35,14 +35,20 @@ class LSParamsBuilder {
       predictions: [],
     },
   };
+  private _localStorageItems: Record<string, any> = {};
   private ls: typeof LabelStudio = null;
 
   constructor(ls: typeof LabelStudio) {
     this.ls = ls;
   }
 
-  init() {
-    this.ls.init(this.params);
+  init(beforeLoadCallback?: (win: Cypress.AUTWindow) => void) {
+    this.ls.init(this.params, (win) => {
+      Object.entries(this._localStorageItems).forEach(([key, value]) => {
+        win.localStorage.setItem(key, JSON.stringify(value));
+      });
+      beforeLoadCallback?.(win);
+    });
   }
 
   private get _task() {
@@ -125,13 +131,21 @@ class LSParamsBuilder {
     this.params[paramName] = paramValue;
     return this;
   }
+  localStorageItems(items) {
+    this._localStorageItems = items;
+    return this;
+  }
+  withLocalStorageItem(key, value) {
+    this._localStorageItems[key] = value;
+    return this;
+  }
 }
 
 export const LabelStudio = {
   /**
    * Initializes LabelStudio instance with given configuration
    */
-  init(params: LSParams) {
+  init(params: LSParams, beforeLoadCallback?: (win: Cypress.AUTWindow) => void) {
     cy.log("Initialize LSF");
     const windowLoadCallback = (win: Cypress.AUTWindow) => {
       win.DEFAULT_LSF_INIT = false;
@@ -160,6 +174,7 @@ export const LabelStudio = {
         ],
         ...params,
       };
+      beforeLoadCallback?.(win);
 
       Cypress.off("window:before:load", windowLoadCallback);
     };

web/libs/frontend-test/src/helpers/LSF/Relations.ts

@@ -13,6 +13,12 @@ export const Relations = {
 
     return cy.wrap(relationList);
   },
+  get relationItems() {
+    return this.relations.find(".lsf-relations__item");
+  },
+  get relationRegions() {
+    return this.relationItems.find(".lsf-detailed-region");
+  },
   get hideAllRelationsButton() {
     return cy.get('[aria-label="Hide all"]');
   },

web/libs/frontend-test/src/helpers/LSF/RichText.ts

@@ -85,8 +85,17 @@ class RichTextHelper {
       });
     });
   }
+  findRegionWithText(text) {
+    return this.content.find(".htx-highlight").contains(text);
+  }
   hasRegionWithText(text) {
-    this.content.find(".htx-highlight").contains(text).should("exist");
+    this.findRegionWithText(text).should("exist");
+  }
+  findRegionWithLabel(label) {
+    return this.content.find(`.htx-highlight[data-label='${label}']`);
+  }
+  hasRegionWithLabel(label) {
+    this.findRegionWithLabel(label).should("exist");
   }
 }
 

web/libs/frontend-test/src/helpers/LSF/Sidebar.ts

@@ -17,6 +17,16 @@ export const Sidebar = {
   get showAllRegionsButton() {
     return this.toolBar.get('[aria-label="Show all regions"]');
   },
+  get orderRegionsButton() {
+    return this.toolBar.get(".lsf-view-controls__sort button");
+  },
+  toggleOrderByTime() {
+    this.orderRegionsButton.click();
+    cy.get(".lsf-dropdown").contains("Order by Time").parent().click();
+    // Cypress is bad at events emitting, so this is a hack to close the panel that
+    // would be closed if the same action is done by a real person
+    this.orderRegionsButton.click();
+  },
   get regions() {
     return LabelStudio.getFeatureFlag(FF_DEV_1170).then((isFFDEV1170) => {
       if (isFFDEV1170) {
@@ -34,6 +44,12 @@ export const Sidebar = {
   findRegionByIndex(idx: number) {
     return this.findRegion(`:eq(${idx})`);
   },
+  findByRegionIndex(idx: number) {
+    return this.regions
+      .find(".lsf-outliner-item__index")
+      .filter(`:contains("${idx}")`)
+      .parents(".lsf-tree-node-content-wrapper");
+  },
   get hiddenRegions() {
     return this.outliner.should("be.visible").get(".lsf-tree__node_hidden .lsf-tree-node-content-wrapper");
   },
@@ -77,4 +93,7 @@ export const Sidebar = {
   expandDetailsRightPanel() {
     cy.get(".lsf-sidepanels__wrapper_align_right .lsf-panel__header").should("be.visible").click();
   },
+  deleteSelectedRegionsWithHotkey() {
+    cy.get("body").type("{backspace}");
+  },
 };