test: Add tests for audio ultra and relations

Fix some tests helpers problems

web/libs/editor/src/lib/AudioUltra/Regions/Regions.ts

@@ -408,7 +408,7 @@ export class Regions {
       });
       this.hoveredRegions.clear();
     }
-  }
+  };
 
   private get cursorLockedByPlayhead() {
     return this.waveform.cursor.hasFocus() && this.waveform.cursor.isFocused("playhead");

web/libs/editor/tests/integration/data/audio/audio_regions.ts

@@ -0,0 +1,29 @@
+export const audioWithLabelsConfig = `<View>
+  <Audio name="audio" value="$audio" />
+  <Labels name="labels" toName="audio">
+    <Label value="Noise" />
+    <Label value="Music" />
+    <Label value="Speech" />
+  </Labels>
+</View>`;
+
+export const audioWithLabelsData = {
+  audio: "/public/files/barradeen-emotional.mp3",
+};
+
+export const audioOneRegionResult = [
+  {
+    original_length: 98.719925,
+    value: {
+      start: 25.10367191523605,
+      end: 49.99549849785408,
+      channel: 0,
+      labels: ["Music"],
+    },
+    id: "M5lfg",
+    from_name: "labels",
+    to_name: "audio",
+    type: "labels",
+    origin: "manual",
+  },
+];

web/libs/editor/tests/integration/data/relations/audio.ts

@@ -0,0 +1,71 @@
+export const audioWithLabelsConfig = `<View>
+  <Audio name="audio" value="$audio" />
+  <Labels name="labels" toName="audio">
+    <Label value="Noise" />
+    <Label value="Music" />
+    <Label value="Speech" />
+  </Labels>
+</View>`;
+
+export const audioWithLabelsData = {
+  audio: "/public/files/barradeen-emotional.mp3",
+};
+
+export const audioWithFourRegionsResult = [
+  {
+    original_length: 98.719925,
+    value: {
+      start: 25.10367191523605,
+      end: 49.99549849785408,
+      channel: 0,
+      labels: ["Music"],
+    },
+    id: "1",
+    from_name: "labels",
+    to_name: "audio",
+    type: "labels",
+    origin: "manual",
+  },
+  {
+    original_length: 98.719925,
+    value: {
+      start: 50.10367191523605,
+      end: 74.995498497854,
+      channel: 0,
+      labels: ["Speech"],
+    },
+    id: "2",
+    from_name: "labels",
+    to_name: "audio",
+    type: "labels",
+    origin: "manual",
+  },
+  {
+    original_length: 98.719925,
+    value: {
+      start: 75.10367191523605,
+      end: 99.995498497854,
+      channel: 0,
+      labels: ["Noise"],
+    },
+    id: "3",
+    from_name: "labels",
+    to_name: "audio",
+    type: "labels",
+    origin: "manual",
+  },
+  {
+    original_length: 98.719925,
+    value: {
+      start: 0,
+      end: 24.99549849785408,
+      channel: 0,
+      labels: ["Noise"],
+    },
+    id: "4",
+    from_name: "labels",
+    to_name: "audio",
+    type: "labels",
+    origin: "manual",
+  },
+];

web/libs/editor/tests/integration/e2e/audio/audio_regions.cy.ts

@@ -0,0 +1,150 @@
+import { AudioView, Labels, LabelStudio, Relations } from "@humansignal/frontend-test/helpers/LSF";
+import { audioOneRegionResult, audioWithLabelsConfig, audioWithLabelsData } from "../../data/audio/audio_regions";
+
+describe("Audio regions", () => {
+  it("Should have indication of selected state", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioOneRegionResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+    AudioView.isReady();
+
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    AudioView.clickAtRelative(0.38, 0.5);
+    const selectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    selectedRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+    });
+    // unselecting
+    cy.get("body").type("{esc}");
+    const unselectedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+    unselectedRegionColor.then((color) => {
+      baseRegionColor.should("deep.equal", color);
+    });
+  });
+
+  it("Should have indication of active state", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioOneRegionResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+    AudioView.isReady();
+
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    // moving the cursor
+    AudioView.seekCurrentTimebox(38);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    activeRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+    });
+
+    // deactivating
+    AudioView.seekCurrentTimebox(0);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    inactiveRegionColor.then((color) => {
+      baseRegionColor.should("deep.equal", color);
+    });
+  });
+
+  it("Should have indication of highligted state", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioOneRegionResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+    AudioView.isReady();
+
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    // highlighting in relations mode
+    Labels.select("Music");
+    AudioView.drawRectRelative(0.1, 0.5, 0.1, 0, { force: true });
+    AudioView.clickAtRelative(0.15, 0.5);
+    Relations.toggleCreation();
+
+    AudioView.hoverAtRelative(0.4, 0.5);
+
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    highlightedRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+    });
+
+    // unhighlighting
+    AudioView.container.trigger("mouseleave");
+
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    unhighlightedRegionColor.then((color) => {
+      baseRegionColor.should("deep.equal", color);
+    });
+  });
+
+  it("Should avoid intersection of active and highlighted states", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioOneRegionResult)
+      .init();
+
+    LabelStudio.waitForObjectsReady();
+    AudioView.isReady();
+
+    const baseRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    // highlighting in relations mode
+    Labels.select("Music");
+    AudioView.drawRectRelative(0.1, 0.5, 0.1, 0, { force: true });
+    AudioView.clickAtRelative(0.15, 0.5);
+    Relations.toggleCreation();
+
+    AudioView.hoverAtRelative(0.4, 0.5);
+
+    const highlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    highlightedRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+    });
+
+    // moving the cursor
+    AudioView.seekCurrentTimebox(38);
+    const activeRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    activeRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+      highlightedRegionColor.should("deep.equal", color);
+    });
+
+    // deactivating
+    AudioView.seekCurrentTimebox(0);
+    const inactiveRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    // should still be highlighted
+    inactiveRegionColor.then((color) => {
+      baseRegionColor.should("not.deep.equal", color);
+      highlightedRegionColor.should("deep.equal", color);
+    });
+
+    // unhighlighting
+    AudioView.container.trigger("mouseleave");
+
+    const unhighlightedRegionColor = AudioView.getPixelColorRelative(0.36, 0.9);
+
+    unhighlightedRegionColor.then((color) => {
+      baseRegionColor.should("deep.equal", color);
+    });
+  });
+});

