@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/tests/unit/components/Core/List.spec.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import List from '@components/List/List.vue';
+
+describe('List', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mount(List);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-list CSS class', () => {
+      const wrapper = mount(List);
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.classes()).toContain('wl-list');
+    });
+
+    it('renders root element', () => {
+      const wrapper = mount(List);
+      expect(wrapper.element).toBeTruthy();
+    });
+  });
+
+  // ─── Props Passthrough ────────────────────────────────────────────
+  // Note: Global stubs from setup.ts don't have `name` properties,
+  // so findComponent({ name: 'v-list' }) fails. We verify props
+  // via wrapper.vm instead of via the internal v-list stub attributes.
+  describe('Props Passthrough', () => {
+    it('accepts density prop', () => {
+      const wrapper = mount(List, { props: { density: 'compact' } });
+      expect(wrapper.vm.density).toBe('compact');
+    });
+
+    it('defaults density to "default"', () => {
+      const wrapper = mount(List);
+      expect(wrapper.vm.density).toBe('default');
+    });
+
+    it('accepts disabled prop', () => {
+      const wrapper = mount(List, { props: { disabled: true } });
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('defaults disabled to false', () => {
+      const wrapper = mount(List);
+      expect(wrapper.vm.disabled).toBe(false);
+    });
+
+    it('accepts nav prop', () => {
+      const wrapper = mount(List, { props: { nav: true } });
+      expect(wrapper.vm.nav).toBe(true);
+    });
+
+    it('accepts color props', () => {
+      const wrapper = mount(List, {
+        props: {
+          color: 'primary',
+          baseColor: 'secondary',
+          activeColor: 'accent',
+          bgColor: 'white',
+        },
+      });
+      expect(wrapper.vm.color).toBe('primary');
+      expect(wrapper.vm.baseColor).toBe('secondary');
+      expect(wrapper.vm.activeColor).toBe('accent');
+      expect(wrapper.vm.bgColor).toBe('white');
+    });
+  });
+
+  // ─── v-model:selected ─────────────────────────────────────────────
+  describe('v-model:selected', () => {
+    it('accepts selected prop', () => {
+      const wrapper = mount(List, { props: { selected: ['item1'] } });
+      expect(wrapper.vm.selected).toEqual(['item1']);
+    });
+
+    it('emits update:selected when internal selected changes', async () => {
+      const wrapper = mount(List, { props: { selected: [] } });
+      // Simulate internal change
+      (wrapper.vm as any).internalSelected = ['new'];
+      await nextTick();
+      expect(wrapper.emitted('update:selected')).toBeTruthy();
+    });
+
+    it('syncs external selected changes to internal state', async () => {
+      const wrapper = mount(List, { props: { selected: ['a'] } });
+      await wrapper.setProps({ selected: ['b'] });
+      expect((wrapper.vm as any).internalSelected).toEqual(['b']);
+    });
+  });
+
+  // ─── v-model:opened ───────────────────────────────────────────────
+  describe('v-model:opened', () => {
+    it('accepts opened prop', () => {
+      const wrapper = mount(List, { props: { opened: ['group1'] } });
+      expect(wrapper.vm.opened).toEqual(['group1']);
+    });
+
+    it('emits update:opened when internal opened changes', async () => {
+      const wrapper = mount(List, { props: { opened: [] } });
+      (wrapper.vm as any).internalOpened = ['group1'];
+      await nextTick();
+      expect(wrapper.emitted('update:opened')).toBeTruthy();
+    });
+  });
+
+  // ─── Default Slot ─────────────────────────────────────────────────
+  describe('Default Slot', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(List, {
+        slots: { default: '<li class="item">Item 1</li>' },
+      });
+      expect(wrapper.find('.item').text()).toBe('Item 1');
+    });
+  });
+
+  // ─── Expose ───────────────────────────────────────────────────────
+  describe('Expose', () => {
+    it('exposes $el ref', () => {
+      const wrapper = mount(List);
+      expect(wrapper.vm.$el).toBeDefined();
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('accepts tag prop (WCAG 1.3.1)', () => {
+      const wrapper = mount(List, { props: { tag: 'nav' } });
+      expect(wrapper.vm.tag).toBe('nav');
+    });
+
+    it('accepts ariaLabel prop (WCAG 4.1.2)', () => {
+      const wrapper = mount(List, { props: { ariaLabel: 'Navigation menu' } });
+      expect(wrapper.vm.ariaLabel).toBe('Navigation menu');
+    });
+
+    it('does not set aria-label when not provided', () => {
+      const wrapper = mount(List);
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.attributes('aria-label')).toBeUndefined();
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles undefined selected/opened', () => {
+      const wrapper = mount(List);
+      expect(wrapper.vm.selected).toBeUndefined();
+      expect(wrapper.vm.opened).toBeUndefined();
+    });
+
+    it('handles mandatory prop', () => {
+      const wrapper = mount(List, { props: { mandatory: true } });
+      expect(wrapper.vm.mandatory).toBe(true);
+    });
+  });
+});

package/tests/unit/components/Core/ListItem.spec.ts

