Merge pull request #22 from ShellyDCMS/slot-by-convention

get shadow slot assigned element by selector suffix convention
ShellyDCMS · Oct 1, 2023 · 824d9fd · 824d9fd
2 parents 4e84496 + cdedcb5
commit 824d9fd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 38 deletions.
diff --git 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/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",

diff --git 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
@@ -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<string> =>
-      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<string>}
-     */
-    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<string | number | string[]> =>
-      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<HTMLSlotElement>)
+                .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.