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

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

@@ -1,532 +1,532 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { format } from 'date-fns';
-import { de } from 'date-fns/locale';
-import Card from '../../../../../src/components/Appointment/Card/Card.vue';
-import type { AppointmentData, Dentist } from '../../../../../src/types';
-
-// Mock vue-i18n
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        'wl.appointment_card.unknown_patient': 'Unbekannter Patient'
-      };
-      return translations[key] || key;
-    }
-  })
-}));
-
-// Mock appointmentTypes
-vi.mock('../../../../../src/utils/index', () => ({
-  appointmentTypes: [
-    { id: 1, title: 'Regular Checkup', icon: 'checkup' },
-    { id: 2, title: 'Treatment', icon: 'treatment' }
-  ]
-}));
-
-describe('Appointment Card', () => {
-  let wrapper: VueWrapper;
-
-  const createMockDentist = (overrides: Partial<Dentist> = {}): Dentist => ({
-    name: 'Dr. Test Dentist',
-    gender: 'Male',
-    imageSrc: 'https://example.com/dentist.jpg',
-    ...overrides
-  });
-
-  const createMockAppointment = (overrides: Partial<AppointmentData> = {}): AppointmentData => ({
-    id: '123',
-    template_name: 'Test Treatment',
-    description: 'Test Description',
-    dentist: createMockDentist(),
-    start: '2024-01-15T10:30:00.000Z',
-    type: 1,
-    status: 'upcoming',
-    patientName: 'John Doe',
-    address: 'Test Address 123',
-    district: 'Test District',
-    is_confirmed: false,
-    ...overrides
-  });
-
-  const createGlobalConfig = () => ({
-    stubs: {
-      UserIcon: {
-        template: '<svg class="header-icon user-icon"></svg>'
-      },
-      CalendarIcon: {
-        template: '<svg class="header-icon calendar-icon"></svg>'
-      },
-      ClockIcon: {
-        template: '<svg class="header-icon clock-icon"></svg>'
-      },
-      IconsAdvanceAppointments: {
-        template: '<div class="advance-appointments-icon"></div>',
-        props: ['width', 'height', 'iconType']
-      },
-      Details: {
-        template: '<div class="details-stub">Details Component</div>',
-        props: ['appointment', 'dentistImageSrc']
-      },
-      Actions: {
-        template: '<div class="actions-stub" @confirmed="$emit(\'confirmed\', $event)" @cancelled="$emit(\'cancelled\', $event)" @rescheduled="$emit(\'rescheduled\', $event)">Actions Component</div>',
-        props: ['appointment', 'disabled'],
-        emits: ['confirmed', 'cancelled', 'rescheduled']
-      },
-      AnamneseNotification: {
-        template: '<div class="anamnese-notification-stub"></div>'
-      }
-    }
-  });
-
-  beforeEach(() => {
-    const appointment = createMockAppointment();
-    wrapper = mount(Card, {
-      props: { appointment, showActions: true },
-      global: createGlobalConfig()
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component with correct test id', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('should render the appointment card structure', () => {
-      expect(wrapper.find('.appointment-card').exists()).toBe(true);
-      expect(wrapper.find('.card-header').exists()).toBe(true);
-      expect(wrapper.find('.card-body').exists()).toBe(true);
-      expect(wrapper.find('.card-footer').exists()).toBe(true);
-    });
-
-    it('should render Details and Actions components', () => {
-      expect(wrapper.find('.details-stub').exists()).toBe(true);
-      expect(wrapper.find('.actions-stub').exists()).toBe(true);
-    });
-  });
-
-  describe('Header Information', () => {
-    it('should display patient name', () => {
-      expect(wrapper.text()).toContain('John Doe');
-    });
-
-    it('should display default patient name when not provided', async () => {
-      const appointmentWithoutPatient = createMockAppointment({ patientName: undefined });
-      await wrapper.setProps({ appointment: appointmentWithoutPatient });
-
-      expect(wrapper.text()).toContain('Unbekannter Patient');
-    });
-
-    it('should display formatted date', () => {
-      const expectedDate = format(new Date('2024-01-15T10:30:00Z'), 'EEE, d MMM yyyy', { locale: de });
-      expect(wrapper.text()).toContain(expectedDate);
-    });
-
-    it('should display formatted time', () => {
-      const expectedTime = format(new Date('2024-01-15T10:30:00Z'), 'HH:mm');
-      expect(wrapper.text()).toContain(expectedTime);
-    });
-
-    it('should render header icons', () => {
-      // Component renders 3 header items with icons
-      const headerItems = wrapper.findAll('.header-item');
-      expect(headerItems).toHaveLength(3);
-
-      // Each header item should contain an icon element
-      headerItems.forEach(item => {
-        expect(item.find('svg').exists()).toBe(true);
-      });
-    });
-
-    it('should have correct header items structure', () => {
-      const headerItems = wrapper.findAll('.header-item');
-      expect(headerItems).toHaveLength(3);
-    });
-  });
-
-  describe('Appointment Status Styling', () => {
-    it('should apply default header background for upcoming appointments', () => {
-      const header = wrapper.find('.card-header');
-      expect(header.classes()).toContain('card-header--default');
-      expect(header.classes()).not.toContain('card-header--cancelled');
-    });
-
-    it('should apply cancelled header background for cancelled appointments', async () => {
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      await wrapper.setProps({ appointment: cancelledAppointment });
-
-      const header = wrapper.find('.card-header');
-      expect(header.classes()).toContain('card-header--cancelled');
-      expect(header.classes()).not.toContain('card-header--default');
-    });
-
-    it('should apply card opacity for done appointments', async () => {
-      const doneAppointment = createMockAppointment({ status: 'done' });
-      await wrapper.setProps({ appointment: doneAppointment });
-
-      expect(wrapper.find('.card-opacity').exists()).toBe(true);
-    });
-
-    it('should not apply card opacity for upcoming appointments', () => {
-      expect(wrapper.find('.card-opacity').exists()).toBe(false);
-    });
-  });
-
-  describe('Template Name Display', () => {
-    it('should display single template name', () => {
-      expect(wrapper.text()).toContain('Test Treatment');
-    });
-
-    it('should display multiple template names as comma-separated string', async () => {
-      const appointmentWithMultipleTemplates = createMockAppointment({
-        template_name: ['Treatment A', 'Treatment B', 'Treatment C']
-      });
-      await wrapper.setProps({ appointment: appointmentWithMultipleTemplates });
-
-      expect(wrapper.text()).toContain('Treatment A, Treatment B, Treatment C');
-    });
-
-    it('should handle empty template name array', async () => {
-      const appointmentWithEmptyTemplates = createMockAppointment({
-        template_name: []
-      });
-      await wrapper.setProps({ appointment: appointmentWithEmptyTemplates });
-
-      // When template_name is empty array, h3 should show empty or appointment type title only
-      expect(wrapper.find('h3').exists()).toBe(true);
-    });
-  });
-
-  describe('Link Functionality', () => {
-    it('should render appointment link when provided', async () => {
-      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
-
-      const link = wrapper.find('.appointment-card');
-      expect(link.attributes('href')).toBe('https://example.com/appointment/123');
-      expect(link.attributes('rel')).toBe('noopener noreferrer');
-    });
-
-    it('should render default hash link when no appointment link provided', () => {
-      const link = wrapper.find('.appointment-card');
-      expect(link.attributes('href')).toBe('#');
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('should emit confirm event when Actions emits confirmed', async () => {
-      const actionsComponent = wrapper.find('.actions-stub');
-      await actionsComponent.trigger('confirmed', '123');
-
-      expect(wrapper.emitted('confirm')).toBeTruthy();
-      expect(wrapper.emitted('confirm')?.[0]).toEqual(['123']);
-    });
-
-    it('should emit cancel event when Actions emits cancelled', async () => {
-      const actionsComponent = wrapper.find('.actions-stub');
-      await actionsComponent.trigger('cancelled', '123');
-
-      expect(wrapper.emitted('cancel')).toBeTruthy();
-      expect(wrapper.emitted('cancel')?.[0]).toEqual(['123']);
-    });
-
-    it('should emit reschedule event when Actions emits rescheduled', async () => {
-      const actionsComponent = wrapper.find('.actions-stub');
-      await actionsComponent.trigger('rescheduled', '123');
-
-      expect(wrapper.emitted('reschedule')).toBeTruthy();
-      expect(wrapper.emitted('reschedule')?.[0]).toEqual(['123']);
-    });
-  });
-
-  describe('Props Passing', () => {
-    it('should pass appointment prop to Details component', () => {
-      const detailsStub = wrapper.find('.details-stub');
-      expect(detailsStub.exists()).toBe(true);
-    });
-
-    it('should pass appointment prop to Actions component', () => {
-      const actionsStub = wrapper.find('.actions-stub');
-      expect(actionsStub.exists()).toBe(true);
-    });
-
-    it('should pass dentistImageSrc prop to Details component', async () => {
-      await wrapper.setProps({ dentistImageSrc: 'https://example.com/custom-dentist.jpg' });
-      expect(wrapper.props('dentistImageSrc')).toBe('https://example.com/custom-dentist.jpg');
-    });
-  });
-
-  describe('Date Formatting Edge Cases', () => {
-    it('should handle current date when appointment date is null', async () => {
-      const appointmentWithNullDate = createMockAppointment({ start: null as any });
-      await wrapper.setProps({ appointment: appointmentWithNullDate });
-
-      // Should not throw an error and should display current date
-      expect(wrapper.find('.card-header').exists()).toBe(true);
-    });
-
-    it('should format different date correctly', async () => {
-      const appointmentWithDifferentDate = createMockAppointment({
-        start: '2024-12-25T15:45:00Z'
-      });
-      await wrapper.setProps({ appointment: appointmentWithDifferentDate });
-
-      const expectedDate = format(new Date('2024-12-25T15:45:00Z'), 'EEE, d MMM yyyy', { locale: de });
-      const expectedTime = format(new Date('2024-12-25T15:45:00Z'), 'HH:mm');
-
-      expect(wrapper.text()).toContain(expectedDate);
-      expect(wrapper.text()).toContain(expectedTime);
-    });
-  });
-
-  describe('Layout Structure', () => {
-    it('should have proper layout structure', () => {
-      const root = wrapper.find('[data-testid="root"]');
-      expect(root.exists()).toBe(true);
-
-      const appointmentCard = root.find('.appointment-card');
-      expect(appointmentCard.exists()).toBe(true);
-
-      const cardFooter = root.find('.card-footer');
-      expect(cardFooter.exists()).toBe(true);
-    });
-
-    it('should contain horizontal rule separator', () => {
-      expect(wrapper.find('hr').exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper link attributes for accessibility', async () => {
-      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
-
-      const link = wrapper.find('.appointment-card');
-      expect(link.attributes('rel')).toBe('noopener noreferrer');
-    });
-
-    it('should have descriptive data-testid', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Component Props Validation', () => {
-    it('should accept all required props', () => {
-      expect(wrapper.props('appointment')).toBeDefined();
-    });
-
-    it('should accept optional props', async () => {
-      await wrapper.setProps({
-        appointmentLink: 'https://example.com/test',
-        dentistImageSrc: 'https://example.com/dentist.jpg'
-      });
-
-      expect(wrapper.props('appointmentLink')).toBe('https://example.com/test');
-      expect(wrapper.props('dentistImageSrc')).toBe('https://example.com/dentist.jpg');
-    });
-  });
-
-  describe('Accessibility', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment();
-      wrapper = mount(Card, {
-        props: { appointment, showActions: true },
-        global: {
-          stubs: {
-            UserIcon: {
-              template: '<svg class="header-icon user-icon" aria-hidden="true"></svg>'
-            },
-            CalendarIcon: {
-              template: '<svg class="header-icon calendar-icon" aria-hidden="true"></svg>'
-            },
-            ClockIcon: {
-              template: '<svg class="header-icon clock-icon" aria-hidden="true"></svg>'
-            },
-            IconsAdvanceAppointments: {
-              template: '<div class="advance-appointments-icon" aria-hidden="true"></div>',
-              props: ['width', 'height', 'iconType']
-            },
-            Details: {
-              template: '<div class="details-stub" role="region" aria-label="Appointment details">Details Component</div>',
-              props: ['appointment', 'dentistImageSrc']
-            },
-            Actions: {
-              template: '<div class="actions-stub" role="group" aria-label="Appointment actions">Actions Component</div>',
-              props: ['appointment', 'disabled']
-            },
-            AnamneseNotification: {
-              template: '<div class="anamnese-notification-stub"></div>'
-            }
-          }
-        }
-      });
-    });
-
-    it('should have proper semantic HTML structure', () => {
-      const root = wrapper.find('[data-testid="root"]');
-      expect(root.exists()).toBe(true);
-
-      const appointmentCard = wrapper.find('.appointment-card');
-      expect(appointmentCard.exists()).toBe(true);
-
-      // Should have proper sectioning
-      expect(wrapper.find('.card-header').exists()).toBe(true);
-      expect(wrapper.find('.card-body').exists()).toBe(true);
-      expect(wrapper.find('.card-footer').exists()).toBe(true);
-    });
-
-    it('should use proper heading hierarchy', () => {
-      const heading = wrapper.find('h3');
-      expect(heading.exists()).toBe(true);
-      expect(heading.text()).toContain('Test Treatment');
-    });
-
-    it('should have accessible link attributes', async () => {
-      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
-
-      const link = wrapper.find('.appointment-card');
-      expect(link.attributes('href')).toBe('https://example.com/appointment/123');
-      expect(link.attributes('rel')).toBe('noopener noreferrer');
-    });
-
-    it('should provide meaningful content for screen readers', () => {
-      // Patient name should be visible
-      expect(wrapper.text()).toContain('John Doe');
-
-      // Date and time should be accessible
-      const appointmentDate = new Date('2024-01-15T10:30:00.000Z');
-      const expectedDate = format(appointmentDate, 'EEE, d MMM yyyy', { locale: de });
-
-      expect(wrapper.text()).toContain(expectedDate);
-      // Time will be displayed based on local timezone, check for any valid time format
-      expect(wrapper.text()).toMatch(/\d{1,2}:\d{2}/);
-
-      // Treatment name should be in heading
-      const h3 = wrapper.find('h3');
-      expect(h3.text()).toContain('Test Treatment');
-    });
-
-    it('should have proper icon accessibility attributes', () => {
-      const icons = wrapper.findAll('.header-icon');
-      expect(icons.length).toBeGreaterThanOrEqual(3);
-
-      icons.forEach(icon => {
-        expect(icon.attributes('aria-hidden')).toBe('true');
-      });
-    });
-
-    it('should provide semantic roles for sub-components', () => {
-      const detailsStub = wrapper.find('.details-stub');
-      expect(detailsStub.attributes('role')).toBe('region');
-      expect(detailsStub.attributes('aria-label')).toBe('Appointment details');
-
-      const actionsStub = wrapper.find('.actions-stub');
-      expect(actionsStub.attributes('role')).toBe('group');
-      expect(actionsStub.attributes('aria-label')).toBe('Appointment actions');
-    });
-
-    it('should handle different appointment statuses accessibly', async () => {
-      // Test default status
-      let header = wrapper.find('.card-header');
-      expect(header.classes()).toContain('card-header--default');
-
-      // Test cancelled status
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      await wrapper.setProps({ appointment: cancelledAppointment });
-
-      header = wrapper.find('.card-header');
-      expect(header.classes()).toContain('card-header--cancelled');
-
-      // Test done status with opacity
-      const doneAppointment = createMockAppointment({ status: 'done' });
-      await wrapper.setProps({ appointment: doneAppointment });
-
-      expect(wrapper.find('.card-opacity').exists()).toBe(true);
-    });
-
-    it('should provide informative default values', async () => {
-      const appointmentWithoutPatient = createMockAppointment({ patientName: undefined });
-      await wrapper.setProps({ appointment: appointmentWithoutPatient });
-
-      expect(wrapper.text()).toContain('Unbekannter Patient');
-    });
-
-    it('should have logical reading order', () => {
-      // Header items should be in logical order
-      const headerItems = wrapper.findAll('.header-item');
-      expect(headerItems).toHaveLength(3);
-
-      // Patient, Date, Time order
-      expect(headerItems[0].text()).toContain('John Doe');
-      // Time will be displayed based on local timezone, check for any valid time format
-      expect(headerItems[2].text()).toMatch(/\d{1,2}:\d{2}/);
-    });
-
-    it('should handle multiple template names accessibly', async () => {
-      const appointmentWithMultipleTemplates = createMockAppointment({
-        template_name: ['Treatment A', 'Treatment B', 'Treatment C']
-      });
-      await wrapper.setProps({ appointment: appointmentWithMultipleTemplates });
-
-      const heading = wrapper.find('h3');
-      expect(heading.text()).toContain('Treatment A, Treatment B, Treatment C');
-    });
-
-    it('should use proper HTML5 semantic elements', () => {
-      // Should have proper sectioning
-      const header = wrapper.find('.card-header');
-      const body = wrapper.find('.card-body');
-      const footer = wrapper.find('.card-footer');
-
-      expect(header.exists()).toBe(true);
-      expect(body.exists()).toBe(true);
-      expect(footer.exists()).toBe(true);
-
-      // Should have horizontal rule for separation
-      expect(wrapper.find('hr').exists()).toBe(true);
-    });
-
-    it('should maintain focus management for interactive elements', async () => {
-      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
-
-      const link = wrapper.find('.appointment-card');
-      expect(link.attributes('href')).toBeTruthy();
-
-      // Link should be focusable
-      expect(link.element.tagName.toLowerCase()).toBe('a');
-    });
-
-    it('should provide context for visual styling changes', () => {
-      // Visual changes should have semantic meaning
-      const header = wrapper.find('.card-header');
-      expect(header.classes()).toContain('card-header--default');
-
-      // Check that there are no accessibility violations in basic structure
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('should handle date formatting for screen readers', async () => {
-      const appointmentWithDifferentDate = createMockAppointment({
-        start: '2024-12-25T15:45:00Z'
-      });
-      await wrapper.setProps({ appointment: appointmentWithDifferentDate });
-
-      const expectedDate = format(new Date('2024-12-25T15:45:00Z'), 'EEE, d MMM yyyy', { locale: de });
-      const expectedTime = format(new Date('2024-12-25T15:45:00Z'), 'HH:mm');
-
-      expect(wrapper.text()).toContain(expectedDate);
-      expect(wrapper.text()).toContain(expectedTime);
-    });
-
-    it('should provide comprehensive information structure', () => {
-      // Card should contain all necessary information
-      expect(wrapper.text()).toContain('John Doe'); // Patient
-      expect(wrapper.text()).toContain('Test Treatment'); // Treatment
-      // Time will be displayed based on local timezone, check for any valid time format
-      expect(wrapper.text()).toMatch(/\d{1,2}:\d{2}/); // Time
-
-      // Should have proper component structure
-      expect(wrapper.find('.details-stub').exists()).toBe(true);
-      expect(wrapper.find('.actions-stub').exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { format } from 'date-fns';
+import { de } from 'date-fns/locale';
+import Card from '../../../../../src/components/Appointment/Card/Card.vue';
+import type { AppointmentData, Dentist } from '../../../../../src/types';
+
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'wl.appointment_card.unknown_patient': 'Unbekannter Patient'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+// Mock appointmentTypes
+vi.mock('../../../../../src/utils/index', () => ({
+  appointmentTypes: [
+    { id: 1, title: 'Regular Checkup', icon: 'checkup' },
+    { id: 2, title: 'Treatment', icon: 'treatment' }
+  ]
+}));
+
+describe('Appointment Card', () => {
+  let wrapper: VueWrapper;
+
+  const createMockDentist = (overrides: Partial<Dentist> = {}): Dentist => ({
+    name: 'Dr. Test Dentist',
+    gender: 'Male',
+    imageSrc: 'https://example.com/dentist.jpg',
+    ...overrides
+  });
+
+  const createMockAppointment = (overrides: Partial<AppointmentData> = {}): AppointmentData => ({
+    id: '123',
+    template_name: 'Test Treatment',
+    description: 'Test Description',
+    dentist: createMockDentist(),
+    start: '2024-01-15T10:30:00.000Z',
+    type: 1,
+    status: 'upcoming',
+    patientName: 'John Doe',
+    address: 'Test Address 123',
+    district: 'Test District',
+    is_confirmed: false,
+    ...overrides
+  });
+
+  const createGlobalConfig = () => ({
+    stubs: {
+      UserIcon: {
+        template: '<svg class="header-icon user-icon"></svg>'
+      },
+      CalendarIcon: {
+        template: '<svg class="header-icon calendar-icon"></svg>'
+      },
+      ClockIcon: {
+        template: '<svg class="header-icon clock-icon"></svg>'
+      },
+      IconsAdvanceAppointments: {
+        template: '<div class="advance-appointments-icon"></div>',
+        props: ['width', 'height', 'iconType']
+      },
+      Details: {
+        template: '<div class="details-stub">Details Component</div>',
+        props: ['appointment', 'dentistImageSrc']
+      },
+      Actions: {
+        template: '<div class="actions-stub" @confirmed="$emit(\'confirmed\', $event)" @cancelled="$emit(\'cancelled\', $event)" @rescheduled="$emit(\'rescheduled\', $event)">Actions Component</div>',
+        props: ['appointment', 'disabled'],
+        emits: ['confirmed', 'cancelled', 'rescheduled']
+      },
+      AnamneseNotification: {
+        template: '<div class="anamnese-notification-stub"></div>'
+      }
+    }
+  });
+
+  beforeEach(() => {
+    const appointment = createMockAppointment();
+    wrapper = mount(Card, {
+      props: { appointment, showActions: true },
+      global: createGlobalConfig()
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component with correct test id', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('should render the appointment card structure', () => {
+      expect(wrapper.find('.appointment-card').exists()).toBe(true);
+      expect(wrapper.find('.card-header').exists()).toBe(true);
+      expect(wrapper.find('.card-body').exists()).toBe(true);
+      expect(wrapper.find('.card-footer').exists()).toBe(true);
+    });
+
+    it('should render Details and Actions components', () => {
+      expect(wrapper.find('.details-stub').exists()).toBe(true);
+      expect(wrapper.find('.actions-stub').exists()).toBe(true);
+    });
+  });
+
+  describe('Header Information', () => {
+    it('should display patient name', () => {
+      expect(wrapper.text()).toContain('John Doe');
+    });
+
+    it('should display default patient name when not provided', async () => {
+      const appointmentWithoutPatient = createMockAppointment({ patientName: undefined });
+      await wrapper.setProps({ appointment: appointmentWithoutPatient });
+
+      expect(wrapper.text()).toContain('Unbekannter Patient');
+    });
+
+    it('should display formatted date', () => {
+      const expectedDate = format(new Date('2024-01-15T10:30:00Z'), 'EEE, d MMM yyyy', { locale: de });
+      expect(wrapper.text()).toContain(expectedDate);
+    });
+
+    it('should display formatted time', () => {
+      const expectedTime = format(new Date('2024-01-15T10:30:00Z'), 'HH:mm');
+      expect(wrapper.text()).toContain(expectedTime);
+    });
+
+    it('should render header icons', () => {
+      // Component renders 3 header items with icons
+      const headerItems = wrapper.findAll('.header-item');
+      expect(headerItems).toHaveLength(3);
+
+      // Each header item should contain an icon element
+      headerItems.forEach(item => {
+        expect(item.find('svg').exists()).toBe(true);
+      });
+    });
+
+    it('should have correct header items structure', () => {
+      const headerItems = wrapper.findAll('.header-item');
+      expect(headerItems).toHaveLength(3);
+    });
+  });
+
+  describe('Appointment Status Styling', () => {
+    it('should apply default header background for upcoming appointments', () => {
+      const header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('card-header--default');
+      expect(header.classes()).not.toContain('card-header--cancelled');
+    });
+
+    it('should apply cancelled header background for cancelled appointments', async () => {
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+
+      const header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('card-header--cancelled');
+      expect(header.classes()).not.toContain('card-header--default');
+    });
+
+    it('should apply card opacity for done appointments', async () => {
+      const doneAppointment = createMockAppointment({ status: 'done' });
+      await wrapper.setProps({ appointment: doneAppointment });
+
+      expect(wrapper.find('.card-opacity').exists()).toBe(true);
+    });
+
+    it('should not apply card opacity for upcoming appointments', () => {
+      expect(wrapper.find('.card-opacity').exists()).toBe(false);
+    });
+  });
+
+  describe('Template Name Display', () => {
+    it('should display single template name', () => {
+      expect(wrapper.text()).toContain('Test Treatment');
+    });
+
+    it('should display multiple template names as comma-separated string', async () => {
+      const appointmentWithMultipleTemplates = createMockAppointment({
+        template_name: ['Treatment A', 'Treatment B', 'Treatment C']
+      });
+      await wrapper.setProps({ appointment: appointmentWithMultipleTemplates });
+
+      expect(wrapper.text()).toContain('Treatment A, Treatment B, Treatment C');
+    });
+
+    it('should handle empty template name array', async () => {
+      const appointmentWithEmptyTemplates = createMockAppointment({
+        template_name: []
+      });
+      await wrapper.setProps({ appointment: appointmentWithEmptyTemplates });
+
+      // When template_name is empty array, h3 should show empty or appointment type title only
+      expect(wrapper.find('h3').exists()).toBe(true);
+    });
+  });
+
+  describe('Link Functionality', () => {
+    it('should render appointment link when provided', async () => {
+      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
+
+      const link = wrapper.find('.appointment-card');
+      expect(link.attributes('href')).toBe('https://example.com/appointment/123');
+      expect(link.attributes('rel')).toBe('noopener noreferrer');
+    });
+
+    it('should render default hash link when no appointment link provided', () => {
+      const link = wrapper.find('.appointment-card');
+      expect(link.attributes('href')).toBe('#');
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should emit confirm event when Actions emits confirmed', async () => {
+      const actionsComponent = wrapper.find('.actions-stub');
+      await actionsComponent.trigger('confirmed', '123');
+
+      expect(wrapper.emitted('confirm')).toBeTruthy();
+      expect(wrapper.emitted('confirm')?.[0]).toEqual(['123']);
+    });
+
+    it('should emit cancel event when Actions emits cancelled', async () => {
+      const actionsComponent = wrapper.find('.actions-stub');
+      await actionsComponent.trigger('cancelled', '123');
+
+      expect(wrapper.emitted('cancel')).toBeTruthy();
+      expect(wrapper.emitted('cancel')?.[0]).toEqual(['123']);
+    });
+
+    it('should emit reschedule event when Actions emits rescheduled', async () => {
+      const actionsComponent = wrapper.find('.actions-stub');
+      await actionsComponent.trigger('rescheduled', '123');
+
+      expect(wrapper.emitted('reschedule')).toBeTruthy();
+      expect(wrapper.emitted('reschedule')?.[0]).toEqual(['123']);
+    });
+  });
+
+  describe('Props Passing', () => {
+    it('should pass appointment prop to Details component', () => {
+      const detailsStub = wrapper.find('.details-stub');
+      expect(detailsStub.exists()).toBe(true);
+    });
+
+    it('should pass appointment prop to Actions component', () => {
+      const actionsStub = wrapper.find('.actions-stub');
+      expect(actionsStub.exists()).toBe(true);
+    });
+
+    it('should pass dentistImageSrc prop to Details component', async () => {
+      await wrapper.setProps({ dentistImageSrc: 'https://example.com/custom-dentist.jpg' });
+      expect(wrapper.props('dentistImageSrc')).toBe('https://example.com/custom-dentist.jpg');
+    });
+  });
+
+  describe('Date Formatting Edge Cases', () => {
+    it('should handle current date when appointment date is null', async () => {
+      const appointmentWithNullDate = createMockAppointment({ start: null as any });
+      await wrapper.setProps({ appointment: appointmentWithNullDate });
+
+      // Should not throw an error and should display current date
+      expect(wrapper.find('.card-header').exists()).toBe(true);
+    });
+
+    it('should format different date correctly', async () => {
+      const appointmentWithDifferentDate = createMockAppointment({
+        start: '2024-12-25T15:45:00Z'
+      });
+      await wrapper.setProps({ appointment: appointmentWithDifferentDate });
+
+      const expectedDate = format(new Date('2024-12-25T15:45:00Z'), 'EEE, d MMM yyyy', { locale: de });
+      const expectedTime = format(new Date('2024-12-25T15:45:00Z'), 'HH:mm');
+
+      expect(wrapper.text()).toContain(expectedDate);
+      expect(wrapper.text()).toContain(expectedTime);
+    });
+  });
+
+  describe('Layout Structure', () => {
+    it('should have proper layout structure', () => {
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.exists()).toBe(true);
+
+      const appointmentCard = root.find('.appointment-card');
+      expect(appointmentCard.exists()).toBe(true);
+
+      const cardFooter = root.find('.card-footer');
+      expect(cardFooter.exists()).toBe(true);
+    });
+
+    it('should contain horizontal rule separator', () => {
+      expect(wrapper.find('hr').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper link attributes for accessibility', async () => {
+      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
+
+      const link = wrapper.find('.appointment-card');
+      expect(link.attributes('rel')).toBe('noopener noreferrer');
+    });
+
+    it('should have descriptive data-testid', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Component Props Validation', () => {
+    it('should accept all required props', () => {
+      expect(wrapper.props('appointment')).toBeDefined();
+    });
+
+    it('should accept optional props', async () => {
+      await wrapper.setProps({
+        appointmentLink: 'https://example.com/test',
+        dentistImageSrc: 'https://example.com/dentist.jpg'
+      });
+
+      expect(wrapper.props('appointmentLink')).toBe('https://example.com/test');
+      expect(wrapper.props('dentistImageSrc')).toBe('https://example.com/dentist.jpg');
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment();
+      wrapper = mount(Card, {
+        props: { appointment, showActions: true },
+        global: {
+          stubs: {
+            UserIcon: {
+              template: '<svg class="header-icon user-icon" aria-hidden="true"></svg>'
+            },
+            CalendarIcon: {
+              template: '<svg class="header-icon calendar-icon" aria-hidden="true"></svg>'
+            },
+            ClockIcon: {
+              template: '<svg class="header-icon clock-icon" aria-hidden="true"></svg>'
+            },
+            IconsAdvanceAppointments: {
+              template: '<div class="advance-appointments-icon" aria-hidden="true"></div>',
+              props: ['width', 'height', 'iconType']
+            },
+            Details: {
+              template: '<div class="details-stub" role="region" aria-label="Appointment details">Details Component</div>',
+              props: ['appointment', 'dentistImageSrc']
+            },
+            Actions: {
+              template: '<div class="actions-stub" role="group" aria-label="Appointment actions">Actions Component</div>',
+              props: ['appointment', 'disabled']
+            },
+            AnamneseNotification: {
+              template: '<div class="anamnese-notification-stub"></div>'
+            }
+          }
+        }
+      });
+    });
+
+    it('should have proper semantic HTML structure', () => {
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.exists()).toBe(true);
+
+      const appointmentCard = wrapper.find('.appointment-card');
+      expect(appointmentCard.exists()).toBe(true);
+
+      // Should have proper sectioning
+      expect(wrapper.find('.card-header').exists()).toBe(true);
+      expect(wrapper.find('.card-body').exists()).toBe(true);
+      expect(wrapper.find('.card-footer').exists()).toBe(true);
+    });
+
+    it('should use proper heading hierarchy', () => {
+      const heading = wrapper.find('h3');
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toContain('Test Treatment');
+    });
+
+    it('should have accessible link attributes', async () => {
+      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
+
+      const link = wrapper.find('.appointment-card');
+      expect(link.attributes('href')).toBe('https://example.com/appointment/123');
+      expect(link.attributes('rel')).toBe('noopener noreferrer');
+    });
+
+    it('should provide meaningful content for screen readers', () => {
+      // Patient name should be visible
+      expect(wrapper.text()).toContain('John Doe');
+
+      // Date and time should be accessible
+      const appointmentDate = new Date('2024-01-15T10:30:00.000Z');
+      const expectedDate = format(appointmentDate, 'EEE, d MMM yyyy', { locale: de });
+
+      expect(wrapper.text()).toContain(expectedDate);
+      // Time will be displayed based on local timezone, check for any valid time format
+      expect(wrapper.text()).toMatch(/\d{1,2}:\d{2}/);
+
+      // Treatment name should be in heading
+      const h3 = wrapper.find('h3');
+      expect(h3.text()).toContain('Test Treatment');
+    });
+
+    it('should have proper icon accessibility attributes', () => {
+      const icons = wrapper.findAll('.header-icon');
+      expect(icons.length).toBeGreaterThanOrEqual(3);
+
+      icons.forEach(icon => {
+        expect(icon.attributes('aria-hidden')).toBe('true');
+      });
+    });
+
+    it('should provide semantic roles for sub-components', () => {
+      const detailsStub = wrapper.find('.details-stub');
+      expect(detailsStub.attributes('role')).toBe('region');
+      expect(detailsStub.attributes('aria-label')).toBe('Appointment details');
+
+      const actionsStub = wrapper.find('.actions-stub');
+      expect(actionsStub.attributes('role')).toBe('group');
+      expect(actionsStub.attributes('aria-label')).toBe('Appointment actions');
+    });
+
+    it('should handle different appointment statuses accessibly', async () => {
+      // Test default status
+      let header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('card-header--default');
+
+      // Test cancelled status
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+
+      header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('card-header--cancelled');
+
+      // Test done status with opacity
+      const doneAppointment = createMockAppointment({ status: 'done' });
+      await wrapper.setProps({ appointment: doneAppointment });
+
+      expect(wrapper.find('.card-opacity').exists()).toBe(true);
+    });
+
+    it('should provide informative default values', async () => {
+      const appointmentWithoutPatient = createMockAppointment({ patientName: undefined });
+      await wrapper.setProps({ appointment: appointmentWithoutPatient });
+
+      expect(wrapper.text()).toContain('Unbekannter Patient');
+    });
+
+    it('should have logical reading order', () => {
+      // Header items should be in logical order
+      const headerItems = wrapper.findAll('.header-item');
+      expect(headerItems).toHaveLength(3);
+
+      // Patient, Date, Time order
+      expect(headerItems[0].text()).toContain('John Doe');
+      // Time will be displayed based on local timezone, check for any valid time format
+      expect(headerItems[2].text()).toMatch(/\d{1,2}:\d{2}/);
+    });
+
+    it('should handle multiple template names accessibly', async () => {
+      const appointmentWithMultipleTemplates = createMockAppointment({
+        template_name: ['Treatment A', 'Treatment B', 'Treatment C']
+      });
+      await wrapper.setProps({ appointment: appointmentWithMultipleTemplates });
+
+      const heading = wrapper.find('h3');
+      expect(heading.text()).toContain('Treatment A, Treatment B, Treatment C');
+    });
+
+    it('should use proper HTML5 semantic elements', () => {
+      // Should have proper sectioning
+      const header = wrapper.find('.card-header');
+      const body = wrapper.find('.card-body');
+      const footer = wrapper.find('.card-footer');
+
+      expect(header.exists()).toBe(true);
+      expect(body.exists()).toBe(true);
+      expect(footer.exists()).toBe(true);
+
+      // Should have horizontal rule for separation
+      expect(wrapper.find('hr').exists()).toBe(true);
+    });
+
+    it('should maintain focus management for interactive elements', async () => {
+      await wrapper.setProps({ appointmentLink: 'https://example.com/appointment/123' });
+
+      const link = wrapper.find('.appointment-card');
+      expect(link.attributes('href')).toBeTruthy();
+
+      // Link should be focusable
+      expect(link.element.tagName.toLowerCase()).toBe('a');
+    });
+
+    it('should provide context for visual styling changes', () => {
+      // Visual changes should have semantic meaning
+      const header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('card-header--default');
+
+      // Check that there are no accessibility violations in basic structure
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('should handle date formatting for screen readers', async () => {
+      const appointmentWithDifferentDate = createMockAppointment({
+        start: '2024-12-25T15:45:00Z'
+      });
+      await wrapper.setProps({ appointment: appointmentWithDifferentDate });
+
+      const expectedDate = format(new Date('2024-12-25T15:45:00Z'), 'EEE, d MMM yyyy', { locale: de });
+      const expectedTime = format(new Date('2024-12-25T15:45:00Z'), 'HH:mm');
+
+      expect(wrapper.text()).toContain(expectedDate);
+      expect(wrapper.text()).toContain(expectedTime);
+    });
+
+    it('should provide comprehensive information structure', () => {
+      // Card should contain all necessary information
+      expect(wrapper.text()).toContain('John Doe'); // Patient
+      expect(wrapper.text()).toContain('Test Treatment'); // Treatment
+      // Time will be displayed based on local timezone, check for any valid time format
+      expect(wrapper.text()).toMatch(/\d{1,2}:\d{2}/); // Time
+
+      // Should have proper component structure
+      expect(wrapper.find('.details-stub').exists()).toBe(true);
+      expect(wrapper.find('.actions-stub').exists()).toBe(true);
+    });
+  });
 });