@@ -0,0 +1,205 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ListItem from '@components/ListItem/ListItem.vue';
+
+const mountListItem = (props: Record<string, any> = {}, options: Record<string, any> = {}) => {
+  return mount(ListItem, {
+    props,
+    ...options,
+  });
+};
+
+describe('ListItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-list-item CSS class', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.find('.wl-list-item').exists()).toBe(true);
+    });
+
+    it('renders root element', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.element).toBeTruthy();
+    });
+  });
+
+  // ─── Props ────────────────────────────────────────────────────────
+  describe('Props', () => {
+    it('accepts title prop', () => {
+      const wrapper = mountListItem({ title: 'Item Title' });
+      expect(wrapper.vm.title).toBe('Item Title');
+    });
+
+    it('accepts subtitle prop', () => {
+      const wrapper = mountListItem({ subtitle: 'Sub text' });
+      expect(wrapper.vm.subtitle).toBe('Sub text');
+    });
+
+    it('accepts value prop', () => {
+      const wrapper = mountListItem({ value: 'item1' });
+      expect(wrapper.vm.value).toBe('item1');
+    });
+
+    it('accepts disabled prop', () => {
+      const wrapper = mountListItem({ disabled: true });
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('defaults disabled to false', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.vm.disabled).toBe(false);
+    });
+
+    it('defaults density to "default"', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.vm.density).toBe('default');
+    });
+
+    it('accepts icon props', () => {
+      const wrapper = mountListItem({
+        prependIcon: 'mdi-star',
+        appendIcon: 'mdi-chevron-right',
+      });
+      expect(wrapper.vm.prependIcon).toBe('mdi-star');
+      expect(wrapper.vm.appendIcon).toBe('mdi-chevron-right');
+    });
+
+    it('accepts color props', () => {
+      const wrapper = mountListItem({
+        color: 'primary',
+        baseColor: 'secondary',
+        activeColor: 'accent',
+      });
+      expect(wrapper.vm.color).toBe('primary');
+      expect(wrapper.vm.baseColor).toBe('secondary');
+      expect(wrapper.vm.activeColor).toBe('accent');
+    });
+  });
+
+  // ─── Link Props ───────────────────────────────────────────────────
+  describe('Link Props', () => {
+    it('accepts href prop', () => {
+      const wrapper = mountListItem({ href: 'https://example.com' });
+      expect(wrapper.vm.href).toBe('https://example.com');
+    });
+
+    it('accepts to prop as string', () => {
+      const wrapper = mountListItem({ to: '/dashboard' });
+      expect(wrapper.vm.to).toBe('/dashboard');
+    });
+
+    it('accepts to prop as object', () => {
+      const to = { name: 'dashboard', params: { id: 1 } };
+      const wrapper = mountListItem({ to });
+      expect(wrapper.vm.to).toEqual(to);
+    });
+
+    it('accepts link prop', () => {
+      const wrapper = mountListItem({ link: true });
+      expect(wrapper.vm.link).toBe(true);
+    });
+
+    it('defaults link props to undefined', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.vm.href).toBeUndefined();
+      expect(wrapper.vm.to).toBeUndefined();
+      expect(wrapper.vm.link).toBeUndefined();
+    });
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────
+  describe('Slots', () => {
+    it('renders default slot', () => {
+      const wrapper = mountListItem({}, {
+        slots: { default: '<span class="content">Content</span>' },
+      });
+      expect(wrapper.find('.content').text()).toBe('Content');
+    });
+
+    it('renders title slot when provided', () => {
+      const wrapper = mountListItem({}, {
+        slots: { title: '<h3 class="custom-title">Title</h3>' },
+      });
+      // The slot content may or may not render depending on the stub.
+      // We verify the component doesn't error when slot is provided.
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('renders prepend slot when provided', () => {
+      const wrapper = mountListItem({}, {
+        slots: { prepend: '<div class="custom-prepend">Icon</div>' },
+      });
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // ─── Expose ───────────────────────────────────────────────────────
+  describe('Expose', () => {
+    it('exposes $el ref', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.vm.$el).toBeDefined();
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('accepts ariaLabel prop (WCAG 4.1.2)', () => {
+      const wrapper = mountListItem({ ariaLabel: 'Dashboard link' });
+      expect(wrapper.vm.ariaLabel).toBe('Dashboard link');
+    });
+
+    it('defaults ariaLabel to undefined', () => {
+      const wrapper = mountListItem();
+      expect(wrapper.vm.ariaLabel).toBeUndefined();
+    });
+
+    it('aria-label not rendered on root when not provided', () => {
+      const wrapper = mountListItem();
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.attributes('aria-label')).toBeUndefined();
+    });
+
+    it('supports href for native link navigation (WCAG 2.1.1)', () => {
+      const wrapper = mountListItem({ href: '/page' });
+      expect(wrapper.vm.href).toBe('/page');
+    });
+
+    it('supports to for router link navigation (WCAG 2.1.1)', () => {
+      const wrapper = mountListItem({ to: '/route' });
+      expect(wrapper.vm.to).toBe('/route');
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles numeric title/subtitle', () => {
+      const wrapper = mountListItem({ title: 42, subtitle: 100 });
+      expect(wrapper.vm.title).toBe(42);
+      expect(wrapper.vm.subtitle).toBe(100);
+    });
+
+    it('handles active prop', () => {
+      const wrapper = mountListItem({ active: true });
+      expect(wrapper.vm.active).toBe(true);
+    });
+
+    it('handles ripple prop', () => {
+      const wrapper = mountListItem({ ripple: false });
+      expect(wrapper.vm.ripple).toBe(false);
+    });
+
+    it('handles rounded prop', () => {
+      const wrapper = mountListItem({ rounded: 'lg' });
+      expect(wrapper.vm.rounded).toBe('lg');
+    });
+  });
+});