test: add tests for composables

packages/vue-split-panel/src/SplitPanel.vue

@@ -126,8 +126,14 @@ defineExpose({ collapse, expand, toggle });
 </script>
 
 <template>
-	<div ref="split-panel" class="split-panel" :class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]" @transitionend="onTransitionEnd">
-		<div class="start">
+	<div
+		ref="split-panel"
+		class="split-panel"
+		:class="[orientation, collapseTransitionState, { collapsed, dragging: isDragging }]"
+		data-testid="root"
+		@transitionend="onTransitionEnd"
+	>
+		<div class="start" data-testid="start">
 			<slot name="start" />
 		</div>
 		<div
@@ -140,14 +146,15 @@ defineExpose({ collapse, expand, toggle });
 			aria-valuemin="0"
 			aria-valuemax="100"
 			aria-label="Resize"
+			data-testid="divider"
 			@keydown="handleKeydown"
 			@dblclick="handleDblClick"
 		>
 			<slot name="divider">
 				<div />
 			</slot>
 		</div>
-		<div class="end">
+		<div class="end" data-testid="end">
 			<slot name="end" />
 		</div>
 	</div>

packages/vue-split-panel/src/composables/use-grid-template.test.ts

@@ -0,0 +1,88 @@
+import type { ComputedRef } from 'vue';
+import type { UseGridTemplateOptions } from './use-grid-template';
+import { describe, expect, it } from 'vitest';
+import { computed, ref } from 'vue';
+import { useGridTemplate } from './use-grid-template';
+
+describe('useGridTemplate', () => {
+	const createOptions = (overrides = {}): UseGridTemplateOptions => ({
+		collapsed: ref(false),
+		minSizePercentage: computed(() => {}) as ComputedRef<number | undefined>,
+		maxSizePercentage: computed(() => {}) as ComputedRef<number | undefined>,
+		sizePercentage: computed(() => 50),
+		dividerSize: computed(() => 4),
+		primary: 'start',
+		direction: 'ltr',
+		orientation: 'horizontal',
+		...overrides,
+	});
+
+	it('returns collapsed state when collapsed is true', () => {
+		const options = createOptions({ collapsed: ref(true) });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('0 4px auto');
+	});
+
+	it('returns basic clamp template when no min/max constraints', () => {
+		const options = createOptions();
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+
+	it('returns complex clamp template with min/max constraints', () => {
+		const options = createOptions({
+			minSizePercentage: computed(() => 20),
+			maxSizePercentage: computed(() => 80),
+		});
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, clamp(20%, 50%, 80%), calc(100% - 4px)) 4px auto');
+	});
+
+	it('reverses order when primary is end and direction is ltr', () => {
+		const options = createOptions({ primary: 'end' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('reverses order when direction is rtl and primary is start', () => {
+		const options = createOptions({ direction: 'rtl' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('handles vertical orientation correctly', () => {
+		const options = createOptions({ orientation: 'vertical' });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+
+	it('handles vertical orientation with end primary', () => {
+		const options = createOptions({
+			orientation: 'vertical',
+			primary: 'end',
+		});
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('auto 4px clamp(0%, 50%, calc(100% - 4px))');
+	});
+
+	it('uses custom divider size', () => {
+		const options = createOptions({ dividerSize: computed(() => 8) });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 8px)) 8px auto');
+	});
+
+	it('handles undefined primary as start', () => {
+		const options = createOptions({ primary: undefined });
+		const { gridTemplate } = useGridTemplate(options);
+
+		expect(gridTemplate.value).toBe('clamp(0%, 50%, calc(100% - 4px)) 4px auto');
+	});
+});