From 3f8d68626d62ca02ea74176b13b038421f836ea9 Mon Sep 17 00:00:00 2001 From: melanieb Date: Fri, 9 Oct 2020 15:22:30 +0200 Subject: [PATCH] Hide sub nav in Pix Pro when the main navigation is already the pix-pro navigation --- components/BurgerMenuNav.vue | 6 +- components/NavigationSliceZone.vue | 11 +- .../slices/NavigationSliceZone.test.js | 241 ++++++++++-------- 3 files changed, 153 insertions(+), 105 deletions(-) diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue index 560cc3027..d7c24d7d5 100644 --- a/components/BurgerMenuNav.vue +++ b/components/BurgerMenuNav.vue @@ -9,7 +9,7 @@ -
+

Pix Pro

    @@ -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 index 5bfb313bd..0e6107d4a 100644 --- a/components/NavigationSliceZone.vue +++ b/components/NavigationSliceZone.vue @@ -5,6 +5,7 @@ @@ -36,7 +37,7 @@
- + @@ -65,6 +66,14 @@ export default { isPixPro() { return process.env.isPixPro }, + + showSubNav() { + return ( + this.isPixPro && + this.usedMainNavigation.data.navigation_for === 'pix-site' + ) + }, + ...mapState(['mainNavigation', 'organizationNavItems']), usedMainNavigation() { diff --git a/tests/components/slices/NavigationSliceZone.test.js b/tests/components/slices/NavigationSliceZone.test.js index e8dda4e79..76a42a7dd 100644 --- a/tests/components/slices/NavigationSliceZone.test.js +++ b/tests/components/slices/NavigationSliceZone.test.js @@ -3,9 +3,20 @@ 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: { @@ -13,20 +24,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: {}, }, ], }, @@ -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) + }) }) }) })