From 5eba753bb2d2d05a62c541c91a0ef27402937285 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Wed, 31 Jul 2024 19:00:22 +0200
Subject: [PATCH] chore: added failing test

---
 .../components/overlays/src/utils/deep-contains.js |  4 ++--
 .../test/utils-tests/deep-contains.test.js         | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/ui/components/overlays/src/utils/deep-contains.js b/packages/ui/components/overlays/src/utils/deep-contains.js
index ce5abf2f3..47e7c36df 100644
--- a/packages/ui/components/overlays/src/utils/deep-contains.js
+++ b/packages/ui/components/overlays/src/utils/deep-contains.js
@@ -57,7 +57,7 @@ export function deepContains(el, targetEl, cache = {}) {
   }
 
   /**
-   * @description A `Typescript` `type guard` for `HTMLSlotElement`
+   * A `Typescript` `type guard` for `HTMLSlotElement`
    * @param {HTMLElement|HTMLSlotElement} htmlElement
    * @returns {htmlElement is HTMLSlotElement}
    */
@@ -66,7 +66,7 @@ export function deepContains(el, targetEl, cache = {}) {
   }
 
   /**
-   * @description Returns a slot projection or it returns `null` if `htmlElement` is not an `HTMLSlotElement`
+   * Returns a slot projection or it returns `null` if `htmlElement` is not an `HTMLSlotElement`
    * @example
    * Let's say this is a custom element declared as follows:
    * ```
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 9dd3c44b5..3a6695183 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
@@ -129,7 +129,10 @@ describe('deepContains()', () => {
     const mainElement = /** @type {HTMLElement} */ (await fixture('<div id="main"></div>'));
     mainElement.innerHTML = `      
       <div slot="content" id="light-el-content">
-        <input type="text" id="light-el-input"></input>
+        <input type="text" id="light-el-input-1"></input>
+      </div>
+      <div slot="content" id="light-el-content">
+        <input type="text" id="light-el-input-2"></input>
       </div>
     `;
     const shadowRoot = mainElement.attachShadow({ mode: 'open' });
@@ -143,14 +146,16 @@ describe('deepContains()', () => {
         </div>  
       </div>      
     `;
-    const inputElement = /** @type {HTMLElement} */ (mainElement.querySelector('#light-el-input'));
+    const inputElement = /** @type {HTMLElement} */ (
+      mainElement.querySelector('#light-el-input-2')
+    );
     const dialogWrapperElement = /** @type {HTMLElement} */ (
       shadowRoot.querySelector('#dialog-wrapper')
     );
     expect(deepContains(dialogWrapperElement, inputElement)).to.be.true;
   });
 
-  it(`returns true if the element, which is located in ShadowsRoot, contains a target element, located in the ShadowRoot element of the LightDom element  `, async () => {
+  it(`returns true if the element, which is located in ShadowRoot, contains a target element, located in the ShadowRoot element of the LightDom element  `, async () => {
     /**
      * The DOM for the `main` element looks as follows:
      *
@@ -180,6 +185,9 @@ describe('deepContains()', () => {
       <div slot="content" id="light-el-content">
         <div id="content-wrapper"></div>
       </div>
+      <div slot="content" id="light-el-content">
+        <div id="content-wrapper"></div>
+      </div>
     `;
     const contentWrapper = /** @type {HTMLElement} */ (
       mainElement.querySelector('#content-wrapper')