fix: adjust pixel color comparison for consistent tests

Updated pixel color comparison coordinates in audio region tests to ensure accuracy and consistency. Added a getter to check the readiness of objects in the model and updated `isReady` logic in test helpers for smoother synchronization.
HumanSignal · Mar 5, 2025 · 366da97 · 366da97
1 parent 8be6045
commit 366da97
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/web/libs/editor/src/tags/object/AudioUltra/model.js b/web/libs/editor/src/tags/object/AudioUltra/model.js
@@ -137,6 +137,9 @@ export const AudioModel = types.compose(
       _wfFrame: null,
     }))
     .views((self) => ({
+      get isReady() {
+        return !!self._ws;
+      },
       get hasStates() {
         const states = self.states();
 

diff --git a/web/libs/editor/tests/integration/e2e/audio/audio_regions.cy.ts b/web/libs/editor/tests/integration/e2e/audio/audio_regions.cy.ts
@@ -12,17 +12,17 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     AudioView.clickAtRelative(0.38, 0.5);
-    const selectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const selectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     selectedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
     // unselecting
     cy.get("body").type("{esc}");
-    const unselectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unselectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
     unselectedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
     });
@@ -38,19 +38,19 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // moving the cursor
     AudioView.seekCurrentTimebox(38);
-    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     activeRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
 
     // deactivating
     AudioView.seekCurrentTimebox(0);
-    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     inactiveRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
@@ -67,7 +67,7 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // highlighting in relations mode
     Labels.select("Music");
@@ -77,7 +77,7 @@ describe("Audio regions", () => {
 
     AudioView.hoverAtRelative(0.4, 0.5);
 
-    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     highlightedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
@@ -86,7 +86,7 @@ describe("Audio regions", () => {
     // unhighlighting
     AudioView.container.trigger("mouseleave");
 
-    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     unhighlightedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);
@@ -103,7 +103,7 @@ describe("Audio regions", () => {
     LabelStudio.waitForObjectsReady();
     AudioView.isReady();
 
-    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // highlighting in relations mode
     Labels.select("Music");
@@ -113,15 +113,15 @@ describe("Audio regions", () => {
 
     AudioView.hoverAtRelative(0.4, 0.5);
 
-    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     highlightedRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
     });
 
     // moving the cursor
     AudioView.seekCurrentTimebox(38);
-    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     activeRegionColor.then((color) => {
       baseRegionColor.should("not.deep.equal", color);
@@ -130,7 +130,7 @@ describe("Audio regions", () => {
 
     // deactivating
     AudioView.seekCurrentTimebox(0);
-    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     // should still be highlighted
     inactiveRegionColor.then((color) => {
@@ -141,7 +141,7 @@ describe("Audio regions", () => {
     // unhighlighting
     AudioView.container.trigger("mouseleave");
 
-    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.85);
 
     unhighlightedRegionColor.then((color) => {
       baseRegionColor.should("deep.equal", color);

diff --git a/web/libs/frontend-test/src/helpers/LSF/AudioView.ts b/web/libs/frontend-test/src/helpers/LSF/AudioView.ts
@@ -1,6 +1,7 @@
 import TriggerOptions = Cypress.TriggerOptions;
 import ObjectLike = Cypress.ObjectLike;
 import ClickOptions = Cypress.ClickOptions;
+import { LabelStudio } from "@humansignal/frontend-test/helpers/LSF/LabelStudio";
 
 type MouseInteractionOptions = Partial<TriggerOptions & ObjectLike & MouseEvent>;
 
@@ -37,6 +38,7 @@ export const AudioView = {
   },
   isReady() {
     this.loadingBar.should("not.exist");
+    LabelStudio.waitForObjectsReady();
   },
   get playButton() {
     return cy.get(`[data-testid="playback-button:play"]`);