Anchor links shouldn't overwrite query parameters (#914)

* Pass routers query to LinkableHeading

For the Routerlink component to preserve the query, we need to pass the
routers query as a query parameter to the "to" prop

* Fix tests

These tests were failing because they expect the router to have a query.
By adding a mock we can fix that.

Author: marinaaisa

src/components/ContentNode/LinkableHeading.vue

@@ -15,7 +15,7 @@
   >
     <router-link
       v-if="shouldLink"
-      :to="{ hash: `#${anchor}` }"
+      :to="linkWithAnchor"
       :data-after-text="$t('accessibility.in-page-link')"
       class="header-anchor"
       @click="handleFocusAndScroll(anchor)"
@@ -64,6 +64,7 @@ export default {
       enableMinimized,
       isTargetIDE,
     }) => !!anchor && !enableMinimized && !isTargetIDE,
+    linkWithAnchor: ({ anchor, $route }) => ({ hash: `#${anchor}`, query: $route.query }),
   },
 };
 </script>

tests/unit/components/ContentNode/LinkableHeading.spec.js

@@ -17,9 +17,18 @@ describe('LinkableHeading', () => {
   });
   const stubs = { 'router-link': RouterLinkStub };
 
+  const mocks = {
+    $route: {
+      query: {
+        context: 'foo',
+      },
+    },
+  };
+
   it('renders a default heading that is a h2 by default', () => {
     const wrapper = shallowMount(LinkableHeading, {
       stubs,
+      mocks,
       slots: { default: 'Title' },
     });
     expect(wrapper.text()).toBe('Title');
@@ -29,6 +38,7 @@ describe('LinkableHeading', () => {
   it('renders a heading with a given level', () => {
     const wrapper = shallowMount(LinkableHeading, {
       stubs,
+      mocks,
       propsData: {
         level: 3,
       },
@@ -39,6 +49,7 @@ describe('LinkableHeading', () => {
   it('renders a heading with a header anchor and an id on the wrapper', async () => {
     const wrapper = shallowMount(LinkableHeading, {
       stubs,
+      mocks,
       propsData: {
         anchor: 'title',
       },
@@ -47,7 +58,7 @@ describe('LinkableHeading', () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.attributes('id')).toBe('title');
     const headerAnchor = wrapper.find('.header-anchor');
-    expect(headerAnchor.props('to')).toEqual({ hash: '#title' });
+    expect(headerAnchor.props('to')).toEqual({ hash: '#title', query: mocks.$route.query });
     expect(headerAnchor.text()).toBe('Title');
     expect(headerAnchor.attributes('data-after-text')).toBe('accessibility.in-page-link');
   });
@@ -60,6 +71,7 @@ describe('LinkableHeading', () => {
   it('does not render anchor if target ide is true', () => {
     const wrapper = shallowMount(LinkableHeading, {
       stubs,
+      mocks,
       propsData: {
         anchor: 'title',
       },
@@ -73,6 +85,7 @@ describe('LinkableHeading', () => {
   it('does not render anchor if `enableMinimized` is true', () => {
     const wrapper = shallowMount(LinkableHeading, {
       stubs,
+      mocks,
       propsData: {
         anchor: 'title',
       },

tests/unit/components/DocumentationTopic/PrimaryContent/PropertyTable.spec.js

@@ -34,6 +34,14 @@ const store = {
   },
 };
 
+const mocks = {
+  $route: {
+    query: {
+      context: 'foo',
+    },
+  },
+};
+
 describe('PropertyTable', () => {
   const propsData = {
     kind: 'restResponses',
@@ -116,6 +124,7 @@ describe('PropertyTable', () => {
     return mount(PropertyTable, {
       stubs: ['ContentNode', 'router-link'],
       propsData,
+      mocks,
       provide,
       ...options,
     });

tests/unit/components/DocumentationTopic/PrimaryContent/RestParameters.spec.js

@@ -45,13 +45,22 @@ describe('RestParameters', () => {
     },
   };
 
+  const mocks = {
+    $route: {
+      query: {
+        context: 'foo',
+      },
+    },
+  };
+
   function mountComponent({ propsData: props, ...others } = {}) {
     return mount(RestParameters, {
       stubs: ['ContentNode', 'router-link'],
       propsData: {
         ...propsData,
         ...props,
       },
+      mocks,
       provide,
       ...others,
     });

tests/unit/components/DocumentationTopic/PrimaryContent/RestResponses.spec.js

@@ -54,11 +54,20 @@ describe('RestResponses', () => {
     },
   };
 
+  const mocks = {
+    $route: {
+      query: {
+        context: 'foo',
+      },
+    },
+  };
+
   function mountComponent(options) {
     const wrapper = mount(RestResponses, {
       stubs: ['ContentNode', 'router-link'],
       propsData,
       provide,
+      mocks,
       ...options,
     });
     return wrapper;