Enhance link tests (#6291)

Author: margaree

components/link/test/link-mixin.test.js

@@ -74,4 +74,83 @@ describe('LinkMixin', () => {
 		});
 	});
 
+	describe('getNewWindowDescription', () => {
+
+		it('should return localized string when target is _blank and label is provided', async() => {
+			const elem = await fixture(newWindowFixture);
+			const description = elem.getNewWindowDescription('My Label');
+			expect(description).to.equal('Opens in a new window.');
+		});
+
+		it('should return undefined when target is not _blank', async() => {
+			const elem = await fixture(emptyFixture);
+			const description = elem.getNewWindowDescription('My Label');
+			expect(description).to.be.undefined;
+		});
+
+		it('should return undefined when label is not provided', async() => {
+			const elem = await fixture(newWindowFixture);
+			const description = elem.getNewWindowDescription();
+			expect(description).to.be.undefined;
+		});
+
+	});
+
+	describe('_render parameters', () => {
+
+		it('should apply rel attribute when provided', async() => {
+			const tagNameWithRel = defineCE(
+				class extends LinkMixin(LitElement) {
+					render() {
+						return this._render(html`Link Test`, { rel: 'noopener noreferrer' });
+					}
+				}
+			);
+			const elem = await fixture(`<${tagNameWithRel}></${tagNameWithRel}>`);
+			const anchor = elem.shadowRoot.querySelector('a');
+			expect(anchor.getAttribute('rel')).to.equal('noopener noreferrer');
+		});
+
+		it('should apply custom link classes', async() => {
+			const tagNameWithClasses = defineCE(
+				class extends LinkMixin(LitElement) {
+					render() {
+						return this._render(html`Link Test`, { linkClasses: { 'custom-class': true, 'another-class': true } });
+					}
+				}
+			);
+			const elem = await fixture(`<${tagNameWithClasses}></${tagNameWithClasses}>`);
+			const anchor = elem.shadowRoot.querySelector('a');
+			expect(anchor.classList.contains('custom-class')).to.be.true;
+			expect(anchor.classList.contains('another-class')).to.be.true;
+		});
+
+		it('should apply custom tabindex', async() => {
+			const tagNameWithTabindex = defineCE(
+				class extends LinkMixin(LitElement) {
+					render() {
+						return this._render(html`Link Test`, { tabindex: '-1' });
+					}
+				}
+			);
+			const elem = await fixture(`<${tagNameWithTabindex}></${tagNameWithTabindex}>`);
+			const anchor = elem.shadowRoot.querySelector('a');
+			expect(anchor.getAttribute('tabindex')).to.equal('-1');
+		});
+
+		it('should apply ariaLabel when provided', async() => {
+			const tagNameWithAriaLabel = defineCE(
+				class extends LinkMixin(LitElement) {
+					render() {
+						return this._render(html`Link Test`, { ariaLabel: 'Custom Label' });
+					}
+				}
+			);
+			const elem = await fixture(`<${tagNameWithAriaLabel}></${tagNameWithAriaLabel}>`);
+			const anchor = elem.shadowRoot.querySelector('a');
+			expect(anchor.getAttribute('aria-label')).to.equal('Custom Label');
+		});
+
+	});
+
 });

components/link/test/link.axe.js

@@ -25,4 +25,29 @@ describe('d2l-link', () => {
 		await expect(elem).to.be.accessible();
 	});
 
+	it('new-window with target="_blank"', async() => {
+		const elem = await fixture(html`<d2l-link href="https://www.d2l.com" target="_blank">Opens New Window</d2l-link>`);
+		await expect(elem).to.be.accessible();
+	});
+
+	it('with aria-label', async() => {
+		const elem = await fixture(html`<d2l-link href="https://www.d2l.com" aria-label="Custom accessible label">Link</d2l-link>`);
+		await expect(elem).to.be.accessible();
+	});
+
+	it('with download attribute', async() => {
+		const elem = await fixture(html`<d2l-link href="https://www.d2l.com/file.pdf" download>Download File</d2l-link>`);
+		await expect(elem).to.be.accessible();
+	});
+
+	it('truncated with lines property', async() => {
+		const elem = await fixture(html`<div style="width: 200px;"><d2l-link href="https://www.d2l.com" lines="2">This is a very long link that will be truncated after two lines</d2l-link></div>`);
+		await expect(elem).to.be.accessible();
+	});
+
+	it('without href', async() => {
+		const elem = await fixture(html`<d2l-link>Link without href</d2l-link>`);
+		await expect(elem).to.be.accessible();
+	});
+
 });

components/link/test/link.test.js

@@ -11,20 +11,16 @@ describe('d2l-link', () => {
 
 	describe('attribute binding', () => {
 
-		['download', 'href'].forEach((attrName) => {
-			it(`should bind "${attrName}" attribute to anchor attribute`, async() => {
-				const elem = await fixture(normalFixture);
-				elem.setAttribute(attrName, attrName);
-				await elem.updateComplete;
-				expect(getAnchor(elem).hasAttribute(attrName)).to.be.true;
-			});
-		});
-
 		it('should bind "aria-label" attribute to anchor attribute', async() => {
 			const elem = await fixture(html`<d2l-link aria-label="My Aria Label"></d2l-link>`);
 			expect(getAnchor(elem).getAttribute('aria-label')).to.equal('My Aria Label');
 		});
 
+		it('should bind "download" attribute to anchor attribute', async() => {
+			const elem = await fixture(html`<d2l-link download></d2l-link>`);
+			expect(getAnchor(elem).hasAttribute('download')).to.be.true;
+		});
+
 		it('should bind "href" attribute to anchor attribute', async() => {
 			const elem = await fixture(html`<d2l-link href="https://www.d2l.com"></d2l-link>`);
 			expect(getAnchor(elem).getAttribute('href')).to.equal('https://www.d2l.com');
@@ -91,11 +87,15 @@ describe('d2l-link', () => {
 
 	});
 
-	describe('new-window', () => {
-		it('should add offscreen text', async() => {
-			const elem = await fixture(html`<d2l-link target="_blank">link text</d2l-link>`);
-			expect(elem.shadowRoot.querySelector('.d2l-offscreen').innerText).to.equal('Opens in a new window.');
+	describe('focus', () => {
+
+		it('should focus the anchor element when focus() is called', async() => {
+			const elem = await fixture(normalFixture);
+			elem.focus();
+			await elem.updateComplete;
+			expect(elem.shadowRoot.activeElement).to.equal(getAnchor(elem));
 		});
+
 	});
 
 });