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

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

@@ -1,396 +1,396 @@
-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: {
-          MapPinIcon: {
-            template: '<svg class="map-pin-icon-stub"></svg>'
-          }
-        }
-      }
-    });
-  });
-
-  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', () => {
-      // Component uses MapPinIcon from @heroicons/vue/24/outline with .location-icon class
-      const locationIcon = wrapper.find('.location-icon');
-      expect(locationIcon.exists()).toBe(true);
-    });
-  });
-
-  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);
-
-      // Component uses .detail-secondary class for secondary text styling
-      const secondaryTexts = wrapper.findAll('.detail-secondary');
-      expect(secondaryTexts.length).toBeGreaterThan(0);
-    });
-
-    it('should apply icon styling class', () => {
-      // Component uses .location-icon class for the MapPinIcon
-      const locationIcon = wrapper.find('.location-icon');
-      expect(locationIcon.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: {
-            MapPinIcon: {
-              template: '<svg class="map-pin-icon-stub"></svg>'
-            }
-          }
-        }
-      });
-      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: {
-            MapPinIcon: {
-              template: '<svg class="map-pin-icon-stub" aria-hidden="true" role="img"></svg>'
-            }
-          }
-        }
-      });
-    });
-
-    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('.map-pin-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 detail-secondary styling class which provides proper contrast
-      const secondaryTexts = wrapper.findAll('.detail-secondary');
-      expect(secondaryTexts.length).toBeGreaterThan(0);
-
-      secondaryTexts.forEach(text => {
-        expect(text.classes()).toContain('detail-secondary');
-      });
-    });
-
-    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');
-      }
-    });
-  });
+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: {
+          MapPinIcon: {
+            template: '<svg class="map-pin-icon-stub"></svg>'
+          }
+        }
+      }
+    });
+  });
+
+  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', () => {
+      // Component uses MapPinIcon from @heroicons/vue/24/outline with .location-icon class
+      const locationIcon = wrapper.find('.location-icon');
+      expect(locationIcon.exists()).toBe(true);
+    });
+  });
+
+  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);
+
+      // Component uses .detail-secondary class for secondary text styling
+      const secondaryTexts = wrapper.findAll('.detail-secondary');
+      expect(secondaryTexts.length).toBeGreaterThan(0);
+    });
+
+    it('should apply icon styling class', () => {
+      // Component uses .location-icon class for the MapPinIcon
+      const locationIcon = wrapper.find('.location-icon');
+      expect(locationIcon.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: {
+            MapPinIcon: {
+              template: '<svg class="map-pin-icon-stub"></svg>'
+            }
+          }
+        }
+      });
+      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: {
+            MapPinIcon: {
+              template: '<svg class="map-pin-icon-stub" aria-hidden="true" role="img"></svg>'
+            }
+          }
+        }
+      });
+    });
+
+    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('.map-pin-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 detail-secondary styling class which provides proper contrast
+      const secondaryTexts = wrapper.findAll('.detail-secondary');
+      expect(secondaryTexts.length).toBeGreaterThan(0);
+
+      secondaryTexts.forEach(text => {
+        expect(text.classes()).toContain('detail-secondary');
+      });
+    });
+
+    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');
+      }
+    });
+  });
 });