From 19efa6b019a115021e9ea4d679e2e205598414cc Mon Sep 17 00:00:00 2001 From: shelly_goldblit Date: Sun, 1 Oct 2023 06:36:37 +0300 Subject: [PATCH 1/2] get shadow slot assigned element by selector suffix convention --- documents/classes/CypressHelper.md | 23 ++++++++----------- src/cypress-helper-spec.cy.ts | 4 ---- src/cypress-helper.ts | 36 ++++++++++++++---------------- 3 files changed, 26 insertions(+), 37 deletions(-) diff --git a/documents/classes/CypressHelper.md b/documents/classes/CypressHelper.md index 47f66b7..6737983 100644 --- a/documents/classes/CypressHelper.md +++ b/documents/classes/CypressHelper.md @@ -15,6 +15,7 @@ CypressHelper exposes the following public properties: ### Properties - [defaultDataAttribute](CypressHelper.md#defaultdataattribute) +- [defaultShadowSlotSuffix](CypressHelper.md#defaultshadowslotsuffix) - [get](CypressHelper.md#get) - [given](CypressHelper.md#given) - [when](CypressHelper.md#when) @@ -27,13 +28,14 @@ CypressHelper exposes the following public properties: ### constructor -• **new CypressHelper**(`defaultDataAttribute?`) +• **new CypressHelper**(`defaultDataAttribute?`, `defaultShadowSlotSuffix?`) #### Parameters | Name | Type | Default value | | :------ | :------ | :------ | | `defaultDataAttribute?` | `string` | `"data-cy"` | +| `defaultShadowSlotSuffix?` | `string` | `"slot"` | ## Properties @@ -43,6 +45,12 @@ CypressHelper exposes the following public properties: ___ +### defaultShadowSlotSuffix + +• `Private` `Readonly` **defaultShadowSlotSuffix**: `string` = `"slot"` + +___ + ### get • **get**: `Object` @@ -69,7 +77,6 @@ The get property will hold methods which will give our tests access to the “ou | `requestHeader` | (`alias`: `string`) => `Chainable`<{ `[key: string]`: `string` \| `string`[]; }\> | | `requestQueryParams` | (`alias`: `string`) => `Chainable`<{ `[k: string]`: `string`; }\> | | `requestUrl` | (`alias`: `string`) => `Chainable`<`string`\> | -| `slotText` | (`selector`: `string`, `index?`: `number`) => `Chainable`<``null`` \| `JQuery`<`HTMLSlotElement`\>\> \| `Chainable`<`string` \| `JQuery`<`HTMLSlotElement`\>\> | | `spy` | (`name`: `string`) => `Chainable`<`JQuery`<`HTMLElement`\>\> | | `spyFromFunction` | (`func`: `Function`) => `Chainable`<`JQuery`<`HTMLElement`\>\> | | `stub` | (`name`: `string`) => `Chainable`<`JQuery`<`HTMLElement`\>\> | @@ -238,18 +245,6 @@ Get intercepted request's url ----- -**slotText**: (`selector`: `string`, `index?`: `number`) => `Chainable`<``null`` \| `JQuery`<`HTMLSlotElement`\>\> \| `Chainable`<`string` \| `JQuery`<`HTMLSlotElement`\>\> - -To be used with shadow DOM only - -**`Example`** - -```ts -expect(helper.get.slotText("main-cta-button", 2).should("include", "CTA")) -``` - ------ - **spy**: (`name`: `string`) => `Chainable`<`JQuery`<`HTMLElement`\>\> Get spy by alias diff --git a/src/cypress-helper-spec.cy.ts b/src/cypress-helper-spec.cy.ts index d26aa50..a92b3ed 100644 --- a/src/cypress-helper-spec.cy.ts +++ b/src/cypress-helper-spec.cy.ts @@ -221,10 +221,6 @@ describe("cypress helper tests", () => { get.elementsText("header").should("eq", "My First Heading"); }); - it.skip("should get slot's text", () => { - get.slotText("with-slot").should("eq", "Text in Slot"); - }); - it("should get env variable", () => { expect(get.env("env1")).to.eq("value1"); }); diff --git a/src/cypress-helper.ts b/src/cypress-helper.ts index e9db1f8..377c33d 100644 --- a/src/cypress-helper.ts +++ b/src/cypress-helper.ts @@ -20,8 +20,12 @@ export class CypressHelper { /** * * @param [defaultDataAttribute = "data-cy"] + * @param [defaultShadowSlotSuffix = "slot] */ - constructor(private readonly defaultDataAttribute: string = "data-cy") {} + constructor( + private readonly defaultDataAttribute: string = "data-cy", + private readonly defaultShadowSlotSuffix: string = "slot" + ) {} beforeAndAfter = () => { before(() => { @@ -441,22 +445,8 @@ export class CypressHelper { selector: string, index: number = 0 ): Cypress.Chainable => - this.get.nthBySelector(selector, index).invoke("text"), - /** - * To be used with shadow DOM only - * @example - * ```ts - * expect(helper.get.slotText("main-cta-button", 2).should("include", "CTA")) - * ``` - * @param selector - * @param [index = 0] - * @returns {Cypress.Chainable} - */ - slotText: (selector: string, index: number = 0) => - this.get - .nthBySelector(selector, index) - .find("slot") - .then(slot => slot.get(0).assignedNodes()[0].textContent), + this.get.elementByTestId(selector, index).invoke("text"), + /** * Get value of input element * @example @@ -471,7 +461,7 @@ export class CypressHelper { selector: string, index: number = 0 ): Cypress.Chainable => - this.get.nthBySelector(selector, index).invoke("val"), + this.get.elementByTestId(selector, index).invoke("val"), /** * Get A DOM element at a specific index from elements. * @example @@ -484,7 +474,15 @@ export class CypressHelper { * @param [index = 0] */ elementByTestId: (selector: string, index: number = 0) => - this.get.nthBySelector(selector, index), + selector.endsWith(`-${this.defaultShadowSlotSuffix}`) + ? this.get.nthBySelector(selector, index).then(slot => + cy.wrap( + Cypress.$(slot as JQuery) + .get(0) + .assignedNodes()[0].parentElement! + ) + ) + : this.get.nthBySelector(selector, index), /** * Get the DOM element containing the text. * DOM elements can contain more than the desired text and still match. From cdedcb5276c32b19e24a2069d540c243c10d5cff Mon Sep 17 00:00:00 2001 From: shelly_goldblit Date: Sun, 1 Oct 2023 06:38:46 +0300 Subject: [PATCH 2/2] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bba8858..571b5f8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@shellygo/cypress-test-utils", "description": "Test Automation Utilities", - "version": "1.0.34", + "version": "1.0.35", "author": "Shelly Goldblit", "private": false, "license": "MIT",