11232772735

Committed 08 Oct 2024 09:39AM CUT coverage: 87.157% (-0.04%) from 87.197%

Build # 11232772735

Build Type

Pull #6463

github

Committed by

web-flow

Commit Message

Merge 6a12065a4 into 6de7aa711

Pull Request Pull Request #6463: feat(cypress-commands): add `findUi5TabOpenPopoverButtonByText` query

Run Details

2853 of 3817 branches covered (74.74%)

16 of 21 new or added lines in 1 file covered. (76.19%)

5056 of 5801 relevant lines covered (87.16%)

92360.52 hits per line

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

80.36

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

interface FindToolbarButtonByTextOptions {
  queryShadowButton?: boolean;
}

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    interface Chainable {
      // TabContainer
      /**
       * Returns the tab of the `ui5-tabcontainer` by its text.
       *
       * __Note:__ Has to be chained to a `ui5-tabcontainer`.
       * __Note:__ This will not work for sub-tabs.
       *
       * @example cy.get('[ui5-tab-container]').findUi5TabByText('Tab 1');
       * @param {string} text The text of the tab that should be queried.
       */
      findUi5TabByText(text: string): Chainable<Element>;

      /**
       * Returns the open-popover button for sub-tabs by its text.
       *
       * __Note:__ Has to be chained to a `ui5-tabcontainer`.
       * __Note:__ The tab only renders a button fur sub-tabs if the tab itself has content, otherwise the whole tab is responsible for opening the popover.
       *
       * @example cy.get('[ui5-tab-container]').findUi5TabOpenPopoverButtonByText('Tab 1.1');
       * @param {string} text The text of the sub-tab that should be queried.
       */
      findUi5TabOpenPopoverButtonByText(text: string): Chainable<Element>;

      /**
       * Returns the element that represents the `ui5-toolbar-button`.
       * When `options.queryShadowButton` is `true`, the internal `button` element is returned, otherwise the `ui5-button` element.
       *
       * __Note:__ This query can either be chained to a `ui5-toolbar` or not be chained at all.
       *
       * __Note:__ The `text` next needs to be unique in the respective scope.
       *
       * @example cy.findToolbarButtonByText("Button Text")
       * @example cy.get('[ui5-toolbar]').findToolbarButtonByText("Button Text")
       *
       * @param {string} text - The text of the button to search for. This text should be unique within the toolbar to ensure a single button is returned.
       * @param {FindToolbarButtonByTextOptions} [options] - An optional object containing configuration options for the query.
       * @param {boolean} [options.queryShadowButton=false] - If set to `true`, the internal `button` element will be returned instead of the `ui5-button` element.
       */
      findToolbarButtonByText(text: string, options?: FindToolbarButtonByTextOptions): Chainable<Element>;
      // private
      /**
       * Returns the internal input element inside the shadow-root.
       *
       * @private
       * @example cy.get('[ui5-checkbox]').findShadowInput();
       */
      findShadowInput(): Chainable<Element>;
    }
  }
}

Cypress.Commands.addQuery('findToolbarButtonByText', function (text, options) {
  return (subject) => {
    if (subject !== undefined && !subject?.[0]?.hasAttribute('ui5-toolbar')) {
      const err = `findToolbarButtonByText() needs to be chained to a \`ui5-toolbar\`, or not be chained at all.`;
      throw new TypeError(err);
    }
    const container = subject ? [subject[0]] : document.querySelectorAll('[ui5-toolbar]');

    const toolbarBtns: HTMLElement[] = [];
    container.forEach((el) => {
      if (el) {
        const toolbarDom = el.getDomRef();
        const buttons = Cypress.$(toolbarDom).find('[ui5-button]');
        const matchingButtons = buttons.filter(function () {
          return Cypress.$(this).text() === text;
        });

        toolbarBtns.push(...matchingButtons);
      }
    });

    if (toolbarBtns.length > 1) {
      const err = `Multiple ui5-toolbar-button elements with the same text ("${text}") were found.`;
      throw new TypeError(err);
    }

    let toolbarBtn = toolbarBtns[0];
    if (options?.queryShadowButton) {
      toolbarBtn = toolbarBtn.shadowRoot!.querySelector('button')!;
    }

    return Cypress.$(toolbarBtn);
  };
});

Cypress.Commands.addQuery('findShadowInput', function () {
  const getShadow = cy.now('shadow');
  const getInput = cy.now('find', 'input');
  return (subject) => {
    if (!subject?.[0].tagName.startsWith('UI5')) {
      const err = `findShadowInput() needs to be chained to a ui5-webcomponent`;
      throw new TypeError(err);
    }
    // @ts-expect-error: recommended approach per cypress docs
    const shadow = getShadow(subject);
    // @ts-expect-error: recommended approach per cypress docs
    return getInput(shadow);
  };
});

