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

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

@@ -0,0 +1,486 @@
+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';
+
+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
+  });
+
+  beforeEach(() => {
+    const appointment = createMockAppointment();
+    wrapper = mount(Card, {
+      props: { appointment },
+      global: {
+        stubs: {
+          Icon: {
+            template: '<div class="icon-stub" :name="name" :size="size"></div>',
+            props: ['name', 'size']
+          },
+          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'],
+            emits: ['confirmed', 'cancelled', 'rescheduled']
+          }
+        }
+      }
+    });
+  });
+
+  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', () => {
+      const icons = wrapper.findAll('.icon-stub');
+      expect(icons.length).toBeGreaterThanOrEqual(3);
+
+      const iconNames = icons.map(icon => icon.attributes('name'));
+      expect(iconNames).toContain('heroicons:user-circle');
+      expect(iconNames).toContain('heroicons:map-pin');
+      expect(iconNames).toContain('heroicons:clock');
+    });
+
+    it('should have correct header items structure', () => {
+      const headerItems = wrapper.findAll('.header-item');
+      expect(headerItems).toHaveLength(3);
+    });
+  });
+
+  describe('Appointment Status Styling', () => {
+    it('should apply normal header background for upcoming appointments', () => {
+      const header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('header-bg-normal');
+      expect(header.classes()).not.toContain('header-bg-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('header-bg-cancelled');
+      expect(header.classes()).not.toContain('header-bg-normal');
+    });
+
+    it('should apply card opacity for past appointments', async () => {
+      const pastAppointment = createMockAppointment({ status: 'past' });
+      await wrapper.setProps({ appointment: pastAppointment });
+
+      expect(wrapper.find('.card-opacity').exists()).toBe(true);
+    });
+
+    it('should not apply card opacity for non-past 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 });
+
+      expect(wrapper.find('h2').text()).toBe('');
+    });
+  });
+
+  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 },
+        global: {
+          stubs: {
+            Icon: {
+              template: '<div class="icon-stub" :aria-hidden="true" :name="name" :size="size" role="img" :aria-label="name"></div>',
+              props: ['name', 'size']
+            },
+            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']
+            }
+          }
+        }
+      });
+    });
+
+    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('h2');
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toBe('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 h2 = wrapper.find('h2');
+      expect(h2.text()).toBe('Test Treatment');
+    });
+
+    it('should have proper icon accessibility attributes', () => {
+      const icons = wrapper.findAll('.icon-stub');
+      expect(icons.length).toBeGreaterThanOrEqual(3);
+
+      icons.forEach(icon => {
+        expect(icon.attributes('aria-hidden')).toBe('true');
+        expect(icon.attributes('role')).toBe('img');
+        expect(icon.attributes('aria-label')).toBeTruthy();
+      });
+    });
+
+    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 normal status
+      let header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('header-bg-normal');
+
+      // Test cancelled status
+      const cancelledAppointment = createMockAppointment({ status: 'cancelled' });
+      await wrapper.setProps({ appointment: cancelledAppointment });
+
+      header = wrapper.find('.card-header');
+      expect(header.classes()).toContain('header-bg-cancelled');
+
+      // Test past status with opacity
+      const pastAppointment = createMockAppointment({ status: 'past' });
+      await wrapper.setProps({ appointment: pastAppointment });
+
+      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('h2');
+      expect(heading.text()).toBe('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('header-bg-normal');
+
+      // 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);
+    });
+  });
+});