init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import { ToolBar, LabelStudio } from "@humansignal/frontend-test/helpers/LSF";
import type { CustomButtonType } from "../../../../src/stores/CustomButton";
import { FF_BULK_ANNOTATION, FF_DEV_3873 } from "../../../../src/utils/feature-flags";
 
beforeEach(() => {
  LabelStudio.addFeatureFlagsOnPageLoad({
    [FF_BULK_ANNOTATION]: true,
    [FF_DEV_3873]: true,
  });
});
 
describe("Bottom bar", () => {
  it("should display custom buttons", () => {
    const clickHandler1 = cy.spy().as("clickHandler1");
    const clickHandler2 = cy.spy().as("clickHandler2");
 
    LabelStudio.params()
      .config("<View></View>")
      .data({})
      .withResult([])
      .withParam("customButtons", [
        {
          name: "custom_btn_1",
          title: "Custom button 1",
          look: "filled",
        },
        {
          name: "custom_btn_2",
          title: "Custom button 2",
          look: "string",
        },
      ])
      .withEventListener("customButton", (_store, buttonName: string) => {
        switch (buttonName) {
          case "custom_btn_1": {
            clickHandler1();
            break;
          }
          case "custom_btn_2": {
            clickHandler2();
            break;
          }
        }
      })
      .init();
 
    ToolBar.controlButtons.should("have.length", 2);
    ToolBar.controlButtons.eq(0).should("have.text", "Custom button 1");
    ToolBar.controlButtons.eq(1).should("have.text", "Custom button 2");
 
    ToolBar.controlButtons.eq(0).click();
    ToolBar.controlButtons.eq(1).click();
 
    cy.window().then((_win) => {
      expect(clickHandler1).to.be.called;
      expect(clickHandler2).to.be.called;
    });
  });
 
  it("should allow modifying custom buttons", () => {
    let resolve: Function;
    const promise = new Promise<undefined>((r) => {
      resolve = r as Function;
    });
    LabelStudio.params()
      .config("<View></View>")
      .data({})
      .withResult([])
      .withInterface("controls:custom")
      .withParam("customButtons", [
        {
          name: "custom_save_btn",
          title: "Custom save",
        },
      ])
      .withEventListener(
        "customButton",
        async (_store, buttonName: string, { button }: { button: CustomButtonType }) => {
          switch (buttonName) {
            case "custom_save_btn": {
              await promise;
              button.updateState({ name: "custom_update_btn", title: "Custom update" });
            }
          }
        },
      )
      .init();
 
    ToolBar.controlButtons.should("have.length", 1);
    ToolBar.controlButtons.eq(0).should("have.text", "Custom save");
 
    ToolBar.controlButtons.eq(0).click();
    cy.wait(100).then(() => {
      resolve();
    });
    ToolBar.controlButtons.eq(0).should("have.text", "Custom update");
  });
});