• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

SAP / ui5-webcomponents-react / 13287547337

12 Feb 2025 02:23PM CUT coverage: 86.925%. First build
13287547337

Pull #6929

github

web-flow
Merge 67c43dea0 into 65b203ac2
Pull Request #6929: chore(coverage): ignore `dist` folders

2254 of 2778 branches covered (81.14%)

3836 of 4413 relevant lines covered (86.92%)

57673.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

40.48
/packages/cypress-commands/src/commands.ts
1
import type UI5Element from '@ui5/webcomponents-base/dist/UI5Element.js';
2

3
declare global {
4
  // eslint-disable-next-line @typescript-eslint/no-namespace
5
  namespace Cypress {
6
    interface Chainable {
7
      /**
8
       * Types a value into a ui5-webcomponent that offers a typeable input field.
9
       *
10
       * @param {string} text Text that will be typed into the input.
11
       * @example cy.get('[ui5-input]').typeIntoUi5Input('Hello World');
12
       */
13
      typeIntoUi5Input(text: string, options?: Partial<TypeOptions>): Chainable<Element>;
14

15
      /**
16
       * Clears a value from ui5-webcomponent that offers a typeable input field.
17
       *
18
       * @example cy.get('[ui5-input]').clearUi5Input();
19
       */
20
      clearUi5Input(options?: Partial<ClearOptions>): Chainable<Element>;
21

22
      /**
23
       * Types a value with a delay into an ui5-webcomponent that offers a typeable input field.
24
       *
25
       * __Note:__ Use this command if you render a component that should show suggestions while typing (e.g. `ComboBox`) but the corresponding popover does not open.
26
       * This command waits for the appropriate delay (in ms), giving the web component time to define all necessary customElements and boot web components.
27
       * The delay time can vary from environment to environment.
28
       *
29
       * @param {string} text Text that will be typed into the input.
30
       * @param {number} [delay=500] Delay in ms to wait for the web-component to be ready. Default: 500
31
       * @example cy.get('[ui5-combobox]').typeIntoUi5InputWithDelay('Hello World', 1000);
32
       */
33
      typeIntoUi5InputWithDelay(text: string, delay?: number, options?: Partial<TypeOptions>): Chainable<Element>;
34

35
      /**
36
       * Types a value into `ui5-textarea`.
37
       * @param {string} text Text that will be typed into the text-area.
38
       * @example cy.get('[ui5-textarea]').typeIntoUi5TextArea('Hello World');
39
       */
40
      typeIntoUi5TextArea(text: string, options?: Partial<TypeOptions>): Chainable<Element>;
41

42
      /**
43
       * Toggles the state of a `ui5-checkbox`.
44
       * @example cy.get('[ui5-checkbox]').toggleUi5Checkbox();
45
       */
46
      toggleUi5Checkbox(): Chainable<Element>;
47

48
      /**
49
       * Toggles the state of a `ui5-switch`
50
       * @example cy.get('[ui5-switch]').toggleUi5Switch();
51
       */
52
      toggleUi5Switch(): Chainable<Element>;
53

54
      /**
55
       * Click on a `ui5-radio-button`
56
       * @example cy.get('[ui5-radio-button]').clickUi5RadioButton();
57
       */
58
      clickUi5RadioButton(): Chainable<Element>;
59

60
      /**
61
       * Close ui5-webcomponents popups like `ui5-dialog` or `ui5-popover` by pressing the "Escape" key.
62
       * @example cy.closeUi5PopupWithEsc()
63
       */
64
      closeUi5PopupWithEsc(): Chainable<Element>;
65

66
      /**
67
       * Click on a list item of the `List` component by text.
68
       * @param {string} text The text of the list item that should be clicked.
69
       * @example cy.clickUi5ListItemByText("List Item")
70
       */
71
      clickUi5ListItemByText(text: string): Chainable<Element>;
72

73
      /**
74
       * Click on an `ui5-option` of the `ui5-select` component by text.
75
       *
76
       * __Note:__ The select popover must be visible, otherwise it can lead to unwanted side effects.
77
       *
78
       * @param text text of the ui5-option that should be clicked
79
       * @param options ClickOptions
80
       *
81
       *
82
       * @example cy.get('[ui5-select]').clickUi5SelectOptionByText('Option2');*
83
       */
84
      clickUi5SelectOptionByText(text: string, options?: Partial<ClickOptions>): Chainable<Element>;
85

86
      /**
87
       * Click on chained `ui5-option`.
88
       *
89
       * __Note:__ The select popover must be visible, otherwise it can lead to unwanted side effects.
90
       *
91
       * @deprecated: This command is deprecated. Please use `clickDropdownMenuItem` instead.
92
       *
93
       * @example cy.get('[ui5-option]').clickUi5SelectOption();
94
       */
95
      clickUi5SelectOption(options?: Partial<ClickOptions>): Chainable<Element>;
96

97
      /**
98
       * Click on an option of "select-like" components by text. Currently supported components are `ui5-select`, `ui5-combobox` and `ui5-multi-combobox`.
99
       *
100
       * __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
101
       *
102
       * @param text text of the item inside the popover that should be clicked
103
       * @param options Cypress.ClickOptions
104
       * @example cy.get('[ui5-select]').clickDropdownMenuItemByText('Option2');
105
       *
106
       */
107
      clickDropdownMenuItemByText(text: string, options?: Partial<ClickOptions>): Chainable<Element>;
108

109
      /**
110
       * Click on a chained option of "select-like" components. Currently supported components are `ui5-option`, `ui5-mcb-item` and `ui5-cb-item` (since v1.24.3 of `@ui5/webcomponents`).
111
       *
112
       * __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
113
       *
114
       * @example cy.get('[ui5-option]').clickDropdownMenuItem();
115
       */
116
      clickDropdownMenuItem(options?: Partial<ClickOptions>): Chainable<Element>;
117

118
      /**
119
       * Click on the open button in "select-like" components to open the popover. Currently supported components are `ui5-select`, `ui5-combobox` and `ui5-multi-combobox`.
120
       *
121
       * @example cy.get('[ui5-select]').openDropDownByClick();
122
       */
123
      openDropDownByClick(options?: Partial<ClickOptions>): Chainable<Element>;
124
    }
125
  }
126
}
127

