@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproFooter/__tests__/__snapshots__/AmeliproFooter.spec.ts.snap

@@ -0,0 +1,318 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproFooter > Snapshots > renders the component with all properties filled in 1`] = `
+<footer
+  class="
+    amelipro-footer
+    bg-ap-blue-darken-2
+    d-block
+    justify-center
+    px-8
+    py-3
+    w-100
+  "
+  id="modified-unique-id-container"
+  role="contentinfo"
+  style="position: relative;"
+>
+  <div
+    class="
+      align-center
+      amelipro-footer__content
+      d-flex
+      justify-center
+    "
+    id="modified-unique-id-content"
+    style="width: 100%;"
+  >
+    <!-- v-if -->
+    <!-- v-if -->
+    <!-- v-if -->
+    <p
+      class="
+        amelipro-footer__backoffice-text
+        font-weight-bold
+        mb-0
+        text-ap-white
+        text-center
+      "
+      id="modified-unique-id-backoffice-text"
+    >
+      CNAM - Modified back office text - Version Modified version
+    </p>
+  </div>
+  <!-- v-if -->
+</footer>
+`;
+
+exports[`AmeliproFooter > Snapshots > renders the component with only required properties filled in 1`] = `
+<footer
+  class="
+    amelipro-footer
+    bg-ap-blue-darken-2
+    d-block
+    justify-center
+    px-8
+    py-3
+    w-100
+  "
+  role="contentinfo"
+  style="position: relative;"
+>
+  <div
+    class="
+      align-center
+      amelipro-footer__content
+      d-flex
+      flex-row
+      justify-space-between
+    "
+    style="width: 100%;"
+  >
+    <p class="
+      font-weight-bold
+      footer-version
+      mb-0
+      mr-4
+      text-ap-white
+      text-caption
+    ">
+      X.X.X
+    </p>
+    <div class="
+      amelipro-footer__contact
+      mr-4
+      mt-1
+    ">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="
+          amelipro-footer__contact__link
+          text-ap-white
+          text-decoration-none
+        "
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        href="tel:3608"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="true"
+        textcolor="ap-white"
+        type="button"
+        underline="false"
+      ></amelipro-btn-stub>
+    </div>
+    <ul class="
+      align-center
+      amelipro-footer__list
+      d-flex
+      flex-wrap
+      justify-end
+      list-style-none
+      mt-2
+      mt-sm-0
+    ">
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__site-map-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__about-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__config-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__legal-notice-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__cgu-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+      <li class="
+        footer-list-item
+        pa-2
+      ">
+        <amelipro-btn-stub
+          badge="false"
+          badgebgcolor="ap-pink"
+          badgecolor="ap-white"
+          bordered="false"
+          class="
+            amelipro-footer__a11y-btn
+            text-none
+          "
+          color="ap-white"
+          disabled="false"
+          hovercolor="ap-white"
+          hoverunderline="true"
+          iconbgcolor="transparent"
+          iconbordered="false"
+          iconleft="false"
+          infoblock="false"
+          minheight="2.5rem"
+          size="60px"
+          text="true"
+          textcolor="ap-white"
+          type="button"
+          underline="false"
+        ></amelipro-btn-stub>
+      </li>
+    </ul>
+    <!-- v-if -->
+  </div>
+  <div class="
+    align-center
+    d-none
+    flex-column
+    footer-version--mobile
+  ">
+    <p class="
+      font-weight-bold
+      mb-0
+      mt-2
+      text-ap-white
+      text-caption
+    ">
+      X.X.X
+    </p>
+  </div>
+</footer>
+`;

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

@@ -0,0 +1,167 @@
+import { type RouteLocationRaw, RouterLink } from 'vue-router'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import AmeliproHeaderBrandSection from '../AmeliproHeaderBrandSection.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproHeaderBrandSection> = {
+	homeHref: {
+		type: String,
+		default: undefined,
+	},
+	homeLink: {
+		type: [String, Boolean, Object] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	mobileVersion: {
+		type: Boolean,
+		default: false,
+	},
+	serviceSubTitle: {
+		type: String,
+		default: undefined,
+	},
+	serviceTitle: {
+		type: String,
+		default: undefined,
+	},
+	themeAmelipro: {
+		type: Boolean,
+		default: true,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Props requises
+const requiredPropValues = (): ComponentProps<typeof AmeliproHeaderBrandSection> => ({})
+
+// Props modifiées
+const modifiedPropValues = (): ComponentProps<typeof AmeliproHeaderBrandSection> => ({
+	homeHref: '/accueil',
+	homeLink: '/accueil-link',
+	mobileVersion: true,
+	serviceSubTitle: 'Modified sub title',
+	serviceTitle: 'Modified service title',
+	themeAmelipro: false,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproHeaderBrandSection)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproHeaderBrandSection', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: ReturnType<typeof shallowMount>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.attributes('id')).toBe(undefined)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+			})
+		})
+
+		describe('Component', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: requiredPropValues() })
+			})
+			it('prop homeHref sets <a> as root link', async () => {
+				expect(vueWrapper.find('a.header-home-link').exists()).toBe(false)
+
+				const { homeHref } = modifiedPropValues()
+				await vueWrapper.setProps({ homeHref })
+				expect(vueWrapper.find('a.header-home-link').exists()).toBe(true)
+			})
+
+			// TODO: corriger le rendu du Component
+			it.skip('prop homeHref undefined uses RouterLink', () => {
+				expect(vueWrapper.findComponent(RouterLink).exists()).toBe(true)
+			})
+		})
+
+		// TODO: corriger le rendu du slot pour le titre
+		describe.skip('Titre', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: requiredPropValues() })
+			})
+			it('prop serviceTitle sets service title', async () => {
+				expect(vueWrapper.find('h1.header-title').exists()).toBe(false)
+
+				const { serviceTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ serviceTitle })
+				expect(vueWrapper.find('h1.header-title').text()).toBe(testHelper.modified('serviceTitle'))
+			})
+		})
+
+		// TODO: corriger le rendu du slot pour le sous-titre
+		describe.skip('Sous-titre', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: requiredPropValues() })
+			})
+			it('prop uniqueId sets attribute id', async () => {
+				vueWrapper = mount(AmeliproHeaderBrandSection, {
+					props: {
+						...requiredPropValues(),
+						serviceSubTitle: modifiedPropValues().serviceSubTitle,
+						serviceTitle: modifiedPropValues().serviceTitle,
+					},
+				})
+				expect(vueWrapper.find('h2.header-title').attributes('id')).toBe(undefined)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('h2.header-title').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+			})
+
+			it('prop serviceSubTitle sets subtitle', async () => {
+				expect(vueWrapper.find('h2.header-title').exists()).toBe(false)
+
+				const { serviceSubTitle, serviceTitle } = modifiedPropValues()
+				// Sous-titre seul ne s'affiche pas
+				await vueWrapper.setProps({ serviceSubTitle })
+				expect(vueWrapper.find('h2.header-title').exists()).toBe(false)
+
+				// Avec le titre, le sous-titre s'affiche
+				await vueWrapper.setProps({ serviceTitle })
+				expect(vueWrapper.find('h2.header-title').text()).toBe(testHelper.modified('serviceSubTitle'))
+			})
+		})
+
+		describe('Logo', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: requiredPropValues() })
+			})
+			it('prop themeAmelipro true displays logo', () => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: { ...requiredPropValues(), themeAmelipro: true } })
+				expect(vueWrapper.find('img.logo-amelipro').exists()).toBe(true)
+			})
+
+			it('prop themeAmelipro false hides logo', () => {
+				vueWrapper = shallowMount(AmeliproHeaderBrandSection, { props: { ...requiredPropValues(), serviceTitle: 'Titre', themeAmelipro: false } })
+				expect(vueWrapper.find('img.logo-amelipro').exists()).toBe(false)
+			})
+		})
+	})
+})

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

@@ -0,0 +1,100 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproHeaderBrandSection > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    d-flex
+    header-brand-section
+  "
+  id="modified-unique-id-container"
+>
+  <a
+    aria-label="Retour à l’accueil, Modified service title Modified sub title"
+    class="
+      align-center
+      d-flex
+      header-home-link
+      w-100
+    "
+    href="/accueil"
+    id="modified-unique-id-logo-link"
+    title="Retour à l’accueil, Modified service title Modified sub title"
+  >
+    <amelipro-logo-am-stub
+    hidesignature="false"
+    size="small"
+    uniqueid="modified-unique-id-logo-am"
+  ></amelipro-logo-am-stub><svg
+    aria-hidden="true"
+    class="header-home-link__divider"
+    fill="#0C419A"
+    focusable="false"
+    height="40"
+    role="img"
+    viewBox="0 0 22 64"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+      <path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
+    </svg><span
+    class="
+      d-flex
+      flex-column
+      justify-center
+      text-ap-blue-darken-1
+    "
+    id="modified-unique-id-title-wrapper"
+  ><h1
+    class="
+      font-weight-bold
+      header-title
+    "
+    id="modified-unique-id-title"
+  >Modified service title</h1><h2
+    class="header-title"
+    id="modified-unique-id-subtitle"
+  >Modified sub title</h2></span>
+  </a>
+</div>
+`;
+
+exports[`AmeliproHeaderBrandSection > Snapshots > renders the component with only required properties filled in 1`] = `
+<div class="
+  d-flex
+  header-brand-section
+">
+  <button
+    aria-label="Retour à l’accueil"
+    class="
+      align-center
+      d-flex
+      header-home-link
+      w-100
+    "
+    title="Retour à l’accueil"
+  >
+    <amelipro-logo-am-stub
+      hidesignature="false"
+      size="normal"
+    ></amelipro-logo-am-stub>
+    <svg
+      aria-hidden="true"
+      class="header-home-link__divider"
+      fill="#006386"
+      focusable="false"
+      height="64"
+      role="img"
+      viewBox="0 0 22 64"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
+    </svg>
+    <img
+      alt="AmeliPro"
+      class="logo-amelipro"
+      src="/src/assets/amelipro/img/amelipro.svg"
+    />
+  </button>
+</div>
+`;