@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+	import { required } from '@/utils/rules/required'
+	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+	import { computed, ref } from 'vue'
+	import CookiesTable from '../CookiesTable/CookiesTable.vue'
+	import type { CookieTypes, Cookie } from '../types'
+	import { locales } from './locales'
+
+	defineProps<{
+		type: CookieTypes
+		tableItems: Cookie[]
+	}>()
+
+	const status = defineModel<boolean | undefined>()
+
+	const parsedValue = computed(() => {
+		if (status.value === true) {
+			return 'accept'
+		}
+		if (status.value === false) {
+			return 'reject'
+		}
+		return undefined
+	})
+
+	const open = ref(false)
+	function toggleDetails(event: ToggleEvent): void {
+		open.value = event.newState === 'open'
+	}
+</script>
+
+<template>
+	<div class="vd-cookies-information">
+		<h2 class="text-subtitle-1 font-weight-bold mb-2">
+			{{ locales[type].title }}
+		</h2>
+
+		<p class="mb-4">
+			{{ locales[type].description }}
+		</p>
+
+		<details @toggle="toggleDetails">
+			<summary class="mb-1">
+				{{ open ? locales.hideInformation : locales.showInformation }}
+
+				<VIcon
+					class="mr-2"
+					data-test="chevron"
+				>
+					{{ open ? mdiChevronUp : mdiChevronDown }}
+				</VIcon>
+			</summary>
+
+			<CookiesTable
+				:items="tableItems"
+				class="mb-2"
+			>
+				<template
+					v-for="(_, slotName) in $slots"
+					#[slotName]="slotProps"
+				>
+					<slot
+						:name="slotName"
+						v-bind="slotProps ?? {}"
+					/>
+				</template>
+			</CookiesTable>
+		</details>
+
+		<VRadioGroup
+			v-if="type !== 'essentials'"
+			:model-value="parsedValue"
+			:rules="[required]"
+			data-test-id="radio-group"
+			inline
+			hide-details="auto"
+			class="vd-cookies-information__radio-group"
+			@update:model-value="status = $event === 'accept'"
+		>
+			<VSpacer />
+
+			<VRadio
+				:label="locales.reject"
+				:value="'reject'"
+				color="primary"
+			/>
+
+			<VRadio
+				:label="locales.accept"
+				:value="'accept'"
+				class="mr-0"
+				color="primary"
+			/>
+		</VRadioGroup>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+details > summary {
+	cursor: pointer;
+	list-style: none;
+	user-select: none;
+
+	&::marker,
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.vd-cookies-information__radio-group {
+	margin-top: 0;
+
+	:deep(.v-input__details) {
+		padding: 0;
+	}
+
+	:deep(.v-messages) {
+		text-align: end;
+	}
+}
+</style>

package/src/components/CookiesSelection/CookiesInformation/locales.ts

@@ -0,0 +1,21 @@
+export const locales = {
+	essentials: {
+		title: 'Cookies requis',
+		description:
+			'Ces cookies sont indispensables au fonctionnement du site et ne peuvent être désactivés.',
+	},
+	functional: {
+		title: 'Cookies fonctionnels',
+		description:
+			'Ces cookies sont utilisés pour capturer vos préférences sur notre site. Ils permettent de vous assurer un confort dans votre navigation.',
+	},
+	analytics: {
+		title: 'Cookies d’analyse',
+		description:
+			'Ces cookies sont dédiés à l’amélioration de notre site en analysant votre expérience d’utilisation. Ils nous sont très utiles pour vous proposer un site de bonne qualité.',
+	},
+	showInformation: 'Afficher les cookies',
+	hideInformation: 'Masquer les cookies',
+	reject: 'Refuser',
+	accept: 'Accepter',
+} as const

package/src/components/CookiesSelection/CookiesInformation/tests/CookiesInformation.spec.ts

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import CookiesInformation from '../CookiesInformation.vue'
+import { locales } from '../locales'
+
+const cookies = [
+	{
+		name: 'session',
+		description: 'Sauvegarde la session pour rester connecté.',
+		conservation: '20 heures',
+	},
+	{
+		name: 'cookie_policy',
+		description: 'Sauvegarde les préférences de cookies.',
+		conservation: '1 an',
+	},
+]
+
+describe('CookiesInformation', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(CookiesInformation, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				tableItems: cookies,
+				type: 'functional',
+			},
+		})
+
+		expect(wrapper.text()).toContain(locales.functional.title)
+		expect(wrapper.text()).toContain(cookies[0].name)
+		expect(wrapper.text()).toContain(cookies[1].name)
+		expect(wrapper.text()).toContain(cookies[0].description)
+		expect(wrapper.text()).toContain(cookies[1].description)
+		expect(wrapper.text()).toContain(cookies[0].conservation)
+		expect(wrapper.text()).toContain(cookies[1].conservation)
+		expect(wrapper.findAll('tr')).toHaveLength(3)
+	})
+
+	it('renders correctly without items', () => {
+		const wrapper = mount(CookiesInformation, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				type: 'functional',
+				tableItems: [],
+			},
+		})
+
+		expect(wrapper.findAll('tr')).toHaveLength(1)
+	})
+
+	it('renders correctly when details is toggled', async () => {
+		const wrapper = mount(CookiesInformation, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				tableItems: cookies,
+				type: 'functional',
+			},
+		})
+
+		expect(wrapper.find('thead').isVisible()).toBe(false)
+		const details = wrapper.find('details')
+		const chevronClosed = wrapper.find('[data-test="chevron"]').html()
+		expect(chevronClosed).toMatchInlineSnapshot(`"<i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i>"`)
+
+		details.element.open = true
+		await details.trigger('toggle', { newState: 'open' })
+
+		expect(wrapper.find('thead').isVisible()).toBe(true)
+		const chevronOpen = wrapper.find('[data-test="chevron"]').html()
+		expect(chevronOpen).not.toEqual(chevronClosed)
+		expect(chevronOpen).toMatchInlineSnapshot(`"<i data-v-2ca04413="" class="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i>"`)
+	})
+
+	it('update the radio when the modelValue change', async () => {
+		const wrapper = mount(CookiesInformation, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				tableItems: cookies,
+				type: 'functional',
+				modelValue: true,
+			},
+		})
+
+		const radios = wrapper.findAll<HTMLInputElement>('input[type="radio"]')
+
+		expect(radios[0].element.checked).toBe(false)
+		expect(radios[1].element.checked).toBe(true)
+
+		await wrapper.setProps({ modelValue: false })
+
+		expect(radios[0].element.checked).toBe(true)
+		expect(radios[1].element.checked).toBe(false)
+	})
+
+	it('do not set the radio when the modelValue is undefined', async () => {
+		const wrapper = mount(CookiesInformation, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				tableItems: cookies,
+				type: 'functional',
+				modelValue: undefined,
+			},
+		})
+
+		const radios = wrapper.findAll<HTMLInputElement>('input[type="radio"]')
+
+		expect(radios[0].element.checked).toBe(false)
+		expect(radios[1].element.checked).toBe(false)
+	})
+})

