@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/RangeField/RangeSlider/tests/useThumbKeyboard.spec.ts

@@ -0,0 +1,233 @@
+import { defineComponent, ref, type Ref } from 'vue'
+import useThumbKeyboard from '../useThumbKeyboard'
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+describe('useThumbKeyboard', () => {
+	let setValue = vi.fn()
+
+	const TestComponent = defineComponent({
+		props: {
+			step: {
+				type: Number,
+				default: 1,
+			},
+		},
+		setup(props) {
+			const thumb = ref<HTMLElement | null>(null)
+			useThumbKeyboard(
+				thumb as Ref<HTMLElement>,
+				ref(50),
+				0,
+				100,
+				props.step,
+				setValue,
+			)
+
+			return { thumb }
+		},
+		template: `<div ref="thumb" class="thumb"></div>`,
+	})
+
+	afterEach(() => {
+		setValue = vi.fn()
+	})
+
+	it('should handle ArrowLeft key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 5,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'ArrowLeft',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(45)
+	})
+
+	it('should handle ArrowDown key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 5,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'ArrowDown',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(45)
+	})
+
+	it('should handle ArrowRight key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 5,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'ArrowRight',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(55)
+	})
+
+	it('should handle ArrowUp key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 5,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'ArrowUp',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(55)
+	})
+
+	it('should set a value that is a multiple of the step', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 6,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'ArrowRight',
+		})
+
+		expect(setValue).toHaveBeenCalledWith(54)
+	})
+
+	it('should handle Home key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 9,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'Home',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(0)
+	})
+
+	it('should handle End key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 9,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'End',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(100)
+	})
+
+	it('should handle PageDown key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 2,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'PageDown',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(30)
+	})
+
+	it('should handle PageUp key', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 2,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'PageUp',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(70)
+	})
+
+	it('should handle PageDown key with overflow', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 9,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'PageDown',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(0)
+	})
+
+	it('should handle PageUp key with overflow', async () => {
+		const wrapper = mount(TestComponent, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				step: 9,
+			},
+		})
+
+		await wrapper.find('div.thumb').trigger('keydown', {
+			key: 'PageUp',
+		})
+
+		expect(setValue).toHaveBeenCalledTimes(1)
+		expect(setValue).toHaveBeenCalledWith(100)
+	})
+})

package/src/components/RangeField/RangeSlider/tests/useTooltipsNudge.spec.ts

