test(snapshot): add basic tooltip snapshots

dysfunc · dysfunc · commit 8fb618890a51 · 2022-08-30T19:59:20.000-07:00
diff --git a/src/action-tooltip.snap.js b/src/action-tooltip.snap.js
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components: Tooltip should render the component 1`] = `
+<body>
+  <div>
+    <div
+      class="tooltip animation-null top"
+      style="min-width: 200px; max-width: 200px; text-align: left;"
+    >
+      Hello World!
+      
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/action-tooltip.svelte b/src/action-tooltip.svelte
@@ -103,6 +103,7 @@
     box-shadow: var(--tooltip-box-shadow);
     border-radius: var(--tooltip-border-radius);
     color: var(--tooltip-color);
+    opacity: 0;
     font-family: var(--tooltip-font-family);
     font-size: var(--tooltip-font-size);
     font-style: normal;
@@ -111,11 +112,14 @@
     padding: var(--tooltip-padding);
     position: absolute;
     text-align: left;
+    visibility: hidden;
     white-space: nowrap;
     z-index: var(--tooltip-z-index);
   }
 
   .tooltip.show {
+    opacity: 1;
+    visibility: visible;
     white-space: normal;
   }
 
diff --git a/src/action-tooltip.test.js b/src/action-tooltip.test.js
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/svelte';
+import Tooltip from './action-tooltip.svelte';
+
+describe('Components: Tooltip', () => {
+  let TestHarness;
+
+  beforeEach(() => {
+    TestHarness = () =>
+      render(Tooltip, {
+        content: 'Hello World!'
+      });
+  });
+
+  it('should render the component', () => {
+    const { container } = TestHarness();
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/helpers.js b/src/helpers.js
@@ -15,7 +15,7 @@ export const getMinWidth = (element, maxWidth) => {
   const elementPadding = elementPaddingLeft + elementPaddingRight;
   const contentWidth = elementWidth - elementPadding;
 
-  return Math.round(Math.min(maxWidth, contentWidth));
+  return Math.round(Math.min(maxWidth, contentWidth || maxWidth));
 };
 
 export const isInViewport = (element) => {
diff --git a/src/tooltip.snap.js b/src/tooltip.snap.js
@@ -8,8 +8,8 @@ exports[`Components: Tooltip should render the component 1`] = `
     >
        
       <div
-        class="tooltip animation- top"
-        style="min-width: NaNpx; max-width: 200px; text-align: left;"
+        class="tooltip animation-null top"
+        style="min-width: 200px; max-width: 200px; text-align: left;"
       >
         Hello World!
         
diff --git a/src/tooltip.test.js b/src/tooltip.test.js
@@ -7,15 +7,7 @@ describe('Components: Tooltip', () => {
   beforeEach(() => {
     TestHarness = () =>
       render(Tooltip, {
-        content: 'Hello World!',
-        align: 'left',
-        position: 'top',
-        maxWidth: 200,
-        style: null,
-        theme: '',
-        animation: '',
-        arrow: true,
-        autoPosition: false
+        content: 'Hello World!'
       });
   });
 

Original file line number	Diff line number	Diff line change
@@ -8,8 +8,8 @@ exports[`Components: Tooltip should render the component 1`] = `
`8`	`8`	`>`
`9`	`9`
`10`	`10`	`<div`
`11`		`- class="tooltip animation- top"`
`12`		`- style="min-width: NaNpx; max-width: 200px; text-align: left;"`
	`11`	`+ class="tooltip animation-null top"`
	`12`	`+ style="min-width: 200px; max-width: 200px; text-align: left;"`
`13`	`13`	`>`
`14`	`14`	`Hello World!`
`15`	`15`