@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -49,7 +49,7 @@
 	justify-content: center;
 	font-weight: 700;
 	background-color: rgb(var(--v-theme-primary));
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	border: 2px solid transparent;
 	border-bottom:
 		solid 2px linear-gradient(
@@ -72,7 +72,7 @@
 .header-menu-btn__open {
 	background-color: rgb(var(--v-theme-surface));
 	color: rgb(var(--v-theme-primary));
-	border-color: rgb(var(--v-theme-textOnDark));
+	border-color: rgb(var(--v-theme-onPrimary));
 }
 
 @media screen and (max-width: ($header-breakpoint + 1)) {

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

@@ -4,15 +4,94 @@ import { mount } from '@vue/test-utils'
 import HeaderLoading from '../HeaderLoading.vue'
 
 describe('HeaderLoading', () => {
-	it('renders correctly', () => {
-		const wrapper = mount(HeaderLoading, {
-			props: {
-				width: '100px',
-				height: '1rem',
-			},
+	describe('mode non-standalone (défaut)', () => {
+		it('rend le skeleton avec la classe vd-header-loading', () => {
+			const wrapper = mount(HeaderLoading)
+			expect(wrapper.find('.vd-header-loading').exists()).toBe(true)
 		})
 
-		const elExists = wrapper.find('.vd-header-loading').exists()
-		expect(elExists).toBe(true)
+		it('applique aria-hidden="true" sur le skeleton', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('aria-hidden')).toBe('true')
+		})
+
+		it('ne rend pas le conteneur wrapper vd-header-loading-container', () => {
+			const wrapper = mount(HeaderLoading)
+			expect(wrapper.find('.vd-header-loading-container').exists()).toBe(false)
+		})
+
+		it('applique la width par défaut (100px)', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('100px')
+		})
+
+		it('applique la height par défaut (1rem)', () => {
+			const wrapper = mount(HeaderLoading)
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('1rem')
+		})
+
+		it('applique les props width et height personnalisées', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { width: '200px', height: '2rem' },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('200px')
+			expect(skeleton.attributes('style') ?? '').toContain('2rem')
+		})
+	})
+
+	describe('mode standalone', () => {
+		it('rend un conteneur avec role="alert" et aria-live="polite"', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.exists()).toBe(true)
+			expect(container.attributes('aria-live')).toBe('polite')
+		})
+
+		it('applique le ariaLabel par défaut', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.attributes('aria-label')).toBe('Chargement en cours...')
+		})
+
+		it('applique un ariaLabel personnalisé', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true, ariaLabel: 'Chargement des données...' },
+			})
+			const container = wrapper.find('[role="alert"]')
+			expect(container.attributes('aria-label')).toBe('Chargement des données...')
+		})
+
+		it('rend le skeleton à l\'intérieur du conteneur', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const container = wrapper.find('.vd-header-loading-container')
+			expect(container.find('.vd-header-loading').exists()).toBe(true)
+		})
+
+		it('le skeleton standalone n\'a pas aria-hidden', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('aria-hidden')).toBeUndefined()
+		})
+
+		it('applique les props width et height en mode standalone', () => {
+			const wrapper = mount(HeaderLoading, {
+				props: { standalone: true, width: '300px', height: '3rem' },
+			})
+			const skeleton = wrapper.find('.vd-header-loading')
+			expect(skeleton.attributes('style') ?? '').toContain('300px')
+			expect(skeleton.attributes('style') ?? '').toContain('3rem')
+		})
 	})
 })

package/src/components/HeaderLoading/tests/HeaderLoading.visual.cy.ts

@@ -0,0 +1,34 @@
+import HeaderLoading from '../HeaderLoading.vue'
+
+describe('HeaderLoading - Visual regression tests', () => {
+	it('displays the inline skeleton loader', () => {
+		cy.mountWithVuetify(HeaderLoading)
+
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('header-loading-default', cy.get('.v-skeleton-loader'))
+	})
+
+	it('displays the standalone loader with aria role', () => {
+		cy.mountWithVuetify(HeaderLoading, {
+			props: {
+				standalone: true,
+				ariaLabel: 'Chargement des données...',
+			},
+		})
+
+		cy.get('[role="alert"]').should('exist')
+		cy.matchImageSnapshot('header-loading-standalone', cy.get('.v-application'))
+	})
+
+	it('displays the loader with custom dimensions', () => {
+		cy.mountWithVuetify(HeaderLoading, {
+			props: {
+				width: '200px',
+				height: '2rem',
+			},
+		})
+
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('header-loading-custom-size', cy.get('.v-skeleton-loader'))
+	})
+})

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -323,7 +323,7 @@
 	transition: color 0.2s ease;
 
 	&:hover {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	&:focus-visible {
@@ -334,7 +334,7 @@
 
 	&--active,
 	&[aria-current='page'] {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 		border-bottom: 3px solid #fff; /* Bordure solide et plus visible pour les éléments actifs */
 		box-shadow: 0 3px 0 0 #fff; /* Double effet pour être sûr que la bordure est bien visible */
 
@@ -350,7 +350,7 @@
 	padding: 8px 16px;
 	margin-top: 8px;
 	background-color: v-bind('options.sheet.color');
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	text-decoration: none;
 	border-radius: 4px;
 	transition: background-color 0.2s ease;