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

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

@@ -0,0 +1,286 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Tile from '@components/Tile/Tile.vue';
+
+// Mock Banner component
+vi.mock('@components/Banner/Banner.vue', () => ({
+  default: {
+    name: 'Banner',
+    template: '<div class="wl-banner" data-testid="banner">{{ text }}</div>',
+    props: ['text', 'color', 'bgColor', 'foldColor'],
+  },
+}));
+
+const mountTile = (props: Record<string, any> = {}, options: Record<string, any> = {}) => {
+  return mount(Tile, {
+    props,
+    ...options,
+  });
+};
+
+describe('Tile', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-tile CSS class', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile').exists()).toBe(true);
+    });
+
+    it('renders the body container', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile__body').exists()).toBe(true);
+    });
+
+    it('renders icon by default (showIcon=true)', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile__icon').exists()).toBe(true);
+    });
+
+    it('is focusable by default (tabindex=0)', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('[data-testid="root"]').attributes('tabindex')).toBe('0');
+    });
+  });
+
+  // ─── Title ────────────────────────────────────────────────────────
+  describe('Title', () => {
+    it('renders title when provided', () => {
+      const wrapper = mountTile({ title: 'My Tile' });
+      expect(wrapper.find('.wl-tile__title').text()).toBe('My Tile');
+    });
+
+    it('does not render title element when title is undefined', () => {
+      const wrapper = mountTile({ showTitle: false });
+      expect(wrapper.find('.wl-tile__title').exists()).toBe(false);
+    });
+
+    it('hides title when showTitle is false', () => {
+      const wrapper = mountTile({ title: 'Hidden', showTitle: false });
+      expect(wrapper.find('.wl-tile__title').exists()).toBe(false);
+    });
+  });
+
+  // ─── Description ──────────────────────────────────────────────────
+  describe('Description', () => {
+    it('renders description when provided', () => {
+      const wrapper = mountTile({ description: 'Tile description' });
+      expect(wrapper.find('.wl-tile__description').text()).toBe('Tile description');
+    });
+
+    it('does not render description element when not provided', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile__description').exists()).toBe(false);
+    });
+  });
+
+  // ─── Label (default, non-banner) ─────────────────────────────────
+  describe('Label (default)', () => {
+    it('renders label text when provided', () => {
+      const wrapper = mountTile({ label: 'Status: OK' });
+      expect(wrapper.find('.wl-tile__label-text').text()).toBe('Status: OK');
+    });
+
+    it('does not render label when not provided', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile__label').exists()).toBe(false);
+    });
+
+    it('hides label when showLabel is false', () => {
+      const wrapper = mountTile({ label: 'Hidden', showLabel: false });
+      expect(wrapper.find('.wl-tile__label').exists()).toBe(false);
+    });
+
+    it('does not show default label when useWLBanner is true', () => {
+      const wrapper = mountTile({ label: 'Banner', useWLBanner: true });
+      expect(wrapper.find('.wl-tile__label').exists()).toBe(false);
+    });
+  });
+
+  // ─── Banner Mode ──────────────────────────────────────────────────
+  describe('Banner Mode (useWLBanner)', () => {
+    it('renders Banner component when useWLBanner and label are set', () => {
+      const wrapper = mountTile({ useWLBanner: true, label: 'Tag' });
+      expect(wrapper.find('[data-testid="banner"]').exists()).toBe(true);
+    });
+
+    it('does not render Banner when label is missing', () => {
+      const wrapper = mountTile({ useWLBanner: true });
+      expect(wrapper.find('[data-testid="banner"]').exists()).toBe(false);
+    });
+
+    it('passes bannerColor to Banner', () => {
+      const wrapper = mountTile({
+        useWLBanner: true,
+        label: 'Tag',
+        bannerColor: 'green',
+      });
+      const banner = wrapper.findComponent({ name: 'Banner' });
+      expect(banner.props('color')).toBe('green');
+    });
+
+    it('passes custom bgColor/foldColor to Banner', () => {
+      const wrapper = mountTile({
+        useWLBanner: true,
+        label: 'Tag',
+        bannerBgColor: '#aaa',
+        bannerFoldColor: '#bbb',
+      });
+      const banner = wrapper.findComponent({ name: 'Banner' });
+      expect(banner.props('bgColor')).toBe('#aaa');
+      expect(banner.props('foldColor')).toBe('#bbb');
+    });
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────
+  describe('Icon', () => {
+    it('renders icon by default', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile__icon').exists()).toBe(true);
+    });
+
+    it('hides icon when showIcon is false', () => {
+      const wrapper = mountTile({ showIcon: false });
+      expect(wrapper.find('.wl-tile__icon').exists()).toBe(false);
+    });
+
+    it('renders default icon (mdi-check-circle)', () => {
+      const wrapper = mountTile();
+      const icon = wrapper.find('.v-icon');
+      expect(icon.exists()).toBe(true);
+    });
+
+    it('uses custom icon when provided', () => {
+      const wrapper = mountTile({ icon: 'mdi-star' });
+      const icon = wrapper.find('.v-icon');
+      expect(icon.exists()).toBe(true);
+    });
+  });
+
+  // ─── Disabled State ───────────────────────────────────────────────
+  describe('Disabled State', () => {
+    it('adds wl-tile--disabled class', () => {
+      const wrapper = mountTile({ disabled: true });
+      expect(wrapper.find('.wl-tile--disabled').exists()).toBe(true);
+    });
+
+    it('sets tabindex to -1 when disabled', () => {
+      const wrapper = mountTile({ disabled: true });
+      expect(wrapper.find('[data-testid="root"]').attributes('tabindex')).toBe('-1');
+    });
+
+    it('does not add disabled class by default', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('.wl-tile--disabled').exists()).toBe(false);
+    });
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────
+  describe('Slots', () => {
+    it('renders default slot content', () => {
+      const wrapper = mountTile({}, {
+        slots: { default: '<div class="custom">Custom body</div>' },
+      });
+      expect(wrapper.find('.custom').text()).toBe('Custom body');
+    });
+
+    it('renders title slot', () => {
+      const wrapper = mountTile({}, {
+        slots: { title: '<span class="custom-title">Title slot</span>' },
+      });
+      expect(wrapper.find('.custom-title').text()).toBe('Title slot');
+    });
+
+    it('renders description slot', () => {
+      const wrapper = mountTile({}, {
+        slots: { description: '<p class="custom-desc">Desc slot</p>' },
+      });
+      expect(wrapper.find('.custom-desc').text()).toBe('Desc slot');
+    });
+
+    it('renders prepend slot', () => {
+      const wrapper = mountTile({}, {
+        slots: { prepend: '<div class="custom-prepend">Prepend</div>' },
+      });
+      expect(wrapper.find('.custom-prepend').text()).toBe('Prepend');
+    });
+
+    it('renders label slot', () => {
+      const wrapper = mountTile({}, {
+        slots: { label: '<span class="custom-label">Label slot</span>' },
+      });
+      expect(wrapper.find('.custom-label').text()).toBe('Label slot');
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('sets explicit aria-label when provided (WCAG 4.1.2)', () => {
+      const wrapper = mountTile({ ariaLabel: 'Tile for status' });
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBe('Tile for status');
+    });
+
+    it('computes aria-label from title and label when ariaLabel not set', () => {
+      const wrapper = mountTile({ title: 'Check-up', label: 'Done' });
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBe('Check-up — Done');
+    });
+
+    it('uses only title in aria-label when label is missing', () => {
+      const wrapper = mountTile({ title: 'Check-up' });
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBe('Check-up');
+    });
+
+    it('uses only label in aria-label when title is missing', () => {
+      const wrapper = mountTile({ label: 'Done' });
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBe('Done');
+    });
+
+    it('has no aria-label when neither title, label, nor ariaLabel is set', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('is focusable via keyboard (tabindex=0) (WCAG 2.1.1)', () => {
+      const wrapper = mountTile();
+      expect(wrapper.find('[data-testid="root"]').attributes('tabindex')).toBe('0');
+    });
+
+    it('is not focusable when disabled (tabindex=-1)', () => {
+      const wrapper = mountTile({ disabled: true });
+      expect(wrapper.find('[data-testid="root"]').attributes('tabindex')).toBe('-1');
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles all props simultaneously', () => {
+      const wrapper = mountTile({
+        title: 'Title',
+        description: 'Desc',
+        label: 'Label',
+        icon: 'mdi-star',
+        disabled: false,
+        useWLBanner: false,
+      });
+      expect(wrapper.find('.wl-tile__title').text()).toBe('Title');
+      expect(wrapper.find('.wl-tile__description').text()).toBe('Desc');
+      expect(wrapper.find('.wl-tile__label-text').text()).toBe('Label');
+    });
+
+    it('handles prop changes reactively', async () => {
+      const wrapper = mountTile({ title: 'Old' });
+      expect(wrapper.find('.wl-tile__title').text()).toBe('Old');
+
+      await wrapper.setProps({ title: 'New' });
+      expect(wrapper.find('.wl-tile__title').text()).toBe('New');
+    });
+  });
+});

package/tests/unit/components/DateInput/DateInput.spec.ts

@@ -770,4 +770,132 @@ describe('DateInput Edge Cases', () => {
 
     expect(wrapper.vm.inputState).toBe('error');
   });
+
+  // ─── External Error Prop ──────────────────────────────────────────
+  describe('External Error Prop', () => {
+    it('defaults error prop to false', () => {
+      wrapper = mountComponent();
+      expect(wrapper.vm.error).toBe(false);
+    });
+
+    it('accepts error prop', () => {
+      wrapper = mountComponent({ error: true });
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('passes error state to Input component', () => {
+      wrapper = mountComponent({ error: true });
+      const root = wrapper.find('[data-testid="root"]');
+      // The :error binding uses `inputState === 'error' || props.error`
+      expect(root.classes()).toContain('is-error');
+    });
+
+    it('external error does not override internal error', async () => {
+      wrapper = mountComponent({ error: true });
+      const input = wrapper.find('input');
+
+      // Type invalid date to trigger internal error
+      await input.setValue('99.99.9999');
+      await input.trigger('input');
+
+      // Internal error takes priority for the hint message
+      expect(wrapper.vm.inputState).toBe('error');
+    });
+
+    it('shows external error when no internal error', () => {
+      wrapper = mountComponent({ error: true });
+      // inputState is idle (no input), so error comes from external prop
+      expect(wrapper.vm.inputState).toBe('idle');
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('clears external error display when error prop becomes false', async () => {
+      wrapper = mountComponent({ error: true });
+      expect(wrapper.find('[data-testid="root"]').classes()).toContain('is-error');
+
+      await wrapper.setProps({ error: false });
+      // Without internal error, should not show error
+      expect(wrapper.find('[data-testid="root"]').classes()).not.toContain('is-error');
+    });
+  });
+
+  // ─── External Error Message ───────────────────────────────────────
+  describe('External Error Message', () => {
+    it('defaults errorMessage to empty string', () => {
+      wrapper = mountComponent();
+      expect(wrapper.vm.errorMessage).toBe('');
+    });
+
+    it('accepts errorMessage prop', () => {
+      wrapper = mountComponent({ errorMessage: 'Pflichtfeld' });
+      expect(wrapper.vm.errorMessage).toBe('Pflichtfeld');
+    });
+
+    it('shows errorMessage in hint when external error is active and no internal error', () => {
+      wrapper = mountComponent({ error: true, errorMessage: 'Pflichtfeld' });
+      // In default layout, hint = inputState === 'error' ? inputMessage : (props.error ? props.errorMessage : '')
+      // inputState is 'idle', so hint = props.errorMessage = 'Pflichtfeld'
+      const hint = wrapper.find('.hint-text');
+      if (hint.exists()) {
+        expect(hint.text()).toBe('Pflichtfeld');
+      }
+    });
+
+    it('internal error message takes priority over errorMessage', async () => {
+      wrapper = mountComponent({ error: true, errorMessage: 'Pflichtfeld' });
+      const input = wrapper.find('input');
+
+      // Trigger internal error
+      await input.setValue('99.99.9999');
+      await input.trigger('input');
+
+      // Internal error message should display, not errorMessage
+      expect(wrapper.vm.inputState).toBe('error');
+      expect(wrapper.vm.inputMessage).not.toBe('');
+    });
+  });
+
+  // ─── Validity Emission with External Error ────────────────────────
+  describe('Validity Emission with External Error', () => {
+    it('emits update:valid as false when external error is set even if date is valid', async () => {
+      wrapper = mountComponent({ error: true });
+      const input = wrapper.find('input');
+
+      // Enter a valid date
+      await input.setValue('12052024');
+      await input.trigger('input');
+
+      // inputState will be 'success', but external error means validity should be false
+      const validEvents = wrapper.emitted('update:valid') || [];
+      const lastEvent = validEvents[validEvents.length - 1];
+      expect(lastEvent?.[0]).toBe(false);
+    });
+
+    it('emits update:valid as true when date is valid and no external error', async () => {
+      wrapper = mountComponent({ error: false });
+      const input = wrapper.find('input');
+
+      await input.setValue('12052024');
+      await input.trigger('input');
+
+      const validEvents = wrapper.emitted('update:valid') || [];
+      const lastEvent = validEvents[validEvents.length - 1];
+      expect(lastEvent?.[0]).toBe(true);
+    });
+  });
+
+  // ─── hideDetails with External Error ──────────────────────────────
+  describe('hideDetails with External Error', () => {
+    it('shows details when external error is active', () => {
+      wrapper = mountComponent({ error: true, errorMessage: 'Required' });
+      // hideDetails should be false when error is showing
+      // In default layout: !(inputState === 'error' || props.error)
+      // = !(false || true) = false → details shown
+    });
+
+    it('hides details when no error', () => {
+      wrapper = mountComponent({ error: false });
+      // !(false || false) = true → details hidden
+    });
+  });
 });