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

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/utils/accessibility.spec.ts

@@ -0,0 +1,318 @@
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Accessibility Testing Utilities
+ *
+ * These utilities help ensure components meet WCAG 2.1 accessibility guidelines
+ * which are required in Germany (BITV 2.0 / EN 301 549).
+ */
+
+// Helper function to check if element has accessible name
+function hasAccessibleName(element: Element): boolean {
+  const ariaLabel = element.getAttribute('aria-label');
+  const ariaLabelledBy = element.getAttribute('aria-labelledby');
+  const title = element.getAttribute('title');
+  const textContent = element.textContent?.trim();
+
+  return Boolean(ariaLabel || ariaLabelledBy || title || textContent);
+}
+
+// Helper function to check if element is focusable
+function isFocusable(element: Element): boolean {
+  const tagName = element.tagName.toLowerCase();
+  const tabIndex = element.getAttribute('tabindex');
+
+  // Native focusable elements
+  const focusableTags = ['button', 'input', 'textarea', 'select', 'details'];
+
+  if (focusableTags.includes(tagName)) {
+    // Check if not disabled
+    return !element.hasAttribute('disabled');
+  }
+
+  // Anchor tags are focusable only with href
+  if (tagName === 'a') {
+    return element.hasAttribute('href') && !element.hasAttribute('disabled');
+  }
+
+  // Elements with tabindex >= 0 are focusable
+  if (tabIndex !== null) {
+    return parseInt(tabIndex) >= 0;
+  }
+
+  return false;
+}
+
+// Helper function to check color contrast (simplified)
+function hasMinimumContrast(foreground: string, background: string, largeText: boolean = false): boolean {
+  // This is a simplified check - in real tests use axe-core
+  // WCAG 2.1 AA requires 4.5:1 for normal text, 3:1 for large text
+  const minRatio = largeText ? 3 : 4.5;
+
+  // Parse hex colors
+  const parseHex = (hex: string): [number, number, number] => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+      return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+      ];
+    }
+    return [0, 0, 0];
+  };
+
+  const luminance = (r: number, g: number, b: number): number => {
+    const [rs, gs, bs] = [r, g, b].map(c => {
+      const s = c / 255;
+      return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  const [fr, fg, fb] = parseHex(foreground);
+  const [br, bg, bb] = parseHex(background);
+
+  const l1 = luminance(fr, fg, fb);
+  const l2 = luminance(br, bg, bb);
+
+  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+
+  return ratio >= minRatio;
+}
+
+// Helper to check for valid heading hierarchy
+function hasValidHeadingHierarchy(html: string): boolean {
+  const headingRegex = /<h([1-6])/g;
+  const matches = [...html.matchAll(headingRegex)];
+
+  if (matches.length === 0) return true;
+
+  let lastLevel = 0;
+  for (const match of matches) {
+    const level = parseInt(match[1]);
+    // Heading levels should not skip (e.g., h1 to h3)
+    if (level > lastLevel + 1 && lastLevel !== 0) {
+      return false;
+    }
+    lastLevel = level;
+  }
+
+  return true;
+}
+
+describe('Accessibility Utilities', () => {
+  describe('hasAccessibleName', () => {
+    it('returns true for element with aria-label', () => {
+      const div = document.createElement('div');
+      div.setAttribute('aria-label', 'Test label');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with aria-labelledby', () => {
+      const div = document.createElement('div');
+      div.setAttribute('aria-labelledby', 'label-id');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with title', () => {
+      const div = document.createElement('div');
+      div.setAttribute('title', 'Test title');
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns true for element with text content', () => {
+      const div = document.createElement('div');
+      div.textContent = 'Hello World';
+      expect(hasAccessibleName(div)).toBe(true);
+    });
+
+    it('returns false for empty element', () => {
+      const div = document.createElement('div');
+      expect(hasAccessibleName(div)).toBe(false);
+    });
+
+    it('returns false for element with only whitespace', () => {
+      const div = document.createElement('div');
+      div.textContent = '   ';
+      expect(hasAccessibleName(div)).toBe(false);
+    });
+  });
+
+  describe('isFocusable', () => {
+    it('returns true for button element', () => {
+      const button = document.createElement('button');
+      expect(isFocusable(button)).toBe(true);
+    });
+
+    it('returns true for input element', () => {
+      const input = document.createElement('input');
+      expect(isFocusable(input)).toBe(true);
+    });
+
+    it('returns true for anchor with href', () => {
+      const anchor = document.createElement('a');
+      anchor.setAttribute('href', '#');
+      expect(isFocusable(anchor)).toBe(true);
+    });
+
+    it('returns false for disabled button', () => {
+      const button = document.createElement('button');
+      button.setAttribute('disabled', '');
+      expect(isFocusable(button)).toBe(false);
+    });
+
+    it('returns true for div with tabindex 0', () => {
+      const div = document.createElement('div');
+      div.setAttribute('tabindex', '0');
+      expect(isFocusable(div)).toBe(true);
+    });
+
+    it('returns false for div with tabindex -1', () => {
+      const div = document.createElement('div');
+      div.setAttribute('tabindex', '-1');
+      expect(isFocusable(div)).toBe(false);
+    });
+
+    it('returns false for regular div', () => {
+      const div = document.createElement('div');
+      expect(isFocusable(div)).toBe(false);
+    });
+  });
+
+  describe('hasMinimumContrast', () => {
+    it('returns true for black on white (high contrast)', () => {
+      expect(hasMinimumContrast('#000000', '#FFFFFF')).toBe(true);
+    });
+
+    it('returns true for white on black (high contrast)', () => {
+      expect(hasMinimumContrast('#FFFFFF', '#000000')).toBe(true);
+    });
+
+    it('returns false for light gray on white (low contrast)', () => {
+      expect(hasMinimumContrast('#CCCCCC', '#FFFFFF')).toBe(false);
+    });
+
+    it('returns true for dark blue on white', () => {
+      expect(hasMinimumContrast('#172774', '#FFFFFF')).toBe(true);
+    });
+
+    it('accepts lower contrast for large text', () => {
+      // Large text only needs 3:1 ratio
+      expect(hasMinimumContrast('#777777', '#FFFFFF', true)).toBe(true);
+    });
+  });
+
+  describe('hasValidHeadingHierarchy', () => {
+    it('returns true for repeating same heading level', () => {
+      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns true for skipped levels going down', () => {
+      const html = '<h1>Title</h1><h2>Sub</h2><h2>Another Sub</h2>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns false for skipped heading levels', () => {
+      const html = '<h1>Title</h1><h3>Skipped h2</h3>';
+      expect(hasValidHeadingHierarchy(html)).toBe(false);
+    });
+
+    it('returns true for no headings', () => {
+      const html = '<p>No headings here</p>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+
+    it('returns true for single heading', () => {
+      const html = '<h1>Only one heading</h1>';
+      expect(hasValidHeadingHierarchy(html)).toBe(true);
+    });
+  });
+});
+
+describe('WCAG 2.1 Compliance Checklist', () => {
+  describe('1.1.1 Non-text Content (Level A)', () => {
+    it('images should have alt text or be marked decorative', () => {
+      const img = document.createElement('img');
+      img.setAttribute('alt', 'Description');
+      expect(img.hasAttribute('alt')).toBe(true);
+    });
+
+    it('decorative images should have empty alt', () => {
+      const img = document.createElement('img');
+      img.setAttribute('alt', '');
+      img.setAttribute('role', 'presentation');
+      expect(img.getAttribute('alt')).toBe('');
+    });
+  });
+
+  describe('1.3.1 Info and Relationships (Level A)', () => {
+    it('form inputs should have associated labels', () => {
+      const input = document.createElement('input');
+      input.setAttribute('id', 'email');
+      input.setAttribute('aria-label', 'Email address');
+
+      expect(input.hasAttribute('aria-label') || input.hasAttribute('aria-labelledby')).toBe(true);
+    });
+  });
+
+  describe('2.1.1 Keyboard (Level A)', () => {
+    it('interactive elements should be keyboard accessible', () => {
+      const button = document.createElement('button');
+      expect(isFocusable(button)).toBe(true);
+    });
+
+    it('custom interactive elements need tabindex', () => {
+      const div = document.createElement('div');
+      div.setAttribute('role', 'button');
+      div.setAttribute('tabindex', '0');
+      expect(isFocusable(div)).toBe(true);
+    });
+  });
+
+  describe('2.4.4 Link Purpose (Level A)', () => {
+    it('links should have descriptive text', () => {
+      const link = document.createElement('a');
+      link.textContent = 'Read more about accessibility';
+      expect(hasAccessibleName(link)).toBe(true);
+    });
+  });
+
+  describe('4.1.2 Name, Role, Value (Level A)', () => {
+    it('custom controls should have proper ARIA attributes', () => {
+      const customButton = document.createElement('div');
+      customButton.setAttribute('role', 'button');
+      customButton.setAttribute('aria-pressed', 'false');
+      customButton.setAttribute('tabindex', '0');
+      customButton.textContent = 'Toggle';
+
+      expect(customButton.getAttribute('role')).toBe('button');
+      expect(customButton.hasAttribute('aria-pressed')).toBe(true);
+      expect(isFocusable(customButton)).toBe(true);
+      expect(hasAccessibleName(customButton)).toBe(true);
+    });
+  });
+});
+
+describe('German Accessibility Requirements (BITV 2.0)', () => {
+  it('public sector websites must comply with WCAG 2.1 Level AA', () => {
+    // BITV 2.0 is based on EN 301 549, which references WCAG 2.1
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('deadline for compliance: September 23, 2020 for new websites', () => {
+    // All new public sector websites must be accessible
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('accessibility statement is required', () => {
+    // Websites must provide an accessibility statement
+    expect(true).toBe(true); // Documentation test
+  });
+
+  it('feedback mechanism must be provided', () => {
+    // Users must be able to report accessibility issues
+    expect(true).toBe(true); // Documentation test
+  });
+});