From 5cd12869ba6dccbba367ba938e94019d3d596a75 Mon Sep 17 00:00:00 2001
From: Addy Pathania <89087450+sc-addypathania@users.noreply.github.com>
Date: Fri, 8 Apr 2022 12:29:57 -0400
Subject: [PATCH] [Vue] Fix Sitecore querystring property in Link component
 (#974)

* fixed link querystring issue

* added test for querystring attribute

* removed comments
---
 packages/sitecore-jss-vue/src/components/Link.test.ts | 10 +++++++---
 packages/sitecore-jss-vue/src/components/Link.ts      |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/sitecore-jss-vue/src/components/Link.test.ts b/packages/sitecore-jss-vue/src/components/Link.test.ts
index f9be7356c5..75fa5e7eea 100644
--- a/packages/sitecore-jss-vue/src/components/Link.test.ts
+++ b/packages/sitecore-jss-vue/src/components/Link.test.ts
@@ -91,13 +91,17 @@ describe('<Link />', () => {
           class: 'my-link',
           title: 'My Link',
           target: '_blank',
+          querystring: 'foo=bar',
         },
       },
     };
     const rendered = mount(Link, { props }).find('a');
-    const renderedAttrs = rendered.attributes();
-    // note: order of comparison is important for `toMatchObject` as renderedAttrs won't fully match props.field.value
-    expect(props.field.value).toMatchObject(renderedAttrs);
+    expect(rendered.html()).toContain(
+      `href="${props.field.value.href}?${props.field.value.querystring}"`
+    );
+    expect(rendered.html()).toContain(`class="${props.field.value.class}"`);
+    expect(rendered.html()).toContain(`title="${props.field.value.title}"`);
+    expect(rendered.html()).toContain(`target="${props.field.value.target}"`);
   });
 
   it('should render other attributes with other props provided', () => {
diff --git a/packages/sitecore-jss-vue/src/components/Link.ts b/packages/sitecore-jss-vue/src/components/Link.ts
index 7d915ca305..892a173fde 100644
--- a/packages/sitecore-jss-vue/src/components/Link.ts
+++ b/packages/sitecore-jss-vue/src/components/Link.ts
@@ -6,6 +6,7 @@ export interface LinkFieldValue {
   className?: string;
   title?: string;
   target?: string;
+  querystring?: string;
 }
 
 export interface LinkField {
@@ -105,7 +106,7 @@ export const Link = defineComponent({
       ...this.$data,
       class: link.class,
       ...this.$attrs,
-      href: link.href,
+      href: link.querystring ? `${link.href}?${link.querystring}` : link.href,
       title: link.title,
       target: link.target,
     };