Add usedMainNavigation in NavigationSliceZone to choose between pix-p…

…ro or pix-site nav

components/NavigationSliceZone.vue

@@ -43,6 +43,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { groupBy } from 'lodash'
 import LogosZone from '@/components/slices/LogosZone'
 import NavigationZone from '@/components/slices/NavigationZone'
 import ActionsZone from '@/components/slices/ActionsZone'
@@ -67,8 +68,13 @@ export default {
     ...mapState(['mainNavigation', 'organizationNavItems']),
 
     usedMainNavigation() {
-      return { ...this.mainNavigation[0] }
+      const groupBySite = groupBy(this.mainNavigation, 'data.navigation_for')
+      if (this.isPixPro && groupBySite['pix-pro']) {
+        return groupBySite['pix-pro'][0]
+      }
+      return groupBySite['pix-site'][0]
     },
+
     burgerMenuLinks() {
       const navigationZone = this.usedMainNavigation.data.body.find(
         (slice) => slice.slice_type === 'navigation_zone'

tests/components/slices/NavigationSliceZone.test.js

@@ -0,0 +1,181 @@
+import { shallowMount } from '@vue/test-utils'
+import NavigationSliceZone from '~/components/NavigationSliceZone'
+
+jest.mock('~/services/document-fetcher')
+
+describe('NavigationSliceZone slice', () => {
+  let component
+  let store
+
+  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: {},
+        },
+      ],
+    },
+  }
+
+  const expectedProNavigation = {
+    data: {
+      navigation_for: 'pix-pro',
+      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: {},
+        },
+      ],
+    },
+  }
+
+  describe('Slice: NavigationSliceZone', () => {
+    afterEach(() => {
+      process.env = {
+        isPixPro: false,
+      }
+    })
+
+    describe('When we are in pix-site and we have two navigation', () => {
+      beforeEach(() => {
+        store = {
+          state: {
+            mainNavigation: [expectedSiteNavigation, expectedProNavigation],
+          },
+        }
+      })
+
+      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,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedSiteNavigation)
+      })
+    })
+
+    describe('When we are in pix-pro and we have two navigation', () => {
+      beforeEach(() => {
+        process.env = {
+          isPixPro: true,
+        }
+        store = {
+          state: {
+            mainNavigation: [expectedSiteNavigation, 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,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedProNavigation)
+      })
+    })
+
+    describe('When we are in pix-pro and we have only the site navigation', () => {
+      beforeEach(() => {
+        process.env = {
+          isPixPro: true,
+        }
+        store = {
+          state: {
+            mainNavigation: [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,
+          },
+        })
+
+        // when
+        const result = component.vm.usedMainNavigation
+
+        // then
+        expect(result).toEqual(expectedSiteNavigation)
+      })
+    })
+  })
+})