test: add tests for composables (#37)

Author: rijkvanzanten

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');
+});
+});