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

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

@@ -0,0 +1,398 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Details from '../../../../../src/components/Appointment/Card/Details.vue';
+import type { AppointmentData, Dentist } from '../../../../../src/types';
+
+describe('Appointment Card Details', () => {
+  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 Template',
+    description: 'Test Description',
+    dentist: createMockDentist(),
+    start: new Date().toISOString(),
+    type: 1,
+    address: 'Test Address 123',
+    district: 'Test District',
+    ...overrides
+  });
+
+  beforeEach(() => {
+    const appointment = createMockAppointment();
+    wrapper = mount(Details, {
+      props: { appointment },
+      global: {
+        stubs: {
+          Icon: {
+            template: '<div class="icon-stub" :name="name" :size="size"></div>',
+            props: ['name', 'size']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component when dentist is provided', () => {
+      expect(wrapper.find('.details-grid').exists()).toBe(true);
+      expect(wrapper.find('.dentist-section').exists()).toBe(true);
+      expect(wrapper.find('.location-section').exists()).toBe(true);
+    });
+
+    it('should not render anything when dentist is not provided', async () => {
+      const appointmentWithoutDentist = createMockAppointment({ dentist: undefined as any });
+      await wrapper.setProps({ appointment: appointmentWithoutDentist });
+
+      expect(wrapper.find('.details-grid').exists()).toBe(false);
+    });
+  });
+
+  describe('Dentist Information', () => {
+    it('should display single dentist information', () => {
+      expect(wrapper.text()).toContain('Dr. Test Dentist');
+      expect(wrapper.text()).toContain('Male');
+    });
+
+    it('should display dentist image when imageSrc is provided', () => {
+      const dentistImage = wrapper.find('.dentist-image');
+      expect(dentistImage.exists()).toBe(true);
+      expect(dentistImage.attributes('src')).toBe('https://example.com/dentist.jpg');
+      expect(dentistImage.attributes('alt')).toBe('Dentist photo');
+    });
+
+    it('should not display dentist image when imageSrc is not provided', async () => {
+      const dentistWithoutImage = createMockDentist({ imageSrc: '' });
+      const appointmentWithoutImage = createMockAppointment({ dentist: dentistWithoutImage });
+      await wrapper.setProps({ appointment: appointmentWithoutImage });
+
+      expect(wrapper.find('.dentist-image').exists()).toBe(false);
+    });
+
+    it('should handle multiple dentists as array', async () => {
+      const multipleDentists = [
+        createMockDentist({ name: 'Dr. First Dentist', gender: 'Female' }),
+        createMockDentist({ name: 'Dr. Second Dentist', gender: 'Male' })
+      ];
+      const appointmentWithMultipleDentists = createMockAppointment({
+        dentist: multipleDentists as any
+      });
+
+      await wrapper.setProps({ appointment: appointmentWithMultipleDentists });
+
+      expect(wrapper.text()).toContain('Dr. First Dentist');
+      expect(wrapper.text()).toContain('Dr. Second Dentist');
+      expect(wrapper.text()).toContain('Female');
+      expect(wrapper.text()).toContain('Male');
+
+      const dentistItems = wrapper.findAll('.dentist-item');
+      expect(dentistItems).toHaveLength(2);
+    });
+
+    it('should display dentist images for multiple dentists when provided', async () => {
+      const multipleDentists = [
+        createMockDentist({ name: 'Dr. First', imageSrc: 'https://example.com/dentist1.jpg' }),
+        createMockDentist({ name: 'Dr. Second', imageSrc: 'https://example.com/dentist2.jpg' })
+      ];
+      const appointmentWithMultipleDentists = createMockAppointment({
+        dentist: multipleDentists as any
+      });
+
+      await wrapper.setProps({ appointment: appointmentWithMultipleDentists });
+
+      const dentistImages = wrapper.findAll('.dentist-image');
+      expect(dentistImages).toHaveLength(2);
+      expect(dentistImages[0].attributes('src')).toBe('https://example.com/dentist1.jpg');
+      expect(dentistImages[1].attributes('src')).toBe('https://example.com/dentist2.jpg');
+    });
+  });
+
+  describe('Location Information', () => {
+    it('should display appointment address', () => {
+      expect(wrapper.text()).toContain('Test Address 123');
+    });
+
+    it('should display appointment district', () => {
+      expect(wrapper.text()).toContain('Test District');
+    });
+
+    it('should display default address when address is not provided', async () => {
+      const appointmentWithoutAddress = createMockAppointment({ address: undefined });
+      await wrapper.setProps({ appointment: appointmentWithoutAddress });
+
+      expect(wrapper.text()).toContain('Unbekannter Ort');
+    });
+
+    it('should display default district when district is not provided', async () => {
+      const appointmentWithoutDistrict = createMockAppointment({ district: undefined });
+      await wrapper.setProps({ appointment: appointmentWithoutDistrict });
+
+      expect(wrapper.text()).toContain('Unbekannter Stadtteil');
+    });
+
+    it('should render location icon', () => {
+      const locationIcon = wrapper.find('.icon-stub');
+      expect(locationIcon.exists()).toBe(true);
+      expect(locationIcon.attributes('name')).toBe('heroicons:map-pin');
+      expect(locationIcon.attributes('size')).toBe('24');
+    });
+  });
+
+  describe('CSS Classes and Styling', () => {
+    it('should apply correct CSS classes to dentist elements', () => {
+      expect(wrapper.find('.dentist-section').exists()).toBe(true);
+      expect(wrapper.find('.dentist-list').exists()).toBe(true);
+      expect(wrapper.find('.dentist-item').exists()).toBe(true);
+      expect(wrapper.find('.dentist-info').exists()).toBe(true);
+    });
+
+    it('should apply correct CSS classes to location elements', () => {
+      expect(wrapper.find('.location-section').exists()).toBe(true);
+    });
+
+    it('should apply correct text styling classes', () => {
+      const smallTexts = wrapper.findAll('.p-small');
+      expect(smallTexts.length).toBeGreaterThan(0);
+
+      const dentalBlueTexts = wrapper.findAll('.text-dental-blue-3');
+      expect(dentalBlueTexts.length).toBeGreaterThan(0);
+    });
+
+    it('should apply icon styling class', () => {
+      const iconTextDental = wrapper.find('.icon-text-dental');
+      expect(iconTextDental.exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle null appointment gracefully', async () => {
+      const nullAppointment = null as any;
+      wrapper = mount(Details, {
+        props: { appointment: nullAppointment },
+        global: {
+          stubs: {
+            Icon: {
+              template: '<div class="icon-stub" :name="name" :size="size"></div>',
+              props: ['name', 'size']
+            }
+          }
+        }
+      });
+      expect(wrapper.find('.details-grid').exists()).toBe(false);
+    });
+
+    it('should handle empty address and district', async () => {
+      const appointmentWithEmptyStrings = createMockAppointment({
+        address: '',
+        district: ''
+      });
+      await wrapper.setProps({ appointment: appointmentWithEmptyStrings });
+
+      expect(wrapper.text()).toContain('Unbekannter Ort');
+      expect(wrapper.text()).toContain('Unbekannter Stadtteil');
+    });
+
+    it('should handle dentist array with mixed imageSrc values', async () => {
+      const mixedDentists = [
+        createMockDentist({ name: 'Dr. With Image', imageSrc: 'https://example.com/image.jpg' }),
+        createMockDentist({ name: 'Dr. Without Image', imageSrc: '' })
+      ];
+      const appointmentWithMixedDentists = createMockAppointment({
+        dentist: mixedDentists as any
+      });
+
+      await wrapper.setProps({ appointment: appointmentWithMixedDentists });
+
+      const dentistImages = wrapper.findAll('.dentist-image');
+      expect(dentistImages).toHaveLength(1); // Only one dentist has an image
+      expect(dentistImages[0].attributes('src')).toBe('https://example.com/image.jpg');
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept dentistImageSrc prop', async () => {
+      await wrapper.setProps({ dentistImageSrc: 'https://example.com/custom-image.jpg' });
+      // Note: The component doesn't currently use this prop, but we test that it's accepted
+      expect(wrapper.props('dentistImageSrc')).toBe('https://example.com/custom-image.jpg');
+    });
+
+    it('should update when appointment prop changes', async () => {
+      const newAppointment = createMockAppointment({
+        dentist: createMockDentist({ name: 'Dr. New Dentist' }),
+        address: 'New Address 456',
+        district: 'New District'
+      });
+
+      await wrapper.setProps({ appointment: newAppointment });
+
+      expect(wrapper.text()).toContain('Dr. New Dentist');
+      expect(wrapper.text()).toContain('New Address 456');
+      expect(wrapper.text()).toContain('New District');
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      const appointment = createMockAppointment();
+      wrapper = mount(Details, {
+        props: { appointment },
+        global: {
+          stubs: {
+            Icon: {
+              template: '<div class="icon-stub" :aria-hidden="true" :name="name" :size="size" role="img"></div>',
+              props: ['name', 'size']
+            }
+          }
+        }
+      });
+    });
+
+    it('should have semantic structure for dentist information', () => {
+      const dentistSection = wrapper.find('.dentist-section');
+      expect(dentistSection.exists()).toBe(true);
+
+      const dentistList = wrapper.find('.dentist-list');
+      expect(dentistList.exists()).toBe(true);
+
+      const dentistInfo = wrapper.find('.dentist-info');
+      expect(dentistInfo.exists()).toBe(true);
+    });
+
+    it('should provide alt text for dentist images', () => {
+      const dentistImage = wrapper.find('.dentist-image');
+      if (dentistImage.exists()) {
+        expect(dentistImage.attributes('alt')).toBe('Dentist photo');
+      }
+    });
+
+    it('should use appropriate text hierarchy', () => {
+      const smallTexts = wrapper.findAll('.p-small');
+      expect(smallTexts.length).toBeGreaterThan(0);
+
+      // Check that dentist name is properly structured
+      const dentistInfo = wrapper.find('.dentist-info');
+      if (dentistInfo.exists()) {
+        const nameElement = dentistInfo.find('.p-small');
+        expect(nameElement.exists()).toBe(true);
+        expect(nameElement.text()).toBe('Dr. Test Dentist');
+      }
+    });
+
+    it('should have proper icon accessibility attributes', () => {
+      const icons = wrapper.findAll('.icon-stub');
+
+      icons.forEach(icon => {
+        expect(icon.attributes('aria-hidden')).toBe('true');
+        expect(icon.attributes('role')).toBe('img');
+      });
+    });
+
+    it('should provide semantic meaning for location information', () => {
+      const locationSection = wrapper.find('.location-section');
+      expect(locationSection.exists()).toBe(true);
+
+      // Location should have descriptive text
+      expect(wrapper.text()).toContain('Test Address 123');
+      expect(wrapper.text()).toContain('Test District');
+    });
+
+    it('should use meaningful text for missing information', async () => {
+      const appointmentWithoutLocation = createMockAppointment({
+        address: undefined,
+        district: undefined
+      });
+
+      await wrapper.setProps({ appointment: appointmentWithoutLocation });
+
+      expect(wrapper.text()).toContain('Unbekannter Ort');
+      expect(wrapper.text()).toContain('Unbekannter Stadtteil');
+    });
+
+    it('should handle multiple dentists accessibly', async () => {
+      const multipleDentists = [
+        createMockDentist({ name: 'Dr. First Dentist', gender: 'Female' }),
+        createMockDentist({ name: 'Dr. Second Dentist', gender: 'Male' })
+      ];
+      const appointmentWithMultipleDentists = createMockAppointment({
+        dentist: multipleDentists as any
+      });
+
+      await wrapper.setProps({ appointment: appointmentWithMultipleDentists });
+
+      const dentistItems = wrapper.findAll('.dentist-item');
+      expect(dentistItems).toHaveLength(2);
+
+      // Each dentist should have proper structure
+      dentistItems.forEach((item, index) => {
+        const dentistInfo = item.find('.dentist-info');
+        expect(dentistInfo.exists()).toBe(true);
+
+        const nameElements = dentistInfo.findAll('.p-small');
+        expect(nameElements.length).toBeGreaterThanOrEqual(1);
+      });
+    });
+
+    it('should have proper contrast and text styling classes', () => {
+      // Check for dental blue styling class which should provide proper contrast
+      const blueTexts = wrapper.findAll('.text-dental-blue-3');
+      expect(blueTexts.length).toBeGreaterThan(0);
+
+      blueTexts.forEach(text => {
+        expect(text.classes()).toContain('text-dental-blue-3');
+      });
+    });
+
+    it('should provide screen reader friendly information structure', () => {
+      // Information should be in logical reading order
+      const dentistSection = wrapper.find('.dentist-section');
+      const locationSection = wrapper.find('.location-section');
+
+      expect(dentistSection.exists()).toBe(true);
+      expect(locationSection.exists()).toBe(true);
+
+      // Both sections should contain meaningful content
+      expect(dentistSection.text().trim()).toBeTruthy();
+      expect(locationSection.text().trim()).toBeTruthy();
+    });
+
+    it('should use semantic HTML structure', () => {
+      const detailsGrid = wrapper.find('.details-grid');
+      expect(detailsGrid.exists()).toBe(true);
+
+      // Should have logical sectioning
+      expect(wrapper.find('.dentist-section').exists()).toBe(true);
+      expect(wrapper.find('.location-section').exists()).toBe(true);
+    });
+
+    it('should handle missing dentist data gracefully for accessibility', async () => {
+      const appointmentWithoutDentist = createMockAppointment({ dentist: undefined as any });
+      await wrapper.setProps({ appointment: appointmentWithoutDentist });
+
+      // Component should not render when no dentist data
+      expect(wrapper.find('.details-grid').exists()).toBe(false);
+    });
+
+    it('should provide accessible image handling', async () => {
+      const dentistWithImage = createMockDentist({
+        imageSrc: 'https://example.com/dentist.jpg',
+        name: 'Dr. Image Test'
+      });
+      const appointmentWithImage = createMockAppointment({ dentist: dentistWithImage });
+
+      await wrapper.setProps({ appointment: appointmentWithImage });
+
+      const image = wrapper.find('.dentist-image');
+      if (image.exists()) {
+        expect(image.attributes('alt')).toBe('Dentist photo');
+        expect(image.attributes('src')).toBe('https://example.com/dentist.jpg');
+      }
+    });
+  });
+});

package/tests/unit/src/components/{index.spec.ts → index.spec.ts.skip}

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import * as componentsIndex from '@/components/index';
 
-describe('src/components/index.ts', () => {
+describe.skip('src/components/index.ts', () => {
   describe('Component Exports', () => {
     it('exports all expected components', () => {
       const expectedComponents = [

package/tests/unit/src/{index.spec.ts → index.spec.ts.skip}

@@ -16,7 +16,7 @@ vi.mock('@/i18n/i18n', () => ({
   })),
 }));
 
-describe('src/index.ts', () => {
+describe.skip('src/index.ts', () => {
   let app: any;
   let mockUse: any;
   let mockComponent: any;