From 6202f13e21da5625563fa23e72651b4c44ac604f Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Fri, 26 Jul 2024 13:49:42 +0200
Subject: [PATCH] fix: add tests for deep-contains function

---
 .changeset/beige-planets-buy.md               |  5 ++++
 .../test/utils-tests/deep-contains.test.js    | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 .changeset/beige-planets-buy.md

diff --git a/.changeset/beige-planets-buy.md b/.changeset/beige-planets-buy.md
new file mode 100644
index 0000000000..9a0202666f
--- /dev/null
+++ b/.changeset/beige-planets-buy.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+improve deep-contains function so it works correctly with slots
diff --git a/packages/ui/components/overlays/test/utils-tests/deep-contains.test.js b/packages/ui/components/overlays/test/utils-tests/deep-contains.test.js
index d6e6307234..bceab880ca 100644
--- a/packages/ui/components/overlays/test/utils-tests/deep-contains.test.js
+++ b/packages/ui/components/overlays/test/utils-tests/deep-contains.test.js
@@ -124,4 +124,31 @@ describe('deepContains()', () => {
     expect(deepContains(element, elementFirstChildShadowChildShadow)).to.be.true;
     expect(deepContains(element, elementFirstChildShadowChildShadowLastChild)).to.be.true;
   });
+
+  it('returns true if the element, which is located in ShadowsRoot, contains a target element, located in the LightDom', async () => {
+    const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
+    mainElement.innerHTML = `      
+      <div slot="content" id="light-el-content">Content</div>
+    `;
+    const shadowRoot = mainElement.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <div id="dialog-wrapper">
+        <div id="dialog-header">
+          Header          
+        </div>  
+        <div id="dialog-content">
+          <slot name="content" id="shadow-el-content"></slot>
+        </div>  
+      </div>      
+    `;
+    const contentElement = /** @type {HTMLElement} */ (
+      mainElement.querySelector('#light-el-content')
+    );
+    const dialogWrapperElement = /** @type {HTMLElement} */ (
+      shadowRoot.querySelector('#dialog-wrapper')
+    );
+    await fixture(html`${mainElement}`);
+
+    expect(deepContains(dialogWrapperElement, contentElement)).to.be.true;
+  });
 });