@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

package/tests/unit/components/Loader/Loader.spec.ts

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Loader from '@components/Loader/Loader.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('Loader', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+      expect(wrapper.find('.loader-svg').exists()).toBe(true);
+    });
+
+    it('renders spinner SVG', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('applies default size of 96px', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom size prop', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 48
+        }
+      });
+
+      expect(wrapper.vm.size).toBe(48);
+    });
+
+    it('applies size to SVG element', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 64
+        }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 64px');
+      expect(svg.attributes('style')).toContain('height: 64px');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has role="alert" for screen readers', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+    });
+
+    it('has aria-live="assertive" for immediate announcement', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
+    });
+
+    it('has aria-busy="true" to indicate loading state', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
+    });
+
+    it('has role="status" for the spinner', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    });
+
+    it('has aria-hidden="true" on decorative SVG', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-hidden')).toBe('true');
+    });
+
+    it('provides proper semantic structure for assistive technologies', () => {
+      const wrapper = mount(Loader);
+
+      // Container announces loading state
+      const container = wrapper.find('.loader-container');
+      expect(container.attributes('role')).toBe('alert');
+      expect(container.attributes('aria-live')).toBe('assertive');
+      expect(container.attributes('aria-busy')).toBe('true');
+
+      // Inner status provides spinner context
+      const status = wrapper.find('[role="status"]');
+      expect(status.exists()).toBe(true);
+    });
+
+    it('follows WCAG 2.1 guidelines for loading indicators', () => {
+      const wrapper = mount(Loader);
+
+      // Should have proper ARIA attributes
+      expect(wrapper.find('[aria-busy]').exists()).toBe(true);
+      expect(wrapper.find('[aria-live]').exists()).toBe(true);
+
+      // SVG should be hidden from screen readers
+      expect(wrapper.find('svg[aria-hidden="true"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has loader-container wrapper', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('has loader-content for centering', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-content').exists()).toBe(true);
+    });
+
+    it('contains animated spinner arc', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+
+  describe('SVG Content', () => {
+    it('renders SVG with proper viewBox', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 100 101');
+    });
+
+    it('renders path elements for spinner', () => {
+      const wrapper = mount(Loader);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('renders W logo in the center', () => {
+      const wrapper = mount(Loader);
+      // The W logo is inside a g element
+      const gElements = wrapper.findAll('g');
+      expect(gElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Size Variations', () => {
+    it('handles small size (24px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 24 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 24px');
+    });
+
+    it('handles large size (200px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 200 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 200px');
+    });
+
+    it('handles zero size gracefully', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 0 }
+      });
+
+      expect(wrapper.vm.size).toBe(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders without props', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('maintains structure with undefined size', () => {
+      const wrapper = mount(Loader, {
+        props: { size: undefined }
+      });
+
+      // Should fall back to default size
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Animation', () => {
+    it('has animated spinner arc class', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+});

package/tests/unit/components/MaintenanceBanner/MaintenanceBanner.spec.ts

@@ -0,0 +1,302 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MaintenanceBanner from '@components/MaintenanceBanner/MaintenanceBanner.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    domain: 'domain-dental',
+    font_color_code: '#172774',
+    font_color_title_code: '#172774'
+  }
+}));
+
+// Mock child components
+vi.mock('@components/Background/Background.vue', () => ({
+  default: {
+    name: 'Background',
+    template: '<div class="background"><slot /></div>'
+  }
+}));
+
+vi.mock('@components/Icons/Logo.vue', () => ({
+  default: {
+    name: 'Logo',
+    template: '<div class="logo"></div>',
+    props: ['width', 'height']
+  }
+}));
+
+vi.mock('@components/MaintenanceBanner/MaintenanceIllustration.vue', () => ({
+  default: {
+    name: 'MaintenanceIllustration',
+    template: '<div class="maintenance-illustration"></div>'
+  }
+}));
+
+vi.mock('@components/Button/Button.vue', () => ({
+  default: {
+    name: 'Button',
+    template: '<button class="wl-button" @click="$emit(\'click\')">{{ label }}</button>',
+    props: ['variant', 'color', 'label'],
+    emits: ['click']
+  }
+}));
+
+// Mock HeroIcons
+vi.mock('@heroicons/vue/24/outline', () => ({
+  PhoneIcon: {
+    name: 'PhoneIcon',
+    template: '<svg class="phone-icon"></svg>'
+  },
+  EnvelopeIcon: {
+    name: 'EnvelopeIcon',
+    template: '<svg class="envelope-icon"></svg>'
+  }
+}));
+
+describe('MaintenanceBanner', () => {
+  describe('Default Behavior', () => {
+    it('renders maintenance banner', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('.maintenance-banner__content').exists()).toBe(true);
+    });
+
+    it('renders default title', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('h1').text()).toBe('Wir polieren gerade nach');
+    });
+
+    it('renders default description', () => {
+      const wrapper = mount(MaintenanceBanner);
+      const description = wrapper.find('.maintenance-banner__description');
+      expect(description.text()).toContain('Unsere Webseite befindet sich aktuell in Wartung');
+    });
+
+    it('renders Logo component', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('.logo').exists()).toBe(true);
+    });
+
+    it('renders call to action button', () => {
+      const wrapper = mount(MaintenanceBanner);
+      const button = wrapper.find('.wl-button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Jetzt anrufen');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom title', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: { title: 'Custom Title' }
+      });
+
+      expect(wrapper.find('h1').text()).toBe('Custom Title');
+    });
+
+    it('accepts custom description', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: { description: 'Custom description text' }
+      });
+
+      expect(wrapper.find('.maintenance-banner__description').text()).toContain('Custom description text');
+    });
+
+    it('accepts custom phone number', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: { phone: '+49123456789' }
+      });
+
+      expect(wrapper.text()).toContain('+49123456789');
+    });
+
+    it('accepts custom email', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: { email: 'test@example.com' }
+      });
+
+      expect(wrapper.text()).toContain('test@example.com');
+    });
+
+    it('accepts custom button text', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: { buttonText: 'Contact Us' }
+      });
+
+      expect(wrapper.find('.wl-button').text()).toBe('Contact Us');
+    });
+  });
+
+  describe('Contact Information', () => {
+    it('displays phone icon', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('.phone-icon').exists()).toBe(true);
+    });
+
+    it('displays envelope icon', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('.envelope-icon').exists()).toBe(true);
+    });
+
+    it('renders default dental phone number', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.text()).toContain('+49304952010');
+    });
+
+    it('renders default dental email', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.text()).toContain('info@wunschlachen.de');
+    });
+  });
+
+  describe('Domain-specific Rendering', () => {
+    it('renders illustration for dental domain', () => {
+      const wrapper = mount(MaintenanceBanner);
+      expect(wrapper.find('.maintenance-illustration').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has h1 heading for main title', () => {
+      const wrapper = mount(MaintenanceBanner);
+      const h1 = wrapper.find('h1');
+      expect(h1.exists()).toBe(true);
+      expect(h1.text()).toBeTruthy();
+    });
+
+    it('has proper semantic structure', () => {
+      const wrapper = mount(MaintenanceBanner);
+
+      // Should have heading
+      expect(wrapper.find('h1').exists()).toBe(true);
+
+      // Should have contact information
+      expect(wrapper.find('.maintenance-banner__contact').exists()).toBe(true);
+    });
+
+    it('provides meaningful contact information', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: {
+          phone: '+49123456789',
+          email: 'contact@example.com'
+        }
+      });
+
+      // Phone and email should be visible
+      expect(wrapper.text()).toContain('+49123456789');
+      expect(wrapper.text()).toContain('contact@example.com');
+    });
+
+    it('has accessible button', () => {
+      const wrapper = mount(MaintenanceBanner);
+      const button = wrapper.find('button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBeTruthy();
+    });
+
+    it('has proper visual hierarchy', () => {
+      const wrapper = mount(MaintenanceBanner);
+
+      // Title should be in h1
+      const h1 = wrapper.find('h1');
+      expect(h1.exists()).toBe(true);
+
+      // Description should be in paragraph
+      const description = wrapper.find('.maintenance-banner__description');
+      expect(description.exists()).toBe(true);
+    });
+  });
+
+  describe('User Interaction', () => {
+    it('button click triggers phone call', async () => {
+      const originalLocation = window.location;
+      delete (window as any).location;
+      window.location = { href: '' } as Location;
+
+      try {
+        const wrapper = mount(MaintenanceBanner, {
+          props: { phone: '+49 123 456 789' }
+        });
+
+        const button = wrapper.find('button');
+        await button.trigger('click');
+
+        expect(window.location.href).toBe('tel:+49123456789');
+      } finally {
+        window.location = originalLocation;
+      }
+    });
+  });
+
+  describe('Description HTML Escaping', () => {
+    it('escapes HTML in description to prevent XSS', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: {
+          description: '<script>alert("XSS")</script>'
+        }
+      });
+
+      const html = wrapper.find('.maintenance-banner__description').html();
+      expect(html).not.toContain('<script>');
+      expect(html).toContain('&lt;script&gt;');
+    });
+
+    it('converts newlines to br tags', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: {
+          description: 'Line 1\nLine 2'
+        }
+      });
+
+      const html = wrapper.find('.maintenance-banner__description').html();
+      expect(html).toContain('<br');
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has proper class structure', () => {
+      const wrapper = mount(MaintenanceBanner);
+
+      expect(wrapper.find('.maintenance-banner__content').exists()).toBe(true);
+      expect(wrapper.find('.maintenance-banner__text-content').exists()).toBe(true);
+      expect(wrapper.find('.maintenance-banner__logo-section').exists()).toBe(true);
+    });
+
+    it('renders contact items', () => {
+      const wrapper = mount(MaintenanceBanner);
+
+      const contactItems = wrapper.findAll('.maintenance-banner__contact-item');
+      expect(contactItems.length).toBe(2); // Phone and Email
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty props gracefully', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: {
+          title: '',
+          description: '',
+          phone: '',
+          email: '',
+          buttonText: ''
+        }
+      });
+
+      // Should fall back to defaults
+      expect(wrapper.find('h1').text()).toBe('Wir polieren gerade nach');
+    });
+
+    it('handles special characters in props', () => {
+      const wrapper = mount(MaintenanceBanner, {
+        props: {
+          title: 'Wartung & Pflege',
+          description: 'Spezialzeichen: äöü ß €'
+        }
+      });
+
+      expect(wrapper.find('h1').text()).toBe('Wartung & Pflege');
+      expect(wrapper.text()).toContain('äöü');
+    });
+  });
+});

