@cnamts/synapse 1.0.15 → 1.0.16

package/src/components/Amelipro/AmeliproErrorTemplate/__tests__/AmeliproErrorTemplate.spec.ts

@@ -1,27 +1,167 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import type { ExpectedPropOptions } from '@tests/types'
+import { VueWrapper, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproErrorTemplate from '../AmeliproErrorTemplate.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproErrorTemplate> = {
+	btnHref: {
+		type: String,
+		default: undefined,
+	},
+	btnTo: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	customBtnText: {
+		type: String,
+		default: undefined,
+	},
+	customContentText: {
+		type: String,
+		default: undefined,
+	},
+	customContentTitle: {
+		type: String,
+		default: undefined,
+	},
+	customImgUrl: {
+		type: String,
+		default: undefined,
+	},
+	customTitleText: {
+		type: String,
+		default: undefined,
+	},
+	errorType: {
+		type: String,
+		required: true,
+	},
+	imgMinWidth: {
+		type: String,
+		default: '200',
+	},
+	imgWidth: {
+		type: String,
+		default: '200',
+	},
+	noButton: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproErrorTemplate> => ({ errorType: 'disconnect' })
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproErrorTemplate> => ({
+	btnHref: '#',
+	btnTo: '/home',
+	customBtnText: 'bouton',
+	customContentText: 'content text',
+	customContentTitle: 'content title',
+	customImgUrl: 'custom-img-url',
+	customTitleText: 'title',
+	errorType: 'error404',
+	imgMinWidth: '300',
+	imgWidth: '350',
+	noButton: true,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproErrorTemplate)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproErrorTemplate', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproErrorTemplate, {
-			props: {
-				btnHref: '#modified-btn-href',
-				customBtnText: 'Modified custom btn text',
-				customContentText: 'Modified content text',
-				customContentTitle: 'Modified content title',
-				customImgUrl: 'modified-custom-img-url',
-				customTitleText: 'Modified title',
-				errorType: 'error500',
-				imgMinWidth: '300',
-				imgWidth: '350',
-				uniqueId: 'error-template-unique-id',
-			},
-			slots: {
-				default: 'My Button',
-			},
+	let vueWrapper: VueWrapper<InstanceType<typeof AmeliproErrorTemplate>>
+
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('setting props should update props of inner components', () => {
+		describe('Main > #image > img', () => {
+			beforeEach(() => {
+				// Slots => mount
+				vueWrapper = mount(AmeliproErrorTemplate, { props: requiredPropValues() })
+			})
+
+			it('img attributes reflect props (min/max/width and src when customImgUrl provided)', async () => {
+				const img = () => vueWrapper.find('.amelipro-error-template__img')
+
+				// defaults
+				expect(img().attributes('min-width')).toBe(testHelper.default('imgMinWidth'))
+				expect(img().attributes('max-width')).toBe(testHelper.default('imgWidth'))
+				expect(img().attributes('width')).toBe(testHelper.default('imgWidth'))
+
+				// set modified props (including customImgUrl)
+				const modified = modifiedPropValues()
+				await vueWrapper.setProps(modified)
+
+				expect(img().attributes('min-width')).toBe(testHelper.modified('imgMinWidth'))
+				expect(img().attributes('max-width')).toBe(testHelper.modified('imgWidth'))
+				expect(img().attributes('width')).toBe(testHelper.modified('imgWidth'))
+
+				// customImgUrl should map to src when provided
+				expect(img().attributes('src')).toBe(testHelper.modified('customImgUrl'))
+			})
+		})
+	})
+
+	describe('Functions', () => {
+		// loadGlobalData ne se réexécute pas si errorType change.
+		// Il faut recréer un wrapper différent pour chaque test
+		it('tests loadGlobalData for error 401', () => {
+			vueWrapper = mount(AmeliproErrorTemplate, { props: requiredPropValues() })
+
+			expect(vueWrapper.find('.amelipro-error-template__title').text()).toBe('Déconnexion')
+			expect(vueWrapper.find('.amelipro-error-template__content__text p').text()).toBe('Merci pour votre visite, à très bientôt !')
+			expect(vueWrapper.find('.amelipro-error-template-content-title').text()).toBe('Vous êtes déconnecté(e)')
+			expect(vueWrapper.find('button').text()).toBe('Page d’accueil')
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		it('tests loadGlobalData for error 404', () => {
+			vueWrapper = mount(AmeliproErrorTemplate, {
+				props: {
+					...requiredPropValues(),
+					errorType: 'error404',
+				},
+			})
+
+			expect(vueWrapper.exists()).toBe(true)
+			expect(vueWrapper.find('.amelipro-error-template__title').text()).toBe('Erreur 404')
+			expect(vueWrapper.find('.amelipro-error-template__content__text p').text()).toBe('La page que vous essayez d’afficher n’existe plus ou a été déplacée.')
+			expect(vueWrapper.find('.amelipro-error-template-content-title').text()).toBe('Page non trouvée ou inexistante - Erreur 404')
+			expect(vueWrapper.find('button').text()).toBe('Page d’accueil')
+		})
+	})
+
+	describe('Events', () => {
+		it('test emitClickEvent', async () => {
+			vueWrapper = mount(AmeliproErrorTemplate, {
+				props: {
+					...requiredPropValues(),
+					errorType: 'error404',
+				},
+			})
+
+			expect(vueWrapper.emitted('click')).toStrictEqual(undefined)
+			await vueWrapper.find('button').trigger('click')
+			expect(vueWrapper.emitted('click')).toStrictEqual([[]])
+		})
 	})
 })

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

@@ -1,184 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproErrorTemplate > render correctly 1`] = `
+exports[`AmeliproErrorTemplate > Snapshots > renders the component with all properties filled in 1`] = `
 <div
   class="amelipro-error-template"
-  id="error-template-unique-id-container"
+  id="modified-unique-id-container"
 >
-  <div
-    class="
-      amelipro-card
-      amelipro-error-template__card
-      d-flex
-      flex-column
-      flex-md-row
-      w-100
-    "
-    id="error-template-unique-id-card-container"
-    style="
-      background-color: #FFFFFF;
-      border: 1px solid #DDDEDE;
-    "
-  >
-    <div
-      class="amelipro-card__left-part"
-      id="error-template-unique-id-card-left-part"
-      style="width: 100%;"
-    >
-      <div
-        class="
-          amelipro-card__header
-          w-100
-        "
-        id="error-template-unique-id-card-header"
-      >
-        <div class="
-          align-sm-center
-          amelipro-card__header-content
-          d-flex
-          flex-column
-          flex-sm-row
-          w-100
-        ">
-          <div
-            class="amelipro-card__header-slot-wrapper--left"
-            id="error-template-unique-id-card-header-left-part"
-            style="width: 100%;"
-          >
-            <h1
-              class="
-                amelipro-error-template__title
-                font-weight-semibold
-                mb-4
-                text-uppercase
-              "
-              id="error-template-unique-id-title"
-            >
-              Modified title
-            </h1>
-          </div>
-          <!-- v-if -->
-        </div>
-      </div>
-      <div
-        class="amelipro-card__content"
-        id="error-template-unique-id-card-content"
-      >
-        <div
-          class="
-            align-center
-            amelipro-error-template__content
-            d-flex
-            flex-column
-          "
-          id="error-template-unique-id-content"
-        >
-          <img
-            alt=""
-            class="
-              amelipro-error-template__img
-              mx-4
-              my-2
-            "
-            id="error-template-unique-id-img"
-            max-width="350"
-            min-width="300"
-            src="modified-custom-img-url"
-            width="350"
-          />
-          <h2
-            class="
-              amelipro-error-template-content-title
-              font-weight-semibold
-              text-ap-parme-darken-1
-            "
-            id="error-template-unique-id-content-title"
-          >
-            Modified content title
-          </h2>
-          My Button
-          <a
-            class="
-              amelipro-btn
-              amelipro-error-template-content-btn
-              amelipro-error-template-content-btn
-              elevation-0
-              mt-2
-              mt-2
-              text-ap-blue-darken-1
-              text-none
-              text-none
-              v-btn
-              v-btn--density-default
-              v-btn--flat
-              v-btn--size-default
-              v-btn--variant-text
-              v-theme--light
-            "
-            href="#modified-btn-href"
-            id="error-template-unique-id-content-btn"
-            style="
-              height: auto;
-              min-height: auto;
-              padding: 0px;
-            "
-            type="button"
-          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-            
-          <!----><span
-            class="v-btn__content"
-            data-no-activator=""
-          ><span class="
-            align-center
-            amelipro-custom-btn
-            d-flex
-            flex-row
-          ">Modified custom btn text <span
-            class="
-              amelipro-btn__icon--right
-              amelipro-icon
-              d-block
-            "
-            id="error-template-unique-id-content-btn-icon"
-          ><span
-            class="amelipro-external-icon"
-            style="
-              background-color: transparent;
-              border-radius: 50%;
-              color: #00749C;
-              padding: 0px;
-              height: 1.5rem;
-              width: 1.5rem;
-            "
-          ><i
-            aria-hidden="true"
-            class="
-              M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z
-              mdi
-              notranslate
-              text-ap-blue-darken-1
-              v-icon
-              v-theme--light
-            "
-            style="
-              font-size: 100%;
-              height: 100%;
-              width: 100%;
-              display: block;
-            "
-          ></i></span></span>
-            
-          <!-- v-if --></span></span>
-            
-          <!---->
-            
-          <!---->
-          </a>
-          <!-- v-if -->
-        </div>
-      </div>
-    </div>
-    <!-- v-if -->
-  </div>
+  <amelipro-card-stub
+    bordercolor="ap-grey-lighten-2"
+    bordered="true"
+    cardcolor="ap-white"
+    classes="amelipro-error-template__card"
+    divider="false"
+    headerrightwidth="50%"
+    nocardheader="false"
+    rightpart="false"
+    rightpartwidth="25%"
+    titlecolor="ap-grey-darken-1"
+    titlelevel="2"
+    uniqueid="modified-unique-id-card"
+  ></amelipro-card-stub>
+</div>
+`;
+
+exports[`AmeliproErrorTemplate > Snapshots > renders the component with only required properties filled in 1`] = `
+<div class="amelipro-error-template">
+  <amelipro-card-stub
+    bordercolor="ap-grey-lighten-2"
+    bordered="true"
+    cardcolor="ap-white"
+    classes="amelipro-error-template__card"
+    divider="false"
+    headerrightwidth="50%"
+    nocardheader="false"
+    rightpart="false"
+    rightpartwidth="25%"
+    titlecolor="ap-grey-darken-1"
+    titlelevel="2"
+  ></amelipro-card-stub>
 </div>
 `;

package/src/components/Amelipro/AmeliproFilePreview/AmeliproFilePreview.vue

@@ -103,6 +103,7 @@
 				<object
 					v-if="mdAndUp"
 					:id="`${uniqueId}-pdf-display`"
+					class="amelipro-file-preview__pdf-display"
 					:aria-label="pdfDisplayTitle"
 					:height="previewHeight"
 					:data="fileSrc"

package/src/components/Amelipro/AmeliproFilePreview/__tests__/AmeliproFilePreview.spec.ts

@@ -1,24 +1,253 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import type { ExpectedPropOptions } from '@tests/types'
+import { mount, RouterLinkStub, shallowMount, VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import AmeliproFilePreview from '../AmeliproFilePreview.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { DisplayTestComponent } from '@tests/helpers/utils'
+import TestHelper from '@tests/helpers/TestHelper'
+import { AmeliproAccordion, AmeliproCard } from '@/components'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproFilePreview> = {
+	cardTitle: {
+		type: String,
+		required: true,
+	},
+	downloadBtnText: {
+		type: String,
+		default: 'Télécharger',
+	},
+	fileName: {
+		type: String,
+		required: true,
+	},
+	fileSrc: {
+		type: String,
+		required: true,
+	},
+	foldable: {
+		type: Boolean,
+		default: false,
+	},
+	pdfDisplayTitle: {
+		type: String,
+		default: 'Aperçu du fichier PDF',
+	},
+	isOpen: {
+		type: Boolean,
+		default: false,
+	},
+	linkTitle: {
+		type: String,
+		default: 'Télécharger le fichier au Format PDF',
+	},
+	previewHeight: {
+		type: Number,
+		default: 550,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproFilePreview> => ({
+	cardTitle: 'Required card title',
+	fileName: 'Required file name',
+	fileSrc: 'required-file-src',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproFilePreview> => ({
+	cardTitle: 'The card title',
+	downloadBtnText: 'The download btn text',
+	fileName: 'The file name',
+	fileSrc: 'the-file-src',
+	foldable: true,
+	pdfDisplayTitle: 'The pdf title',
+	isOpen: true,
+	linkTitle: 'The link title',
+	previewHeight: 400,
+	uniqueId: 'test-id',
+})
+
+const displayWrapper = mount(DisplayTestComponent)
+const testHelper = new TestHelper(AmeliproFilePreview)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproFilePreview', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproFilePreview, {
-			props: {
-				cardTitle: 'Modified card title',
-				downloadBtnText: 'Modified download btn text',
-				fileName: 'file name',
-				fileSrc: 'file-src',
-				foldable: true,
-				pdfDisplayTitle: 'Modified pdf display title',
-				isOpen: true,
-				linkTitle: 'Modified link title',
-				previewHeight: 400,
-				uniqueId: 'pdf-preview-unique-id',
-			},
-		})
-
-		expect(wrapper.html()).toMatchSnapshot()
+	let vueWrapper: VueWrapper<InstanceType<typeof AmeliproFilePreview>>
+	displayWrapper.vm.setMdAndUp(true)
+
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('setting props should update props and attributes of inner components', () => {
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproFilePreview, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						AmeliproCard,
+						RouterLink: RouterLinkStub,
+					},
+				},
+			})
+		})
+
+		describe('AmeliproCard', () => {
+			it('prop cardTitle sets prop cardTitle', async () => {
+				expect(vueWrapper.findComponent(AmeliproCard).props('cardTitle')).toBe(requiredPropValues().cardTitle)
+
+				const { cardTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ cardTitle })
+				expect(vueWrapper.findComponent(AmeliproCard).props('cardTitle')).toBe(modifiedPropValues().cardTitle)
+			})
+		})
+
+		describe('AmeliproAccordion', () => {
+			it('prop cardTitle sets prop accordionTitle', async () => {
+				await vueWrapper.setProps({ foldable: true })
+				expect(vueWrapper.findComponent(AmeliproAccordion).props('accordionTitle')).toBe(requiredPropValues().cardTitle)
+
+				const { cardTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ cardTitle })
+				expect(vueWrapper.findComponent(AmeliproAccordion).props('accordionTitle')).toBe(modifiedPropValues().cardTitle)
+			})
+		})
+	})
+
+	describe('setting props should update attributes of inner tags', () => {
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproFilePreview, {
+				props: requiredPropValues(),
+				stubs: {
+					AmeliproCard,
+					RouterLink: RouterLinkStub,
+				},
+			})
+		})
+
+		describe('header link', () => {
+			it('prop fileName sets attribute download', async () => {
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('download')).toBe('Required file name')
+
+				await vueWrapper.setProps({ fileName: 'The new file name' })
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('download')).toBe('The new file name')
+			})
+
+			it('prop fileSrc sets attribute href', async () => {
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('href')).toBe('required-file-src')
+
+				await vueWrapper.setProps({ fileSrc: 'new-file-src' })
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('href')).toBe('new-file-src')
+			})
+
+			it('prop linkTitle sets attribute title', async () => {
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('title')).toBe('Télécharger le fichier au Format PDF')
+
+				const { linkTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ linkTitle })
+				expect(vueWrapper.find('.amelipro-file-preview__header__link').attributes('title')).toBe('The link title')
+			})
+		})
+
+		describe('pdf display', () => {
+			it('prop fileSrc sets attribute src', async () => {
+				expect(vueWrapper.find('.amelipro-file-preview__pdf-display').attributes('data')).toBe('required-file-src')
+
+				await vueWrapper.setProps({ fileSrc: 'new-file-src' })
+				expect(vueWrapper.find('.amelipro-file-preview__pdf-display').attributes('data')).toBe('new-file-src')
+			})
+
+			it('prop pdfDisplayTitle sets attribute title', async () => {
+				expect(vueWrapper.find('.amelipro-file-preview__pdf-display').attributes('aria-label')).toBe('Aperçu du fichier PDF')
+
+				const { pdfDisplayTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ pdfDisplayTitle })
+				expect(vueWrapper.find('.amelipro-file-preview__pdf-display').attributes('aria-label')).toBe('The pdf title')
+			})
+		})
+
+		describe('download link', () => {
+			beforeEach(() => {
+				displayWrapper.vm.setMdAndUp(false)
+			})
+			afterEach(() => {
+				displayWrapper.vm.setMdAndUp(true)
+			})
+
+			it('prop fileName sets attribute download', async () => {
+				expect(vueWrapper.find('.download-file-link').attributes('download')).toBe('Required file name')
+
+				await vueWrapper.setProps({ fileName: 'The new file name' })
+				expect(vueWrapper.find('.download-file-link').attributes('download')).toBe('The new file name')
+			})
+
+			it('prop fileSrc sets attribute href', async () => {
+				expect(vueWrapper.find('.download-file-link').attributes('href')).toBe('required-file-src')
+
+				await vueWrapper.setProps({ fileSrc: 'new-file-src' })
+				expect(vueWrapper.find('.download-file-link').attributes('href')).toBe('new-file-src')
+			})
+
+			it('prop linkTitle sets attribute title', async () => {
+				expect(vueWrapper.find('.download-file-link').attributes('title')).toBe('Télécharger le fichier au Format PDF')
+
+				const { linkTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ linkTitle })
+				expect(vueWrapper.find('.download-file-link').attributes('title')).toBe('The link title')
+			})
+		})
+	})
+
+	describe('visibility of some elements depends on screen size', () => {
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproFilePreview, {
+				props: modifiedPropValues(),
+				stubs: {
+					AmeliproCard,
+					RouterLink: RouterLinkStub,
+				},
+			})
+		})
+
+		it('header right visibility', async () => {
+			displayWrapper.vm.setMdAndUp(true)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.amelipro-file-preview__header-right').exists()).toBe(true)
+
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.amelipro-file-preview__header-right').exists()).toBe(false)
+		})
+
+		it('pdf display visibility', async () => {
+			displayWrapper.vm.setMdAndUp(true)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.amelipro-file-preview__pdf-display').exists()).toBe(true)
+
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.amelipro-file-preview__pdf-display').exists()).toBe(false)
+		})
+
+		it('download file link visibility', async () => {
+			displayWrapper.vm.setMdAndUp(true)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.download-file-link').exists()).toBe(false)
+
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('.download-file-link').exists()).toBe(true)
+		})
 	})
 })