[on-this-page] Only use word break hints for symbol title (#701)

Resolves: rdar://107193315

Author: mportiz08

src/components/OnThisPageNav.vue

@@ -20,8 +20,9 @@
           class="base-link"
           @click.native="handleFocusAndScroll(item.anchor)"
         >
-          <WordBreak v-if="item.i18n">{{ $t(item.title) }}</WordBreak>
-          <WordBreak v-else>{{ item.title }}</WordBreak>
+          <component :is="getWrapperComponent(item)">
+            {{ getTextContent(item) }}
+          </component>
         </router-link>
       </li>
     </ul>
@@ -122,6 +123,12 @@ export default {
         'child-item': item.level === 3,
       };
     },
+    getTextContent(item) {
+      return item.i18n ? this.$t(item.title) : item.title;
+    },
+    getWrapperComponent(item) {
+      return item.isSymbol ? WordBreak : 'span';
+    },
   },
 };
 </script>

src/mixins/onThisPageRegistrator.js

@@ -18,6 +18,8 @@ import {
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import { AppTopID } from 'docc-render/constants/AppTopID';
 
+const SYMBOL_KIND = 'symbol';
+
 /**
  * Crawls the `topicData` of a page, and extracts onThisPage sections.
  */
@@ -44,11 +46,13 @@ export default {
         defaultImplementationsSections,
         relationshipsSections,
         seeAlsoSections,
+        kind,
       } = topicData;
       this.store.addOnThisPageSection({
         title,
         anchor: AppTopID,
         level: 1,
+        isSymbol: kind === SYMBOL_KIND,
       }, { i18n: false });
       if (primaryContentSections) {
         primaryContentSections.forEach((section) => {

tests/unit/components/OnThisPageNav.spec.js

@@ -19,7 +19,7 @@ jest.mock('docc-render/utils/throttle', () => jest.fn(v => v));
 jest.mock('docc-render/utils/loading', () => ({ waitFrames: jest.fn() }));
 const sections = [
   {
-    title: 'Title', level: 1, anchor: AppTopID, i18n: false,
+    title: 'Title', level: 1, anchor: AppTopID, i18n: false, isSymbol: true,
   },
   {
     title: 'First', level: 2, anchor: 'first', i18n: false,
@@ -110,12 +110,14 @@ describe('OnThisPageNav', () => {
     // assert first parent is active
     expect(firstParent.classes()).not.toContain('active');
     expect(parentLink1.props('to')).toEqual(`?language=objc#${sections[0].anchor}`);
-    expect(parentLink1.find(WordBreak).text()).toBe(sections[0].title);
+    const wbreak = parentLink1.find(WordBreak);
+    expect(wbreak.exists()).toBe(true);
+    expect(wbreak.text()).toBe(sections[0].title);
     // assert second parent
     const secondParent = parents.at(1);
     expect(secondParent.classes()).toContain('active');
     expect(secondParent.find(RouterLinkStub).props('to')).toEqual(`?language=objc#${sections[1].anchor}`);
-    expect(secondParent.find(WordBreak).text()).toBe(sections[1].title);
+    expect(secondParent.text()).toBe(sections[1].title);
     // assert "children" items
     const children = wrapper.findAll('.child-item');
     expect(children).toHaveLength(1);

tests/unit/mixins/__snapshots__/onThisPageRegistrator.spec.js.snap

@@ -5,6 +5,7 @@ Array [
   Object {
     "anchor": "app-top",
     "i18n": false,
+    "isSymbol": false,
     "level": 1,
     "title": "PageTitle",
   },

tests/unit/mixins/onThisPageRegistrator.spec.js

@@ -112,6 +112,7 @@ describe('OnThisPageRegistrator', () => {
     wrapper.setData({
       topicData: {
         metadata: { title: 'Foo' },
+        kind: 'symbol',
         primaryContentSections: [
           {
             kind: SectionKind.content,
@@ -134,6 +135,7 @@ describe('OnThisPageRegistrator', () => {
         i18n: false,
         level: 1,
         title: 'Foo',
+        isSymbol: true,
       },
       {
         anchor: 'provided-heading-anchor',
@@ -185,6 +187,7 @@ describe('OnThisPageRegistrator', () => {
         i18n: false,
         level: 1,
         title: 'Foo',
+        isSymbol: false,
       },
       {
         anchor: 'provided-heading-anchor',
@@ -212,6 +215,7 @@ describe('OnThisPageRegistrator', () => {
     expect(onThisPageSectionsStoreBase.state.onThisPageSections).toHaveLength(16);
     wrapper.vm.topicData = {
       metadata: { title: 'Foo' },
+      kind: 'symbol',
       primaryContentSections: [
         {
           kind: SectionKind.content,
@@ -226,6 +230,7 @@ describe('OnThisPageRegistrator', () => {
         i18n: false,
         level: 1,
         title: 'Foo',
+        isSymbol: true,
       },
       {
         anchor: 'provided-heading-anchor',