From f181e435fe75b3b8e1498c0e5f0a516616b3cb12 Mon Sep 17 00:00:00 2001
From: Anthony Gubler <agubler@sitepen.com>
Date: Tue, 24 Mar 2020 12:02:21 +0000
Subject: [PATCH] Active link on query param matches

---
 src/routing/ActiveLink.ts        |  2 +-
 tests/routing/unit/ActiveLink.ts | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/routing/ActiveLink.ts b/src/routing/ActiveLink.ts
index a0f3e6ab5..f7a8dfe2e 100644
--- a/src/routing/ActiveLink.ts
+++ b/src/routing/ActiveLink.ts
@@ -55,7 +55,7 @@ export const ActiveLink = factory(function ActiveLink({
 			icache.set('handle', () => handle);
 		}
 		const context = router.getOutlet(to);
-		const isActive = context && paramsEqual(params, context.params);
+		const isActive = context && paramsEqual(params, { ...context.params, ...context.queryParams });
 		const contextIsExact = context && context.isExact();
 
 		classes = Array.isArray(classes) ? classes : [classes];
diff --git a/tests/routing/unit/ActiveLink.ts b/tests/routing/unit/ActiveLink.ts
index aee0f76d0..f4996c53c 100644
--- a/tests/routing/unit/ActiveLink.ts
+++ b/tests/routing/unit/ActiveLink.ts
@@ -27,6 +27,10 @@ const router = new Router(
 			path: 'other',
 			outlet: 'other'
 		},
+		{
+			path: 'query/{path}?{query}',
+			outlet: 'query'
+		},
 		{
 			path: 'param',
 			outlet: 'param',
@@ -70,6 +74,20 @@ describe('ActiveLink', () => {
 		h.expect(() => w(Link, { classes: ['foo'], to: 'foo' }, ['hello']));
 	});
 
+	it('Should render the ActiveLink children when matching query params', () => {
+		router.setPath('/query/path?query=query');
+		const h = harness(
+			() =>
+				w(ActiveLink, { to: 'query', params: { path: 'path', query: 'query' }, activeClasses: ['foo'] }, [
+					'hello'
+				]),
+			{
+				middleware: [[getRegistry, mockGetRegistry]]
+			}
+		);
+		h.expect(() => w(Link, { classes: ['foo'], to: 'query', params: { path: 'path', query: 'query' } }, ['hello']));
+	});
+
 	it('Should mix the active class onto existing string class when the outlet is active', () => {
 		router.setPath('/foo');
 		const h = harness(() => w(ActiveLink, { to: 'foo', activeClasses: ['foo'], classes: 'bar' }), {