@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/Customs/SyTabs/config.ts

@@ -9,9 +9,9 @@ export const config = {
 		'show-arrows': true,
 	},
 	tab: {
-		'base-color': 'rgb(var(--v-theme-colorPrimary))',
-		'active-color': 'rgb(var(--v-theme-colorPrimary))',
-		'slider-color': 'rgb(var(--v-theme-colorPrimary))',
+		'base-color': 'rgb(var(--v-theme-primary))',
+		'active-color': 'rgb(var(--v-theme-primary))',
+		'slider-color': 'rgb(var(--v-theme-primary))',
 		'ripple': false,
 	},
 }

package/src/components/Customs/SyTabs/tests/SyTabs.spec.ts

@@ -450,6 +450,271 @@ describe('SyTabs', () => {
 		})
 	})
 
+	// Tests items désactivés avec navigation (branches template lignes 444-504)
+	describe('Items désactivés en mode navigation', () => {
+		it('rend un <button> désactivé pour un item avec to et disabled', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: [
+						{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+						{ label: 'Désactivé', value: 'nav2', to: '/path-2', disabled: true },
+					],
+				},
+			})
+
+			const buttons = wrapper.findAll('.sy-tabs__button')
+			const disabledBtn = buttons.find(b => b.attributes('disabled') !== undefined)
+			expect(disabledBtn).toBeDefined()
+			expect(disabledBtn!.element.tagName).toBe('BUTTON')
+		})
+
+		it('rend un <button> désactivé pour un item avec href et disabled', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: [
+						{ label: 'Externe', value: 'ext', href: 'https://example.com', disabled: true },
+					],
+				},
+			})
+
+			const btn = wrapper.find('.sy-tabs__button')
+			expect(btn.element.tagName).toBe('BUTTON')
+			expect(btn.attributes('disabled')).toBeDefined()
+			expect(btn.attributes('aria-disabled')).toBe('true')
+		})
+
+		it('rend un <a> pour un item avec href non désactivé', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: [
+						{ label: 'Externe', value: 'ext', href: 'https://example.com' },
+					],
+				},
+			})
+
+			const link = wrapper.find('.sy-tabs__button')
+			expect(link.element.tagName).toBe('A')
+			expect(link.attributes('href')).toBe('https://example.com')
+		})
+
+		it('ne change pas d\'onglet au clic sur un item désactivé (button)', async () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: [
+						{ label: 'Tab 1', value: 'tab1', content: 'Contenu 1' },
+						{ label: 'Désactivé', value: 'tab2', content: '', disabled: true },
+					],
+				},
+			})
+
+			const vm = wrapper.vm as unknown as { activeItemIndex: number }
+			expect(vm.activeItemIndex).toBe(0)
+
+			const disabledBtn = wrapper.findAll('.sy-tabs__button')[1]!
+			await disabledBtn.trigger('click')
+
+			expect(vm.activeItemIndex).toBe(0)
+		})
+	})
+
+	// Tests Escape key (setupAccessibilityFeatures)
+	describe('Escape key', () => {
+		it('remet focusedItemIndex à -1 sur Escape quand focus >= 0', async () => {
+			const wrapper = createWrapper()
+			const vm = wrapper.vm as unknown as { focusedItemIndex: number }
+
+			vm.focusedItemIndex = 1
+
+			window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+			await nextTick()
+
+			expect(vm.focusedItemIndex).toBe(-1)
+		})
+
+		it('ne fait rien sur Escape quand focusedItemIndex est -1', async () => {
+			const wrapper = createWrapper()
+			const vm = wrapper.vm as unknown as { focusedItemIndex: number }
+
+			vm.focusedItemIndex = -1
+			window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+			await nextTick()
+
+			expect(vm.focusedItemIndex).toBe(-1)
+		})
+
+		it('retire l\'écouteur keydown au démontage', () => {
+			const removeSpy = vi.spyOn(window, 'removeEventListener')
+			const wrapper = createWrapper()
+			wrapper.unmount()
+
+			expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function))
+		})
+	})
+
+	// Tests lazy prop
+	describe('Lazy loading', () => {
+		it('ne rend le panneau que quand il devient actif avec lazy=true', async () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					lazy: true,
+				},
+			})
+
+			const secondTab = wrapper.findAll('.sy-tabs__button')[1]!
+			await secondTab.trigger('click')
+			await nextTick()
+
+			expect(wrapper.find('#panel-1').exists()).toBe(true)
+		})
+	})
+
+	// Tests onMounted branches
+	describe('onMounted — branches', () => {
+		it('ne plante pas avec items vides', () => {
+			expect(() => createWrapper({
+				props: { items: [] },
+			})).not.toThrow()
+		})
+
+		it('utilise pathname pour trouver l\'index actif si modelValue est un nombre', async () => {
+			Object.defineProperty(window, 'location', {
+				value: { ...window.location, pathname: '/tab2' },
+				writable: true,
+			})
+
+			const items = [
+				{ label: 'Tab 1', value: 'tab1', content: 'C1', to: '/tab1' },
+				{ label: 'Tab 2', value: 'tab2', content: 'C2', to: '/tab2' },
+			]
+			const wrapper = createWrapper({
+				props: { items, modelValue: 0 },
+			})
+			await nextTick()
+
+			const vm = wrapper.vm as unknown as { activeItemIndex: number }
+			expect(vm.activeItemIndex).toBe(1)
+
+			Object.defineProperty(window, 'location', {
+				value: { ...window.location, pathname: '/' },
+				writable: true,
+			})
+		})
+	})
+
+	// Tests find*EnabledTab avec tous désactivés
+	describe('Navigation avec tous les onglets désactivés', () => {
+		it('findNextEnabledTab retourne -1 si tous désactivés', async () => {
+			const allDisabled = [
+				{ label: 'A', value: 'a', content: '', disabled: true },
+				{ label: 'B', value: 'b', content: '', disabled: true },
+			]
+			const wrapper = createWrapper({ props: { items: allDisabled } })
+			const vm = wrapper.vm as unknown as {
+				findNextEnabledTab: (i: number) => number
+			}
+			expect(vm.findNextEnabledTab(0)).toBe(-1)
+		})
+
+		it('findPreviousEnabledTab retourne -1 si tous désactivés', () => {
+			const allDisabled = [
+				{ label: 'A', value: 'a', content: '', disabled: true },
+				{ label: 'B', value: 'b', content: '', disabled: true },
+			]
+			const wrapper = createWrapper({ props: { items: allDisabled } })
+			const vm = wrapper.vm as unknown as {
+				findPreviousEnabledTab: (i: number) => number
+			}
+			expect(vm.findPreviousEnabledTab(0)).toBe(-1)
+		})
+
+		it('findFirstEnabledTab retourne -1 si tous désactivés', () => {
+			const allDisabled = [
+				{ label: 'A', value: 'a', content: '', disabled: true },
+			]
+			const wrapper = createWrapper({ props: { items: allDisabled } })
+			const vm = wrapper.vm as unknown as {
+				findFirstEnabledTab: () => number
+			}
+			expect(vm.findFirstEnabledTab()).toBe(-1)
+		})
+
+		it('findLastEnabledTab retourne -1 si tous désactivés', () => {
+			const allDisabled = [
+				{ label: 'A', value: 'a', content: '', disabled: true },
+			]
+			const wrapper = createWrapper({ props: { items: allDisabled } })
+			const vm = wrapper.vm as unknown as {
+				findLastEnabledTab: () => number
+			}
+			expect(vm.findLastEnabledTab()).toBe(-1)
+		})
+
+		it('handleArrowNavigation ne fait rien si items est vide', () => {
+			const wrapper = createWrapper({ props: { items: [] } })
+			const vm = wrapper.vm as unknown as {
+				handleArrowNavigation: (event: KeyboardEvent, index: number) => void
+			}
+			const event = new KeyboardEvent('keydown', { key: 'ArrowRight' })
+			event.preventDefault = vi.fn()
+			expect(() => vm.handleArrowNavigation(event, 0)).not.toThrow()
+		})
+
+		it('handleArrowNavigation ne fait rien pour une touche non gérée', () => {
+			const wrapper = createWrapper()
+			const vm = wrapper.vm as unknown as {
+				handleArrowNavigation: (event: KeyboardEvent, index: number) => void
+			}
+			const event = new KeyboardEvent('keydown', { key: 'Tab' })
+			expect(() => vm.handleArrowNavigation(event, 0)).not.toThrow()
+			expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+		})
+	})
+
+	// Tests watcher modelValue
+	describe('Watcher modelValue', () => {
+		it('ne fait rien si newValue est undefined', async () => {
+			const wrapper = createWrapper({
+				props: { ...defaultMountOptions.props, modelValue: 1 },
+			})
+			const vm = wrapper.vm as unknown as { activeItemIndex: number }
+
+			await wrapper.setProps({ modelValue: undefined })
+			await nextTick()
+
+			expect(vm.activeItemIndex).toBe(1)
+		})
+
+		it('met à jour activeItemIndex via watcher modelValue string', async () => {
+			const wrapper = createWrapper({
+				props: { ...defaultMountOptions.props, modelValue: 'tab1' },
+			})
+			const vm = wrapper.vm as unknown as { activeItemIndex: number }
+
+			await wrapper.setProps({ modelValue: 'tab3' })
+			await nextTick()
+
+			expect(vm.activeItemIndex).toBe(2)
+		})
+
+		it('ne change pas activeItemIndex si modelValue string inconnu', async () => {
+			const wrapper = createWrapper({
+				props: { ...defaultMountOptions.props, modelValue: 'tab1' },
+			})
+			const vm = wrapper.vm as unknown as { activeItemIndex: number }
+			const before = vm.activeItemIndex
+
+			await wrapper.setProps({ modelValue: 'unknown-value' })
+			await nextTick()
+
+			expect(vm.activeItemIndex).toBe(before)
+		})
+	})
+
 	// Tests avec différentes configurations
 	describe('Configurations personnalisées', () => {
 		it('doit permettre de personnaliser les options', () => {

package/src/components/Customs/SyTabs/tests/SyTabs.visual.cy.ts

@@ -0,0 +1,30 @@
+import SyTabs from '../SyTabs.vue'
+
+const defaultItems = [
+	{ label: 'Onglet 1', value: 'tab1', content: 'Contenu de l\'onglet 1' },
+	{ label: 'Onglet 2', value: 'tab2', content: 'Contenu de l\'onglet 2' },
+	{ label: 'Onglet 3', value: 'tab3', content: 'Contenu de l\'onglet 3' },
+]
+
+describe('SyTabs - Visual regression tests', () => {
+	it('displays the tabs with first tab active by default', () => {
+		cy.mountWithVuetify(SyTabs, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.sy-tabs').should('be.visible')
+		cy.matchImageSnapshot('sy-tabs-default', cy.get('.sy-tabs'))
+	})
+
+	it('displays the tabs with second tab active', () => {
+		cy.mountWithVuetify(SyTabs, {
+			props: {
+				items: defaultItems,
+				modelValue: 'tab2',
+			},
+		})
+
+		cy.get('.sy-tabs').should('be.visible')
+		cy.matchImageSnapshot('sy-tabs-second-active', cy.get('.sy-tabs'))
+	})
+})

package/src/components/Customs/SyTabs/tests/useTabTransition.spec.ts

@@ -0,0 +1,188 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { ref, nextTick, defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useTabTransition } from '../useTabTransition'
+
+function makeTablistEl(activeLeft = 50, activeWidth = 120, containerLeft = 10): HTMLElement {
+	const container = document.createElement('div')
+	const activeBtn = document.createElement('button')
+	activeBtn.classList.add('sy-tabs__button--active')
+
+	vi.spyOn(activeBtn, 'getBoundingClientRect').mockReturnValue({
+		left: activeLeft,
+		width: activeWidth,
+		top: 0,
+		right: activeLeft + activeWidth,
+		bottom: 0,
+		height: 0,
+		x: activeLeft,
+		y: 0,
+		toJSON: () => ({}),
+	} as DOMRect)
+
+	vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+		left: containerLeft,
+		width: 500,
+		top: 0,
+		right: containerLeft + 500,
+		bottom: 0,
+		height: 0,
+		x: containerLeft,
+		y: 0,
+		toJSON: () => ({}),
+	} as DOMRect)
+
+	container.appendChild(activeBtn)
+	return container
+}
+
+function makeComponent(tablistEl: HTMLElement | null, initialIndex = 0) {
+	return defineComponent({
+		setup() {
+			const tablist = ref<HTMLElement | null>(tablistEl)
+			const activeItemIndex = ref(initialIndex)
+			const result = useTabTransition(tablist, activeItemIndex)
+			return { ...result, activeItemIndex, tablist }
+		},
+		template: '<div />',
+	})
+}
+
+describe('useTabTransition', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
+	describe('positionIndicator — sans activeTab', () => {
+		it('remet xPosition et width à 0 si tablist est null', async () => {
+			const wrapper = mount(makeComponent(null))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.xPosition).toBe(0)
+			expect(wrapper.vm.width).toBe(0)
+		})
+
+		it('remet xPosition et width à 0 si aucun bouton actif n\'existe', async () => {
+			const container = document.createElement('div')
+			vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+				left: 0, width: 500, top: 0, right: 500, bottom: 0, height: 0, x: 0, y: 0, toJSON: () => ({}),
+			} as DOMRect)
+
+			const wrapper = mount(makeComponent(container))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.xPosition).toBe(0)
+			expect(wrapper.vm.width).toBe(0)
+		})
+	})
+
+	describe('positionIndicator — avec activeTab', () => {
+		it('calcule xPosition = activeLeft - containerLeft', async () => {
+			const el = makeTablistEl(50, 120, 10)
+			const wrapper = mount(makeComponent(el))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.xPosition).toBe(40) // 50 - 10
+		})
+
+		it('calcule width = activeTab.width', async () => {
+			const el = makeTablistEl(50, 120, 10)
+			const wrapper = mount(makeComponent(el))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.width).toBe(120)
+		})
+
+		it('met à jour la position quand activeItemIndex change', async () => {
+			const container = document.createElement('div')
+			const btn1 = document.createElement('button')
+			const btn2 = document.createElement('button')
+			btn1.classList.add('sy-tabs__button--active')
+
+			vi.spyOn(btn1, 'getBoundingClientRect').mockReturnValue({
+				left: 50, width: 100, top: 0, right: 150, bottom: 0, height: 0, x: 50, y: 0, toJSON: () => ({}),
+			} as DOMRect)
+			vi.spyOn(btn2, 'getBoundingClientRect').mockReturnValue({
+				left: 200, width: 150, top: 0, right: 350, bottom: 0, height: 0, x: 200, y: 0, toJSON: () => ({}),
+			} as DOMRect)
+			vi.spyOn(container, 'getBoundingClientRect').mockReturnValue({
+				left: 0, width: 500, top: 0, right: 500, bottom: 0, height: 0, x: 0, y: 0, toJSON: () => ({}),
+			} as DOMRect)
+
+			container.appendChild(btn1)
+			container.appendChild(btn2)
+
+			const wrapper = mount(makeComponent(container, 0))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.xPosition).toBe(50)
+
+			btn1.classList.remove('sy-tabs__button--active')
+			btn2.classList.add('sy-tabs__button--active')
+			wrapper.vm.activeItemIndex = 1
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.xPosition).toBe(200)
+			expect(wrapper.vm.width).toBe(150)
+		})
+	})
+
+	describe('resize listener', () => {
+		it('ajoute un écouteur resize au montage', () => {
+			const addSpy = vi.spyOn(window, 'addEventListener')
+			const el = makeTablistEl()
+			mount(makeComponent(el))
+
+			expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+		})
+
+		it('retire l\'écouteur resize au démontage', () => {
+			const removeSpy = vi.spyOn(window, 'removeEventListener')
+			const el = makeTablistEl()
+			const wrapper = mount(makeComponent(el))
+
+			wrapper.unmount()
+
+			expect(removeSpy).toHaveBeenCalledWith('resize', expect.any(Function))
+		})
+
+		it('recalcule la position lors d\'un événement resize', async () => {
+			const el = makeTablistEl(50, 120, 10)
+			const wrapper = mount(makeComponent(el))
+			await nextTick()
+			await nextTick()
+
+			const btn = el.querySelector('.sy-tabs__button--active') as HTMLButtonElement
+			vi.spyOn(btn, 'getBoundingClientRect').mockReturnValue({
+				left: 100, width: 200, top: 0, right: 300, bottom: 0, height: 0, x: 100, y: 0, toJSON: () => ({}),
+			} as DOMRect)
+
+			window.dispatchEvent(new Event('resize'))
+			await nextTick()
+			await nextTick()
+
+			expect(wrapper.vm.width).toBe(200)
+		})
+	})
+
+	describe('valeurs retournées', () => {
+		it('expose xPosition et width comme refs réactives', () => {
+			const el = makeTablistEl()
+			const wrapper = mount(makeComponent(el))
+
+			expect(wrapper.vm.xPosition).toBeDefined()
+			expect(wrapper.vm.width).toBeDefined()
+		})
+	})
+})