14308600513

Committed 07 Apr 2025 12:00PM CUT coverage: 87.546% (+0.004%) from 87.542%

Build # 14308600513

Build Type

Pull #7203

github

Committed by

web-flow

Commit Message

Merge 73e5fafb0 into 3b2e2488d

Pull Request Pull Request #7203: feat: update to UI5 Web Components 2.9.0

Run Details

2969 of 3946 branches covered (75.24%)

5 of 5 new or added lines in 2 files covered. (100.0%)

12 existing lines in 2 files now uncovered.

5195 of 5934 relevant lines covered (87.55%)

83610.49 hits per line

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

98.08

/packages/cypress-commands/src/commands.ts

import type UI5Element from '@ui5/webcomponents-base/dist/UI5Element.js';

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

      /**
       * Clears a value from ui5-webcomponent that offers a typeable input field.
       *
       * @example cy.get('[ui5-input]').clearUi5Input();
       */
      clearUi5Input(options?: Partial<CheckClearOptions>): Chainable<Element>;

      /**
       * Types a value with a delay into an ui5-webcomponent that offers a typeable input field.
       *
       * __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.
       * This command waits for the appropriate delay (in ms), giving the web component time to define all necessary customElements and boot web components.
       * The delay time can vary from environment to environment.
       *
       * @param {string} text Text that will be typed into the input.
       * @param {number} [delay=500] Delay in ms to wait for the web-component to be ready. Default: 500
       * @example cy.get('[ui5-combobox]').typeIntoUi5InputWithDelay('Hello World', 1000);
       */
      typeIntoUi5InputWithDelay(text: string, delay?: number, options?: Partial<TypeOptions>): Chainable<Element>;

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

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

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

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

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

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

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

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

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

      /**
       * 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`).
       *
       * __Note:__ The popover must be visible, otherwise it can lead to unwanted side effects.
       *
       * @example cy.get('[ui5-option]').clickDropdownMenuItem();
       */
      clickDropdownMenuItem(options?: Partial<ClickOptions>): Chainable<Element>;

      /**
       * 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`.
       *
       * @example cy.get('[ui5-select]').openDropDownByClick();
       */
      openDropDownByClick(options?: Partial<ClickOptions>): Chainable<Element>;
    }
  }
}

Cypress.Commands.add('typeIntoUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {
  cy.wrap(subject)
    .findShadowInput()
    .type(text, { force: true, ...options });
});

Cypress.Commands.add('clearUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {
  cy.wrap(subject)
    .findShadowInput()
    .clear({ force: true, ...options });
});

Cypress.Commands.add(
  'typeIntoUi5InputWithDelay',
  { prevSubject: 'element' },
  (subject, text, delay = 500, options = {}) => {
    cy.wrap(subject)
      .findShadowInput()
      .wait(delay)
      .type(text, { force: true, ...options });
  }
);

Cypress.Commands.add('typeIntoUi5TextArea', { prevSubject: 'element' }, (subject, text, options = {}) => {
  cy.wrap(subject)
    .shadow()
    .find('textarea')
    .type(text, { force: true, ...options });
});

Cypress.Commands.add('toggleUi5Checkbox', { prevSubject: 'element' }, (subject) => {
  cy.wrap(subject).findShadowInput().click({ force: true });
});

Cypress.Commands.add('toggleUi5Switch', { prevSubject: 'element' }, (subject) => {
  cy.wrap(subject).findShadowInput().click({ force: true });
});

Cypress.Commands.add('clickUi5RadioButton', { prevSubject: 'element' }, (subject) => {
  cy.wrap(subject).findShadowInput().click({ force: true });
});

Cypress.Commands.add('closeUi5PopupWithEsc', () => {
  cy.get('body').type('{esc}', { force: true });
});

Cypress.Commands.add('clickUi5ListItemByText', (text) => {
  cy.contains(text).find('li').click({ force: true });
});

Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
  cy.wrap(subject)
    .contains(text)
    .then(($option) => {
      $option.get(0).focus();
    })
    .click(options);
});

Cypress.Commands.add('clickUi5SelectOption', { prevSubject: 'element' }, (subject, options = {}) => {
  cy.wrap(subject).then(($option) => {
    // @ts-expect-error: cannot set $option to use OptionDomRef
    const domRef = $option.get(0).getDomRef();
    cy.wrap(domRef).click(options);
  });
});

