test(tooltip): add proper visual test

telekom · Nov 8, 2021 · 9cae171 · 9cae171
1 parent e39a1b1
commit 9cae171
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css
@@ -13,10 +13,10 @@
   /*tooltip hide*/
   --max-width: 20rem;
   --transition-delay-hide: 0s;
-  --transition-duration-hide: 0.125s;
+  --transition-duration-hide: var(--scl-motion-duration-immediate);
   --transition-timing-function-hide: ease;
   /*tooltip show*/
-  --transition-duration-show: 0.125s;
+  --transition-duration-show: var(--scl-motion-duration-immediate);
   --transition-timing-function-show: ease;
   --z-index: var(--scl-z-index-70);
 

diff --git a/packages/components/src/components/tooltip/utilities/popover.ts b/packages/components/src/components/tooltip/utilities/popover.ts
@@ -68,8 +68,6 @@ export default class Popover {
   show() {
     this.isVisible = true;
     this.popover.hidden = false;
-    // tslint:disable-next-line
-    this.popover.clientWidth; // force reflow
     requestAnimationFrame(() =>
       this.popover.classList.add(this.options.visibleClass)
     );

diff --git a/...s/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-opendefault-1-snap.png b/...s/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-opendefault-1-snap.png
diff --git a/...ests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-standard-1-snap.png b/...ests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-standard-1-snap.png
diff --git a/packages/visual-tests/src/tooltip.visual.spec.js b/packages/visual-tests/src/tooltip.visual.spec.js
@@ -1,10 +1,27 @@
-describe('Tooltip', () => {
-  test.each([['opendefault']])('%p', async (variant) => {
+describe.only('Tooltip', () => {
+  test.each([['standard']])('%p', async (variant) => {
     await global.page.goto(
       `http://host.docker.internal:3123/iframe.html?id=beta-components-tooltip--${variant}&viewMode=story`
     );
     await page.waitForSelector('html.hydrated');
     const previewHtml = await page.$('body');
+    await page.evaluate(() => {
+      const transitions = [
+        '--scl-motion-duration-immediate',
+        '--scl-motion-duration-fast',
+        '--scl-motion-duration-slower',
+        '--scl-motion-duration-deliberate',
+      ];
+
+      transitions.forEach((transitionSpeed) => {
+        document.body.style.setProperty(transitionSpeed, '0s');
+      });
+    });
+
+    const button = await page.evaluateHandle(
+      'document.querySelector("#root > div > scale-tooltip > scale-button")'
+    );
+    await button.hover();
     expect(await previewHtml.screenshot()).toMatchImageSnapshot();
   });
 });