Enhance Tests: button-copy

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`<d2l-button-copy></d2l-button-copy>`);
+			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`<d2l-button-copy></d2l-button-copy>`);
+
+			// 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();
+		});
+
+	});
+
 });

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();
+	});
+
 });