@@ -0,0 +1,150 @@
+/* eslint-disable vue/one-component-per-file */
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick, onMounted, ref, type Ref } from 'vue'
+import type Tooltip from '../Tooltip/Tooltip.vue'
+import type { Range } from '../types'
+import useTooltipsNudge from '../useTooltipsNudge'
+
+describe('useTooltipsNudge', () => {
+	function getTestTooltip(left: number, right: number, width: number) {
+		return defineComponent({
+			setup() {
+				const element = ref<HTMLElement | null>(null)
+				onMounted(() => {
+					vi.spyOn(
+						element.value as HTMLElement,
+						'getBoundingClientRect',
+					).mockReturnValue({
+						left,
+						right,
+						width,
+					} as DOMRect)
+				})
+				return { element }
+			},
+			template: `<div ref="element"></div>`,
+		})
+	}
+
+	function getTestComponent(minThumb, maxThumb) {
+		return defineComponent({
+			components: {
+				minThumb,
+				maxThumb,
+			},
+			setup() {
+				const minThumb = ref()
+				const maxThumb = ref()
+				const placeholderMinThumb = ref()
+				const placeholderMaxThumb = ref()
+
+				const range = {
+					min: 0,
+					max: 100,
+					step: 1,
+				}
+
+				const { nudgeMinThumb, nudgeMaxThumb } = useTooltipsNudge(
+					minThumb as Ref<typeof Tooltip>,
+					maxThumb as Ref<typeof Tooltip>,
+					placeholderMinThumb as Ref<typeof Tooltip>,
+					placeholderMaxThumb as Ref<typeof Tooltip>,
+					range as unknown as Range,
+				)
+
+				return {
+					minThumb,
+					maxThumb,
+					placeholderMinThumb,
+					placeholderMaxThumb,
+					nudgeMinThumb,
+					nudgeMaxThumb,
+				}
+			},
+			template: `
+				<div>
+					<minThumb ref="minThumb"></minThumb>
+					<maxThumb ref="maxThumb"></maxThumb>
+					<minThumb ref="placeholderMinThumb"></minThumb>
+					<maxThumb ref="placeholderMaxThumb"></maxThumb>
+				</div>
+			`,
+		})
+	}
+
+	it('does not nudge the tooltips when they do not overlap', async () => {
+		const TestMin = getTestTooltip(0, 100, 100)
+		const TestMax = getTestTooltip(200, 300, 100)
+		const TestComponent = getTestComponent(TestMin, TestMax)
+
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		await nextTick()
+
+		expect(wrapper.vm.nudgeMinThumb).toBe(0)
+		expect(wrapper.vm.nudgeMaxThumb).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	it('nudges the tooltips when they overlap', async () => {
+		const right = 100
+		const left = 90
+		const TestMin = getTestTooltip(0, right, 100)
+		const TestMax = getTestTooltip(left, 190, 100)
+		const TestComponent = getTestComponent(TestMin, TestMax)
+
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		await nextTick()
+
+		expect(wrapper.vm.nudgeMinThumb + wrapper.vm.nudgeMaxThumb).toBeGreaterThan(right - left)
+
+		wrapper.unmount()
+	})
+
+	it('nudge the bigger tooltip in priority to avoid the smaller to fly away (max)', async () => {
+		const right = 150
+		const left = 140
+		const TestMin = getTestTooltip(140, right, 10)
+		const TestMax = getTestTooltip(left, 10140, 10000)
+		const TestComponent = getTestComponent(TestMin, TestMax)
+
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		await nextTick()
+
+		expect(wrapper.vm.nudgeMinThumb).toBe(1)
+		expect(wrapper.vm.nudgeMaxThumb).toBeGreaterThan(right - left)
+		expect(wrapper.vm.nudgeMaxThumb).toBeLessThan(right - left + 5)
+
+		wrapper.unmount()
+	})
+
+	it('nudge the bigger tooltip in priority to avoid the smaller to fly away (min)', async () => {
+		const right = 1250
+		const left = 800
+		const TestMin = getTestTooltip(230, right, 1020)
+		const TestMax = getTestTooltip(left, 900, 100)
+		const TestComponent = getTestComponent(TestMin, TestMax)
+
+		const wrapper = mount(TestComponent, {
+			attachTo: document.body,
+		})
+
+		await nextTick()
+
+		expect(wrapper.vm.nudgeMinThumb).toBeGreaterThan(right - left)
+		expect(wrapper.vm.nudgeMinThumb).toBeLessThan(right - left + 5)
+		expect(wrapper.vm.nudgeMaxThumb).toBe(1)
+
+		wrapper.unmount()
+	})
+})

package/src/components/RangeField/RangeSlider/tests/useTrack.spec.ts

@@ -0,0 +1,314 @@
+/* eslint-disable vue/one-component-per-file */
+import { defineComponent, onMounted, ref, toRef, type Ref } from 'vue'
+import useTrack from '../useTrack'
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+describe('useTrack', () => {
+	it('should return the track object', async () => {
+		const setMin = vi.fn()
+		const setMax = vi.fn()
+		const TestElement = defineComponent({
+			setup() {
+				const track = ref<HTMLElement | null>(null)
+				onMounted(() => {
+					const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+					mockRect.mockReturnValue({
+						left: 0,
+						width: 200,
+					} as DOMRect)
+				})
+
+				useTrack(
+					track as Ref<HTMLElement>,
+					{
+						rangeMin: 0,
+						rangeMax: 100,
+						selectedMin: 0,
+						selectedMax: 100,
+						step: 1,
+					},
+					setMin,
+					setMax,
+				)
+
+				return { track }
+			},
+			template: `<div>
+				<div ref="track" class="track"></div>
+			</div>`,
+		})
+
+		const wrapper = mount(TestElement, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 30,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMin).toHaveBeenCalledWith(15)
+		expect(setMax).toHaveBeenCalledTimes(0)
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 170,
+		})
+
+		expect(setMax).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledWith(85)
+		expect(setMin).toHaveBeenCalledTimes(1)
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 200,
+		})
+
+		expect(setMax).toHaveBeenCalledTimes(2)
+		expect(setMax).toHaveBeenCalledWith(100)
+		expect(setMin).toHaveBeenCalledTimes(1)
+	})
+
+	it('call the function with the closest step', async () => {
+		const setMin = vi.fn()
+		const setMax = vi.fn()
+		const TestElement = defineComponent({
+			setup() {
+				const track = ref<HTMLElement | null>(null)
+				onMounted(() => {
+					const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+					mockRect.mockReturnValue({
+						left: 0,
+						width: 200,
+					} as DOMRect)
+				})
+
+				useTrack(
+					track as Ref<HTMLElement>,
+					{
+						rangeMin: 0,
+						rangeMax: 100,
+						selectedMin: 0,
+						selectedMax: 100,
+						step: 5,
+					},
+					setMin,
+					setMax,
+				)
+
+				return { track }
+			},
+			template: `<div>
+				<div ref="track" class="track"></div>
+			</div>`,
+		})
+
+		const wrapper = mount(TestElement, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 33,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMin).toHaveBeenCalledWith(15)
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 188,
+		})
+
+		expect(setMax).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledWith(95)
+	})
+
+	it('return the good value when the track contains negative values', async () => {
+		const setMin = vi.fn()
+		const setMax = vi.fn()
+		const TestElement = defineComponent({
+			setup() {
+				const track = ref<HTMLElement | null>(null)
+				onMounted(() => {
+					const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+					mockRect.mockReturnValue({
+						left: 0,
+						width: 200,
+					} as DOMRect)
+				})
+
+				useTrack(
+					track as Ref<HTMLElement>,
+					{
+						rangeMin: -50,
+						rangeMax: 50,
+						selectedMin: -50,
+						selectedMax: 10,
+						step: 5,
+					},
+					setMin,
+					setMax,
+				)
+
+				return { track }
+			},
+			template: `<div>
+				<div ref="track" class="track"></div>
+			</div>`,
+		})
+
+		const wrapper = mount(TestElement, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 121,
+		})
+
+		expect(setMax).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledWith(10)
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 17,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMin).toHaveBeenCalledWith(-40)
+	})
+
+	it('do not call any function if the disabled prop is true', async () => {
+		const setMin = vi.fn()
+		const setMax = vi.fn()
+		const TestElement = defineComponent({
+			props: {
+				disable: {
+					type: Boolean,
+					default: false,
+				},
+			},
+			setup(props) {
+				const track = ref<HTMLElement | null>(null)
+				const disable = toRef(props, 'disable')
+				onMounted(() => {
+					const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+					mockRect.mockReturnValue({
+						left: 0,
+						width: 200,
+					} as DOMRect)
+				})
+
+				useTrack(
+					track as Ref<HTMLElement>,
+					{
+						rangeMin: 0,
+						rangeMax: 100,
+						selectedMin: 0,
+						selectedMax: 100,
+						step: 5,
+					},
+					setMin,
+					setMax,
+					disable,
+				)
+
+				return { track }
+			},
+			template: `<div>
+				<div ref="track" class="track"></div>
+			</div>`,
+		})
+
+		const wrapper = mount(TestElement, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				disable: true,
+			},
+		})
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 33,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(0)
+		expect(setMax).toHaveBeenCalledTimes(0)
+
+		await wrapper.setProps({ disable: false })
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 33,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+
+		await wrapper.setProps({ disable: true })
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 33,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledTimes(0)
+	})
+
+	it('when min and max are equal, call the function for right thumb', async () => {
+		const setMin = vi.fn()
+		const setMax = vi.fn()
+		const TestElement = defineComponent({
+			setup() {
+				const track = ref<HTMLElement | null>(null)
+				onMounted(() => {
+					const mockRect = vi.spyOn((track.value as HTMLElement), 'getBoundingClientRect')
+					mockRect.mockReturnValue({
+						left: 0,
+						width: 200,
+					} as DOMRect)
+				})
+
+				useTrack(
+					track as Ref<HTMLElement>,
+					{
+						rangeMin: 0,
+						rangeMax: 100,
+						selectedMin: 50,
+						selectedMax: 50,
+						step: 5,
+					},
+					setMin,
+					setMax,
+				)
+
+				return { track }
+			},
+			template: `<div>
+				<div ref="track" class="track"></div>
+			</div>`,
+		})
+
+		const wrapper = mount(TestElement, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 90,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledTimes(0)
+
+		await wrapper.find('div.track').trigger('click', {
+			clientX: 160,
+		})
+
+		expect(setMin).toHaveBeenCalledTimes(1)
+		expect(setMax).toHaveBeenCalledTimes(1)
+	})
+})

package/src/components/RangeField/RangeSlider/tests/vAnimateClick.spec.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import { vAnimateClick } from '../vAnimateClick'
+
+describe('vAnimateClick', () => {
+	const TestComponent = defineComponent({
+		directives: {
+			animateClick: vAnimateClick,
+		},
+		template: `<div v-animate-click></div>`,
+	})
+
+	it('should add the animate-click class on mousedown', async () => {
+		const wrapper = mount(TestComponent)
+
+		const el = wrapper.find('div')
+
+		await el.trigger('mousedown')
+		expect(el.classes()).toContain('animate-click')
+	})
+
+	it('should remove the animate-click class on mouseup', async () => {
+		const wrapper = mount(TestComponent)
+
+		const el = wrapper.find('div')
+
+		await el.trigger('mousedown')
+		await el.trigger('mouseup')
+		expect(el.classes()).not.toContain('animate-click')
+	})
+})