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

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

@@ -0,0 +1,344 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AnamneseAnswerDialog from '@components/AnamneseAnswerDialog/AnamneseAnswerDialog.vue';
+
+// Mock WLModal
+vi.mock('@components/Modal/Modal.vue', () => ({
+  default: {
+    name: 'WLModal',
+    template: `<div class="wl-modal" data-testid="modal"><slot name="content" :closeDialog="close" /></div>`,
+    setup() {
+      const open = vi.fn();
+      const close = vi.fn();
+      return { openDialog: open, closeDialog: close, close };
+    },
+    methods: {
+      openDialog() {},
+      closeDialog() {},
+    },
+  },
+}));
+
+const samplePageAnswerGroups = [
+  {
+    pageKey: 'page1',
+    title: 'Allgemeine Angaben',
+    answers: [
+      {
+        key: 'q1',
+        name: 'q1',
+        label: 'Name',
+        value: 'Max Mustermann',
+      },
+      {
+        key: 'q2',
+        name: 'q2',
+        label: 'Allergien',
+        value: 'Nein',
+        valueListSelected: [{ text: 'Nein', color: 'green', selected: true }],
+        valueListAll: [
+          { text: 'Ja', color: 'red', selected: false },
+          { text: 'Nein', color: 'green', selected: true },
+        ],
+        valueListAllDisplay: [{ text: 'Nein', color: 'green', selected: true }],
+        hasColor: true,
+      },
+    ],
+  },
+  {
+    pageKey: 'page2',
+    title: 'Unterschrift',
+    answers: [
+      {
+        key: 'sig',
+        name: 'sig',
+        label: 'Unterschrift',
+        isSignature: true,
+        signatureId: 'sig-123',
+        signatureUrl: 'https://example.com/sig.png',
+      },
+    ],
+  },
+];
+
+const mountDialog = (props: Record<string, any> = {}, options: Record<string, any> = {}) => {
+  return mount(AnamneseAnswerDialog, {
+    props: { pageAnswerGroups: samplePageAnswerGroups, ...props },
+    ...options,
+  });
+};
+
+describe('AnamneseAnswerDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders the activator icon by default', () => {
+      const wrapper = mountDialog();
+      const icon = wrapper.find('.anamnese-dialog-activator');
+      expect(icon.exists()).toBe(true);
+    });
+
+    it('renders the modal component', () => {
+      const wrapper = mountDialog();
+      expect(wrapper.findComponent({ name: 'WLModal' }).exists()).toBe(true);
+    });
+
+    it('renders the dialog header with title', () => {
+      const wrapper = mountDialog();
+      const header = wrapper.find('.anamnese-dialog-header');
+      expect(header.exists()).toBe(true);
+      expect(header.find('h2').text()).toBe('Anamnese Bogen');
+    });
+  });
+
+  // ─── showActivator ────────────────────────────────────────────────
+  describe('showActivator', () => {
+    it('shows activator icon when showActivator is true (default)', () => {
+      const wrapper = mountDialog();
+      expect(wrapper.find('.anamnese-dialog-activator').exists()).toBe(true);
+    });
+
+    it('hides activator icon when showActivator is false', () => {
+      const wrapper = mountDialog({ showActivator: false });
+      expect(wrapper.find('.anamnese-dialog-activator').exists()).toBe(false);
+    });
+  });
+
+  // ─── Page Answer Groups Display ───────────────────────────────────
+  describe('Page Answer Groups Display', () => {
+    it('renders page groups', () => {
+      const wrapper = mountDialog();
+      const groups = wrapper.findAll('.anamnese-dialog-page-group');
+      expect(groups).toHaveLength(2);
+    });
+
+    it('renders page titles', () => {
+      const wrapper = mountDialog();
+      const titles = wrapper.findAll('.anamnese-dialog-page-title');
+      expect(titles[0].text()).toBe('Allgemeine Angaben');
+      expect(titles[1].text()).toBe('Unterschrift');
+    });
+
+    it('renders answer labels', () => {
+      const wrapper = mountDialog();
+      const labels = wrapper.findAll('.anamnese-dialog-answer-label');
+      expect(labels[0].text()).toBe('Name');
+      expect(labels[1].text()).toBe('Allergien');
+      expect(labels[2].text()).toBe('Unterschrift');
+    });
+
+    it('renders plain text value', () => {
+      const wrapper = mountDialog();
+      expect(wrapper.find('.anamnese-dialog-value-text').text()).toBe('Max Mustermann');
+    });
+
+    it('renders choice items with icons', () => {
+      const wrapper = mountDialog();
+      const choices = wrapper.findAll('.anamnese-dialog-choice-item');
+      expect(choices.length).toBeGreaterThan(0);
+    });
+
+    it('renders choice text', () => {
+      const wrapper = mountDialog();
+      const choiceTexts = wrapper.findAll('.anamnese-dialog-choice-text');
+      expect(choiceTexts.length).toBeGreaterThan(0);
+    });
+  });
+
+  // ─── Signature Display ────────────────────────────────────────────
+  describe('Signature Display', () => {
+    it('renders signature image for signature answers', () => {
+      const wrapper = mountDialog();
+      const img = wrapper.find('.anamnese-dialog-signature-image');
+      expect(img.exists()).toBe(true);
+      expect(img.attributes('src')).toBe('https://example.com/sig.png');
+      expect(img.attributes('alt')).toBe('Unterschrift');
+    });
+  });
+
+  // ─── Empty State ──────────────────────────────────────────────────
+  describe('Empty State', () => {
+    it('shows empty message when no answer groups', () => {
+      const wrapper = mountDialog({ pageAnswerGroups: [] });
+      expect(wrapper.find('.anamnese-dialog-empty').text()).toBe(
+        'Keine ausgefüllten Fragen vorhanden.',
+      );
+    });
+
+    it('shows empty message when pageAnswerGroups is undefined', () => {
+      const wrapper = mountDialog({ pageAnswerGroups: undefined });
+      expect(wrapper.find('.anamnese-dialog-empty').exists()).toBe(true);
+    });
+  });
+
+  // ─── Exposed Methods ──────────────────────────────────────────────
+  describe('Exposed Methods', () => {
+    it('exposes openDialog', () => {
+      const wrapper = mountDialog();
+      expect(typeof wrapper.vm.openDialog).toBe('function');
+    });
+
+    it('exposes closeDialog', () => {
+      const wrapper = mountDialog();
+      expect(typeof wrapper.vm.closeDialog).toBe('function');
+    });
+  });
+
+  // ─── Choice Icon Logic ────────────────────────────────────────────
+  describe('Choice Icon Logic', () => {
+    it('shows choice items for colored answers (uses valueListAllDisplay)', () => {
+      const wrapper = mountDialog();
+      // The "Allergien" answer has hasColor=true, so it uses valueListAllDisplay
+      const choiceItems = wrapper.findAll('.anamnese-dialog-choice-item');
+      expect(choiceItems.length).toBeGreaterThan(0);
+    });
+
+    it('renders "other" annotation', () => {
+      const groups = [
+        {
+          pageKey: 'p1',
+          title: 'P1',
+          answers: [
+            {
+              key: 'q',
+              name: 'q',
+              label: 'Q',
+              value: 'Other text',
+              valueListSelected: [
+                { text: 'Custom', selected: true, isOther: true },
+              ],
+              valueListAll: [
+                { text: 'A', selected: false },
+                { text: 'Custom', selected: true, isOther: true },
+              ],
+              hasColor: false,
+            },
+          ],
+        },
+      ];
+      const wrapper = mountDialog({ pageAnswerGroups: groups });
+      expect(wrapper.find('.anamnese-dialog-choice-annotation').text()).toBe('(Andere)');
+    });
+
+    it('renders "none" annotation', () => {
+      const groups = [
+        {
+          pageKey: 'p1',
+          title: 'P1',
+          answers: [
+            {
+              key: 'q',
+              name: 'q',
+              label: 'Q',
+              value: 'Keine',
+              valueListSelected: [
+                { text: 'Keine', selected: true, isNone: true },
+              ],
+              valueListAll: [
+                { text: 'A', selected: false },
+                { text: 'Keine', selected: true, isNone: true },
+              ],
+              hasColor: false,
+            },
+          ],
+        },
+      ];
+      const wrapper = mountDialog({ pageAnswerGroups: groups });
+      expect(wrapper.find('.anamnese-dialog-choice-annotation').text()).toBe('(Keine Auswahl)');
+    });
+
+    it('applies unselected CSS class to non-selected choices', () => {
+      const groups = [
+        {
+          pageKey: 'p1',
+          title: 'P1',
+          answers: [
+            {
+              key: 'q',
+              name: 'q',
+              label: 'Q',
+              value: 'A',
+              valueListSelected: [{ text: 'A', selected: true }],
+              valueListAll: [
+                { text: 'A', selected: true },
+                { text: 'B', selected: false },
+              ],
+              valueListAllDisplay: [
+                { text: 'A', selected: true },
+                { text: 'B', selected: false },
+              ],
+              hasColor: true,
+            },
+          ],
+        },
+      ];
+      const wrapper = mountDialog({ pageAnswerGroups: groups });
+      expect(wrapper.find('.anamnese-dialog-choice-unselected').exists()).toBe(true);
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('activator icon is clickable', () => {
+      const wrapper = mountDialog();
+      const activator = wrapper.find('.anamnese-dialog-activator');
+      expect(activator.exists()).toBe(true);
+    });
+
+    it('close icon is present in header', () => {
+      const wrapper = mountDialog();
+      const closeIcon = wrapper.find('.anamnese-dialog-close-icon');
+      expect(closeIcon.exists()).toBe(true);
+    });
+
+    it('signature image has alt text', () => {
+      const wrapper = mountDialog();
+      const img = wrapper.find('.anamnese-dialog-signature-image');
+      expect(img.attributes('alt')).toBe('Unterschrift');
+    });
+
+    it('page groups have heading hierarchy (h2 title, h3 page/answer)', () => {
+      const wrapper = mountDialog();
+      expect(wrapper.find('h2').text()).toBe('Anamnese Bogen');
+      const h3s = wrapper.findAll('h3');
+      expect(h3s.length).toBeGreaterThan(0);
+    });
+
+    it('content is scrollable for long forms', () => {
+      const wrapper = mountDialog();
+      expect(wrapper.find('.anamnese-dialog-content').exists()).toBe(true);
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles answers with no valueList (plain text only)', () => {
+      const groups = [
+        {
+          pageKey: 'p1',
+          title: 'P1',
+          answers: [
+            { key: 'q', name: 'q', label: 'Q', value: 'Simple text' },
+          ],
+        },
+      ];
+      const wrapper = mountDialog({ pageAnswerGroups: groups });
+      expect(wrapper.find('.anamnese-dialog-value-text').text()).toBe('Simple text');
+    });
+
+    it('handles many page groups', () => {
+      const groups = Array.from({ length: 10 }, (_, i) => ({
+        pageKey: `p${i}`,
+        title: `Page ${i}`,
+        answers: [
+          { key: `q${i}`, name: `q${i}`, label: `Q${i}`, value: `Answer ${i}` },
+        ],
+      }));
+      const wrapper = mountDialog({ pageAnswerGroups: groups });
+      expect(wrapper.findAll('.anamnese-dialog-page-group')).toHaveLength(10);
+    });
+  });
+});

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