128
Cypress.Commands.add('typeIntoUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {
245✔
129
  cy.wrap(subject)
1,669✔
130
    .findShadowInput()
131
    .type(text, { force: true, ...options });
132
});
133

134
Cypress.Commands.add('clearUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {
245!
135
  cy.wrap(subject)
×
136
    .findShadowInput()
137
    .clear({ force: true, ...options });
138
});
139

140
Cypress.Commands.add(
245✔
141
  'typeIntoUi5InputWithDelay',
142
  { prevSubject: 'element' },
143
  (subject, text, delay = 500, options = {}) => {
×
144
    cy.wrap(subject)
×
145
      .findShadowInput()
146
      .wait(delay)
147
      .type(text, { force: true, ...options });
148
  }
149
);
150

151
Cypress.Commands.add('typeIntoUi5TextArea', { prevSubject: 'element' }, (subject, text, options = {}) => {
245!
152
  cy.wrap(subject)
×
153
    .shadow()
154
    .find('textarea')
155
    .type(text, { force: true, ...options });
156
});
157

158
Cypress.Commands.add('toggleUi5Checkbox', { prevSubject: 'element' }, (subject) => {
245✔
159
  cy.wrap(subject).findShadowInput().click({ force: true });
×
160
});
161

162
Cypress.Commands.add('toggleUi5Switch', { prevSubject: 'element' }, (subject) => {
245✔
163
  cy.wrap(subject).findShadowInput().click({ force: true });
×
164
});
165

166
Cypress.Commands.add('clickUi5RadioButton', { prevSubject: 'element' }, (subject) => {
245✔
167
  cy.wrap(subject).findShadowInput().click({ force: true });
×
168
});
169

170
Cypress.Commands.add('closeUi5PopupWithEsc', () => {
245✔
171
  cy.get('body').type('{esc}', { force: true });
37✔
172
});
173

174
Cypress.Commands.add('clickUi5ListItemByText', (text) => {
245✔
175
  cy.contains(text).find('li').click({ force: true });
42✔
176
});
177

178
Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
245!
179
  cy.wrap(subject)
×
180
    .contains(text)
181
    .then(($option) => {
182
      $option.get(0).focus();
×
183
    })
184
    .click(options);
185
});
186

187
Cypress.Commands.add('clickUi5SelectOption', { prevSubject: 'element' }, (subject, options = {}) => {
245!
188
  cy.wrap(subject).then(($option) => {
×
189
    // @ts-expect-error: cannot set $option to use OptionDomRef
190
    const domRef = $option.get(0).getDomRef();
×
191
    cy.wrap(domRef).click(options);
×
192
  });
193
});
194

195
Cypress.Commands.add('clickDropdownMenuItemByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
245!
196
  cy.wrap(subject).find('[ui5-responsive-popover]').should('have.attr', 'open');
×
197
  cy.wrap(subject).then(([$dropdown]) => {
×
198
    switch (true) {
×
199
      case $dropdown.hasAttribute('ui5-select'):
200
        cy.wrap($dropdown).contains(text).clickDropdownMenuItem(options);
×
201
        break;
×
202
      default:
203
        cy.wrap($dropdown).get(`[text="${text}"]`).clickDropdownMenuItem(options);
×
204
        break;
×
205
    }
206
  });
207
});
208

209
Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subject, options = {}) => {
245!
210
  cy.wrap(subject).then(([$option]) => {
×
211
    const domRef = ($option as UI5Element).getDomRef();
×
212
    cy.wrap(domRef).focus();
×
213
    cy.wrap(domRef).click(options);
×
214
  });
215
});
216

217
Cypress.Commands.add('openDropDownByClick', { prevSubject: 'element' }, (subject, options = {}) => {
245!
218
  if (subject.get(0).hasAttribute('ui5-multi-combobox')) {
×
219
    // mcb needs a lot of calculation time to make the popover available
220
    cy.wait(500);
×
221
  }
222
  cy.wrap(subject).shadow().find('.inputIcon').click(options);
×
223
});
224

225
export {};
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc