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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
const { centerOfBbox } = require("../tests/helpers");
const { I } = inject();
 
/**
 * Helper to test draggable panels like Details and Outliner.
 * They are selected by providing one of PANEL selectors to constructor (see exports).
 */
class Panel {
  container = ".lsf-sidepanels";
  root = ".lsf-panel";
  detached = ".lsf-panel_detached";
  aligmentLeft = ".lsf-panel_alignment_left";
  aligmentRight = ".lsf-panel_alignment_right";
  header = ".lsf-panel__header";
  body = ".lsf-panel__body";
  title = ".lsf-panel__title";
 
  leftZone = ".lsf-sidepanels__wrapper_align_left";
  rightZone = ".lsf-sidepanels__wrapper_align_right";
 
  collapsingToggle = ".lsf-panel__toggle";
  collapseButton = `${this.collapsingToggle}[data-tooltip*="Collapse"]`;
  expandButton = `${this.collapsingToggle}[data-tooltip*="Expand"]`;
 
  resizeTopLeft = '[data-resize="top-left"]';
  resizeTopRight = '[data-resize="top-right"]';
  resizeBottomLeft = '[data-resize="bottom-left"]';
  resizeBottomRight = '[data-resize="bottom-right"]';
  resizeTop = '[data-resize="top"]';
  resizeBottom = '[data-resize="bottom"]';
  resizeLeft = '[data-resize="left"]';
  resizeRight = '[data-resize="right"]';
 
  constructor(selector) {
    this.root = selector ? `${this.root}${selector}` : this.root;
  }
  locatePanel(stateSelector = "") {
    return locate(this.root + stateSelector);
  }
  locate(locator) {
    return locator ? locate(locator).inside(this.locatePanel()) : this.locatePanel();
  }
  seePanel() {
    I.seeElement(this.locatePanel());
  }
  seePanelAttachedLeft() {
    I.seeElement(this.locatePanel(`${this.aligmentLeft}:not(${this.detached})`).inside(this.leftZone));
  }
  seePanelAttachedRight() {
    I.seeElement(this.locatePanel(`${this.aligmentRight}:not(${this.detached})`).inside(this.rightZone));
  }
  seePanelDetached() {
    I.seeElement(this.locatePanel(this.detached));
  }
  seePanelBody() {
    I.seeElement(this.locate(this.body));
  }
  dontSeePanelBody() {
    I.dontSeeElement(this.locate(this.body));
  }
  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);
  }
  expandPanel() {
    I.click(this.locate(this.header));
  }
  seeExpandButton() {
    I.seeElement(this.locate(this.expandButton));
  }
  dontSeeExpandButton() {
    I.dontSeeElement(this.locate(this.expandButton));
  }
  seeСollapseButton() {
    I.seeElement(this.locate(this.collapseButton));
  }
  dontSeeСollapseButton() {
    I.dontSeeElement(this.locate(this.collapseButton));
  }
  async grabHeaderBbox(elementSize) {
    return I.grabElementBoundingRect(this.locate(this.header), elementSize);
  }
  async grabPanelBbox(elementSize) {
    return I.grabElementBoundingRect(this.locatePanel(), elementSize);
  }
  async grabPanelsContainerBbox(elementSize) {
    return I.grabElementBoundingRect(this.container, elementSize);
  }
  async dragPanelBy(shiftX, shiftY, steps = 1) {
    const fromBbox = await this.grabHeaderBbox();
    const fromPoint = centerOfBbox(fromBbox);
    const toPoint = {
      x: fromPoint.x + shiftX,
      y: fromPoint.y + shiftY,
    };
 
    return await I.dragAndDropMouse(fromPoint, toPoint, "left", steps);
  }
  async dragPanelTo(x, y, steps = 1) {
    const fromBbox = await this.grabHeaderBbox();
    const fromPoint = centerOfBbox(fromBbox);
    const toPoint = {
      x,
      y,
    };
 
    return await I.dragAndDropMouse(fromPoint, toPoint, "left", steps);
  }
  async dragPanelToElement(locator, steps = 1) {
    const fromBbox = await this.grabHeaderBbox();
    const toBbox = await I.grabElementBoundingRect(locator);
    const fromPoint = centerOfBbox(fromBbox);
    const toPoint = centerOfBbox(toBbox);
 
    return await I.dragAndDropMouse(fromPoint, toPoint, "left", steps);
  }
  async dragPanelToLeftSocket(steps = 1) {
    return await this.dragPanelToElement(this.leftZone, steps);
  }
  async dragPanelToRightSocket(steps = 1) {
    return await this.dragPanelToElement(this.rightZone, steps);
  }
 
  async dragResizerBy(shiftX, shiftY, resizerSelector, steps = 1) {
    const fromBbox = await I.grabElementBoundingRect(this.locate(resizerSelector));
    const fromPoint = centerOfBbox(fromBbox);
    const toPoint = {
      x: fromPoint.x + shiftX,
      y: fromPoint.y + shiftY,
    };
 
    return await I.dragAndDropMouse(fromPoint, toPoint, "left", steps);
  }
}
 
module.exports = new Panel();
module.exports.PANEL = {
  OUTLINER: ".lsf-outliner",
  DETAILS: ".lsf-details",
};
module.exports.usePanel = (panel) => {
  return new Panel(panel);
};