web/libs/editor/tests/integration/e2e/relations/audio.cy.ts

@@ -0,0 +1,51 @@
+import { AudioView, LabelStudio, Relations, Sidebar } from "@humansignal/frontend-test/helpers/LSF";
+import { audioWithFourRegionsResult, audioWithLabelsConfig, audioWithLabelsData } from "../../data/relations/audio";
+
+describe("Relations: Audio", () => {
+  it("Should be able to create a relation", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioWithFourRegionsResult)
+      .init();
+
+    AudioView.isReady();
+
+    AudioView.clickAtRelative(0.4, 0.5);
+    Relations.toggleCreationWithHotkey();
+    AudioView.clickAtRelative(0.2, 0.5);
+  });
+
+  it("Should not display relations out of the viewport", () => {
+    LabelStudio.params()
+      .config(audioWithLabelsConfig)
+      .data(audioWithLabelsData)
+      .withResult(audioWithFourRegionsResult)
+      .init();
+
+    AudioView.isReady();
+
+    AudioView.clickAtRelative(0.4, 0.5);
+    Relations.toggleCreation();
+    AudioView.clickAtRelative(0.2, 0.5);
+
+    AudioView.clickAtRelative(0.4, 0.5);
+    Relations.toggleCreation();
+    AudioView.clickAtRelative(0.6, 0.5);
+
+    AudioView.clickAtRelative(0.6, 0.5);
+    Relations.toggleCreation();
+    AudioView.clickAtRelative(0.8, 0.5);
+
+    Relations.overlayItems.should("have.length", 3);
+
+    AudioView.zoomIn({ times: 2 });
+    Relations.overlayItems.should("have.length", 1);
+
+    AudioView.scroll({ times: 3, speed: 300 });
+    Relations.overlayItems.should("have.length", 1);
+
+    AudioView.zoomIn({ times: 2 });
+    Relations.overlayItems.should("have.length", 0);
+  });
+});