package/src/components/CookiesSelection/CookiesSelection.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import type { VForm } from 'vuetify/components'
+	import CookiesInformation from './CookiesInformation/CookiesInformation.vue'
+	import { locales } from './locales'
+	import type { CookieTypes, CookiesItems, Preferences } from './types'
+
+	const props = defineProps<{
+		items: CookiesItems
+	}>()
+
+	const emits = defineEmits<{
+		submit: [preferences: Partial<Preferences>]
+	}>()
+
+	const form = ref<VForm | null>(null)
+
+	const preferences = ref<Preferences>({
+		essentials: undefined,
+		functional: undefined,
+		analytics: undefined,
+	})
+
+	const filteredPreferences = computed(() => {
+		const filtered: Partial<Preferences> = {}
+
+		Object.entries(preferences.value).forEach(([key, value]) => {
+			if (key != 'essentials' && props.items[key as CookieTypes]) {
+				filtered[key as CookieTypes] = value
+			}
+		})
+
+		return filtered
+	})
+
+	function setGlobalPreferences(value: boolean): void {
+		preferences.value['functional'] = value
+		preferences.value['analytics'] = value
+	}
+
+	async function submitForm(): Promise<void> {
+		const { valid } = await form.value!.validate()
+
+		if (!valid) {
+			return
+		}
+
+		emits('submit', filteredPreferences.value)
+	}
+</script>
+
+<template>
+	<VCard
+		v-if="items"
+		elevation="0"
+		color="transparent"
+		class="vd-cookies-card"
+	>
+		<VForm ref="form">
+			<p class="mb-4">
+				{{ locales.description }}
+			</p>
+
+			<p class="mb-4">
+				{{ locales.cookieDefinition }}
+			</p>
+
+			<div class="d-flex flex-wrap justify-end mx-n2 mt-n2 mb-6">
+				<VBtn
+					data-test-id="reject-all"
+					color="primary"
+					variant="outlined"
+					class="ma-2"
+					@click="setGlobalPreferences(false)"
+				>
+					{{ locales.rejectAll }}
+				</VBtn>
+
+				<VBtn
+					data-test-id="accept-all"
+					color="primary"
+					variant="outlined"
+					class="ma-2"
+					@click="setGlobalPreferences(true)"
+				>
+					{{ locales.acceptAll }}
+				</VBtn>
+			</div>
+
+			<template
+				v-for="(cookies, cookieType) in items"
+				:key="cookieType"
+			>
+				<CookiesInformation
+					v-if="cookies"
+					v-model="preferences[cookieType]"
+					:type="cookieType"
+					:table-items="cookies"
+					class="mb-6"
+				>
+					<template
+						v-for="(_, slotName) in $slots"
+						#[slotName]="slotProps"
+					>
+						<slot
+							v-if="String(slotName).startsWith('cookie-description')"
+							:name="slotName"
+							v-bind="slotProps ?? {}"
+						/>
+					</template>
+				</CookiesInformation>
+			</template>
+
+			<div class="d-flex mt-16">
+				<VSpacer />
+
+				<VBtn
+					data-test-id="submit"
+					color="primary"
+					@click="submitForm"
+				>
+					{{ locales.saveBtn }}
+				</VBtn>
+			</div>
+		</VForm>
+	</VCard>
+</template>

