@zap-wunschlachen/wl-shared-components 1.0.38 → 1.0.39

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

@@ -1,302 +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('äöü');
-    });
-  });
-});
+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('äöü');
+    });
+  });
+});