Cypress.Commands.addQuery('findUi5TabByText', function (text) {
  const getTabList = cy.now('find', '[role="tablist"]');
  const getText = cy.now('contains', text);
  const getParent = cy.now('parents', '[role="tab"]');

  return (subject) => {
    if (!subject?.[0]?.hasAttribute('ui5-tabcontainer')) {
      const err = `findUi5TabByText() needs to be chained to a \`ui5-tabcontainer\``;
      throw new TypeError(err);
    }
    // @ts-expect-error: recommended approach per cypress docs
    const tabList = getTabList(subject);
    // @ts-expect-error: recommended approach per cypress docs
    const text = getText(tabList);
    // @ts-expect-error: recommended approach per cypress docs
    const parent = getParent(text);

    return parent;
  };
});

Cypress.Commands.addQuery('findUi5TabOpenPopoverButtonByText', function (text) {
  const getTabList = cy.now('find', '[role="tablist"]');
  const getText = cy.now('contains', text);
  const getParent = cy.now('parents', '[role="tab"]');
  const getButton = cy.now('find', '[ui5-button]');

  return (subject) => {
    if (!subject?.[0]?.hasAttribute('ui5-tabcontainer')) {
      const err = `findUi5TabOpenPopoverButtonByText() needs to be chained to a \`ui5-tabcontainer\``;
      throw new TypeError(err);
    }
    // @ts-expect-error: recommended approach per cypress docs
    const tabList = getTabList(subject);
    // @ts-expect-error: recommended approach per cypress docs
    const text = getText(tabList);
    // @ts-expect-error: recommended approach per cypress docs
    const parent = getParent(text);
    // @ts-expect-error: recommended approach per cypress docs
    const button = getButton(parent);

    return button;
  };
});

export {};

