@zap-wunschlachen/wl-shared-components 1.0.35 → 1.0.38

package/tests/unit/components/Accordion/AccordionItem.spec.ts

@@ -0,0 +1,292 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+describe('AccordionItem', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        }
+      });
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.title).toBe('Default Title');
+      expect(wrapper.vm.text).toBe('Default text');
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.bgColor).toBe('var(--Soft-Concrete-0)');
+    });
+
+    it('renders with custom title and text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Custom Title',
+          text: 'Custom content text'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Custom Title');
+      expect(wrapper.vm.text).toBe('Custom content text');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts and applies variant prop - outlined', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'outlined'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.find('.outlined-style').exists()).toBe(true);
+    });
+
+    it('accepts and applies variant prop - plain', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'plain'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('plain');
+      expect(wrapper.find('.plain-style').exists()).toBe(true);
+    });
+
+    it('accepts string value', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'string-value'
+        }
+      });
+
+      expect(wrapper.vm.value).toBe('string-value');
+    });
+
+    it('accepts number value', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 42
+        }
+      });
+
+      expect(wrapper.vm.value).toBe(42);
+    });
+
+    it('accepts custom background color', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          bgColor: '#FFFFFF'
+        }
+      });
+
+      expect(wrapper.vm.bgColor).toBe('#FFFFFF');
+    });
+  });
+
+  describe('Slots', () => {
+    it('accepts title slot', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          title: '<span class="custom-title">Slot Title</span>'
+        }
+      });
+
+      expect(wrapper.find('.custom-title').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Slot Title');
+    });
+
+    it('accepts content slot', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          content: '<div class="custom-content">Slot Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.custom-content').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Slot Content');
+    });
+
+    it('uses title prop as default content', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Prop Title'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Prop Title');
+    });
+
+    it('uses text prop as default content', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          text: 'Prop Text Content'
+        }
+      });
+
+      expect(wrapper.vm.text).toBe('Prop Text Content');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes on trigger and panel', async () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      // Find the interactive trigger (use data-testid or role)
+      const trigger = wrapper.find('[data-testid="root"] [role="button"], [data-testid="root"] button, [role="button"]');
+      expect(trigger.exists()).toBe(true);
+
+      // Trigger should expose aria attributes
+      const expanded = trigger.attributes('aria-expanded');
+      const controls = trigger.attributes('aria-controls');
+      const labelled = trigger.attributes('aria-labelledby');
+
+      expect(expanded).toBeDefined();
+      expect(controls).toBeDefined();
+      expect(labelled).toBeDefined();
+
+      // Panel should exist and have role region and matching id
+      const panelId = controls || '';
+      const panel = panelId ? wrapper.find(`#${panelId}`) : wrapper.find('[role="region"]');
+      expect(panel.exists()).toBe(true);
+      expect(panel.attributes('role')).toBe('region');
+    });
+
+    it('toggles expanded state via Enter and Space keys and manages focus', async () => {
+      const wrapper = mount(AccordionItem, {
+        attachTo: document.body,
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      const trigger = wrapper.find('[data-testid="root"] [role="button"], [data-testid="root"] button, [role="button"]');
+      expect(trigger.exists()).toBe(true);
+
+      // Initial state should be collapsed
+      expect(trigger.attributes('aria-expanded')).toBe('false');
+
+      // Press Enter to expand
+      await trigger.trigger('keydown.enter');
+      await wrapper.vm.$nextTick();
+
+      expect(trigger.attributes('aria-expanded')).toBe('true');
+
+      // Focus should remain or move to trigger; ensure trigger is focused
+      trigger.element.focus();
+      expect(document.activeElement).toBe(trigger.element);
+
+      // Press Space to collapse
+      await trigger.trigger('keydown.space');
+      await wrapper.vm.$nextTick();
+
+      expect(trigger.attributes('aria-expanded')).toBe('false');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty title', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: ''
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('');
+    });
+
+    it('handles empty text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          text: ''
+        }
+      });
+
+      expect(wrapper.vm.text).toBe('');
+    });
+
+    it('handles very long title text', () => {
+      const longTitle = 'A'.repeat(500);
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: longTitle
+        }
+      });
+
+      expect(wrapper.vm.title).toBe(longTitle);
+    });
+
+    it('handles special characters in title and text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Title with <special> & "characters"',
+          text: 'Content with äöü ñ émojis 🎉'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Title with <special> & "characters"');
+      expect(wrapper.vm.text).toBe('Content with äöü ñ émojis 🎉');
+    });
+
+    it('handles value of 0', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 0
+        }
+      });
+
+      expect(wrapper.vm.value).toBe(0);
+    });
+  });
+
+  describe('Variant Styling', () => {
+    it('applies outlined-style class for outlined variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'outlined'
+        }
+      });
+
+      expect(wrapper.find('.outlined-style').exists()).toBe(true);
+      expect(wrapper.find('.plain-style').exists()).toBe(false);
+    });
+
+    it('applies plain-style class for plain variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'plain'
+        }
+      });
+
+      expect(wrapper.find('.plain-style').exists()).toBe(true);
+      expect(wrapper.find('.outlined-style').exists()).toBe(false);
+    });
+  });
+});

