Enhance Tests: button-add (#6292)

* Enhance Tests: button-add

* Update button-add.vdiff.js

* Updating vdiff goldens (#6293)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* code review feedback: remove unnecessary setTimeouts

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: margaree

components/button/test/button-add.axe.js

@@ -34,10 +34,32 @@ describe('d2l-button-add', () => {
 		await focusElem(el);
 		await expect(el).to.be.accessible();
 	});
+
 	it('focused, icon-when-interacted mode', async() => {
 		const el = await fixture(html`<d2l-button-add mode="icon-when-interacted"></d2l-button-add>`);
 		await focusElem(el);
 		await expect(el).to.be.accessible();
 	});
 
+	describe('tooltip', () => {
+
+		it('should have tooltip for attribute matching button id in icon mode', async() => {
+			const el = await fixture(html`<d2l-button-add text="Add New Item"></d2l-button-add>`);
+			const button = el.shadowRoot.querySelector('button');
+			const tooltip = el.shadowRoot.querySelector('d2l-tooltip');
+			expect(tooltip).to.exist;
+			expect(tooltip.getAttribute('for-type')).to.equal('label');
+			expect(button.id).to.equal(tooltip.getAttribute('for'));
+		});
+
+		it('should have tooltip for attribute matching button id in icon-when-interacted mode', async() => {
+			const el = await fixture(html`<d2l-button-add mode="icon-when-interacted" text="Add New Item"></d2l-button-add>`);
+			const button = el.shadowRoot.querySelector('button');
+			const tooltip = el.shadowRoot.querySelector('d2l-tooltip');
+			expect(tooltip).to.exist;
+			expect(button.id).to.equal(tooltip.getAttribute('for'));
+		});
+
+	});
+
 });

components/button/test/button-add.test.js

@@ -1,5 +1,5 @@
 import '../button-add.js';
-import { clickElem, expect, fixture, html, oneEvent, runConstructor } from '@brightspace-ui/testing';
+import { clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
 import { createMessage } from '../../../mixins/property-required/property-required-mixin.js';
 
 describe('d2l-button-add', () => {
@@ -12,12 +12,11 @@ describe('d2l-button-add', () => {
 
 	});
 
-	describe('events', () => {
+	describe('properties', () => {
 
-		it('dispatches click event when clicked', async() => {
-			const el = await fixture(html`<d2l-button-add></d2l-button-add>`);
-			setTimeout(() => clickElem(el));
-			await oneEvent(el, 'click');
+		it('should default mode to "icon"', async() => {
+			const el = await fixture(html`<d2l-button-add text="Add"></d2l-button-add>`);
+			expect(el.mode).to.equal('icon');
 		});
 
 		it('throws error when no text', async() => {
@@ -33,4 +32,31 @@ describe('d2l-button-add', () => {
 
 	});
 
+	describe('focus', () => {
+
+		it('should focus on button element', async() => {
+			const el = await fixture(html`<d2l-button-add text="Add"></d2l-button-add>`);
+			await el.focus();
+			const button = el.shadowRoot.querySelector('button');
+			expect(el.shadowRoot.activeElement).to.equal(button);
+		});
+
+	});
+
+	describe('events', () => {
+
+		it('dispatches click event when clicked', async() => {
+			const el = await fixture(html`<d2l-button-add text="Add"></d2l-button-add>`);
+			clickElem(el);
+			await oneEvent(el, 'click');
+		});
+
+		it('dispatches click event when press enter', async() => {
+			const el = await fixture(html`<d2l-button-add text="Add"></d2l-button-add>`);
+			sendKeysElem(el, 'press', 'Enter');
+			await oneEvent(el, 'click');
+		});
+
+	});
+
 });

components/button/test/button-add.vdiff.js

@@ -50,4 +50,58 @@ describe('button-add', () => {
 			});
 		});
 	});
+
+	describe('edge cases', () => {
+
+		it('long text icon mode', async() => {
+			const elem = await fixture(html`<d2l-button-add text="Add a New Item with a Very Long Description That Should Be Handled Properly"></d2l-button-add>`);
+			await focusElem(elem);
+			await oneEvent(elem, 'd2l-tooltip-show');
+			await expect(elem).to.be.golden({ margin: 12 });
+		});
+
+		it('long text icon-and-text mode', async() => {
+			const elem = await fixture(html`<d2l-button-add mode="icon-and-text" text="Add a New Item with a Very Long Description That Should Be Handled Properly"></d2l-button-add>`);
+			await expect(elem).to.be.golden({ margin: 12 });
+		});
+
+		it('long text icon-and-text mode constrained width', async() => {
+			const elem = await fixture(html`
+				<div style="width: 400px;">
+					<d2l-button-add mode="icon-and-text" text="Add a New Item with a Very Long Description That Should Be Handled Properly"></d2l-button-add>
+				</div>
+			`);
+			await expect(elem).to.be.golden();
+		});
+
+		it('long text icon-when-interacted mode hover', async() => {
+			const elem = await fixture(html`<d2l-button-add mode="icon-when-interacted" text="Add a New Item with a Very Long Description That Should Be Handled Properly"></d2l-button-add>`);
+			await hoverElem(elem);
+			await oneEvent(elem, 'd2l-tooltip-show');
+			await expect(elem).to.be.golden({ margin: 12 });
+		});
+
+	});
+
+	describe('backgrounds', () => {
+
+		it('colored background', async() => {
+			const elem = await fixture(html`
+				<div style="background-color: #f9fafb; padding: 20px;">
+					<d2l-button-add mode="icon-and-text" text="Add Item"></d2l-button-add>
+				</div>
+			`);
+			await expect(elem).to.be.golden();
+		});
+
+		it('dark background icon mode', async() => {
+			const elem = await fixture(html`
+				<div style="background-color: #494c4e; padding: 20px;">
+					<d2l-button-add text="Add Item"></d2l-button-add>
+				</div>
+			`);
+			await expect(elem).to.be.golden();
+		});
+
+	});
 });