refactor: cleanup the TopicsGrid implementation and merge with TopicsTable

Author: Dobromir Hristov

src/components/DocumentationTopic/Topics.vue

@@ -10,28 +10,21 @@
 
 <template>
   <TopicsTable
-    v-if="shouldRenderList"
     anchor="topics"
     title="Topics"
     :isSymbolDeprecated="isSymbolDeprecated"
     :isSymbolBeta="isSymbolBeta"
     :sections="sections"
-  />
-  <TopicsGrid
-    v-else
-    :sections="sections"
     :topicStyle="topicStyle"
   />
 </template>
 
 <script>
-import { TopicStyles } from 'docc-render/constants/TopicStyles';
-import TopicsGrid from './TopicsGrid.vue';
 import TopicsTable from './TopicsTable.vue';
 
 export default {
   name: 'Topics',
-  components: { TopicsGrid, TopicsTable },
+  components: { TopicsTable },
   props: {
     isSymbolDeprecated: Boolean,
     isSymbolBeta: Boolean,
@@ -41,8 +34,5 @@ export default {
       required: true,
     },
   },
-  computed: {
-    shouldRenderList: ({ topicStyle }) => topicStyle === TopicStyles.list,
-  },
 };
 </script>

src/components/DocumentationTopic/TopicsGrid.vue

