It adds display:none to NavigatorCard when navigator is loading

swiftlang · Jun 17, 2024 · 2410e03 · 2410e03
1 parent f47301f
commit 2410e03
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
@@ -14,7 +14,7 @@
     class="navigator"
   >
     <NavigatorCard
-      v-if="!isFetching"
+      v-show="!isFetching"
       v-bind="technologyProps"
       :type="type"
       :children="flatChildren"
@@ -33,7 +33,7 @@
     </NavigatorCard>
     <LoadingNavigatorCard
       @close="$emit('close')"
-      v-else
+      v-if="isFetching"
     />
     <div aria-live="polite" class="visuallyhidden">
       {{ $t('navigator.navigator-is', {

diff --git a/tests/unit/components/Navigator.spec.js b/tests/unit/components/Navigator.spec.js
@@ -17,6 +17,8 @@ import { INDEX_ROOT_KEY } from '@/constants/sidebar';
 
 jest.mock('docc-render/utils/throttle', () => jest.fn(v => v));
 
+const { LoadingNavigatorCard } = Navigator.components;
+
 const technology = {
   title: 'FooTechnology',
   children: [
@@ -161,6 +163,24 @@ describe('Navigator', () => {
     expect(wrapper.find('[aria-live="polite"]').text()).toBe('navigator.navigator-is navigator.state.loading');
   });
 
+  it('renders a LoadingNavigatorCard when navigator is loading', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        isFetching: true,
+      },
+    });
+    expect(wrapper.find(LoadingNavigatorCard).exists()).toBe(true);
+  });
+
+  it('adds display:none to NavigatorCard when navigator is loading', () => {
+    const wrapper = createWrapper({
+      propsData: {
+        isFetching: true,
+      },
+    });
+    expect(wrapper.find(NavigatorCard).attributes('style')).toContain('display: none');
+  });
+
   it('renders an aria live that tells VO users when navigator is ready', () => {
     const wrapper = createWrapper();
     expect(wrapper.find('[aria-live="polite"]').exists()).toBe(true);