package/src/components/CookiesSelection/CookiesTable/CookiesTable.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+	import type { Cookie } from '../types'
+	import { headers } from './headers'
+
+	defineProps<{ items: Cookie[] }>()
+</script>
+
+<template>
+	<VTable class="vd-cookie-table bg-transparent">
+		<thead>
+			<tr>
+				<th
+					v-for="(item, index) in headers"
+					:key="index"
+					:style="{ width: item.width }"
+					class="text-left"
+				>
+					{{ item.label }}
+				</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr
+				v-for="cookie in items"
+				:key="cookie.name"
+			>
+				<td>{{ cookie.name }}</td>
+				<td>
+					<slot
+						:name="'cookie-description-' + cookie.name"
+						:cookie
+					>
+						{{ cookie.description }}
+					</slot>
+				</td>
+				<td>{{ cookie.conservation }}</td>
+			</tr>
+		</tbody>
+	</VTable>
+</template>
+
+<style lang="scss" scoped>
+.vd-cookie-table :deep(table) {
+	table-layout: fixed;
+}
+</style>

package/src/components/CookiesSelection/CookiesTable/headers.ts

@@ -0,0 +1,14 @@
+export const headers = [
+	{
+		label: 'Dénomination du cookie',
+		width: '180px',
+	},
+	{
+		label: 'Finalité',
+		width: '328px',
+	},
+	{
+		label: 'Durée de conservation',
+		width: '180px',
+	},
+] as const

