Merge pull request #99 from ShellyDCMS/fix-shadow-slot-exception

fix exception when trying to get shadow slot parent
ShellyDCMS · May 29, 2024 · 250f984 · 250f984
2 parents 7bdb48a + 77629a2
commit 250f984
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 18 deletions.
diff --git a/src/cypress-helper.cy.ts b/src/cypress-helper.cy.ts
@@ -152,13 +152,11 @@ describe("cypress helper tests", () => {
         });
         fetch("https://example.com/api/endpoint");
       });
-    
+
       it("should not include a specific item", () => {
         then(get.responseBody("apiCall")).shouldNotInclude({
           data: {
-            items: [
-              { id: 4, name: "Durian" }
-            ]
+            items: [{ id: 4, name: "Durian" }]
           }
         });
       });
@@ -390,8 +388,8 @@ describe("cypress helper tests", () => {
     then(get.elementByText("My first paragraph")).shouldExist();
   });
 
-  it("Non existance slot", () => {
-    then(get.elementByTestId("non-existance")).shouldNotExist();
+  it("Non existing slot", () => {
+    then(get.elementByTestId("non-existing-slot")).shouldNotExist();
   });
 
   it("Test non-existing element", () => {

diff --git a/src/cypress-helper.ts b/src/cypress-helper.ts
@@ -87,17 +87,26 @@ export class CypressHelper {
     return checkFunction();
   };
 
-  private getShadowSlotElement = (dataTestID: string, index: number | undefined) => 
-    this.get.nthBySelector(dataTestID, index).then(slot =>
-      cy.wrap(
-        Cypress.$(slot as JQuery<HTMLSlotElement>)
-          .get(0)
-          .assignedNodes()[0].parentElement!
-      )
-    );
+  private getShadowSlotElement = (
+    dataTestID: string,
+    index: number | undefined
+  ) =>
+    this.get.nthBySelector(dataTestID, index).then(slot => {
+      const shadowSlot = Cypress.$(slot as JQuery<HTMLSlotElement>).get(0);
+      const shadowSlotParent = this.getShadowSlotParent(shadowSlot);
+      return cy.wrap(shadowSlotParent ? shadowSlotParent : shadowSlot);
+    });
 
+  private getShadowSlotParent = (shadowSlot: HTMLSlotElement) => {
+    let shadowSlotParent;
+    try {
+      shadowSlotParent = shadowSlot.assignedNodes()[0].parentElement;
+    } catch {}
+    return shadowSlotParent;
+  };
   private shouldHandleShadowDomSlot = (dataTestID: string) =>
-    this.options.handleSlotShadowDOM && dataTestID.endsWith(`-${this.options.shadowSlotSuffix}`)
+    this.options.handleSlotShadowDOM &&
+    dataTestID.endsWith(`-${this.options.shadowSlotSuffix}`);
 
   beforeAndAfter = () => {
     before(() => {
@@ -827,14 +836,14 @@ export class CypressHelper {
     elementByTestId: (dataTestID: string, index?: number) =>
       this.get
         .nthBySelector(dataTestID, index)
-        .should(_ => { })
+        .should(_ => {})
         .then(elements => {
           if (elements.length === 0) {
-            return this.get.nthBySelector(dataTestID, index)
+            return this.get.nthBySelector(dataTestID, index);
           }
           return this.shouldHandleShadowDomSlot(dataTestID)
             ? this.getShadowSlotElement(dataTestID, index)
-            : this.get.nthBySelector(dataTestID, index)
+            : this.get.nthBySelector(dataTestID, index);
         }),
     /**
      * Get the element currently focused in the document.