Framework Name Links In Body Styling (#371) 94293647

* added fix inside topicslink by adding another conditional that checks the topic.role, passes all tests

* wrote tests for topic role fitting eslint guidelines

* r[94293647] Used feedback from Marina + Marcus on updating test
cases

* "Added comment to topislinkblock describing that
Framework name links should not be code voice"

Co-authored-by: Tarun Amasa <“[email protected]”>

Author: tarunamasa

src/components/DocumentationTopic/TopicsLinkBlock.vue

@@ -59,6 +59,7 @@
 </template>
 
 <script>
+import { TopicRole } from 'docc-render/constants/roles';
 import { buildUrl } from 'docc-render/utils/url-helper';
 import Badge from 'docc-render/components/Badge.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
@@ -179,6 +180,8 @@ export default {
       if (topic.titleStyle === TitleStyles.title) {
         return topic.ideTitle ? 'span' : 'code';
       }
+      // Framework name links should not be code voice
+      if (topic.role && topic.role === TopicRole.collection) return 'span';
 
       switch (topic.kind) {
       case TopicKind.symbol:

tests/unit/components/DocumentationTopic/TopicsLinkBlock.spec.js

@@ -12,6 +12,7 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import TopicsLinkBlock from 'docc-render/components/DocumentationTopic/TopicsLinkBlock.vue';
 import { ChangeNames } from 'docc-render/constants/Changes';
 import { multipleLinesClass } from 'docc-render/constants/multipleLines';
+import { TopicRole } from 'docc-render/constants/roles';
 
 const {
   ReferenceType,
@@ -140,6 +141,28 @@ describe('TopicsLinkBlock', () => {
     expect(wordBreak.text()).toBe(propsData.topic.title);
   });
 
+  it('renders a `WordBreak` using <span> tag for Framework name links in Topic that have role collection', () => {
+    wrapper.setProps({
+      topic: {
+        ...propsData.topic,
+        role: TopicRole.collection,
+        kind: TopicKind.symbol,
+      },
+    });
+    const wordBreak = wrapper.find('.link').find(WordBreak);
+    expect(wordBreak.exists()).toBe(true);
+    expect(wordBreak.attributes('tag')).toBe('span');
+    expect(wordBreak.text()).toBe(propsData.topic.title);
+  });
+
+  it('renders a `WordBreak` using <code> tag for Framework name links in Topic that do NOT have role collection', () => {
+    wrapper.setProps({ topic: { ...propsData.topic, kind: TopicKind.symbol } });
+    const wordBreak = wrapper.find('.link').find(WordBreak);
+    expect(wordBreak.exists()).toBe(true);
+    expect(wordBreak.attributes('tag')).toBe('code');
+    expect(wordBreak.text()).toBe(propsData.topic.title);
+  });
+
   it('renders a `WordBreak` using <code> tag for links with a titleStyle == title and no ideTitle', () => {
     wrapper.setProps({ topic: { ...propsData.topic, titleStyle: 'title' } });
     const wordBreak = wrapper.find('.link').find(WordBreak);