Change the tab-nav rendering to be v-show based (#613) rdar://108379797

* refactor: change the tab-nav rendering rdar://108379797

* chore: add tests and cleanup

---------

Co-authored-by: Hanqing Huang <[email protected]>

Author: Dobromir Hristov

src/components/ContentNode/TabNavigator.vue

@@ -20,11 +20,18 @@
     </Tabnav>
     <div class="tabs-content">
       <div class="tabs-content-container">
-        <transition name="fade">
-          <div :key="currentTitle">
-            <slot :name="currentTitle" />
-          </div>
-        </transition>
+        <transition-group name="fade">
+          <template v-for="title in titles">
+            <div
+              v-show="title === currentTitle"
+              :key="title"
+              :class="{ active: title === currentTitle }"
+              class="tab-container"
+            >
+              <slot :name="title" />
+            </div>
+          </template>
+        </transition-group>
       </div>
     </div>
   </div>
@@ -33,7 +40,6 @@
 <script>
 import Tabnav from 'docc-render/components/Tabnav.vue';
 import TabnavItem from 'docc-render/components/TabnavItem.vue';
-import ImageLoadingStrategy from 'docc-render/constants/ImageLoadingStrategy';
 
 /**
  * Tab navigation component, that renders `ContentNode`,
@@ -47,9 +53,6 @@ export default {
     TabnavItem,
     Tabnav,
   },
-  provide: {
-    imageLoadingStrategy: ImageLoadingStrategy.eager,
-  },
   props: {
     vertical: {
       type: Boolean,

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

@@ -12,7 +12,6 @@ import TabNavigator from '@/components/ContentNode/TabNavigator.vue';
 import { mount } from '@vue/test-utils';
 import Tabnav from '@/components/Tabnav.vue';
 import TabnavItem from '@/components/TabnavItem.vue';
-import ImageLoadingStrategy from '@/constants/ImageLoadingStrategy';
 import { flushPromises } from '../../../../test-utils';
 
 const titles = ['Long tab title', 'A Longer tab title', 'The Longest tab title'];
@@ -54,9 +53,13 @@ describe('TabNavigator.spec', () => {
       value: titles[0],
     });
     expect(wrapper.findAll(TabnavItem)).toHaveLength(3);
-    expect(wrapper.find('.tabs-content').text()).toEqual('First');
-    // eslint-disable-next-line no-underscore-dangle
-    expect(wrapper.vm._provided).toHaveProperty('imageLoadingStrategy', ImageLoadingStrategy.eager);
+    const tabs = wrapper.findAll('.tab-container');
+    expect(tabs).toHaveLength(3);
+    expect(tabs.at(0).classes()).toContain('active');
+    expect(tabs.at(0).isVisible()).toBe(true);
+    expect(tabs.at(1).classes()).not.toContain('active');
+    expect(tabs.at(1).isVisible()).toBe(false);
+    expect(tabs.at(0).text()).toEqual('First');
   });
 
   it('sets the TabNavigator in `vertical` mode', async () => {
@@ -75,40 +78,40 @@ describe('TabNavigator.spec', () => {
     await flushPromises();
     const tabnav = wrapper.find(Tabnav);
     tabnav.vm.$emit('input', titles[1]);
-    expect(wrapper.find('.tabs-content').text()).toBe('Second');
+    expect(wrapper.find('.tab-container.active').text()).toBe('Second');
     expect(tabnav.props('value')).toEqual(titles[1]);
   });
 
   it('selects the added tab when adding a tab', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find('.tabs-content').text()).toBe('First');
+    expect(wrapper.find('.tab-container.active').text()).toBe('First');
 
     wrapper.setProps({ titles: longerTitles });
-    expect(wrapper.find('.tabs-content').text()).toBe('Fourth');
+    expect(wrapper.find('.tab-container.active').text()).toBe('Fourth');
     const tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(longerTitles[3]);
   });
 
   it('selects first tab when deleting current tab', () => {
     const wrapper = createWrapper();
     wrapper.setProps({ titles: longerTitles });
-    expect(wrapper.find('.tabs-content').text()).toBe('Fourth');
+    expect(wrapper.find('.tab-container.active').text()).toBe('Fourth');
 
     wrapper.setProps({ titles });
-    expect(wrapper.find('.tabs-content').text()).toBe('First');
+    expect(wrapper.find('.tab-container.active').text()).toBe('First');
     const tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(titles[0]);
   });
 
   it('keep currently selected tab when deleting a tab', () => {
     const wrapper = createWrapper();
     wrapper.setProps({ titles: longerTitles });
-    expect(wrapper.find('.tabs-content').text()).toBe('Fourth'); // Current tab
+    expect(wrapper.find('.tab-container.active').text()).toBe('Fourth'); // Current tab
 
     const removedTitles = ['Long tab title',
       'A Longer tab title', 'added title'];
     wrapper.setProps({ titles: removedTitles });
-    expect(wrapper.find('.tabs-content').text()).toBe('Fourth'); // Keeps current tab
+    expect(wrapper.find('.tab-container.active').text()).toBe('Fourth'); // Keeps current tab
     const tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(longerTitles[3]);
   });
@@ -117,23 +120,23 @@ describe('TabNavigator.spec', () => {
     const changedLastTab = ['Long tab title',
       'A Longer tab title', 'changed last tab'];
     const wrapper = createWrapper();
-    expect(wrapper.find('.tabs-content').text()).toBe('First');
+    expect(wrapper.find('.tab-container.active').text()).toBe('First');
     wrapper.setProps({ titles: changedLastTab });
-    expect(wrapper.find('.tabs-content').text()).toBe('Last');
+    expect(wrapper.find('.tab-container.active').text()).toBe('Last');
     let tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(changedLastTab[2]);
 
     const changedFirstTab = ['changed first tab',
       'A Longer tab title', 'changed last tab'];
     wrapper.setProps({ titles: changedFirstTab });
-    expect(wrapper.find('.tabs-content').text()).toBe('First');
+    expect(wrapper.find('.tab-container.active').text()).toBe('First');
     tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(changedFirstTab[0]);
 
     const changedMidTab = ['changed first tab',
       'changed middle tab', 'changed last tab'];
     wrapper.setProps({ titles: changedMidTab });
-    expect(wrapper.find('.tabs-content').text()).toBe('Middle');
+    expect(wrapper.find('.tab-container.active').text()).toBe('Middle');
     tabnav = wrapper.find(Tabnav);
     expect(tabnav.props('value')).toEqual(changedMidTab[1]);
   });