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

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');
+    });
+  });
+});