package/tests/unit/constants/iconEnums.spec.ts

@@ -1,40 +1,40 @@
-import { describe, it, expect } from 'vitest';
-import { IconEnum } from '../../../src/constants/iconEnums';
-
-describe('IconEnum', () => {
-  it('should have CALENDAR constant with correct value', () => {
-    expect(IconEnum.CALENDAR).toBe('calendar');
-  });
-
-  it('should have PLAY constant with correct value', () => {
-    expect(IconEnum.PLAY).toBe('play');
-  });
-
-  it('should have exactly 2 enum values', () => {
-    const enumValues = Object.values(IconEnum);
-    expect(enumValues).toHaveLength(2);
-  });
-
-  it('should contain specific enum values', () => {
-    const enumValues = Object.values(IconEnum);
-    expect(enumValues).toContain('calendar');
-    expect(enumValues).toContain('play');
-  });
-
-  it('should have unique values', () => {
-    const enumValues = Object.values(IconEnum);
-    const uniqueValues = new Set(enumValues);
-    expect(uniqueValues.size).toBe(enumValues.length);
-  });
-
-  it('should be able to use enum values for comparisons', () => {
-    const testValue = 'calendar';
-    expect(testValue).toBe(IconEnum.CALENDAR);
-  });
-
-  it('should maintain type safety with enum keys', () => {
-    const enumKeys = Object.keys(IconEnum);
-    expect(enumKeys).toContain('CALENDAR');
-    expect(enumKeys).toContain('PLAY');
-  });
+import { describe, it, expect } from 'vitest';
+import { IconEnum } from '../../../src/constants/iconEnums';
+
+describe('IconEnum', () => {
+  it('should have CALENDAR constant with correct value', () => {
+    expect(IconEnum.CALENDAR).toBe('calendar');
+  });
+
+  it('should have PLAY constant with correct value', () => {
+    expect(IconEnum.PLAY).toBe('play');
+  });
+
+  it('should have exactly 2 enum values', () => {
+    const enumValues = Object.values(IconEnum);
+    expect(enumValues).toHaveLength(2);
+  });
+
+  it('should contain specific enum values', () => {
+    const enumValues = Object.values(IconEnum);
+    expect(enumValues).toContain('calendar');
+    expect(enumValues).toContain('play');
+  });
+
+  it('should have unique values', () => {
+    const enumValues = Object.values(IconEnum);
+    const uniqueValues = new Set(enumValues);
+    expect(uniqueValues.size).toBe(enumValues.length);
+  });
+
+  it('should be able to use enum values for comparisons', () => {
+    const testValue = 'calendar';
+    expect(testValue).toBe(IconEnum.CALENDAR);
+  });
+
+  it('should maintain type safety with enum keys', () => {
+    const enumKeys = Object.keys(IconEnum);
+    expect(enumKeys).toContain('CALENDAR');
+    expect(enumKeys).toContain('PLAY');
+  });
 });