@@ -30,9 +30,8 @@ import TopicsLinkCardGridItem from './TopicsLinkCardGridItem.vue';
 export default {
   name: 'TopicsLinkCardGrid',
   components: { TopicsLinkCardGridItem, Column, Row },
-  inject: ['references'],
   props: {
-    identifiers: {
+    items: {
       type: Array,
       required: true,
     },
@@ -42,9 +41,6 @@ export default {
     },
   },
   computed: {
-    items() {
-      return this.identifiers.map(i => this.references[i]);
-    },
     compactCards: ({ topicStyle }) => topicStyle === TopicStyles.compactGrid,
   },
 };

src/components/DocumentationTopic/TopicsLinkCardGrid.vue

@@ -27,21 +27,31 @@
       <template v-if="section.discussion" slot="discussion">
         <ContentNode :content="section.discussion.content" />
       </template>
-      <TopicsLinkBlock
-        v-for="topic in section.topics"
+      <TopicsLinkCardGrid
+        v-if="!shouldRenderList"
+        :items="section.topics"
+        :topicStyle="topicStyle"
         class="topic"
-        :key="topic.identifier"
-        :topic="topic"
-        :isSymbolDeprecated="isSymbolDeprecated"
-        :isSymbolBeta="isSymbolBeta"
       />
+      <template v-else>
+        <TopicsLinkBlock
+          v-for="topic in section.topics"
+          class="topic"
+          :key="topic.identifier"
+          :topic="topic"
+          :isSymbolDeprecated="isSymbolDeprecated"
+          :isSymbolBeta="isSymbolBeta"
+        />
+      </template>
     </ContentTableSection>
   </ContentTable>
 </template>
 
 <script>
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
+import { TopicStyles } from 'docc-render/constants/TopicStyles';
+import TopicsLinkCardGrid from 'docc-render/components/DocumentationTopic/TopicsLinkCardGrid.vue';
 import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
 import ContentTable from './ContentTable.vue';
 import ContentTableSection from './ContentTableSection.vue';
@@ -57,6 +67,7 @@ export default {
     },
   },
   components: {
+    TopicsLinkCardGrid,
     WordBreak,
     ContentTable,
     TopicsLinkBlock,
@@ -89,8 +100,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    topicStyle: {
+      type: String,
+      default: TopicStyles.list,
+    },
   },
   computed: {
+    shouldRenderList: ({ topicStyle }) => topicStyle === TopicStyles.list,
     sectionsWithTopics() {
       return this.sections.map(section => ({
         ...section,

src/components/DocumentationTopic/TopicsTable.vue

@@ -6,12 +6,11 @@
  *
  * See https://swift.org/LICENSE.txt for license information
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
-*/
+ */
 
 import { shallowMount } from '@vue/test-utils';
 import Topics from 'docc-render/components/DocumentationTopic/Topics.vue';
 import { TopicStyles } from '@/constants/TopicStyles';
-import TopicsGrid from '@/components/DocumentationTopic/TopicsGrid.vue';
 
 const { TopicsTable } = Topics.components;
 
@@ -33,26 +32,13 @@ describe('Topics', () => {
       sections: [],
       title: 'Topics',
       wrapTitle: false,
+      topicStyle: TopicStyles.list,
     });
     table.setProps({ isSymbolDeprecated: true });
     expect(table.props('isSymbolDeprecated')).toBe(true);
     table.setProps({ isSymbolBeta: true });
     expect(table.props('isSymbolBeta')).toBe(true);
-  });
-
-  it('renders a `TopicsGrid`, if the `topicStyle` is not `list`', () => {
-    const wrapper = shallowMount(Topics, {
-      propsData: {
-        sections: [],
-        topicStyle: TopicStyles.detailedGrid,
-      },
-    });
-    expect(wrapper.find(TopicsTable).exists()).toBe(false);
-    const grid = wrapper.find(TopicsGrid);
-    expect(grid.exists()).toBe(true);
-    expect(grid.props()).toEqual({
-      sections: [],
-      topicStyle: TopicStyles.detailedGrid,
-    });
+    table.setProps({ topicStyle: TopicStyles.compactGrid });
+    expect(table.props('topicStyle')).toBe(TopicStyles.compactGrid);
   });
 });

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

@@ -6,7 +6,7 @@
  *
  * See https://swift.org/LICENSE.txt for license information
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
-*/
+ */
 
 import TopicsLinkCardGrid from '@/components/DocumentationTopic/TopicsLinkCardGrid.vue';
 import { shallowMount } from '@vue/test-utils';
@@ -19,16 +19,14 @@ const ref1 = { identifier: 'ref1' };
 const ref2 = { identifier: 'ref2' };
 
 const defaultProps = {
-  identifiers: [ref1.identifier, ref2.identifier],
+  items: [ref1, ref2],
 };
-const references = { ref1, ref2 };
 
 const createWrapper = ({ propsData, ...others } = {}) => shallowMount(TopicsLinkCardGrid, {
   propsData: {
     ...defaultProps,
     ...propsData,
   },
-  provide: { references },
   ...others,
 });
 
@@ -37,6 +35,7 @@ describe('TopicsLinkCardGrid', () => {
     const wrapper = createWrapper();
     expect(wrapper.find(Row).props()).toEqual({
       columns: 3, // compact grid is a 3 column setup
+      gap: null,
     });
     const cols = wrapper.findAll(Column);
     expect(cols).toHaveLength(2);
@@ -55,6 +54,7 @@ describe('TopicsLinkCardGrid', () => {
     });
     expect(wrapper.find(Row).props()).toEqual({
       columns: 2, // detailed grid is a 2 column setup
+      gap: null,
     });
     expect(wrapper.find(TopicsLinkCardGridItem).props('compact')).toBe(false);
   });

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

@@ -6,10 +6,13 @@
  *
  * See https://swift.org/LICENSE.txt for license information
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
-*/
+ */
 
 import { shallowMount } from '@vue/test-utils';
 import TopicsTable from 'docc-render/components/DocumentationTopic/TopicsTable.vue';
+import { TopicStyles } from '@/constants/TopicStyles';
+import TopicsLinkCardGrid from '@/components/DocumentationTopic/TopicsLinkCardGrid.vue';
+import reference from '@/components/ContentNode/Reference';
 
 const {
   ContentTable, TopicsLinkBlock, ContentTableSection, ContentNode, WordBreak, LinkableHeading,
@@ -85,6 +88,7 @@ describe('TopicsTable', () => {
 
   it('renders a `TopicsLinkBlock` for each topic with reference data in a section', () => {
     const sections = wrapper.findAll(ContentTableSection);
+    expect(wrapper.findAll(TopicsLinkCardGrid)).toHaveLength(0);
 
     const firstSectionBlocks = sections.at(0).findAll(TopicsLinkBlock);
     expect(firstSectionBlocks.length).toBe(1);
@@ -105,6 +109,26 @@ describe('TopicsTable', () => {
     });
   });
 
+  it('renders a `TopicsLinkCardGrid` if `topicStyle` is not `list`', () => {
+    wrapper.setProps({ topicStyle: TopicStyles.compactGrid });
+    expect(wrapper.findAll(TopicsLinkBlock)).toHaveLength(0);
+    const sections = wrapper.findAll(ContentTableSection);
+
+    const firstGrid = sections.at(0).find(TopicsLinkCardGrid);
+    expect(firstGrid.classes('topic')).toBe(true);
+    expect(firstGrid.props()).toEqual({
+      topicStyle: TopicStyles.compactGrid,
+      items: [foo],
+    });
+
+    const secondGrid = sections.at(1).find(TopicsLinkCardGrid);
+    expect(secondGrid.classes('topic')).toBe(true);
+    expect(secondGrid.props()).toEqual({
+      topicStyle: TopicStyles.compactGrid,
+      items: [baz],
+    });
+  });
+
   it('can be passed `title` and `anchor` overrides', () => {
     wrapper.setProps({
       anchor: 'foo-bar',