@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

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

@@ -1,408 +1,408 @@
-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';
-
-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
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Upcoming Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-    });
-
-    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);
-    });
-  });
-
-  describe('Past Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'past' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-    });
-
-    it('should render rebook button for past appointments', () => {
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-    });
-
-    it('should not have actions grid for past appointments', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(false);
-    });
-  });
-
-  describe('Cancelled Appointments', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'cancelled' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-    });
-
-    it('should render cancelled status button for cancelled appointments', () => {
-      expect(wrapper.html()).toContain('Termin storniert');
-    });
-
-    it('should not have actions grid for cancelled appointments', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(false);
-    });
-  });
-
-  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: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-
-      expect(wrapper.html()).toContain('Termin bestätigen');
-    });
-
-    it('should not show confirm button when appointment is already confirmed', async () => {
-      const confirmedAppointment = createMockAppointment({
-        is_confirmed: true,
-        status: 'upcoming'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: confirmedAppointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-
-      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: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-
-      expect(wrapper.html()).not.toContain('Termin bestätigen');
-    });
-
-    it('should not show confirm button for past appointments', async () => {
-      const pastDate = new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString();
-      const pastAppointment = createMockAppointment({
-        start: pastDate,
-        is_confirmed: false,
-        status: 'past'
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: pastAppointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-
-      expect(wrapper.html()).not.toContain('Termin bestätigen');
-    });
-  });
-
-  describe('CSS Classes and Styling', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-    });
-
-    it('should apply correct CSS classes', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-      expect(wrapper.findAll('.action-button')).toHaveLength(2);
-    });
-
-    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'
-      });
-
-      await wrapper.setProps({ appointment: confirmableAppointment });
-      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: { stubs: { Button: true } }
-      });
-      expect(wrapper.html()).toContain('Termin stornieren');
-
-      // Test past
-      const pastAppointment = createMockAppointment({ status: 'past' });
-      wrapper = mount(Actions, {
-        props: { appointment: pastAppointment },
-        global: { stubs: { Button: true } }
-      });
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-
-      // Test cancelled
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      wrapper = mount(Actions, {
-        props: { appointment: cancelledAppointment },
-        global: { stubs: { Button: true } }
-      });
-      expect(wrapper.html()).toContain('Termin storniert');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept appointment prop', () => {
-      const appointment = createMockAppointment();
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: { stubs: { Button: true } }
-      });
-
-      expect(wrapper.props('appointment')).toEqual(appointment);
-    });
-
-    it('should handle appointment prop changes', async () => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: { stubs: { Button: true } }
-      });
-
-      expect(wrapper.html()).toContain('Termin stornieren');
-
-      const pastAppointment = createMockAppointment({ status: 'past' });
-      await wrapper.setProps({ appointment: pastAppointment });
-
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle appointment with null values gracefully', () => {
-      const appointmentWithNulls = createMockAppointment({
-        start: null as any,
-        is_confirmed: null as any
-      });
-
-      wrapper = mount(Actions, {
-        props: { appointment: appointmentWithNulls },
-        global: { stubs: { Button: true } }
-      });
-
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    beforeEach(() => {
-      const appointment = createMockAppointment({ status: 'upcoming' });
-      wrapper = mount(Actions, {
-        props: { appointment },
-        global: {
-          stubs: {
-            Button: {
-              template: '<button class="button-stub" :aria-label="label" :disabled="disabled" :tabindex="disabled ? -1 : 0" role="button"><slot>{{ label }}</slot></button>',
-              props: ['variant', 'prependIcon', 'size', 'label', 'readonly', 'disabled', 'color']
-            }
-          }
-        }
-      });
-    });
-
-    it('should have accessible button labels', () => {
-      const buttons = wrapper.findAll('.button-stub');
-      expect(buttons.length).toBeGreaterThan(0);
-
-      buttons.forEach(button => {
-        const ariaLabel = button.attributes('aria-label');
-        const textContent = button.text();
-        expect(ariaLabel || textContent).toBeTruthy();
-      });
-    });
-
-    it('should have proper button roles', () => {
-      const buttons = wrapper.findAll('.button-stub');
-
-      buttons.forEach(button => {
-        expect(button.attributes('role')).toBe('button');
-      });
-    });
-
-    it('should have keyboard accessibility attributes', () => {
-      const buttons = wrapper.findAll('.button-stub');
-
-      buttons.forEach(button => {
-        const tabIndex = button.attributes('tabindex');
-        expect(tabIndex).toBe('0');
-      });
-    });
-
-    it('should indicate disabled state for readonly buttons', async () => {
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-
-      wrapper = mount(Actions, {
-        props: { appointment: cancelledAppointment },
-        global: {
-          stubs: {
-            Button: true
-          }
-        }
-      });
-
-      // Check that the cancelled button content is rendered
-      expect(wrapper.html()).toContain('Termin storniert');
-
-      // The button should not have actions grid (cancelled appointments show single readonly button)
-      expect(wrapper.find('.actions-grid').exists()).toBe(false);
-    });
-
-    it('should provide semantic meaning for action buttons', () => {
-      const actionGrid = wrapper.find('.actions-grid');
-      expect(actionGrid.exists()).toBe(true);
-
-      const buttons = wrapper.findAll('.action-button');
-      expect(buttons.length).toBe(2);
-
-      // 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'
-      });
-
-      await wrapper.setProps({ appointment: confirmableAppointment });
-
-      const confirmButton = wrapper.find('.full-width-button');
-      expect(confirmButton.exists()).toBe(true);
-      expect(wrapper.html()).toContain('Termin bestätigen');
-    });
-
-    it('should maintain focus management for button interactions', () => {
-      const buttons = wrapper.findAll('.button-stub');
-
-      // All interactive buttons should be focusable
-      buttons.forEach(button => {
-        const tabIndex = button.attributes('tabindex');
-        expect(parseInt(tabIndex || '0')).toBeGreaterThanOrEqual(0);
-      });
-    });
-
-    it('should use appropriate ARIA attributes for different appointment states', async () => {
-      // Test upcoming appointment
-      let buttons = wrapper.findAll('.button-stub');
-      expect(buttons.length).toBeGreaterThan(0);
-
-      // Test past appointment
-      const pastAppointment = createMockAppointment({ status: 'past' });
-      await wrapper.setProps({ appointment: pastAppointment });
-
-      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
-
-      // Test cancelled appointment
-      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
-      await wrapper.setProps({ appointment: cancelledAppointment });
-
-      expect(wrapper.html()).toContain('Termin storniert');
-    });
-
-    it('should have clear visual hierarchy with CSS classes', () => {
-      expect(wrapper.find('.actions-grid').exists()).toBe(true);
-      expect(wrapper.findAll('.action-button')).toHaveLength(2);
-
-      // Actions should be in a logical visual group
-      const actionButtons = wrapper.findAll('.action-button');
-      actionButtons.forEach(button => {
-        expect(button.classes()).toContain('action-button');
-      });
-    });
-  });
+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';
+
+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
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Upcoming Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+    });
+
+    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);
+    });
+  });
+
+  describe('Past Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'past' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+    });
+
+    it('should render rebook button for past appointments', () => {
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+    });
+
+    it('should not have actions grid for past appointments', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(false);
+    });
+  });
+
+  describe('Cancelled Appointments', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'cancelled' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+    });
+
+    it('should render cancelled status button for cancelled appointments', () => {
+      expect(wrapper.html()).toContain('Termin storniert');
+    });
+
+    it('should not have actions grid for cancelled appointments', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(false);
+    });
+  });
+
+  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: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+
+      expect(wrapper.html()).toContain('Termin bestätigen');
+    });
+
+    it('should not show confirm button when appointment is already confirmed', async () => {
+      const confirmedAppointment = createMockAppointment({
+        is_confirmed: true,
+        status: 'upcoming'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: confirmedAppointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+
+      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: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+
+      expect(wrapper.html()).not.toContain('Termin bestätigen');
+    });
+
+    it('should not show confirm button for past appointments', async () => {
+      const pastDate = new Date(Date.now() - 12 * 60 * 60 * 1000).toISOString();
+      const pastAppointment = createMockAppointment({
+        start: pastDate,
+        is_confirmed: false,
+        status: 'past'
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: pastAppointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+
+      expect(wrapper.html()).not.toContain('Termin bestätigen');
+    });
+  });
+
+  describe('CSS Classes and Styling', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+    });
+
+    it('should apply correct CSS classes', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+      expect(wrapper.findAll('.action-button')).toHaveLength(2);
+    });
+
+    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'
+      });
+
+      await wrapper.setProps({ appointment: confirmableAppointment });
+      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: { stubs: { Button: true } }
+      });
+      expect(wrapper.html()).toContain('Termin stornieren');
+
+      // Test past
+      const pastAppointment = createMockAppointment({ status: 'past' });
+      wrapper = mount(Actions, {
+        props: { appointment: pastAppointment },
+        global: { stubs: { Button: true } }
+      });
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+
+      // Test cancelled
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      wrapper = mount(Actions, {
+        props: { appointment: cancelledAppointment },
+        global: { stubs: { Button: true } }
+      });
+      expect(wrapper.html()).toContain('Termin storniert');
+    });
+  });
+
+  describe('Props Validation', () => {
+    it('should accept appointment prop', () => {
+      const appointment = createMockAppointment();
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: { stubs: { Button: true } }
+      });
+
+      expect(wrapper.props('appointment')).toEqual(appointment);
+    });
+
+    it('should handle appointment prop changes', async () => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: { stubs: { Button: true } }
+      });
+
+      expect(wrapper.html()).toContain('Termin stornieren');
+
+      const pastAppointment = createMockAppointment({ status: 'past' });
+      await wrapper.setProps({ appointment: pastAppointment });
+
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle appointment with null values gracefully', () => {
+      const appointmentWithNulls = createMockAppointment({
+        start: null as any,
+        is_confirmed: null as any
+      });
+
+      wrapper = mount(Actions, {
+        props: { appointment: appointmentWithNulls },
+        global: { stubs: { Button: true } }
+      });
+
+      expect(wrapper.exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment({ status: 'upcoming' });
+      wrapper = mount(Actions, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Button: {
+              template: '<button class="button-stub" :aria-label="label" :disabled="disabled" :tabindex="disabled ? -1 : 0" role="button"><slot>{{ label }}</slot></button>',
+              props: ['variant', 'prependIcon', 'size', 'label', 'readonly', 'disabled', 'color']
+            }
+          }
+        }
+      });
+    });
+
+    it('should have accessible button labels', () => {
+      const buttons = wrapper.findAll('.button-stub');
+      expect(buttons.length).toBeGreaterThan(0);
+
+      buttons.forEach(button => {
+        const ariaLabel = button.attributes('aria-label');
+        const textContent = button.text();
+        expect(ariaLabel || textContent).toBeTruthy();
+      });
+    });
+
+    it('should have proper button roles', () => {
+      const buttons = wrapper.findAll('.button-stub');
+
+      buttons.forEach(button => {
+        expect(button.attributes('role')).toBe('button');
+      });
+    });
+
+    it('should have keyboard accessibility attributes', () => {
+      const buttons = wrapper.findAll('.button-stub');
+
+      buttons.forEach(button => {
+        const tabIndex = button.attributes('tabindex');
+        expect(tabIndex).toBe('0');
+      });
+    });
+
+    it('should indicate disabled state for readonly buttons', async () => {
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+
+      wrapper = mount(Actions, {
+        props: { appointment: cancelledAppointment },
+        global: {
+          stubs: {
+            Button: true
+          }
+        }
+      });
+
+      // Check that the cancelled button content is rendered
+      expect(wrapper.html()).toContain('Termin storniert');
+
+      // The button should not have actions grid (cancelled appointments show single readonly button)
+      expect(wrapper.find('.actions-grid').exists()).toBe(false);
+    });
+
+    it('should provide semantic meaning for action buttons', () => {
+      const actionGrid = wrapper.find('.actions-grid');
+      expect(actionGrid.exists()).toBe(true);
+
+      const buttons = wrapper.findAll('.action-button');
+      expect(buttons.length).toBe(2);
+
+      // 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'
+      });
+
+      await wrapper.setProps({ appointment: confirmableAppointment });
+
+      const confirmButton = wrapper.find('.full-width-button');
+      expect(confirmButton.exists()).toBe(true);
+      expect(wrapper.html()).toContain('Termin bestätigen');
+    });
+
+    it('should maintain focus management for button interactions', () => {
+      const buttons = wrapper.findAll('.button-stub');
+
+      // All interactive buttons should be focusable
+      buttons.forEach(button => {
+        const tabIndex = button.attributes('tabindex');
+        expect(parseInt(tabIndex || '0')).toBeGreaterThanOrEqual(0);
+      });
+    });
+
+    it('should use appropriate ARIA attributes for different appointment states', async () => {
+      // Test upcoming appointment
+      let buttons = wrapper.findAll('.button-stub');
+      expect(buttons.length).toBeGreaterThan(0);
+
+      // Test past appointment
+      const pastAppointment = createMockAppointment({ status: 'past' });
+      await wrapper.setProps({ appointment: pastAppointment });
+
+      expect(wrapper.html()).toContain('Diesen Termin nochmal buchen');
+
+      // Test cancelled appointment
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+
+      expect(wrapper.html()).toContain('Termin storniert');
+    });
+
+    it('should have clear visual hierarchy with CSS classes', () => {
+      expect(wrapper.find('.actions-grid').exists()).toBe(true);
+      expect(wrapper.findAll('.action-button')).toHaveLength(2);
+
+      // Actions should be in a logical visual group
+      const actionButtons = wrapper.findAll('.action-button');
+      actionButtons.forEach(button => {
+        expect(button.classes()).toContain('action-button');
+      });
+    });
+  });
 });