@@ -0,0 +1,187 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Banner from '@components/Banner/Banner.vue';
+
+describe('Banner', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-banner CSS class', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('.wl-banner').exists()).toBe(true);
+    });
+
+    it('renders default text "Label"', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.text()).toContain('Label');
+    });
+
+    it('renders the fold element', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('.wl-banner__fold').exists()).toBe(true);
+    });
+
+    it('fold element has aria-hidden="true"', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('.wl-banner__fold').attributes('aria-hidden')).toBe('true');
+    });
+  });
+
+  // ─── Text Prop ────────────────────────────────────────────────────
+  describe('Text Prop', () => {
+    it('renders custom text', () => {
+      const wrapper = mount(Banner, { props: { text: 'Custom Label' } });
+      expect(wrapper.text()).toContain('Custom Label');
+    });
+
+    it('renders empty text', () => {
+      const wrapper = mount(Banner, { props: { text: '' } });
+      expect(wrapper.find('p').text()).toBe('');
+    });
+  });
+
+  // ─── Color Variants ──────────────────────────────────────────────
+  // Note: happy-dom does not support CSS var() in inline styles,
+  // so we test the computed style objects via wrapper.vm instead of DOM attributes.
+  describe('Color Variants', () => {
+    it('defaults to blue variant', () => {
+      const wrapper = mount(Banner);
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#C5E1FC');
+    });
+
+    it('applies blue color', () => {
+      const wrapper = mount(Banner, { props: { color: 'blue' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#C5E1FC');
+    });
+
+    it('applies orange color', () => {
+      const wrapper = mount(Banner, { props: { color: 'orange' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#FCE2DF');
+    });
+
+    it('applies pink color', () => {
+      const wrapper = mount(Banner, { props: { color: 'pink' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#FCC9DF');
+    });
+
+    it('applies green color', () => {
+      const wrapper = mount(Banner, { props: { color: 'green' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#D8FDE4');
+    });
+
+    it('falls back to blue for unknown color', () => {
+      const wrapper = mount(Banner, { props: { color: 'purple' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#C5E1FC');
+    });
+
+    it('applies correct fold color for each variant', () => {
+      const foldColors: Record<string, string> = {
+        blue: '#ADCBE9',
+        orange: '#EDD4D2',
+        pink: '#FA9FC5',
+        green: '#01D449',
+      };
+      for (const [color, expected] of Object.entries(foldColors)) {
+        const wrapper = mount(Banner, { props: { color } });
+        expect((wrapper.vm as any).foldStyle.borderTopColor).toContain(expected);
+      }
+    });
+  });
+
+  // ─── Custom Colors ────────────────────────────────────────────────
+  describe('Custom bgColor / foldColor', () => {
+    it('bgColor overrides color variant', () => {
+      const wrapper = mount(Banner, {
+        props: { color: 'blue', bgColor: '#ff00ff' },
+      });
+      const style = wrapper.find('[data-testid="root"]').attributes('style');
+      expect(style).toContain('#ff00ff');
+      expect(style).not.toContain('#C5E1FC');
+    });
+
+    it('foldColor overrides color variant', () => {
+      const wrapper = mount(Banner, {
+        props: { color: 'blue', foldColor: '#00ff00' },
+      });
+      const foldStyle = wrapper.find('.wl-banner__fold').attributes('style');
+      expect(foldStyle).toContain('#00ff00');
+    });
+
+    it('both bgColor and foldColor override variant', () => {
+      const wrapper = mount(Banner, {
+        props: { bgColor: '#aaa', foldColor: '#bbb' },
+      });
+      expect(wrapper.find('[data-testid="root"]').attributes('style')).toContain('#aaa');
+      expect(wrapper.find('.wl-banner__fold').attributes('style')).toContain('#bbb');
+    });
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────
+  describe('Slots', () => {
+    it('content slot overrides default text', () => {
+      const wrapper = mount(Banner, {
+        slots: { content: '<strong>Custom content</strong>' },
+      });
+      expect(wrapper.find('strong').text()).toBe('Custom content');
+      expect(wrapper.find('p').exists()).toBe(false);
+    });
+
+    it('fold slot overrides default fold', () => {
+      const wrapper = mount(Banner, {
+        slots: { fold: '<div class="custom-fold">fold</div>' },
+      });
+      expect(wrapper.find('.custom-fold').exists()).toBe(true);
+      expect(wrapper.find('.wl-banner__fold').exists()).toBe(false);
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('sets aria-label when provided (WCAG 4.1.2)', () => {
+      const wrapper = mount(Banner, {
+        props: { ariaLabel: 'Status banner' },
+      });
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBe('Status banner');
+    });
+
+    it('does not set aria-label when not provided', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('[data-testid="root"]').attributes('aria-label')).toBeUndefined();
+    });
+
+    it('fold is hidden from assistive technology', () => {
+      const wrapper = mount(Banner);
+      expect(wrapper.find('.wl-banner__fold').attributes('aria-hidden')).toBe('true');
+    });
+
+    it('text content is readable by screen readers', () => {
+      const wrapper = mount(Banner, { props: { text: 'Important info' } });
+      expect(wrapper.find('p').text()).toBe('Important info');
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles prop changes reactively', async () => {
+      const wrapper = mount(Banner, { props: { color: 'blue' } });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#C5E1FC');
+
+      await wrapper.setProps({ color: 'green' });
+      expect((wrapper.vm as any).tagStyle.backgroundColor).toContain('#D8FDE4');
+    });
+
+    it('handles long text content', () => {
+      const longText = 'A'.repeat(500);
+      const wrapper = mount(Banner, { props: { text: longText } });
+      expect(wrapper.text()).toContain(longText);
+    });
+  });
+});