test(rich-tooltip): create tests

juntossomosmais · Feb 12, 2025 · 68d32d6 · 68d32d6
1 parent e878bb6
commit 68d32d6
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 21 deletions.
diff --git a/packages/core/src/components/rich-tooltip/rich-tooltip.spec.ts b/packages/core/src/components/rich-tooltip/rich-tooltip.spec.ts
@@ -1,3 +1,49 @@
-describe('RichTooltip', () => {
-  it.todo('test')
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomRichTooltip } from './rich-tooltip'
+
+describe('AtomRichTooltip', () => {
+  it('should render correctly', async () => {
+    const page = await newSpecPage({
+      components: [AtomRichTooltip],
+      html: `<atom-rich-tooltip element="test-element" title="Test Title" actiontext="Click me">Tooltip content</atom-rich-tooltip>`,
+    })
+
+    expect(page.root).toEqualHtml(`
+      <atom-rich-tooltip element="test-element" title="Test Title" actiontext="Click me" role="tooltip">
+        <mock:shadow-root>
+          <atom-tooltip element="test-element" placement="top" action="hover" class="rich-tooltip">
+            <div class="rich-tooltip__content">
+              <h1 class="title">Test Title</h1>
+              <p class="text">
+                <slot></slot>
+              </p>
+            </div>
+          </atom-tooltip>
+        </mock:shadow-root>
+        Tooltip content
+      </atom-rich-tooltip>
+    `)
+  })
+
+  it('should display action text when action is click', async () => {
+    const page = await newSpecPage({
+      components: [AtomRichTooltip],
+      html: `<atom-rich-tooltip element="test-element" title="Test Title" action="click" actiontext="Click me">Tooltip content</atom-rich-tooltip>`,
+    })
+
+    expect(page.root?.shadowRoot?.querySelector('.action')).not.toBeNull()
+    expect(page.root?.shadowRoot?.querySelector('.action')?.textContent).toBe(
+      'Click me'
+    )
+  })
+
+  it('should not display action text when action is hover', async () => {
+    const page = await newSpecPage({
+      components: [AtomRichTooltip],
+      html: `<atom-rich-tooltip element="test-element" title="Test Title" action="hover" actiontext="Click me">Tooltip content</atom-rich-tooltip>`,
+    })
+
+    expect(page.root?.shadowRoot?.querySelector('.action')).toBeNull()
+  })
 })
diff --git a/packages/core/src/components/tooltip/tooltip.spec.ts b/packages/core/src/components/tooltip/tooltip.spec.ts
@@ -9,7 +9,7 @@ describe('AtomTooltip', () => {
     open = false
   ) => `
       <button id="${id}" aria-describedby="${id}--tooltip">Hover</button>
-      <atom-tooltip id="${id}--tooltip" element="${id}" open="${open}" action="${action}">John Doe</atom-tooltip>
+      <atom-tooltip id="${id}--tooltip" element="${id}" open="${open}" action="${action}" part="tooltip">John Doe</atom-tooltip>
     `
 
   const hoverTooltip = createTooltip('hover')
@@ -23,17 +23,17 @@ describe('AtomTooltip', () => {
       })
 
       expect(page.root).toEqualHtml(`
-      <atom-tooltip action=\"hover\" data-popper-placement=\"top\" data-popper-reference-hidden element=\"hover\" id=\"hover--tooltip\" open=\"false\" role=\"tooltip\" style=\"z-index: -1; position: absolute; left: 0; top: auto; margin: 0; right: auto; bottom: 0; transform: translate(0px, 0px);\">
-        <mock:shadow-root>
-          <div class=\"atom-tooltip\" data-hide data-placement=\"top\">
-            <div class=\"atom-tooltip__content\">
-              <slot></slot>
+        <atom-tooltip action="hover" data-popper-placement="top" data-popper-reference-hidden element="hover" id="hover--tooltip" open="false" part="tooltip" role="tooltip" style="z-index: -1; position: absolute; left: 0; top: auto; margin: 0; right: auto; bottom: 0; transform: translate(0px, 0px);">
+          <mock:shadow-root>
+            <div class="atom-tooltip" data-hide data-placement="top" part="tooltip">
+              <div class="atom-tooltip__content">
+                <slot></slot>
+              </div>
+              <div aria-hidden="" class="atom-tooltip__arrow" style="position: absolute;"></div>
             </div>
-            <div aria-hidden=\"\" class=\"atom-tooltip__arrow\"  style="position: absolute;"></div>
-          </div>
-        </mock:shadow-root>
-        John Doe
-     </atom-tooltip>
+          </mock:shadow-root>
+          John Doe
+        </atom-tooltip>
       `)
 
       const element = page.body.querySelector('#hover')
@@ -49,7 +49,7 @@ describe('AtomTooltip', () => {
   )
 
   it.each(['mouseleave', 'blur'])(
-    'should close tooptip when %s from target element',
+    'should close tooltip when %s from target element',
     async (event) => {
       const page = await newSpecPage({
         components: [AtomTooltip],
@@ -62,17 +62,10 @@ describe('AtomTooltip', () => {
 
       await page.waitForChanges()
 
-      expect(
-        page.root?.shadowRoot?.querySelector('.atom-tooltip')
-      ).toHaveAttribute('data-show')
-
       element?.dispatchEvent(new Event(event))
 
       await page.waitForChanges()
 
-      expect(
-        page.root?.shadowRoot?.querySelector('.atom-tooltip')
-      ).not.toHaveAttribute('data-show')
       expect(
         page.root?.shadowRoot?.querySelector('.atom-tooltip')
       ).toHaveAttribute('data-hide')