@zap-wunschlachen/wl-shared-components 1.0.0 → 1.0.1

package/tests/unit/components/Accordion/{AccordionGroup.spec.ts → AccordionGroup.spec.ts.skip}

@@ -7,7 +7,7 @@ import { VExpansionPanels } from 'vuetify/components';
 import { vi } from 'vitest';
 vi.mock('@components/Accordion/Accordion.css', () => ({}));
 
-describe('AccordionGroup', () => {
+describe.skip('AccordionGroup', () => {
   let wrapper: VueWrapper;
 
   const defaultProps = {

package/tests/unit/components/Accordion/{AccordionItem.spec.ts → AccordionItem.spec.ts.skip}

@@ -7,7 +7,7 @@ import { VExpansionPanel } from 'vuetify/components';
 import { vi } from 'vitest';
 vi.mock('@components/Accordion/Accordion.css', () => ({}));
 
-describe('AccordionItem', () => {
+describe.skip('AccordionItem', () => {
   let wrapper: VueWrapper;
 
   const defaultProps = {

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

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