From 9cae1710cfbaace99c57958fdb810862ed6b6824 Mon Sep 17 00:00:00 2001 From: Daniel Beck Date: Mon, 8 Nov 2021 11:31:04 +0100 Subject: [PATCH] test(tooltip): add proper visual test --- .../src/components/tooltip/tooltip.css | 4 ++-- .../components/tooltip/utilities/popover.ts | 2 -- ...ual-spec-js-tooltip-opendefault-1-snap.png | Bin 3663 -> 0 bytes ...visual-spec-js-tooltip-standard-1-snap.png | Bin 0 -> 3738 bytes .../visual-tests/src/tooltip.visual.spec.js | 21 ++++++++++++++++-- 5 files changed, 21 insertions(+), 6 deletions(-) delete mode 100644 packages/visual-tests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-opendefault-1-snap.png create mode 100644 packages/visual-tests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-standard-1-snap.png diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css index 781efe5875..c6d43f0b87 100644 --- 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 index fa6ccba884..e918bc0a64 100644 --- 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/packages/visual-tests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-opendefault-1-snap.png b/packages/visual-tests/src/__image_snapshots__/tooltip-visual-spec-js-tooltip-opendefault-1-snap.png deleted file mode 100644 index de76540feb21f90812baa69409a5dba5f77378a8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3663 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 sfp*} { - 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(); }); });