refactor: topicLink text

Author: Dobromir Hristov

src/components/DocumentationTopic/TopicsLinkCardGridItem.vue

@@ -17,7 +17,7 @@
     :content="compact ? []: item.abstract"
     floating-style
     :size="compact ? undefined: 'large'"
-    :link-text="compact? '': 'Visit page'"
+    :link-text="compact? '': linkText"
   >
     <template #cover="{ classes }" v-if="!imageReferences.card">
       <div :class="classes" class="reference-card-grid-item__image">
@@ -34,6 +34,14 @@
 <script>
 import Card from 'docc-render/components/Card.vue';
 import TopicTypeIcon from 'docc-render/components/TopicTypeIcon.vue';
+import { TopicRole } from '@/constants/roles';
+
+export const ROLE_LINK_TEXT = {
+  [TopicRole.article]: 'Read Article',
+  [TopicRole.overview]: 'Start Tutorial',
+  [TopicRole.collection]: 'View API Collection',
+  [TopicRole.symbol]: 'View Symbol',
+};
 
 export default {
   name: 'TopicsLinkCardGridItem',
@@ -55,6 +63,7 @@ export default {
       all[current.type] = current.reference;
       return all;
     }, { icon: null, card: null }),
+    linkText: ({ item }) => ROLE_LINK_TEXT[item.role] || 'Learn more',
   },
 };
 </script>

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

@@ -6,13 +6,15 @@
  *
  * See https://swift.org/LICENSE.txt for license information
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
-*/
+ */
 
 import { mount } from '@vue/test-utils';
 import Card from '@/components/Card.vue';
 import { TopicRole } from '@/constants/roles';
 import TopicTypeIcon from '@/components/TopicTypeIcon.vue';
-import TopicsLinkCardGridItem from '@/components/DocumentationTopic/TopicsLinkCardGridItem.vue';
+import TopicsLinkCardGridItem, {
+  ROLE_LINK_TEXT,
+} from '@/components/DocumentationTopic/TopicsLinkCardGridItem.vue';
 
 const defaultProps = {
   item: {
@@ -118,7 +120,29 @@ describe('TopicsLinkCardGridItem', () => {
       content: defaultProps.item.abstract,
       floatingStyle: true,
       size: 'large',
-      linkText: 'Visit page',
+      linkText: ROLE_LINK_TEXT[TopicRole.article],
     });
   });
+
+  it('renders different text for diff roles', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        ...defaultProps,
+        compact: false,
+        item: { ...defaultProps.item, role: TopicRole.overview },
+      },
+    });
+    // overview
+    const card = wrapper.find(Card);
+    expect(card.props('linkText')).toBe(ROLE_LINK_TEXT[TopicRole.overview]);
+    // collection
+    wrapper.setProps({ item: { ...defaultProps.item, role: TopicRole.collection } });
+    expect(card.props('linkText')).toBe(ROLE_LINK_TEXT[TopicRole.collection]);
+    // symbol
+    wrapper.setProps({ item: { ...defaultProps.item, role: TopicRole.symbol } });
+    expect(card.props('linkText')).toBe(ROLE_LINK_TEXT[TopicRole.symbol]);
+    // other
+    wrapper.setProps({ item: { ...defaultProps.item, role: TopicRole.link } });
+    expect(card.props('linkText')).toBe('Learn more');
+  });
 });