[r96943502] fix: prevent jumping issues

Author: marinaaisa

src/components/ContentNode/LinkableHeading.vue

@@ -14,13 +14,13 @@
    :is="`h${level}`"
    class="section-title"
   >
-    <a
+    <router-link
       v-if="anchor && !isTargetIDE"
-      :href="`#${anchor}`"
+      :to="{ hash: `#${anchor}` }"
       class="header-anchor"
       aria-label="hidden"
       @click="handleFocusAndScroll(anchor)"
-    >#</a>
+    >#</router-link>
     <slot />
   </component>
 </template>

src/mixins/scrollToElement.js

@@ -35,6 +35,7 @@ export default {
     */
     async handleFocusAndScroll(hash) {
       const element = document.getElementById(hash);
+      // if no element to focus or scroll, exit
       if (!element) return;
       // Focus scrolls to the element
       element.focus();

tests/unit/components/Asset.spec.js

@@ -185,7 +185,7 @@ describe('Asset', () => {
       expect(asset.exists()).toBe(true);
       expect(asset.props()).toEqual({
         alt: image.alt,
-        loading: "lazy",
+        loading: 'lazy',
         variants: image.variants,
       });
     });
@@ -195,7 +195,7 @@ describe('Asset', () => {
       const asset = wrapper.find(ImageAsset);
       expect(asset.props()).toEqual({
         alt: image.alt,
-        loading: "lazy",
+        loading: 'lazy',
         variants: image.variants,
       });
     });

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

@@ -8,12 +8,15 @@
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
 
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 
 describe('LinkableHeading', () => {
+  const stubs = { 'router-link': RouterLinkStub };
+
   it('renders a default section title that is a h2 by default', () => {
     const wrapper = shallowMount(LinkableHeading, {
+      stubs,
       slots: { default: 'Title' },
     });
     expect(wrapper.text()).toBe('Title');
@@ -23,6 +26,7 @@ describe('LinkableHeading', () => {
 
   it('renders a section title which heading is tag prop', () => {
     const wrapper = shallowMount(LinkableHeading, {
+      stubs,
       propsData: {
         level: 3,
       },
@@ -32,6 +36,7 @@ describe('LinkableHeading', () => {
 
   it('renders a section title with a header anchor and an id on the wrapper', async () => {
     const wrapper = shallowMount(LinkableHeading, {
+      stubs,
       propsData: {
         anchor: 'title',
       },
@@ -41,7 +46,7 @@ describe('LinkableHeading', () => {
     expect(wrapper.text()).toBe('# Title');
     expect(wrapper.attributes('id')).toBe('title');
     const headerAnchor = wrapper.find('.header-anchor');
-    expect(headerAnchor.attributes('href')).toBe('#title');
+    expect(headerAnchor.props('to')).toEqual({ hash: '#title' });
     expect(headerAnchor.attributes('aria-label')).toBe('hidden');
   });
 
@@ -52,6 +57,7 @@ describe('LinkableHeading', () => {
     document.body.appendChild(div);
 
     const wrapper = shallowMount(LinkableHeading, {
+      stubs,
       propsData: {
         anchor: 'title',
       },
@@ -60,7 +66,7 @@ describe('LinkableHeading', () => {
     expect(wrapper.text()).toBe('# Title');
     expect(wrapper.attributes('id')).not.toBe('title');
     const headerAnchor = wrapper.find('.header-anchor');
-    expect(headerAnchor.attributes('href')).toBe('#title');
+    expect(headerAnchor.props('to')).toEqual({ hash: '#title' });
     expect(headerAnchor.attributes('aria-label')).toBe('hidden');
   });
 
@@ -71,6 +77,7 @@ describe('LinkableHeading', () => {
 
   it('does not render anchor if target ide is true', () => {
     const wrapper = shallowMount(LinkableHeading, {
+      stubs,
       propsData: {
         anchor: 'title',
       },

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

@@ -115,7 +115,7 @@ describe('PropertyTable', () => {
 
   function mountComponent(options) {
     return mount(PropertyTable, {
-      stubs: ['ContentNode'],
+      stubs: ['ContentNode', 'router-link'],
       propsData,
       provide,
       ...options,

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

@@ -48,7 +48,7 @@ describe('RestParameters', () => {
 
   function mountComponent({ propsData: props, ...others } = {}) {
     return mount(RestParameters, {
-      stubs: ['ContentNode'],
+      stubs: ['ContentNode', 'router-link'],
       propsData: {
         ...propsData,
         ...props,

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

@@ -57,7 +57,7 @@ describe('RestResponses', () => {
 
   function mountComponent(options) {
     const wrapper = mount(RestResponses, {
-      stubs: ['ContentNode'],
+      stubs: ['ContentNode', 'router-link'],
       propsData,
       provide,
       ...options,