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

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

@@ -1,436 +1,436 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import Actions from '../../../../../src/components/Appointment/Card/Actions.vue';
-import type { AppointmentData } from '../../../../../src/types';
-
-// Mock vue-i18n
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => {
-      const translations: Record<string, string> = {
-        'wl.appointment_card.cancel': 'Termin stornieren',
-        'wl.appointment_card.reschedule': 'Termin verschieben',
-        'wl.appointment_card.confirm': 'Termin bestätigen',
-        'wl.appointment_card.reschedule_after_cancellation': 'Diesen Termin nochmal buchen',
-        'appointments.status.cancelled': 'Termin storniert',
-        'appointments.status.missed': 'Termin verpasst',
-        'appointment.missed.title': 'Termin verpasst',
-        'phone': 'Telefon',
-        'email': 'E-Mail'
-      };
-      return translations[key] || key;
-    }
-  })
-}));
-
-describe('Appointment Card Actions', () => {
-  let wrapper: VueWrapper;
-
-  const createMockAppointment = (overrides: Partial<AppointmentData> = {}): AppointmentData => ({
-    id: '123',
-    template_name: 'Test Template',
-    description: 'Test Description',
-    dentist: {
-      name: 'Dr. Test',
-      gender: 'Male',
-      imageSrc: 'test.jpg'
-    },
-    start: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // Tomorrow
-    type: 1,
-    status: 'upcoming',
-    is_confirmed: false,
-    ...overrides
-  });
-
-  const createGlobalConfig = () => ({
-    stubs: {
-      Button: {
-        template: '<button class="button-stub" :class="{ \'action-button\': true }" @click="$emit(\'click\')">{{ label }}</button>',
-        props: ['variant', 'prependIcon', 'size', 'label', 'readonly', 'disabled', 'color'],
-        emits: ['click']
-      },
-      'v-icon': {
-        template: '<span class="v-icon-stub"></span>',
-        props: ['size', 'icon']
-      }
-    }
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Upcoming Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-    });
-
-    it('should render cancel and reschedule buttons for upcoming appointments', () => {
-      expect(wrapper.html()).toContain('Termin stornieren');
-      expect(wrapper.html()).toContain('Termin verschieben');
-    });
-
-    it('should have actions grid structure for upcoming appointments', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-    });
-
-    it('should emit cancelled event when cancel button is clicked', async () => {
-      const buttons = wrapper.findAll('.button-stub');
-      const cancelButton = buttons.find(b => b.text().includes('stornieren'));
-
-      if (cancelButton) {
-        await cancelButton.trigger('click');
-        expect(wrapper.emitted('cancelled')).toBeTruthy();
-        expect(wrapper.emitted('cancelled')?.[0]).toEqual(['123']);
-      }
-    });
-
-    it('should emit rescheduled event when reschedule button is clicked', async () => {
-      const buttons = wrapper.findAll('.button-stub');
-      const rescheduleButton = buttons.find(b => b.text().includes('verschieben'));
-
-      if (rescheduleButton) {
-        await rescheduleButton.trigger('click');
-        expect(wrapper.emitted('rescheduled')).toBeTruthy();
-        expect(wrapper.emitted('rescheduled')?.[0]).toEqual(['123']);
-      }
-    });
-  });
-
-  describe('Cancelled Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'cancelled' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-    });
-
-    it('should render cancelled status text for cancelled appointments', () => {
-      expect(wrapper.html()).toContain('Termin storniert');
-    });
-
-    it('should render reschedule button for cancelled appointments', () => {
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-    });
-
-    it('should have actions grid for cancelled appointments', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-    });
-  });
-
-  describe('Done Appointments', () => {
-    it('should render rebook button for done appointments with for_patient flag', () => {
-      const appointment = createMockAppointment({
-        status: 'done',
-        for_patient: true
-      } as any);
-
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-    });
-
-    it('should not render anything for done appointments without for_patient flag', () => {
-      const appointment = createMockAppointment({
-        status: 'done',
-        for_patient: false
-      } as any);
-
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('.actions-grid').exists()).toBe(false);
-    });
-  });
-
-  describe('Missed Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'missed' } as any);
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-    });
-
-    it('should render missed status text', () => {
-      expect(wrapper.html()).toContain('Termin verpasst');
-    });
-
-    it('should render contact information', () => {
-      expect(wrapper.html()).toContain('Telefon');
-      expect(wrapper.html()).toContain('E-Mail');
-    });
-
-    it('should have missed info box', () => {
-      expect(wrapper.find('.missed-info-box').exists()).toBe(true);
-    });
-  });
-
-  describe('Confirmable Logic', () => {
-    it('should show confirm button when appointment is confirmable', async () => {
-      // Create appointment within 48h and unconfirmed
-      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString(); // 12 hours from now
-      const confirmableAppointment = createMockAppointment({
-        start: futureDate,
-        is_confirmed: false,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmableAppointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.html()).toContain('Termin bestätigen');
-    });
-
-    it('should not show confirm button when appointment is already confirmed', async () => {
-      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
-      const confirmedAppointment = createMockAppointment({
-        start: futureDate,
-        is_confirmed: true,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmedAppointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.html()).not.toContain('Termin bestätigen');
-    });
-
-    it('should not show confirm button when appointment is more than 48h away', async () => {
-      const distantFuture = new Date(Date.now() + 72 * 60 * 60 * 1000).toISOString(); // 72 hours from now
-      const distantAppointment = createMockAppointment({
-        start: distantFuture,
-        is_confirmed: false,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: distantAppointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.html()).not.toContain('Termin bestätigen');
-    });
-
-    it('should emit confirmed event when confirm button is clicked', async () => {
-      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
-      const confirmableAppointment = createMockAppointment({
-        start: futureDate,
-        is_confirmed: false,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmableAppointment },
-        global: createGlobalConfig()
-      });
-
-      const confirmButton = wrapper.find('.full-width-button .button-stub');
-      if (confirmButton.exists()) {
-        await confirmButton.trigger('click');
-        expect(wrapper.emitted('confirmed')).toBeTruthy();
-        expect(wrapper.emitted('confirmed')?.[0]).toEqual(['123']);
-      }
-    });
-  });
-
-  describe('CSS Classes and Styling', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-    });
-
-    it('should apply actions-grid class', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-    });
-
-    it('should apply action-button class to buttons', () => {
-      const actionButtons = wrapper.findAll('.action-button');
-      expect(actionButtons.length).toBeGreaterThan(0);
-    });
-
-    it('should have full-width button class when confirmable', async () => {
-      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
-      const confirmableAppointment = createMockAppointment({
-        start: futureDate,
-        is_confirmed: false,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmableAppointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('.full-width-button').exists()).toBe(true);
-    });
-  });
-
-  describe('Component Template Structure', () => {
-    it('should render different templates based on status', () => {
-      // Test upcoming
-      const upcomingAppointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment: upcomingAppointment },
-        global: createGlobalConfig()
-      });
-      expect(wrapper.html()).toContain('Termin stornieren');
-
-      // Test cancelled
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      wrapper = mount(Actions, {
-        props: { appointment: cancelledAppointment },
-        global: createGlobalConfig()
-      });
-      expect(wrapper.html()).toContain('Termin storniert');
-
-      // Test missed
-      const missedAppointment = createMockAppointment({ status: 'missed' } as any);
-      wrapper = mount(Actions, {
-        props: { appointment: missedAppointment },
-        global: createGlobalConfig()
-      });
-      expect(wrapper.html()).toContain('Termin verpasst');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept appointment prop', () => {
-      const appointment = createMockAppointment();
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.props('appointment')).toEqual(appointment);
-    });
-
-    it('should handle appointment prop changes', async () => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.html()).toContain('Termin stornieren');
-
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      await wrapper.setProps({ appointment: cancelledAppointment });
-
-      expect(wrapper.html()).toContain('Termin storniert');
-    });
-
-    it('should accept disabled prop', () => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment, disabled: true },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.props('disabled')).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle appointment with null start gracefully', () => {
-      const appointmentWithNulls = createMockAppointment({
-        start: null as any,
-        is_confirmed: null as any
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: appointmentWithNulls },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: createGlobalConfig()
-      });
-    });
-
-    it('should have accessible button labels', () => {
-      const buttons = wrapper.findAll('.button-stub');
-      expect(buttons.length).toBeGreaterThan(0);
-
-      buttons.forEach(button => {
-        const textContent = button.text();
-        expect(textContent).toBeTruthy();
-      });
-    });
-
-    it('should provide semantic meaning for action buttons', () => {
-      const actionGrid = wrapper.find('.actions-grid');
-      expect(actionGrid.exists()).toBe(true);
-
-      // Check that buttons have meaningful text content
-      expect(wrapper.html()).toContain('Termin stornieren');
-      expect(wrapper.html()).toContain('Termin verschieben');
-    });
-
-    it('should have proper semantic structure for confirm button', async () => {
-      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
-      const confirmableAppointment = createMockAppointment({
-        start: futureDate,
-        is_confirmed: false,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmableAppointment },
-        global: createGlobalConfig()
-      });
-
-      const confirmButton = wrapper.find('.full-width-button');
-      expect(confirmButton.exists()).toBe(true);
-      expect(wrapper.html()).toContain('Termin bestätigen');
-    });
-
-    it('should use appropriate structure for different appointment states', async () => {
-      // Test upcoming appointment has action grid
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-
-      // Test cancelled appointment
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      await wrapper.setProps({ appointment: cancelledAppointment });
-      expect(wrapper.html()).toContain('Termin storniert');
-
-      // Test missed appointment has info box
-      const missedAppointment = createMockAppointment({ status: 'missed' } as any);
-      await wrapper.setProps({ appointment: missedAppointment });
-      expect(wrapper.find('.missed-info-box').exists()).toBe(true);
-    });
-
-    it('should have clear visual hierarchy with CSS classes', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-
-      // Actions should be in a logical visual group
-      const actionButtons = wrapper.findAll('.action-button');
-      expect(actionButtons.length).toBeGreaterThan(0);
-    });
-  });
-});
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Actions from '../../../../../src/components/Appointment/Card/Actions.vue';
+import type { AppointmentData } from '../../../../../src/types';
+
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'wl.appointment_card.cancel': 'Termin stornieren',
+        'wl.appointment_card.reschedule': 'Termin verschieben',
+        'wl.appointment_card.confirm': 'Termin bestätigen',
+        'wl.appointment_card.reschedule_after_cancellation': 'Diesen Termin nochmal buchen',
+        'appointments.status.cancelled': 'Termin storniert',
+        'appointments.status.missed': 'Termin verpasst',
+        'appointment.missed.title': 'Termin verpasst',
+        'phone': 'Telefon',
+        'email': 'E-Mail'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+describe('Appointment Card Actions', () => {
+  let wrapper: VueWrapper;
+
+  const createMockAppointment = (overrides: Partial<AppointmentData> = {}): AppointmentData => ({
+    id: '123',
+    template_name: 'Test Template',
+    description: 'Test Description',
+    dentist: {
+      name: 'Dr. Test',
+      gender: 'Male',
+      imageSrc: 'test.jpg'
+    },
+    start: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(), // Tomorrow
+    type: 1,
+    status: 'upcoming',
+    is_confirmed: false,
+    ...overrides
+  });
+
+  const createGlobalConfig = () => ({
+    stubs: {
+      Button: {
+        template: '<button class="button-stub" :class="{ \'action-button\': true }" @click="$emit(\'click\')">{{ label }}</button>',
+        props: ['variant', 'prependIcon', 'size', 'label', 'readonly', 'disabled', 'color'],
+        emits: ['click']
+      },
+      'v-icon': {
+        template: '<span class="v-icon-stub"></span>',
+        props: ['size', 'icon']
+      }
+    }
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Upcoming Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+    });
+
+    it('should render cancel and reschedule buttons for upcoming appointments', () => {
+      expect(wrapper.html()).toContain('Termin stornieren');
+      expect(wrapper.html()).toContain('Termin verschieben');
+    });
+
+    it('should have actions grid structure for upcoming appointments', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+    });
+
+    it('should emit cancelled event when cancel button is clicked', async () => {
+      const buttons = wrapper.findAll('.button-stub');
+      const cancelButton = buttons.find(b => b.text().includes('stornieren'));
+
+      if (cancelButton) {
+        await cancelButton.trigger('click');
+        expect(wrapper.emitted('cancelled')).toBeTruthy();
+        expect(wrapper.emitted('cancelled')?.[0]).toEqual(['123']);
+      }
+    });
+
+    it('should emit rescheduled event when reschedule button is clicked', async () => {
+      const buttons = wrapper.findAll('.button-stub');
+      const rescheduleButton = buttons.find(b => b.text().includes('verschieben'));
+
+      if (rescheduleButton) {
+        await rescheduleButton.trigger('click');
+        expect(wrapper.emitted('rescheduled')).toBeTruthy();
+        expect(wrapper.emitted('rescheduled')?.[0]).toEqual(['123']);
+      }
+    });
+  });
+
+  describe('Cancelled Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'cancelled' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+    });
+
+    it('should render cancelled status text for cancelled appointments', () => {
+      expect(wrapper.html()).toContain('Termin storniert');
+    });
+
+    it('should render reschedule button for cancelled appointments', () => {
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+    });
+
+    it('should have actions grid for cancelled appointments', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+    });
+  });
+
+  describe('Done Appointments', () => {
+    it('should render rebook button for done appointments with for_patient flag', () => {
+      const appointment = createMockAppointment({
+        status: 'done',
+        for_patient: true
+      } as any);
+
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+    });
+
+    it('should not render anything for done appointments without for_patient flag', () => {
+      const appointment = createMockAppointment({
+        status: 'done',
+        for_patient: false
+      } as any);
+
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('.actions-grid').exists()).toBe(false);
+    });
+  });
+
+  describe('Missed Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'missed' } as any);
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+    });
+
+    it('should render missed status text', () => {
+      expect(wrapper.html()).toContain('Termin verpasst');
+    });
+
+    it('should render contact information', () => {
+      expect(wrapper.html()).toContain('Telefon');
+      expect(wrapper.html()).toContain('E-Mail');
+    });
+
+    it('should have missed info box', () => {
+      expect(wrapper.find('.missed-info-box').exists()).toBe(true);
+    });
+  });
+
+  describe('Confirmable Logic', () => {
+    it('should show confirm button when appointment is confirmable', async () => {
+      // Create appointment within 48h and unconfirmed
+      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString(); // 12 hours from now
+      const confirmableAppointment = createMockAppointment({
+        start: futureDate,
+        is_confirmed: false,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmableAppointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.html()).toContain('Termin bestätigen');
+    });
+
+    it('should not show confirm button when appointment is already confirmed', async () => {
+      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
+      const confirmedAppointment = createMockAppointment({
+        start: futureDate,
+        is_confirmed: true,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmedAppointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.html()).not.toContain('Termin bestätigen');
+    });
+
+    it('should not show confirm button when appointment is more than 48h away', async () => {
+      const distantFuture = new Date(Date.now() + 72 * 60 * 60 * 1000).toISOString(); // 72 hours from now
+      const distantAppointment = createMockAppointment({
+        start: distantFuture,
+        is_confirmed: false,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: distantAppointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.html()).not.toContain('Termin bestätigen');
+    });
+
+    it('should emit confirmed event when confirm button is clicked', async () => {
+      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
+      const confirmableAppointment = createMockAppointment({
+        start: futureDate,
+        is_confirmed: false,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmableAppointment },
+        global: createGlobalConfig()
+      });
+
+      const confirmButton = wrapper.find('.full-width-button .button-stub');
+      if (confirmButton.exists()) {
+        await confirmButton.trigger('click');
+        expect(wrapper.emitted('confirmed')).toBeTruthy();
+        expect(wrapper.emitted('confirmed')?.[0]).toEqual(['123']);
+      }
+    });
+  });
+
+  describe('CSS Classes and Styling', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+    });
+
+    it('should apply actions-grid class', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+    });
+
+    it('should apply action-button class to buttons', () => {
+      const actionButtons = wrapper.findAll('.action-button');
+      expect(actionButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should have full-width button class when confirmable', async () => {
+      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
+      const confirmableAppointment = createMockAppointment({
+        start: futureDate,
+        is_confirmed: false,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmableAppointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('.full-width-button').exists()).toBe(true);
+    });
+  });
+
+  describe('Component Template Structure', () => {
+    it('should render different templates based on status', () => {
+      // Test upcoming
+      const upcomingAppointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment: upcomingAppointment },
+        global: createGlobalConfig()
+      });
+      expect(wrapper.html()).toContain('Termin stornieren');
+
+      // Test cancelled
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      wrapper = mount(Actions, {
+        props: { appointment: cancelledAppointment },
+        global: createGlobalConfig()
+      });
+      expect(wrapper.html()).toContain('Termin storniert');
+
+      // Test missed
+      const missedAppointment = createMockAppointment({ status: 'missed' } as any);
+      wrapper = mount(Actions, {
+        props: { appointment: missedAppointment },
+        global: createGlobalConfig()
+      });
+      expect(wrapper.html()).toContain('Termin verpasst');
+    });
+  });
+
+  describe('Props Validation', () => {
+    it('should accept appointment prop', () => {
+      const appointment = createMockAppointment();
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.props('appointment')).toEqual(appointment);
+    });
+
+    it('should handle appointment prop changes', async () => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.html()).toContain('Termin stornieren');
+
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+
+      expect(wrapper.html()).toContain('Termin storniert');
+    });
+
+    it('should accept disabled prop', () => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment, disabled: true },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.props('disabled')).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle appointment with null start gracefully', () => {
+      const appointmentWithNulls = createMockAppointment({
+        start: null as any,
+        is_confirmed: null as any
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: appointmentWithNulls },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: createGlobalConfig()
+      });
+    });
+
+    it('should have accessible button labels', () => {
+      const buttons = wrapper.findAll('.button-stub');
+      expect(buttons.length).toBeGreaterThan(0);
+
+      buttons.forEach(button => {
+        const textContent = button.text();
+        expect(textContent).toBeTruthy();
+      });
+    });
+
+    it('should provide semantic meaning for action buttons', () => {
+      const actionGrid = wrapper.find('.actions-grid');
+      expect(actionGrid.exists()).toBe(true);
+
+      // Check that buttons have meaningful text content
+      expect(wrapper.html()).toContain('Termin stornieren');
+      expect(wrapper.html()).toContain('Termin verschieben');
+    });
+
+    it('should have proper semantic structure for confirm button', async () => {
+      const futureDate = new Date(Date.now() + 12 * 60 * 60 * 1000).toISOString();
+      const confirmableAppointment = createMockAppointment({
+        start: futureDate,
+        is_confirmed: false,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmableAppointment },
+        global: createGlobalConfig()
+      });
+
+      const confirmButton = wrapper.find('.full-width-button');
+      expect(confirmButton.exists()).toBe(true);
+      expect(wrapper.html()).toContain('Termin bestätigen');
+    });
+
+    it('should use appropriate structure for different appointment states', async () => {
+      // Test upcoming appointment has action grid
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+
+      // Test cancelled appointment
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+      expect(wrapper.html()).toContain('Termin storniert');
+
+      // Test missed appointment has info box
+      const missedAppointment = createMockAppointment({ status: 'missed' } as any);
+      await wrapper.setProps({ appointment: missedAppointment });
+      expect(wrapper.find('.missed-info-box').exists()).toBe(true);
+    });
+
+    it('should have clear visual hierarchy with CSS classes', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+
+      // Actions should be in a logical visual group
+      const actionButtons = wrapper.findAll('.action-button');
+      expect(actionButtons.length).toBeGreaterThan(0);
+    });
+  });
+});