feat: (GAUD-6565) add back link click event (#221)

BrightspaceUILabs · Jun 17, 2024 · 7e34d42 · 7e34d42
1 parent 68757ef
commit 7e34d42
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/d2l-navigation-immersive.js b/d2l-navigation-immersive.js
@@ -206,7 +206,7 @@ class NavigationImmersive extends LitElement {
 						<div class="d2l-navigation-immersive-container">
 							<div class="d2l-navigation-immersive-left d2l-body-compact">
 								<slot name="left">
-									<d2l-navigation-link-back text="${backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
+									<d2l-navigation-link-back text="${backLinkText}" href="${this.backLinkHref}" @click="${this._handleBackClick}"></d2l-navigation-link-back>
 								</slot>
 							</div>
 							<div class="${classMap(middleContainerClasses)}">
@@ -223,6 +223,15 @@ class NavigationImmersive extends LitElement {
 		`;
 	}
 
+	_handleBackClick() {
+		this.dispatchEvent(
+			new CustomEvent(
+				'd2l-navigation-immersive-back-click',
+				{ bubbles: false, composed: false }
+			)
+		);
+	}
+
 	_handlePageResize(e) {
 		this._smallWidth = e.matches;
 	}

diff --git a/test/immersive.test.js b/test/immersive.test.js
@@ -1,5 +1,5 @@
 import '../d2l-navigation-immersive.js';
-import { expect, fixture, html, runConstructor } from '@brightspace-ui/testing';
+import { clickElem, expect, fixture, html, oneEvent, runConstructor } from '@brightspace-ui/testing';
 
 describe('d2l-navigation-immersive', () => {
 
@@ -18,4 +18,18 @@ describe('d2l-navigation-immersive', () => {
 		});
 	});
 
+	describe('events', () => {
+
+		it('should fire back-link-click event', async() => {
+			const el = await fixture(html`<d2l-navigation-immersive></d2l-navigation-immersive>`);
+			const backLink = el
+				.shadowRoot.querySelector('d2l-navigation-link-back')
+				.shadowRoot.querySelector('d2l-navigation-link-icon')
+				.shadowRoot.querySelector('a');
+			clickElem(backLink);
+			await oneEvent(el, 'd2l-navigation-immersive-back-click');
+		});
+
+	});
+
 });