Cypress.Commands.add('clickDropdownMenuItemByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
  cy.wrap(subject).find('[ui5-responsive-popover]').should('have.attr', 'open');
  cy.wrap(subject).then(([$dropdown]) => {
    switch (true) {
      case $dropdown.hasAttribute('ui5-select'):
        cy.wrap($dropdown).contains(text).clickDropdownMenuItem(options);
        break;
      default:
        cy.wrap($dropdown).get(`[text="${text}"]`).clickDropdownMenuItem(options);
        break;
    }
  });
});

Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subject, options = {}) => {
  cy.wrap(subject).then(([$option]) => {
    const domRef = ($option as UI5Element).getDomRef();
    cy.wrap(domRef).focus();
    cy.wrap(domRef).click(options);
  });
});

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

export {};

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<CheckClearOptions>): 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 = {}) => {	248✔
129	cy.wrap(subject)	1,669✔
130	.findShadowInput()
131	.type(text, { force: true, ...options });
132	});	182✔
133		18✔
134	Cypress.Commands.add('clearUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {	248!
135	cy.wrap(subject)
136	.findShadowInput()
137	.clear({ force: true, ...options });
138	});	182✔
139		17✔
140	Cypress.Commands.add(	248✔
141	'typeIntoUi5InputWithDelay',
142	{ prevSubject: 'element' },
143	(subject, text, delay = 500, options = {}) => {	×
144	cy.wrap(subject)	182✔
145	.findShadowInput()
146	.wait(delay)
147	.type(text, { force: true, ...options });	42✔
148	}	21✔
149	);
150
151	Cypress.Commands.add('typeIntoUi5TextArea', { prevSubject: 'element' }, (subject, text, options = {}) => {	248!
152	cy.wrap(subject)
153	.shadow()
154	.find('textarea')
155	.type(text, { force: true, ...options });	182✔
156	});	16✔
157
158	Cypress.Commands.add('toggleUi5Checkbox', { prevSubject: 'element' }, (subject) => {	248✔
159	cy.wrap(subject).findShadowInput().click({ force: true });
160	});
161
162	Cypress.Commands.add('toggleUi5Switch', { prevSubject: 'element' }, (subject) => {	430✔
163	cy.wrap(subject).findShadowInput().click({ force: true });	15✔
164	});
165
166	Cypress.Commands.add('clickUi5RadioButton', { prevSubject: 'element' }, (subject) => {	430✔
167	cy.wrap(subject).findShadowInput().click({ force: true });	28✔
168	});
169
170	Cypress.Commands.add('closeUi5PopupWithEsc', () => {	430✔
171	cy.get('body').type('{esc}', { force: true });	63✔
172	});
173
174	Cypress.Commands.add('clickUi5ListItemByText', (text) => {	430✔
175	cy.contains(text).find('li').click({ force: true });	42✔
176	});
177
178	Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {	430!
UNCOV 179	cy.wrap(subject)	×
180	.contains(text)
181	.then(($option) => {
182	$option.get(0).focus();	182✔
183	})	18✔
184	.click(options);
185	});
186		18✔
187	Cypress.Commands.add('clickUi5SelectOption', { prevSubject: 'element' }, (subject, options = {}) => {	248!
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);	182✔
192	});	18✔
193	});
194		18✔
195	Cypress.Commands.add('clickDropdownMenuItemByText', { prevSubject: 'element' }, (subject, text, options = {}) => {	266!
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'):	182✔
200	cy.wrap($dropdown).contains(text).clickDropdownMenuItem(options);	18✔
201	break;	18✔
202	default:	18✔
203	cy.wrap($dropdown).get(`[text="${text}"]`).clickDropdownMenuItem(options);
204	break;	7✔
205	}	7✔
206	});
207	});	11✔
208		11✔
209	Cypress.Commands.add('clickDropdownMenuItem', { prevSubject: 'element' }, (subject, options = {}) => {	248!
210	cy.wrap(subject).then(([$option]) => {
211	const domRef = ($option as UI5Element).getDomRef();
212	cy.wrap(domRef).focus();
213	cy.wrap(domRef).click(options);	182✔
214	});	27✔
215	});	27✔
216		27✔
217	Cypress.Commands.add('openDropDownByClick', { prevSubject: 'element' }, (subject, options = {}) => {	275✔
218	if (subject.get(0).hasAttribute('ui5-multi-combobox')) {	×
219	// mcb needs a lot of calculation time to make the popover available	11✔
220	cy.wait(500);
221	}	16✔
222	cy.wrap(subject).shadow().find('.inputIcon').click(options);
223	});
224
225	export {};

SAP / ui5-webcomponents-react / 14308600513

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

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