@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/__tests__/AmeliproHeaderBar.spec.ts

@@ -0,0 +1,312 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproHeaderBar from '../AmeliproHeaderBar.vue'
+import AmeliproHeaderBrandSection from '../AmeliproHeaderBrandSection/AmeliproHeaderBrandSection.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { DisplayTestComponent } from '@tests/helpers/utils'
+import type { ExpectedPropOptions } from '@tests/types'
+import { type PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+import { VSpacer } from 'vuetify/components'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproHeaderBar> = {
+	homeHref: {
+		type: String,
+		default: undefined,
+	},
+	homeLink: {
+		type: [String, Boolean, Object] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	innerWidth: {
+		type: String,
+		default: '100%',
+	},
+	serviceSubTitle: {
+		type: String,
+		default: undefined,
+	},
+	serviceTitle: {
+		type: String,
+		default: undefined,
+	},
+	themeAmelipro: {
+		type: Boolean,
+		default: true,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproHeaderBar> => ({})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproHeaderBar> => ({
+	homeHref: '#modified-home-href',
+	homeLink: '/modified-home-link',
+	innerWidth: '1000px',
+	serviceSubTitle: 'Modified service sub title',
+	serviceTitle: 'Modified service title',
+	themeAmelipro: false,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproHeaderBar)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+const displayWrapper = mount(DisplayTestComponent)
+
+describe('AmeliproHeaderBar', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproHeaderBar>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.header-bar-container').exists()).toBe(true)
+				expect(vueWrapper.find('.header-bar-container').attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.header-bar-container').attributes('id')).toBe('modified-unique-id-container')
+			})
+		})
+
+		describe('header bar', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.header-bar').attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.header-bar').attributes('id')).toBe('modified-unique-id-main-bar')
+			})
+		})
+
+		describe('header bar content', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('xs & smAndDown value set attribute class', async () => {
+				displayWrapper.vm.setXs(false)
+				displayWrapper.vm.setSmAndDown(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.header-bar-content').attributes('class')).toBe('header-bar-content d-flex justify-center px-14 py-2')
+
+				displayWrapper.vm.setSmAndDown(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.header-bar-content').attributes('class')).toBe('header-bar-content d-flex justify-center px-8 py-2')
+
+				displayWrapper.vm.setXs(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.header-bar-content').attributes('class')).toBe('header-bar-content d-flex justify-center px-6 py-2')
+
+				displayWrapper.vm.resetDefaults()
+			})
+		})
+
+		describe('header bar content container', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('prop innerWidth sets attribute style', async () => {
+				expect(vueWrapper.find('.header-bar-content__container').attributes('style')).toBe('width: 100%; max-width: 100%;')
+
+				const { innerWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ innerWidth })
+				expect(vueWrapper.find('.header-bar-content__container').attributes('style')).toBe('width: 1000px; max-width: 1000px;')
+			})
+		})
+
+		describe('navigation bar div', () => {
+			it('prop innerWidth sets attribute style', async () => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, {
+					props: requiredPropValues(),
+					slots: { 'navigation-bar-content': 'Modified navigation bar content' },
+				})
+				expect(vueWrapper.find('.navigation-bar > div').attributes('style')).toBe('width: 100%; max-width: 100%;')
+
+				const { innerWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ innerWidth })
+				expect(vueWrapper.find('.navigation-bar > div').attributes('style')).toBe('width: 1000px; max-width: 1000px;')
+			})
+		})
+	})
+
+	describe('Setting props should update props of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproHeaderBar>>
+
+		describe('AmeliproHeaderBrandSection', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets prop uniqueId', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('uniqueId')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('uniqueId')).toBe('modified-unique-id-brand-section')
+			})
+
+			it('prop homeHref sets prop homeHref', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('homeHref')).toBeUndefined()
+
+				const { homeHref } = modifiedPropValues()
+				await vueWrapper.setProps({ homeHref })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('homeHref')).toBe('#modified-home-href')
+			})
+
+			it('prop homeLink sets prop homeLink', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('homeLink')).toBeUndefined()
+
+				const { homeLink } = modifiedPropValues()
+				await vueWrapper.setProps({ homeLink })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('homeLink')).toBe('/modified-home-link')
+			})
+
+			it('displayWidth sets prop mobileVersion', async () => {
+				displayWrapper.vm.setSmAndDown(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('mobileVersion')).toBe(false)
+
+				displayWrapper.vm.setSmAndDown(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('mobileVersion')).toBe(true)
+
+				displayWrapper.vm.resetDefaults()
+			})
+
+			it('prop serviceSubTitle sets prop serviceSubTitle', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBar).props('serviceSubTitle')).toBeUndefined()
+
+				const { serviceSubTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ serviceSubTitle })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('serviceSubTitle')).toBe('Modified service sub title')
+			})
+
+			it('prop serviceTitle sets prop serviceTitle', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('serviceTitle')).toBeUndefined()
+
+				const { serviceTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ serviceTitle })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('serviceTitle')).toBe('Modified service title')
+			})
+
+			it('prop themeAmelipro sets prop themeAmelipro', async () => {
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('themeAmelipro')).toBe(true)
+
+				const { themeAmelipro } = modifiedPropValues()
+				await vueWrapper.setProps({ themeAmelipro })
+				expect(vueWrapper.findComponent(AmeliproHeaderBrandSection).props('themeAmelipro')).toBe(false)
+			})
+		})
+
+		describe('VSpacer', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+			})
+
+			it('slot #default & display width set VSpacer visibility', async () => {
+				displayWrapper.vm.setSmAndDown(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.findComponent(VSpacer).exists()).toBe(false)
+
+				displayWrapper.vm.setSmAndDown(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.findComponent(VSpacer).exists()).toBe(true)
+
+				displayWrapper.vm.setSmAndDown(false)
+				await vueWrapper.vm.$nextTick()
+				vueWrapper = shallowMount(AmeliproHeaderBar, {
+					props: requiredPropValues(),
+					slots: { default: 'Default slot content' },
+				})
+				expect(vueWrapper.findComponent(VSpacer).exists()).toBe(true)
+			})
+		})
+	})
+
+	describe('Slots', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproHeaderBar>>
+
+		describe('#default', () => {
+			it('slot #default without content', () => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+				expect(vueWrapper.find('.header-bar-content__container').text()).toBe('')
+			})
+
+			it('slot #default with content', () => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, {
+					props: requiredPropValues(),
+					slots: { default: 'Default slot content' },
+				})
+				expect(vueWrapper.find('.header-bar-content__container').text()).toBe('Default slot content')
+			})
+		})
+
+		describe('#navigation-bar-content & navigation bar', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBar, {
+					props: requiredPropValues(),
+					slots: { 'navigation-bar-content': 'Modified navigation bar content' },
+				})
+			})
+
+			it('slot #navigation-bar-content sets navigation bar visibility', () => {
+				expect(vueWrapper.find('.navigation-bar').exists()).toBe(true)
+
+				vueWrapper = shallowMount(AmeliproHeaderBar, { props: requiredPropValues() })
+				expect(vueWrapper.find('.navigation-bar').exists()).toBe(false)
+			})
+
+			it('slot #navigation-bar-content sets navigation bar content', () => {
+				expect(vueWrapper.find('.navigation-bar').text()).toBe('Modified navigation bar content')
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.navigation-bar').attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.navigation-bar').attributes('id')).toBe('modified-unique-id-navigation-bar')
+			})
+
+			it('prop smAndDown value sets attribute class', async () => {
+				displayWrapper.vm.setSmAndDown(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.navigation-bar').classes('px-8')).toBe(false)
+				expect(vueWrapper.find('.navigation-bar').classes('px-14')).toBe(true)
+
+				displayWrapper.vm.setSmAndDown(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.navigation-bar').classes('px-8')).toBe(true)
+				expect(vueWrapper.find('.navigation-bar').classes('px-14')).toBe(false)
+
+				displayWrapper.vm.resetDefaults()
+			})
+		})
+	})
+})

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/__tests__/__snapshots__/AmeliproHeaderBar.spec.ts.snap

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproHeaderBar > Snapshots > renders the component with all properties filled in 1`] = `
+<header
+  class="
+    header-bar-container
+    w-100
+  "
+  id="modified-unique-id-container"
+  role="banner"
+>
+  <div
+    class="
+      bg-ap-white
+      d-block
+      header-bar
+      w-100
+    "
+    id="modified-unique-id-main-bar"
+  >
+    <div class="
+      d-flex
+      header-bar-content
+      justify-center
+      px-14
+      py-2
+    ">
+      <div
+        class="
+          align-center
+          d-flex
+          header-bar-content__container
+        "
+        style="
+          width: 1000px;
+          max-width: 1000px;
+        "
+      >
+        <amelipro-header-brand-section-stub
+          homehref="#modified-home-href"
+          homelink="/modified-home-link"
+          mobileversion="false"
+          servicesubtitle="Modified service sub title"
+          servicetitle="Modified service title"
+          themeamelipro="false"
+          uniqueid="modified-unique-id-brand-section"
+        ></amelipro-header-brand-section-stub>
+        <!-- v-if -->
+      </div>
+    </div>
+    <!-- v-if -->
+  </div>
+</header>
+`;
+
+exports[`AmeliproHeaderBar > Snapshots > renders the component with only required properties filled in 1`] = `
+<header
+  class="
+    header-bar-container
+    w-100
+  "
+  role="banner"
+>
+  <div class="
+    bg-ap-white
+    d-block
+    header-bar
+    w-100
+  ">
+    <div class="
+      d-flex
+      header-bar-content
+      justify-center
+      px-14
+      py-2
+    ">
+      <div
+        class="
+          align-center
+          d-flex
+          header-bar-content__container
+        "
+        style="
+          width: 100%;
+          max-width: 100%;
+        "
+      >
+        <amelipro-header-brand-section-stub
+          mobileversion="false"
+          themeamelipro="true"
+        ></amelipro-header-brand-section-stub>
+        <!-- v-if -->
+      </div>
+    </div>
+    <!-- v-if -->
+  </div>
+</header>
+`;