package/src/components/CookiesSelection/CookiesTable/tests/CookiesTable.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import CookiesTable from '../CookiesTable.vue'
+
+describe('CookiesTable', () => {
+	it('renders correctly', () => {
+		const wrapper = shallowMount(CookiesTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: [
+					{
+						name: 'session',
+						description: 'Sauvegarde la session pour rester connecté.',
+						conservation: '20 heures',
+					},
+					{
+						name: 'cookie_policy',
+						description: 'Sauvegarde les préférences de cookies.',
+						conservation: '1 an',
+					},
+				],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/CookiesSelection/CookiesTable/tests/__snapshots__/CookiesTable.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CookiesTable > renders correctly 1`] = `"<v-table-stub data-v-d0e8c396="" class="vd-cookie-table bg-transparent" fixedheader="false" fixedfooter="false" hover="false" density="default" tag="div"></v-table-stub>"`;

package/src/components/CookiesSelection/locales.ts

@@ -0,0 +1,10 @@
+export const locales = {
+	title: 'Gestion des cookies',
+	description:
+		'Définissez vos préférences de collecte et de traitement de vos données sur ce site.',
+	cookieDefinition:
+		'Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette ou mobile) lors de la visite d’un site ou lors de la consultation d’une publicité. Il contient plusieurs données\xa0: le nom du service qui l’a déposé, un identifiant sous forme de numéro unique, une valeur et éventuellement une date d’expiration.',
+	rejectAll: 'Tout refuser',
+	acceptAll: 'Tout accepter',
+	saveBtn: 'Enregistrer mes choix',
+}

package/src/components/CookiesSelection/tests/CookiesSelection.spec.ts

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import CookiesSelection from '../CookiesSelection.vue'
+
+const cookiesList = {
+	essentials: [
+		{
+			name: 'session',
+			description: 'Sauvegarde la session pour rester connecté.',
+			conservation: '20 heures',
+		},
+		{
+			name: 'cookie_policy',
+			description: 'Sauvegarde les préférences de cookies.',
+			conservation: '1 an',
+		},
+	],
+	functional: [
+		{
+			name: 'contrast',
+			description: 'Sauvegarde la personnalisation de l’affichage.',
+			conservation: '1 an',
+		},
+	],
+	analytics: [
+		{
+			name: 'user_id',
+			description: 'Sauvegarde l’identifiant unique de visiteur.',
+			conservation: '6 mois',
+		},
+	],
+}
+
+describe('CookiesSelection', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(CookiesSelection, {
+			global: {
+				plugins: [vuetify],
+			},
+			propsData: {
+				items: cookiesList,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		const cookiesSections = wrapper.findAll('.vd-cookies-information')
+		expect(cookiesSections[0].text()).toContain(cookiesList.essentials[0].name)
+		expect(cookiesSections[1].text()).toContain(cookiesList.functional[0].name)
+		expect(cookiesSections[2].text()).toContain(cookiesList.analytics[0].name)
+	})
+
+	it('sets global preferences', async () => {
+		const wrapper = mount(CookiesSelection, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: cookiesList,
+			},
+		})
+
+		await wrapper.find('[data-test-id="reject-all"]').trigger('click')
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()).toHaveProperty('submit')
+		expect(wrapper.emitted('submit')?.[0]?.[0]).toStrictEqual({
+			functional: false,
+			analytics: false,
+		})
+
+		await wrapper.find('[data-test-id="accept-all"]').trigger('click')
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('submit')?.[1]?.[0]).toStrictEqual({
+			functional: true,
+			analytics: true,
+		})
+	})
+
+	it('sets preferences for each category', async () => {
+		const wrapper = mount(CookiesSelection, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: cookiesList,
+			},
+		})
+
+		const radioGroup = wrapper.findAll('[data-test-id="radio-group"]')
+
+		const functionalReject = radioGroup[0].find('input[value="reject"]')
+		const functionalAccept = radioGroup[0].find('input[value="accept"]')
+		const analyticsReject = radioGroup[1].find('input[value="reject"]')
+		const analyticsAccept = radioGroup[1].find('input[value="accept"]')
+
+		await functionalReject.setValue(true)
+		await analyticsAccept.setValue(true)
+
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()).toHaveProperty('submit')
+		expect(wrapper.emitted('submit')?.[0]?.[0]).toStrictEqual({
+			functional: false,
+			analytics: true,
+		})
+
+		await functionalAccept.setValue(true)
+		await analyticsReject.setValue(true)
+
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('submit')?.[1]?.[0]).toStrictEqual({
+			functional: true,
+			analytics: false,
+		})
+	})
+
+	it('requires all categories to be set', async () => {
+		const wrapper = mount(CookiesSelection, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: cookiesList,
+				modelValue: undefined,
+			},
+		})
+
+		const radioGroup = wrapper.findAll('[data-test-id="radio-group"]')
+
+		const functionalReject = radioGroup[0].find('input[value="reject"]')
+		const functionalAccept = radioGroup[0].find('input[value="accept"]')
+		const analyticsReject = radioGroup[1].find('input[value="reject"]')
+
+		await functionalReject.setValue(true)
+
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()).not.toHaveProperty('submit')
+		expect(wrapper.text()).toContain('Le champ est requis.')
+
+		await functionalAccept.setValue(true)
+		await analyticsReject.setValue(true)
+
+		await wrapper.find('[data-test-id="submit"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()).toHaveProperty('submit')
+		expect(wrapper.text()).not.toContain('Le champ est requis.')
+	})
+
+	it('displays the cookie description as a scoped slot', () => {
+		const wrapper = mount(CookiesSelection, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: cookiesList,
+			},
+			slots: {
+				'cookie-description-contrast': `
+					<template #cookie-description-contrast="{ cookie }">
+						<a href="#" class="contrast-description">{{ cookie.description }}</a>
+					</template>
+				`,
+			},
+		})
+
+		expect(wrapper.find('a.contrast-description').text()).toContain(cookiesList.functional[0].description)
+	})
+})