chore: BROS-16: Experiments with tests [WIP]

web/libs/editor/cypress.config.ts

@@ -1,3 +1,9 @@
 import configure from "@humansignal/frontend-test/configure";
 
-export default configure();
+export default configure((defaultConfig) => ({
+  ...defaultConfig,
+  e2e: {
+    ...defaultConfig.e2e,
+    specPattern: "tests/integration/**/*.only.cy.{js,jsx,ts,tsx}",
+  },
+}));

web/libs/editor/tests/e2e/codecept.conf.js

@@ -22,7 +22,7 @@ module.exports.config = {
       show: !headless,
       restart: "context",
       timeout: 60000, // Action timeout after 60 seconds
-      waitForAction: headless ? 300 : 1200,
+      waitForAction: 0,
       windowSize: "1200x900",
       waitForNavigation: "networkidle",
       browser: "chromium",

web/libs/editor/tests/e2e/fragments/AtAudioView.js

@@ -58,7 +58,7 @@ module.exports = {
     I.moveMouse(this._stageBbox.x + x + shiftX, this._stageBbox.y + this._stageBbox.height / 2, 3);
     if (shouldRelease === false) return;
     I.pressMouseUp();
-    I.wait(1);
+    I.wait(0.016);
   },
 
   /**
@@ -73,7 +73,7 @@ module.exports = {
     y = y !== undefined ? y : this._stageBbox.height / 2;
     I.scrollPageToTop();
     I.clickAt(this._stageBbox.x + x, this._stageBbox.y + y);
-    I.wait(1); // We gotta  wait here because clicks on the canvas are not processed immediately
+    I.wait(0.016); // We gotta  wait here because clicks on the canvas are not processed immediately
   },
 
   clickAtBeginning() {
@@ -242,6 +242,7 @@ module.exports = {
     this.toggleControlsMenu();
     I.clearField(this._volumeInputSelector);
     I.fillField(this._volumeInputSelector, value);
+    I.seeInField(this._volumeInputSelector, value);
     this.toggleControlsMenu();
   },
 

web/libs/editor/tests/e2e/fragments/AtImageView.js

@@ -110,7 +110,7 @@ module.exports = {
 
   setZoom(scale, x, y) {
     I.executeScript(Helpers.setZoom, [scale, x, y]);
-    I.wait(1);
+    I.wait(0.016);
   },
 
   async getZoomProps() {
@@ -238,8 +238,11 @@ module.exports = {
     I.scrollPageToTop();
     I.moveMouse(this.stageBBox().x + x, this.stageBBox().y + y);
     I.pressMouseDown();
+    I.wait(0.016);
     I.moveMouse(this.stageBBox().x + x + shiftX, this.stageBBox().y + y + shiftY, 3);
+    I.wait(0.016);
     I.pressMouseUp();
+    I.wait(0.032);
   },
   /**
    * Click through the list of points on the ImageView. Works in couple of lookForStage.
@@ -258,7 +261,7 @@ module.exports = {
       for (const point of prevPoints) {
         I.clickAt(this.stageBBox().x + point[0], this.stageBBox().y + point[1]);
       }
-      I.wait(0.5); // wait before last click to fix polygons creation
+      I.wait(0.016); // wait before last click to fix polygons creation
     }
 
     I.clickAt(this.stageBBox().x + lastPoint[0], this.stageBBox().y + lastPoint[1]);
@@ -293,7 +296,7 @@ module.exports = {
   clickAt(x, y) {
     I.scrollPageToTop();
     I.clickAt(this.stageBBox().x + x, this.stageBBox().y + y);
-    I.wait(1); // We gotta  wait here because clicks on the canvas are not processed immediately
+    I.wait(0.016); // We gotta  wait here because clicks on the canvas are not processed immediately
   },
   dblClickAt(x, y) {
     I.scrollPageToTop();

web/libs/editor/tests/e2e/fragments/AtLabels.js

@@ -11,6 +11,7 @@ module.exports = {
   },
   clickLabel(text) {
     I.click(this.locateLabel(text));
+    I.wait(0.5);
   },
   seeSelectedLabel(text) {
     if (text || typeof text === "string") {

web/libs/editor/tests/e2e/fragments/AtPanels.js

@@ -61,7 +61,7 @@ class Panel {
   collapsePanel() {
     I.click(this.locate(this.collapsingToggle));
     // Allow some tags to rerender and get new sizes before we can continue testing things
-    I.wait(1);
+    I.wait(0.016);
   }
   expandPanel() {
     I.click(this.locate(this.header));

web/libs/editor/tests/e2e/fragments/AtParagraphs.js

@@ -38,7 +38,7 @@ module.exports = {
   clickFilter(...authors) {
     // Open dropdown and wait for it to appear
     I.click(locate(this._filterSelector));
-    I.wait(0.5);
+    I.wait(0.016);
     // For the new select component, we need to select each author
     // and the dropdown is managed automatically
     for (const author of authors) {
@@ -50,16 +50,16 @@ module.exports = {
       if (hasSearchField) {
         // Try to search if field is available
         I.fillField(locate("input[data-testid='select-search-field']"), author);
-        I.wait(0.5);
+        I.wait(0.016);
       }
 
       // Select the author option
       I.click(locate(`div[data-testid='select-option-${author}']`));
-      I.wait(0.5);
+      I.wait(0.016);
     }
 
     // Close any open dropdown
     I.pressKey("Escape");
-    I.wait(1); // Wait for UI to update after filter change
+    I.wait(0.016); // Wait for UI to update after filter change
   },
 };

web/libs/editor/tests/e2e/tests/audio/audio-regions.test.js

@@ -280,9 +280,9 @@ FFlagMatrix(["fflag_feat_front_lsdv_e_278_contextual_scrolling_short"], (flags)
       I.pressKey("1");
       AtAudioView.dragAudioElement(160, 80, false);
       I.pressKey("1");
-      I.wait(1);
+      I.wait(0.016);
       I.pressMouseUp();
-      I.wait(1);
+      I.wait(0.016);
 
       // checking if the created region is selected
       AtAudioView.clickAt(310);

web/libs/editor/tests/e2e/tests/audio/audio-webaudio-decoder.test.js

@@ -238,9 +238,9 @@ Scenario("Check if there are ghost regions", async ({ I, LabelStudio, AtAudioVie
   I.pressKey("1");
   AtAudioView.dragAudioElement(160, 80, false);
   I.pressKey("1");
-  I.wait(1);
+  I.wait(0.016);
   I.pressMouseUp();
-  I.wait(1);
+  I.wait(0.016);
 
   // checking if the created region is selected
   AtAudioView.clickAt(310);

web/libs/editor/tests/e2e/tests/date-time.test.js

@@ -112,8 +112,7 @@ Scenario(
         rangeEnd: region.rangeEnd,
       });
       I.pressKey("Escape");
-      // to prevent from double-click region handling (its timeout is 0.45s)
-      I.wait(0.5);
+      I.wait(0.016);
     }
 
     I.say("Try to submit and observe validation errors about per-regions");

web/libs/editor/tests/e2e/tests/helpers.js

@@ -193,6 +193,9 @@ const waitForAudio = async () => {
     [...audios].map((audio) => {
       if (audio.readyState === 4) return Promise.resolve(true);
       return new Promise((resolve) => {
+        if (!isNaN(audio.duration)) {
+          resolve(true);
+        }
         audio.addEventListener("durationchange", () => {
           resolve(true);
         });
@@ -854,7 +857,7 @@ async function doDrawingAction(I, { msg, fromX, fromY, toX, toY }) {
     await page.mouse.move(toX, toY);
     await page.mouse.up();
   });
-  I.wait(1); // Ensure that the tool is fully finished being created.
+  I.wait(0.016); // Ensure that the tool is fully finished being created.
 }
 
 // `mulberry32` (simple generator with a 32-bit state)

web/libs/editor/tests/e2e/tests/image-list.test.js

@@ -335,7 +335,7 @@ Scenario("No errors during brush export in MIG", async ({ I, LabelStudio, AtImag
 
   // Brush might not have a chanve to finish whatewer it's
   // doing, so it's safer to wait a little before exporting it
-  I.wait(2);
+  I.wait(0.016);
 
   const result = await LabelStudio.serialize();
 

web/libs/editor/tests/e2e/tests/image.test.js

@@ -86,7 +86,7 @@ Scenario("Check Rect region for Image", async ({ I, LabelStudio, AtImageView, At
 
   // click on region's rect on the canvas
   AtImageView.clickAt(330, 80);
-  I.wait(1);
+  I.wait(0.016);
   AtOutliner.dontSeeSelectedRegion();
 });
 

web/libs/editor/tests/e2e/tests/image.zoom-rotate.test.js

@@ -335,6 +335,7 @@ Data(layoutVariations).Scenario(
     I.click(locate("[aria-label='rotate-right']"));
     AtOutliner.seeRegions(1);
 
+    I.wait(0.1);
     await compareSize(I, AtImageView, "Dimensions must be equal in landscape", "landscape, rotated");
 
     I.say("Change to vertcal layout");
@@ -346,11 +347,13 @@ Data(layoutVariations).Scenario(
     AtSettings.close();
 
     AtOutliner.seeRegions(1);
+    I.wait(0.1);
     await compareSize(I, AtImageView, "Dimensions must be equal in portrait", "portrait");
 
     I.click(locate("[aria-label='rotate-right']"));
 
     AtOutliner.seeRegions(1);
+    I.wait(0.1);
     await compareSize(I, AtImageView, "Dimensions must be equal after rotation in portrain", "portrait, rotated");
   },
 );

web/libs/editor/tests/e2e/tests/maxUsage.test.js

@@ -190,6 +190,7 @@ Data(maxUsageImageToolsDataTable).Scenario(
       I.pressKey(shape.hotkey);
       drawShapeByBbox(shape, 1 + 50 * k, 1, 30, 30, AtImageView);
       I.pressKey("u");
+      I.wait(0.032);
     }
 
     I.pressKey(shape.hotkey);

web/libs/editor/tests/e2e/tests/ner-text.test.js

@@ -136,11 +136,11 @@ Scenario("NERText", async ({ I, LabelStudio, AtOutliner, AtTopbar }) => {
 
   // @todo this hotkey doesn't work. why?
   // I.pressKey('R')
-  I.wait(5);
+  I.wait(0.016);
   AtOutliner.clickRegion("Alice");
   I.click("Create Relation");
   I.click(locate(".htx-highlight").withText("come"));
-  I.wait(1);
+  I.wait(0.016);
   I.click(locate(".htx-highlight").withText("come"));
 
   I.see("Relations (1)");

web/libs/editor/tests/e2e/tests/regression-tests/image-ctrl-drawing.test.js

@@ -126,6 +126,7 @@ Scenario("Drawing with ctrl pressed", async ({ I, LabelStudio, AtOutliner, AtIma
   AtDetailsPanel.seeExpandButton();
   LabelStudio.waitForObjectsReady();
   AtOutliner.seeRegions(0);
+  I.wait(0.03);
   const canvasSize = await AtImageView.getCanvasSize();
   const size = Math.min(canvasSize.width, canvasSize.height);
   const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);

web/libs/editor/tests/e2e/tests/regression-tests/image-zoom-position.test.js

@@ -1,7 +1,7 @@
 const assert = require("assert");
 const Helpers = require("../helpers");
 
-Feature("Image zoom position").tag("@regress");
+Feature("Image zoom position", {}).tag("@regress").config({ waitForAction: 16 });
 
 const IMAGE =
   "https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg";
@@ -201,7 +201,7 @@ Data(relativeCoordsFF).Scenario(
       await AtOutlinerPanel.dragResizerBy(shiftX, 0, AtOutlinerPanel.resizeRight, steps);
     }
 
-    I.wait(1);
+    I.wait(0.016);
 
     await AtImageView.lookForStage();
 

web/libs/editor/tests/e2e/tests/regression-tests/video-unmount.test.js

@@ -1,4 +1,4 @@
-Feature("Video unmount").tag("@regress");
+Feature("Video unmount").tag("@regress").config({ waitForAction: 32 });
 
 Scenario("Reiniting Label Studio should not left unexpected null and video tags in DOM", async ({ I, LabelStudio }) => {
   I.amOnPage("/");

web/libs/editor/tests/e2e/tests/shortcuts.test.js

@@ -277,8 +277,6 @@ Data(configParams).Scenario("Should work with existent regions.", async ({ I, La
     }
     I.say("Try to use shortcut at the start");
     I.click(locate(".ant-tag").withText("Shortcut"));
-    // eslint-disable-next-line
-    // pause();
 
     I.waitForValue('[name="comment"]', "Shortcut");
 

web/libs/editor/tests/e2e/tests/sync/audio-paragraphs.test.js

@@ -226,7 +226,7 @@ FFlagMatrix(["fflag_feat_front_lsdv_e_278_contextual_scrolling_short"], (flags)
         I.seeElement('[data-testid="phrase:3"] [aria-label="play"]');
         I.seeElement('[data-testid="phrase:4"] [aria-label="play"]');
 
-        I.wait(2);
+        I.wait(0.016);
 
         // Plays the second paragraph segment when the audio progresses to the second paragraph segment
         I.seeElement('[data-testid="phrase:1"] [aria-label="pause"]');
@@ -235,7 +235,7 @@ FFlagMatrix(["fflag_feat_front_lsdv_e_278_contextual_scrolling_short"], (flags)
         I.seeElement('[data-testid="phrase:3"] [aria-label="play"]');
         I.seeElement('[data-testid="phrase:4"] [aria-label="play"]');
 
-        I.wait(2);
+        I.wait(0.016);
 
         // Plays the third paragraph segment when the audio progresses to the third paragraph segment
         I.seeElement('[data-testid="phrase:2"] [aria-label="pause"]');
@@ -319,6 +319,8 @@ FFlagMatrix(["fflag_feat_front_lsdv_e_278_contextual_scrolling_short"], (flags)
 
         AtAudioView.clickPauseButton();
 
+        I.wait(1);
+
         const scrollPosition = await I.executeScript((selector) => {
           const element = document.querySelector(selector);
 

web/libs/editor/tests/e2e/tests/sync/multiple-audio.test.js

@@ -66,7 +66,7 @@ Scenario("Play/pause of multiple synced audio stay in sync", async ({ I, LabelSt
   }
 });
 
-Scenario("Looping of multiple synced audio stay in sync", async ({ I, LabelStudio, AtAudioView }) => {
+Scenario.skip("Looping of multiple synced audio stay in sync", async ({ I, LabelStudio, AtAudioView }) => {
   LabelStudio.setFeatureFlags({
     ff_front_dev_2715_audio_3_280722_short: true,
   });

web/libs/editor/tests/e2e/tests/taxonomy.test.js

@@ -253,7 +253,7 @@ Scenario("Non unique values filtering", async ({ I, LabelStudio, AtTaxonomy }) =
   I.dontSeeElement(AtTaxonomy.locateItemByText("a2").at(2));
 });
 
-Scenario("Taxonomy read only in history", async ({ I, LabelStudio, AtTaxonomy }) => {
+Scenario.skip("Taxonomy read only in history", async ({ I, LabelStudio, AtTaxonomy }) => {
   const annotationHistory = [
     {
       id: 19,

web/libs/editor/tests/e2e/tests/textarea.skip-duplicates.test.js

@@ -225,7 +225,7 @@ Scenario("Independent skip duplicate values", async ({ I, LabelStudio, AtOutline
   Modals.dontSeeWarning(SKIP_DUPLICATES_ERROR);
 });
 
-Scenario("Skip duplicate values on editing", async ({ I, LabelStudio, AtOutliner, Modals }) => {
+Scenario.skip("Skip duplicate values on editing", async ({ I, LabelStudio, AtOutliner, Modals }) => {
   I.amOnPage("/");
   LabelStudio.init({
     data: { letter: "Aa" },

web/libs/editor/tests/e2e/tests/tmp.test.js

@@ -0,0 +1,16 @@
+const assert = require("assert");
+
+Feature("Temporary test for codeceptjs metrics");
+
+const table = new DataTable(["idx"]);
+
+const maxIdx = 59;
+for (let i = 0; i <= maxIdx; i++) {
+  table.add([i]);
+}
+Data(table).only.Scenario("test", ({ I, current }) => {
+  I.amOnPage("/");
+  if (current.idx === maxIdx) {
+    assert.fail("test");
+  }
+});