diff --git a/components/button/test/button-copy.test.js b/components/button/test/button-copy.test.js index 7f8694cf344..4390b31e40c 100644 --- a/components/button/test/button-copy.test.js +++ b/components/button/test/button-copy.test.js @@ -28,6 +28,16 @@ describe('d2l-button-copy', () => { expect(dispatched).to.be.false; }); + it('stops propagation when clicked', async() => { + const el = await fixture(html``); + let propagated = false; + el.parentElement.addEventListener('click', () => propagated = true); + const buttonIcon = el.shadowRoot.querySelector('d2l-button-icon'); + clickElem(buttonIcon); + await oneEvent(el, 'click'); + expect(propagated).to.be.false; + }); + }); describe('writeTextToClipboard', () => { @@ -62,4 +72,32 @@ describe('d2l-button-copy', () => { }); + describe('icon state', () => { + + it('clears previous timeout on multiple clicks', async() => { + const writeTextStub = stub(navigator.clipboard, 'writeText').resolves(); + const el = await fixture(html``); + + // First click + clickElem(el); + let event = await oneEvent(el, 'click'); + await event.detail.writeTextToClipboard('first'); + await el.updateComplete; + + const firstTimeoutId = el._iconCheckTimeoutId; + + // Second click before timeout expires + clickElem(el); + event = await oneEvent(el, 'click'); + await event.detail.writeTextToClipboard('second'); + await el.updateComplete; + + const secondTimeoutId = el._iconCheckTimeoutId; + + expect(firstTimeoutId).to.not.equal(secondTimeoutId); + writeTextStub.restore(); + }); + + }); + }); diff --git a/components/button/test/button-copy.vdiff.js b/components/button/test/button-copy.vdiff.js index 70739f86779..4cd29a1a37e 100644 --- a/components/button/test/button-copy.vdiff.js +++ b/components/button/test/button-copy.vdiff.js @@ -1,5 +1,5 @@ import '../button-copy.js'; -import { clickElem, expect, fixture, html, oneEvent } from '@brightspace-ui/testing'; +import { clickElem, expect, fixture, html, oneEvent, waitUntil } from '@brightspace-ui/testing'; import { stub } from 'sinon'; const clickAction = async(elem) => { @@ -35,4 +35,17 @@ describe('button-copy', () => { await expect(document).to.be.golden(); }); + it('icon reverts to copy after timeout', async() => { + writeTextStub = stub(navigator.clipboard, 'writeText').resolves(); + const elem = await fixture(template, { viewport: { width: 700, height: 200 } }); + await clickAction(elem); + + await waitUntil(() => { + const buttonIcon = elem.shadowRoot.querySelector('d2l-button-icon'); + return buttonIcon.icon === 'tier1:copy'; + }, 'icon did not revert to copy', { timeout: 3000 }); + + await expect(elem).to.be.golden(); + }); + }); diff --git a/components/button/test/golden/button-copy/chromium/icon-reverts-to-copy-after-timeout.png b/components/button/test/golden/button-copy/chromium/icon-reverts-to-copy-after-timeout.png new file mode 100644 index 00000000000..9facc40e182 Binary files /dev/null and b/components/button/test/golden/button-copy/chromium/icon-reverts-to-copy-after-timeout.png differ