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

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

@@ -0,0 +1,318 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import RadioGroup from '@components/RadioGroup/RadioGroup.vue';
+
+const defaultItems = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C' },
+];
+
+const radioGroupStub = {
+  name: 'VRadioGroup',
+  template: `<div class="v-radio-group" data-testid="v-radio-group" :disabled="disabled" :aria-label="ariaLabel" :data-ripple="ripple" :data-hide-details="hideDetails"><slot /></div>`,
+  props: ['modelValue', 'inline', 'ripple', 'hideDetails', 'disabled', 'ariaLabel'],
+  emits: ['update:modelValue'],
+};
+
+const radioStub = {
+  name: 'VRadio',
+  template: `<div class="v-radio" :class="{ 'v-radio--disabled': disabled }" data-testid="v-radio" :data-value="value" :data-disabled="disabled"><slot name="label" /></div>`,
+  props: ['ripple', 'value', 'disabled', 'color', 'baseColor'],
+};
+
+const mountRadioGroup = (props: Record<string, any> = {}) => {
+  return mount(RadioGroup, {
+    props: { items: defaultItems, ...props },
+    global: {
+      stubs: {
+        'v-radio-group': radioGroupStub,
+        'v-radio': radioStub,
+      },
+    },
+  });
+};
+
+describe('RadioGroup', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-radio-group CSS class', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.wl-radio-group').exists()).toBe(true);
+    });
+
+    it('renders all radio items', () => {
+      const wrapper = mountRadioGroup();
+      const radios = wrapper.findAll('[data-testid="v-radio"]');
+      expect(radios).toHaveLength(3);
+    });
+
+    it('renders labels for each item', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.text()).toContain('Option A');
+      expect(wrapper.text()).toContain('Option B');
+      expect(wrapper.text()).toContain('Option C');
+    });
+
+    it('defaults to inline layout', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.wl-radio-group__options--inline').exists()).toBe(true);
+      expect(wrapper.find('.wl-radio-group__options--vertical').exists()).toBe(false);
+    });
+  });
+
+  // ─── v-model / modelValue ─────────────────────────────────────────
+  describe('v-model / modelValue', () => {
+    it('accepts modelValue prop', () => {
+      const wrapper = mountRadioGroup({ modelValue: 'b' });
+      expect(wrapper.vm.modelValue).toBe('b');
+    });
+
+    it('defaults modelValue to undefined', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.vm.modelValue).toBeUndefined();
+    });
+
+    it('emits update:modelValue when onUpdate is called', () => {
+      const wrapper = mountRadioGroup();
+      const radioGroup = wrapper.findComponent(radioGroupStub);
+      radioGroup.vm.$emit('update:modelValue', 'c');
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['c']);
+    });
+  });
+
+  // ─── Layout Modes ─────────────────────────────────────────────────
+  describe('Layout Modes', () => {
+    it('renders inline layout by default', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.wl-radio-group__options--inline').exists()).toBe(true);
+    });
+
+    it('renders vertical layout when inline is false', () => {
+      const wrapper = mountRadioGroup({ inline: false });
+      expect(wrapper.find('.wl-radio-group__options--vertical').exists()).toBe(true);
+      expect(wrapper.find('.wl-radio-group__options--inline').exists()).toBe(false);
+    });
+
+    it('switches layout mode via prop change', async () => {
+      const wrapper = mountRadioGroup({ inline: true });
+      expect(wrapper.find('.wl-radio-group__options--inline').exists()).toBe(true);
+
+      await wrapper.setProps({ inline: false });
+      expect(wrapper.find('.wl-radio-group__options--vertical').exists()).toBe(true);
+    });
+  });
+
+  // ─── Disabled State ───────────────────────────────────────────────
+  describe('Disabled State', () => {
+    it('adds is-disabled class when disabled', () => {
+      const wrapper = mountRadioGroup({ disabled: true });
+      expect(wrapper.find('.is-disabled').exists()).toBe(true);
+    });
+
+    it('does not add is-disabled class by default', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.is-disabled').exists()).toBe(false);
+    });
+
+    it('passes disabled to v-radio-group', () => {
+      const wrapper = mountRadioGroup({ disabled: true });
+      const radioGroup = wrapper.find('[data-testid="v-radio-group"]');
+      expect(radioGroup.attributes('disabled')).toBe('true');
+    });
+
+    it('disables individual items via item.disabled', () => {
+      const items = [
+        { value: 'a', label: 'A', disabled: true },
+        { value: 'b', label: 'B' },
+      ];
+      const wrapper = mountRadioGroup({ items });
+      const radios = wrapper.findAll('[data-testid="v-radio"]');
+      expect(radios[0].attributes('data-disabled')).toBe('true');
+      expect(radios[1].attributes('data-disabled')).toBe('false');
+    });
+
+    it('group disabled overrides individual item disabled=false', () => {
+      const items = [
+        { value: 'a', label: 'A', disabled: false },
+        { value: 'b', label: 'B' },
+      ];
+      const wrapper = mountRadioGroup({ items, disabled: true });
+      const radios = wrapper.findAll('[data-testid="v-radio"]');
+      // disabled prop on v-radio is `item.disabled || disabled` → true
+      expect(radios[0].attributes('data-disabled')).toBe('true');
+      expect(radios[1].attributes('data-disabled')).toBe('true');
+    });
+  });
+
+  // ─── Error State ──────────────────────────────────────────────────
+  describe('Error State', () => {
+    it('adds is-error class when error is true', () => {
+      const wrapper = mountRadioGroup({ error: true });
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+    });
+
+    it('does not add is-error class by default', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.is-error').exists()).toBe(false);
+    });
+
+    it('toggles error state via prop change', async () => {
+      const wrapper = mountRadioGroup({ error: false });
+      expect(wrapper.find('.is-error').exists()).toBe(false);
+
+      await wrapper.setProps({ error: true });
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+    });
+  });
+
+  // ─── CSS Variables ────────────────────────────────────────────────
+  describe('CSS Variables', () => {
+    it('sets --radio-checked-border CSS variable', () => {
+      const wrapper = mountRadioGroup();
+      const root = wrapper.find('[data-testid="root"]');
+      const style = root.attributes('style');
+      expect(style).toContain('--radio-checked-border');
+    });
+
+    it('sets --radio-error-border CSS variable', () => {
+      const wrapper = mountRadioGroup();
+      const root = wrapper.find('[data-testid="root"]');
+      const style = root.attributes('style');
+      expect(style).toContain('--radio-error-border');
+    });
+  });
+
+  // ─── Theme Colors ─────────────────────────────────────────────────
+  describe('Theme Colors', () => {
+    it('uses siteColors by default (no injected theme)', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('uses injected themeColors when provided', () => {
+      const themeColors = {
+        value: {
+          font_color: 'custom-font',
+          font_color_title: 'custom-title',
+          font_color_code: 'custom-code',
+          font_color_title_code: 'custom-title-code',
+          checkbox_checked_border: '#00ff00',
+          checkbox_error_border: '#ff0000',
+        },
+      };
+      const wrapper = mount(RadioGroup, {
+        props: { items: defaultItems },
+        global: {
+          provide: { themeColors },
+          stubs: {
+            'v-radio-group': radioGroupStub,
+            'v-radio': radioStub,
+          },
+        },
+      });
+      const style = wrapper.find('[data-testid="root"]').attributes('style');
+      expect(style).toContain('#00ff00');
+      expect(style).toContain('#ff0000');
+    });
+  });
+
+  // ─── Selected Item Styling ────────────────────────────────────────
+  describe('Selected Item Label Styling', () => {
+    it('applies font_color_title class to selected item label', () => {
+      const wrapper = mountRadioGroup({ modelValue: 'a' });
+      const spans = wrapper.findAll('span');
+      expect(spans.length).toBeGreaterThan(0);
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('passes ariaLabel to v-radio-group (WCAG 4.1.2)', () => {
+      const wrapper = mountRadioGroup({ ariaLabel: 'Select your option' });
+      const radioGroup = wrapper.find('[data-testid="v-radio-group"]');
+      expect(radioGroup.attributes('aria-label')).toBe('Select your option');
+    });
+
+    it('does not set ariaLabel when not provided', () => {
+      const wrapper = mountRadioGroup();
+      const radioGroup = wrapper.find('[data-testid="v-radio-group"]');
+      // undefined ariaLabel means the attribute won't be rendered
+      expect(radioGroup.attributes('aria-label')).toBeUndefined();
+    });
+
+    it('renders as a group with semantic structure', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.wl-radio-group').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="v-radio-group"]').exists()).toBe(true);
+    });
+
+    it('disables ripple for cleaner keyboard focus (WCAG 2.4.7)', () => {
+      const wrapper = mountRadioGroup();
+      const radioGroup = wrapper.find('[data-testid="v-radio-group"]');
+      expect(radioGroup.attributes('data-ripple')).toBe('false');
+    });
+
+    it('hides details to avoid cluttering screen reader output', () => {
+      const wrapper = mountRadioGroup();
+      const radioGroup = wrapper.find('[data-testid="v-radio-group"]');
+      expect(radioGroup.attributes('data-hide-details')).toBe('true');
+    });
+
+    it('each radio has a text label (WCAG 1.1.1)', () => {
+      const wrapper = mountRadioGroup();
+      const radios = wrapper.findAll('[data-testid="v-radio"]');
+      radios.forEach((radio, i) => {
+        expect(radio.text()).toBe(defaultItems[i].label);
+      });
+    });
+
+    it('is keyboard accessible when not disabled', () => {
+      const wrapper = mountRadioGroup();
+      expect(wrapper.find('.is-disabled').exists()).toBe(false);
+    });
+
+    it('removes interaction when disabled (WCAG 2.1.1)', () => {
+      const wrapper = mountRadioGroup({ disabled: true });
+      expect(wrapper.find('.is-disabled').exists()).toBe(true);
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles empty items array', () => {
+      const wrapper = mountRadioGroup({ items: [] });
+      expect(wrapper.findAll('[data-testid="v-radio"]')).toHaveLength(0);
+    });
+
+    it('handles single item', () => {
+      const wrapper = mountRadioGroup({
+        items: [{ value: 'only', label: 'Only Option' }],
+      });
+      expect(wrapper.findAll('[data-testid="v-radio"]')).toHaveLength(1);
+    });
+
+    it('handles rapid prop changes', async () => {
+      const wrapper = mountRadioGroup({ modelValue: 'a' });
+      await wrapper.setProps({ modelValue: 'b' });
+      await wrapper.setProps({ modelValue: 'c' });
+      expect(wrapper.vm.modelValue).toBe('c');
+    });
+
+    it('handles combined error and disabled state', () => {
+      const wrapper = mountRadioGroup({ error: true, disabled: true });
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+      expect(wrapper.find('.is-disabled').exists()).toBe(true);
+    });
+  });
+});