package/tests/unit/components/Appointment/AnamneseNotification.spec.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AnamneseNotification from '@components/Appointment/Card/AnamneseNotification.vue';
+
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'wl.appointment_card.fill_form_title': 'Bitte füllen Sie das Formular aus',
+        'wl.appointment_card.fill_form_description': 'Vor Ihrem Termin bitten wir Sie, den Anamnesebogen auszufüllen.',
+        'wl.appointment_card.anamnese_form': 'Anamnesebogen ausfüllen'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+// Mock Button component
+vi.mock('@components/Button/Button.vue', () => ({
+  default: {
+    name: 'Button',
+    template: '<button class="wl-button" @click="$emit(\'click\')">{{ label }}</button>',
+    props: ['variant', 'label'],
+    emits: ['click']
+  }
+}));
+
+describe('AnamneseNotification', () => {
+  describe('Default Behavior', () => {
+    it('renders notification container', () => {
+      const wrapper = mount(AnamneseNotification);
+      expect(wrapper.find('.main-container').exists()).toBe(true);
+    });
+
+    it('renders title text', () => {
+      const wrapper = mount(AnamneseNotification);
+      expect(wrapper.text()).toContain('Bitte füllen Sie das Formular aus');
+    });
+
+    it('renders description text', () => {
+      const wrapper = mount(AnamneseNotification);
+      expect(wrapper.text()).toContain('Vor Ihrem Termin bitten wir Sie');
+    });
+
+    it('renders action button', () => {
+      const wrapper = mount(AnamneseNotification);
+      const button = wrapper.find('.wl-button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Anamnesebogen ausfüllen');
+    });
+  });
+
+  describe('Events', () => {
+    it('emits fillAnamnese event on button click', async () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('fillAnamnese')).toBeTruthy();
+      expect(wrapper.emitted('fillAnamnese')!.length).toBe(1);
+    });
+
+    it('emits fillAnamnese event multiple times on multiple clicks', async () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+      await button.trigger('click');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('fillAnamnese')).toBeTruthy();
+      expect(wrapper.emitted('fillAnamnese')!.length).toBe(3);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper text hierarchy', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const paragraphs = wrapper.findAll('p');
+      expect(paragraphs.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('has accessible button', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const button = wrapper.find('button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBeTruthy();
+    });
+
+    it('provides meaningful content for screen readers', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      // Title should be clear
+      expect(wrapper.text()).toContain('Bitte füllen Sie das Formular aus');
+
+      // Description should provide context
+      expect(wrapper.text()).toContain('Anamnesebogen');
+    });
+
+    it('has proper text container structure', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      expect(wrapper.find('.text-container').exists()).toBe(true);
+    });
+
+    it('description has smaller text class', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      expect(wrapper.find('.p-small').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has main container', () => {
+      const wrapper = mount(AnamneseNotification);
+      expect(wrapper.find('.main-container').exists()).toBe(true);
+    });
+
+    it('has text container', () => {
+      const wrapper = mount(AnamneseNotification);
+      expect(wrapper.find('.text-container').exists()).toBe(true);
+    });
+
+    it('button is outside text container', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const textContainer = wrapper.find('.text-container');
+      const button = textContainer.find('button');
+
+      // Button should not be inside text container
+      expect(button.exists()).toBe(false);
+
+      // But should exist in main container
+      expect(wrapper.find('button').exists()).toBe(true);
+    });
+  });
+
+    it('uses translation for title', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const paragraphs = wrapper.findAll('p');
+      expect(paragraphs.length).toBeGreaterThan(0);
+      expect(paragraphs[0].text()).toBe('Bitte füllen Sie das Formular aus');
+    });
+    });
+
+    it('uses translation for description', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const smallP = wrapper.find('.p-small');
+      expect(smallP.text()).toContain('Anamnesebogen');
+    });
+
+    it('uses translation for button label', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      const button = wrapper.find('.wl-button');
+      expect(button.text()).toBe('Anamnesebogen ausfüllen');
+    });
+  });
+
+  describe('Button Configuration', () => {
+    it('button has outlined variant', () => {
+      const wrapper = mount(AnamneseNotification);
+
+      // Button component receives variant prop
+      const buttonComponent = wrapper.findComponent({ name: 'Button' });
+      expect(buttonComponent.exists()).toBe(true);
+      expect(buttonComponent.props('variant')).toBe('outlined');
+    });
+  });
+});

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

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Background from '@components/Background/Background.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    domain: 'domain-dental'
+  }
+}));
+
+// Mock child background components
+vi.mock('@components/Background/WunschlachenBackground.vue', () => ({
+  default: {
+    name: 'WunschlachenBackground',
+    template: '<svg class="wunschlachen-background"></svg>'
+  }
+}));
+
+vi.mock('@components/Background/WhiteCocoonBackground.vue', () => ({
+  default: {
+    name: 'WhiteCocoonBackground',
+    template: '<svg class="white-cocoon-background"></svg>'
+  }
+}));
+
+describe('Background', () => {
+  describe('Default Behavior', () => {
+    it('renders background container', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background').exists()).toBe(true);
+    });
+
+    it('has background__content wrapper', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('renders background SVG', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background__svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Domain-specific Rendering', () => {
+    it('renders WunschlachenBackground for dental domain', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.wunschlachen-background').exists()).toBe(true);
+      expect(wrapper.find('.white-cocoon-background').exists()).toBe(false);
+    });
+
+    it('does not have cocoon modifier class for dental domain', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background--cocoon').exists()).toBe(false);
+    });
+  });
+
+  describe('Slots', () => {
+    it('renders default slot content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="test-content">Test Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.test-content').exists()).toBe(true);
+      expect(wrapper.find('.test-content').text()).toBe('Test Content');
+    });
+
+    it('renders multiple slot elements', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: `
+            <header class="slot-header">Header</header>
+            <main class="slot-main">Main Content</main>
+            <footer class="slot-footer">Footer</footer>
+          `
+        }
+      });
+
+      expect(wrapper.find('.slot-header').exists()).toBe(true);
+      expect(wrapper.find('.slot-main').exists()).toBe(true);
+      expect(wrapper.find('.slot-footer').exists()).toBe(true);
+    });
+
+    it('preserves slot content structure', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="nested"><span class="inner">Nested Content</span></div>'
+        }
+      });
+
+      expect(wrapper.find('.nested .inner').exists()).toBe(true);
+      expect(wrapper.find('.inner').text()).toBe('Nested Content');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('slot content is accessible within background', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<main role="main"><h1>Accessible Content</h1></main>'
+        }
+      });
+
+      expect(wrapper.find('[role="main"]').exists()).toBe(true);
+      expect(wrapper.find('h1').text()).toBe('Accessible Content');
+    });
+
+    it('background SVG does not interfere with content accessibility', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<button class="test-button">Click Me</button>'
+        }
+      });
+
+      // Content should be in background__content, separate from background SVG
+      const content = wrapper.find('.background__content');
+      expect(content.find('.test-button').exists()).toBe(true);
+    });
+
+    it('maintains proper z-index layering for content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="foreground-content">Foreground</div>'
+        }
+      });
+
+      // Content should be separate from background SVG
+      const svg = wrapper.find('.background__svg');
+      const content = wrapper.find('.background__content');
+
+      expect(svg.exists()).toBe(true);
+      expect(content.exists()).toBe(true);
+      expect(content.find('.foreground-content').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has proper class structure', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+      expect(wrapper.find('.background__svg').exists()).toBe(true);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('SVG is positioned as background element', () => {
+      const wrapper = mount(Background);
+
+      const backgroundEl = wrapper.find('.background');
+      const svgEl = wrapper.find('.background__svg');
+
+      expect(backgroundEl.element.contains(svgEl.element)).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders correctly with no slot content', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('handles empty string slot content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: ''
+        }
+      });
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+    });
+  });
+});