Hide sub nav in Pix Pro when the main navigation is already the pix-p…

…ro navigation
1024pix · Oct 9, 2020 · 0d5d0f3 · 0d5d0f3
1 parent 45b62b6
commit 0d5d0f3
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 105 deletions.
diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
@@ -9,7 +9,7 @@
         </li>
       </ul>
     </div>
-    <div v-if="isPixPro" class="nav-middle">
+    <div v-if="isPixPro && showProItems" class="nav-middle">
       <hr class="nav-middle__bar" />
       <p>Pix Pro</p>
       <ul>
@@ -35,6 +35,10 @@ export default {
       type: Array,
       default: null,
     },
+    showProItems: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isPixPro() {

diff --git a/components/NavigationSliceZone.vue b/components/NavigationSliceZone.vue
@@ -5,6 +5,7 @@
         <burger-menu-nav
           :items="burgerMenuLinks"
           :pro-items="organizationNavItems"
+          :show-pro-items="showSubNav"
         />
       </push-menu>
     </client-only>
@@ -36,7 +37,10 @@
           </section>
         </div>
       </div>
-      <pix-pro-sub-nav v-if="isPixPro" :nav-items="organizationNavItems" />
+      <pix-pro-sub-nav
+        v-if="isPixPro && showSubNav"
+        :nav-items="organizationNavItems"
+      />
     </div>
   </div>
 </template>
@@ -65,6 +69,11 @@ export default {
     isPixPro() {
       return process.env.isPixPro
     },
+
+    showSubNav() {
+      return this.usedMainNavigation.data.navigation_for !== 'pix-pro'
+    },
+
     ...mapState(['mainNavigation', 'organizationNavItems']),
 
     usedMainNavigation() {

diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js
@@ -3,30 +3,36 @@ import NavigationSliceZone from '~/components/NavigationSliceZone'
 
 jest.mock('~/services/document-fetcher')
 
-describe('NavigationSliceZone slice', () => {
+describe('NavigationSliceZone', () => {
   let component
   let store
+  const stubs = {
+    'client-only': true,
+    'push-menu': true,
+    'burger-menu-nav': true,
+    'organization-nav': true,
+    'logos-zone': true,
+    'navigation-zone': true,
+    'actions-zone': true,
+    'pix-pro-sub-nav': true,
+    fa: true,
+  }
 
   const expectedSiteNavigation = {
     data: {
       navigation_for: 'pix-site',
       body: [
         {
           slice_type: 'logos_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
         {
           slice_type: 'navigation_zone',
           items: [],
-          primary: {},
         },
         {
           slice_type: 'actions_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
       ],
     },
@@ -38,20 +44,15 @@ describe('NavigationSliceZone slice', () => {
       body: [
         {
           slice_type: 'logos_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
         {
           slice_type: 'navigation_zone',
           items: [],
-          primary: {},
         },
         {
           slice_type: 'actions_zone',
-          slice_label: null,
           items: [],
-          primary: {},
         },
       ],
     },
@@ -64,117 +65,151 @@ describe('NavigationSliceZone slice', () => {
       }
     })
 
-    describe('When we are in pix-site and we have two navigation', () => {
-      beforeEach(() => {
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
-          },
-        }
+    describe('#usedMainNavigation', () => {
+      describe('When we are in pix-site and we have the site navigation', () => {
+        beforeEach(() => {
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
+        })
+
+        it('should return the site navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
+
+          // when
+          const result = component.vm.usedMainNavigation
+
+          // then
+          expect(result).toEqual(expectedSiteNavigation)
+        })
       })
 
-      it('should return the site navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have the pro navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should return the pro navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedSiteNavigation)
-      })
-    })
+          // when
+          const result = component.vm.usedMainNavigation
 
-    describe('When we are in pix-pro and we have two navigation', () => {
-      beforeEach(() => {
-        process.env = {
-          isPixPro: true,
-        }
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
-          },
-        }
+          // then
+          expect(result).toEqual(expectedProNavigation)
+        })
       })
 
-      it('should return the pro navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have only the site navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should return the site navigation', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedProNavigation)
+          // when
+          const result = component.vm.usedMainNavigation
+
+          // then
+          expect(result).toEqual(expectedSiteNavigation)
+        })
       })
     })
 
-    describe('When we are in pix-pro and we have only the site navigation', () => {
-      beforeEach(() => {
-        process.env = {
-          isPixPro: true,
-        }
-        store = {
-          state: {
-            mainNavigation: [expectedSiteNavigation],
-          },
-        }
+    describe('#showSubNav', () => {
+      describe('When we are in pix-pro and we have the pro navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+            },
+          }
+        })
+
+        it('should not show the subNav', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
+
+          // when
+          const result = component.vm.showSubNav
+
+          // then
+          expect(result).toEqual(false)
+        })
       })
 
-      it('should return the site navigation', () => {
-        // given
-        component = shallowMount(NavigationSliceZone, {
-          mocks: {
-            $store: store,
-          },
-          stubs: {
-            'client-only': true,
-            'push-menu': true,
-            'burger-menu-nav': true,
-            'organization-nav': true,
-            'logos-zone': true,
-            'navigation-zone': true,
-            'actions-zone': true,
-            'pix-pro-sub-nav': true,
-            fa: true,
-          },
+      describe('When we are in pix-pro and we have only the site navigation', () => {
+        beforeEach(() => {
+          process.env = {
+            isPixPro: true,
+          }
+
+          store = {
+            state: {
+              mainNavigation: [expectedSiteNavigation],
+            },
+          }
         })
 
-        // when
-        const result = component.vm.usedMainNavigation
+        it('should show the subNav', () => {
+          // given
+          component = shallowMount(NavigationSliceZone, {
+            mocks: {
+              $store: store,
+            },
+            stubs,
+          })
 
-        // then
-        expect(result).toEqual(expectedSiteNavigation)
+          // when
+          const result = component.vm.showSubNav
+
+          // then
+          expect(result).toEqual(true)
+        })
       })
     })
   })