1	interface FindToolbarButtonByTextOptions {
2	queryShadowButton?: boolean;
3	}
4
5	declare global {
6	// eslint-disable-next-line @typescript-eslint/no-namespace
7	namespace Cypress {
8	interface Chainable {
9	// TabContainer
10	/**
11	* Returns the tab of the `ui5-tabcontainer` by its text.
12	*
13	* __Note:__ Has to be chained to a `ui5-tabcontainer`.
14	* __Note:__ This will not work for sub-tabs.
15	*
16	* @example cy.get('[ui5-tab-container]').findUi5TabByText('Tab 1');
17	* @param {string} text The text of the tab that should be queried.
18	*/
19	findUi5TabByText(text: string): Chainable<Element>;
20
21	/**
22	* Returns the open-popover button for sub-tabs by its text.
23	*
24	* __Note:__ Has to be chained to a `ui5-tabcontainer`.
25	* __Note:__ The tab only renders a button fur sub-tabs if the tab itself has content, otherwise the whole tab is responsible for opening the popover.
26	*
27	* @example cy.get('[ui5-tab-container]').findUi5TabOpenPopoverButtonByText('Tab 1.1');
28	* @param {string} text The text of the sub-tab that should be queried.
29	*/
30	findUi5TabOpenPopoverButtonByText(text: string): Chainable<Element>;
31
32	/**
33	* Returns the element that represents the `ui5-toolbar-button`.
34	* When `options.queryShadowButton` is `true`, the internal `button` element is returned, otherwise the `ui5-button` element.
35	*
36	* __Note:__ This query can either be chained to a `ui5-toolbar` or not be chained at all.
37	*
38	* __Note:__ The `text` next needs to be unique in the respective scope.
39	*
40	* @example cy.findToolbarButtonByText("Button Text")
41	* @example cy.get('[ui5-toolbar]').findToolbarButtonByText("Button Text")
42	*
43	* @param {string} text - The text of the button to search for. This text should be unique within the toolbar to ensure a single button is returned.
44	* @param {FindToolbarButtonByTextOptions} [options] - An optional object containing configuration options for the query.
45	* @param {boolean} [options.queryShadowButton=false] - If set to `true`, the internal `button` element will be returned instead of the `ui5-button` element.
46	*/
47	findToolbarButtonByText(text: string, options?: FindToolbarButtonByTextOptions): Chainable<Element>;
48	// private
49	/**
50	* Returns the internal input element inside the shadow-root.
51	*
52	* @private
53	* @example cy.get('[ui5-checkbox]').findShadowInput();
54	*/
55	findShadowInput(): Chainable<Element>;
56	}
57	}
58	}
59
60	Cypress.Commands.addQuery('findToolbarButtonByText', function (text, options) {	401✔
61	return (subject) => {	8✔
62	if (subject !== undefined && !subject?.[0]?.hasAttribute('ui5-toolbar')) {	10!
NEW 63	const err = `findToolbarButtonByText() needs to be chained to a \`ui5-toolbar\`, or not be chained at all.`;	×
NEW 64	throw new TypeError(err);	×
65	}
66	const container = subject ? [subject[0]] : document.querySelectorAll('[ui5-toolbar]');	10!
67
68	const toolbarBtns: HTMLElement[] = [];	10✔
69	container.forEach((el) => {	10✔
70	if (el) {	24✔
71	const toolbarDom = el.getDomRef();	24✔
72	const buttons = Cypress.$(toolbarDom).find('[ui5-button]');	24✔
73	const matchingButtons = buttons.filter(function () {	24✔
74	return Cypress.$(this).text() === text;	56✔
75	});
76
77	toolbarBtns.push(...matchingButtons);	24✔
78	}
79	});
80
81	if (toolbarBtns.length > 1) {	10!
NEW 82	const err = `Multiple ui5-toolbar-button elements with the same text ("${text}") were found.`;	×
NEW 83	throw new TypeError(err);	×
84	}
85
86	let toolbarBtn = toolbarBtns[0];	10✔
87	if (options?.queryShadowButton) {	10!
NEW 88	toolbarBtn = toolbarBtn.shadowRoot!.querySelector('button')!;	×
89	}
90
91	return Cypress.$(toolbarBtn);	10✔
92	};
93	});
94
95	Cypress.Commands.addQuery('findShadowInput', function () {	401✔
96	const getShadow = cy.now('shadow');	1,905✔
97	const getInput = cy.now('find', 'input');	1,905✔
98	return (subject) => {	1,905✔
99	if (!subject?.[0].tagName.startsWith('UI5')) {	5,222!
100	const err = `findShadowInput() needs to be chained to a ui5-webcomponent`;	×
101	throw new TypeError(err);	×
102	}
103	// @ts-expect-error: recommended approach per cypress docs
104	const shadow = getShadow(subject);	5,222✔
105	// @ts-expect-error: recommended approach per cypress docs
106	return getInput(shadow);	5,222✔
107	};
108	});
109
110	Cypress.Commands.addQuery('findUi5TabByText', function (text) {	401✔
111	const getTabList = cy.now('find', '[role="tablist"]');	262✔
112	const getText = cy.now('contains', text);	262✔
113	const getParent = cy.now('parents', '[role="tab"]');	262✔
114
115	return (subject) => {	262✔
116	if (!subject?.[0]?.hasAttribute('ui5-tabcontainer')) {	999!
117	const err = `findUi5TabByText() needs to be chained to a \`ui5-tabcontainer\``;	×
118	throw new TypeError(err);	×
119	}
120	// @ts-expect-error: recommended approach per cypress docs
121	const tabList = getTabList(subject);	999✔
122	// @ts-expect-error: recommended approach per cypress docs
123	const text = getText(tabList);	999✔
124	// @ts-expect-error: recommended approach per cypress docs
125	const parent = getParent(text);	999✔
126
127	return parent;	999✔
128	};
129	});
130
131	Cypress.Commands.addQuery('findUi5TabOpenPopoverButtonByText', function (text) {	401✔
132	const getTabList = cy.now('find', '[role="tablist"]');	69✔
133	const getText = cy.now('contains', text);	69✔
134	const getParent = cy.now('parents', '[role="tab"]');	69✔
135	const getButton = cy.now('find', '[ui5-button]');	69✔
136
137	return (subject) => {	69✔
138	if (!subject?.[0]?.hasAttribute('ui5-tabcontainer')) {	302!
139	const err = `findUi5TabOpenPopoverButtonByText() needs to be chained to a \`ui5-tabcontainer\``;	×
140	throw new TypeError(err);	×
141	}
142	// @ts-expect-error: recommended approach per cypress docs
143	const tabList = getTabList(subject);	302✔
144	// @ts-expect-error: recommended approach per cypress docs
145	const text = getText(tabList);	302✔
146	// @ts-expect-error: recommended approach per cypress docs
147	const parent = getParent(text);	302✔
148	// @ts-expect-error: recommended approach per cypress docs
149	const button = getButton(parent);	302✔
150
151	return button;	302✔
152	};
153	});
154
155	export {};

SAP / ui5-webcomponents-react / 11232772735

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