fix(tests): fixed tests for post-tooltip component

swisspost · Jan 22, 2025 · fbd30e4 · fbd30e4
1 parent 83bdc91
commit fbd30e4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -106,5 +106,7 @@ <h2>Post Tag</h2>
 <div class="my-24">
   <h2>Post Tooltip</h2>
   <button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
-  <post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>
+  <post-tooltip-trigger for="tooltip-one">
+    <button class="btn btn-secondary btn-large">Button</button>
+  </post-tooltip-trigger>
 </div>
diff --git a/packages/components/cypress/e2e/tooltip.cy.ts b/packages/components/cypress/e2e/tooltip.cy.ts
@@ -38,8 +38,8 @@ describe('tooltips', { baseUrl: null, includeShadowDom: true }, () => {
 
     it('should patch aria after button has been inserted', () => {
       cy.document().then(doc => {
-        const btn = doc.createElement('span');
-        btn.setAttribute('data-tooltip-target', 'tooltip-one');
+        const btn = doc.createElement('post-tooltip-trigger');
+        btn.setAttribute('for', 'tooltip-one');
         btn.innerHTML = 'added after the fact';
         btn.id = 'added-later';
         doc.body.appendChild(btn);

diff --git a/packages/components/cypress/fixtures/post-tooltip.test.html b/packages/components/cypress/fixtures/post-tooltip.test.html
@@ -7,18 +7,18 @@
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>
-    <button aria-describedby="existing-value" data-tooltip-target="tooltip-one" id="target1">
-      toggle
-    </button>
-    <button data-tooltip-target="tooltip-one" id="target2">
-      toggle 2 <span>child element</span>
-    </button>
-    <button data-tooltip-target="tooltip-one" id="target-child-element">
-      toggle with <span>child element</span>
-    </button>
-    <post-tooltip id="tooltip-one">
-      <p>This is a test</p>
-    </post-tooltip>
-    <span id="non-focusable-span" data-tooltip-target="tooltip-one">non-focusable</span>
+    <post-tooltip-trigger for="tooltip-one">
+      <button aria-describedby="existing-value" id="target1">toggle</button>
+    </post-tooltip-trigger>
+    <post-tooltip-trigger for="tooltip-one">
+      <button id="target2">toggle 2 <span>child element</span></button>
+    </post-tooltip-trigger>
+    <post-tooltip-trigger for="tooltip-one">
+      <button id="target-child-element">toggle with <span>child element</span></button>
+    </post-tooltip-trigger>
+    <post-tooltip id="tooltip-one">This is a test</post-tooltip>
+    <post-tooltip-trigger for="tooltip-one"
+      ><span id="non-focusable-span">non-focusable</span></post-tooltip-trigger
+    >
   </body>
 </html>