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