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

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

@@ -0,0 +1,313 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ErrorPage from '@components/ErrorPage/ErrorPage.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/ErrorPage/ErrorPageLogo.vue', () => ({
+  default: {
+    name: 'ErrorPageLogo',
+    template: '<div class="error-page-logo"></div>'
+  }
+}));
+
+vi.mock('@components/Icons/Logo.vue', () => ({
+  default: {
+    name: 'Logo',
+    template: '<div class="logo"></div>',
+    props: ['width', 'height']
+  }
+}));
+
+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']
+  }
+}));
+
+describe('ErrorPage', () => {
+  const defaultProps = {
+    statusCode: 404
+  };
+
+  describe('Default Behavior', () => {
+    it('renders with required props', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.error-page__main').exists()).toBe(true);
+    });
+
+    it('renders status code', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 500 }
+      });
+
+      expect(wrapper.text()).toContain('500');
+    });
+
+    it('renders error title', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('h1').exists()).toBe(true);
+    });
+
+    it('renders error description', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.error-page__description').exists()).toBe(true);
+    });
+
+    it('renders back to home button', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const button = wrapper.find('.wl-button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toContain('Zurück zur Startseite');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts statusCode as number', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 403 }
+      });
+
+      expect(wrapper.text()).toContain('403');
+    });
+
+    it('accepts custom redirectTo prop', () => {
+      const wrapper = mount(ErrorPage, {
+        props: {
+          statusCode: 404,
+          redirectTo: '/custom-page'
+        }
+      });
+
+      expect(wrapper.vm.redirectTo).toBe('/custom-page');
+    });
+
+    it('uses default redirect when redirectTo is not provided', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 404 }
+      });
+
+      expect(wrapper.vm.redirectTo).toBeUndefined();
+    });
+  });
+
+  describe('Content', () => {
+    it('displays German error title for dental domain', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('h1').text()).toBe('Huch hier ist eine Lücke...');
+    });
+
+    it('displays German error message', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const description = wrapper.find('.error-page__description');
+      expect(description.text()).toContain('Leider ist etwas schiefgelaufen');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has semantic main element', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('main').exists()).toBe(true);
+    });
+
+    it('has h1 heading for error title', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const h1 = wrapper.find('h1');
+      expect(h1.exists()).toBe(true);
+      expect(h1.text()).toBeTruthy();
+    });
+
+    it('provides meaningful status code display', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 404 }
+      });
+
+      expect(wrapper.text()).toContain('404');
+    });
+
+    it('has accessible button for navigation', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const button = wrapper.find('button');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBeTruthy();
+    });
+
+    it('has proper visual hierarchy with h1', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const headings = wrapper.findAll('h1, h2, h3, h4, h5, h6');
+      expect(headings.length).toBeGreaterThan(0);
+
+      // First heading should be h1
+      expect(headings[0].element.tagName.toLowerCase()).toBe('h1');
+    });
+
+    it('contains descriptive text for screen readers', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      const description = wrapper.find('.error-page__description');
+      expect(description.text()).toContain('Bitte versuchen Sie es gleich noch einmal');
+    });
+  });
+
+  describe('User Interaction', () => {
+    let originalLocation: Location | undefined;
+
+    beforeEach(() => {
+      // Save original location and provide a safe mock for tests
+      originalLocation = window.location;
+
+      Object.defineProperty(window, 'location', {
+        configurable: true,
+        writable: true,
+        value: { href: '' } as unknown as Location
+      });
+    });
+
+    afterEach(() => {
+      // Restore real location
+      if (originalLocation) {
+        Object.defineProperty(window, 'location', {
+          configurable: true,
+          writable: true,
+          value: originalLocation
+        });
+      }
+    });
+
+    it('button click triggers redirect', async () => {
+      const wrapper = mount(ErrorPage, {
+        props: {
+          statusCode: 404,
+          redirectTo: '/home'
+        }
+      });
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+
+      expect(window.location.href).toBe('/home');
+    });
+
+    it('uses default "/" redirect when no redirectTo provided', async () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 404 }
+      });
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+
+      expect(window.location.href).toBe('/');
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has proper grid layout', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.error-page__grid').exists()).toBe(true);
+    });
+
+    it('has status code section with divider', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.error-page__status-code').exists()).toBe(true);
+      expect(wrapper.find('.error-page__divider').exists()).toBe(true);
+    });
+
+    it('renders Logo component', () => {
+      const wrapper = mount(ErrorPage, {
+        props: defaultProps
+      });
+
+      expect(wrapper.find('.logo').exists()).toBe(true);
+    });
+  });
+
+  describe('Error Status Codes', () => {
+    const statusCodes = [400, 401, 403, 404, 500, 502, 503];
+
+    statusCodes.forEach(code => {
+      it(`renders correctly for status code ${code}`, () => {
+        const wrapper = mount(ErrorPage, {
+          props: { statusCode: code }
+        });
+
+        expect(wrapper.text()).toContain(code.toString());
+        expect(wrapper.find('h1').exists()).toBe(true);
+        expect(wrapper.find('.error-page__description').exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles status code 0', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 0 }
+      });
+
+      expect(wrapper.text()).toContain('0');
+    });
+
+    it('handles large status codes', () => {
+      const wrapper = mount(ErrorPage, {
+        props: { statusCode: 99999 }
+      });
+
+      expect(wrapper.text()).toContain('99999');
+    });
+  });
+});

package/tests/unit/components/ErrorPage/ErrorPageLogo.spec.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ErrorPageLogo from '@components/ErrorPage/ErrorPageLogo.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    domain: 'domain-dental',
+    font_color_code: '#172774'
+  }
+}));
+
+describe('ErrorPageLogo', () => {
+  describe('Default Behavior', () => {
+    it('renders SVG element', () => {
+      const wrapper = mount(ErrorPageLogo);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('renders with default size', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('120');
+      expect(svg.attributes('height')).toBe('30');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom width', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: { width: '200' }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('200');
+    });
+
+    it('accepts custom height', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: { height: '100' }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('height')).toBe('100');
+    });
+
+    it('accepts both width and height', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: {
+          width: '250',
+          height: '340'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('250');
+      expect(svg.attributes('height')).toBe('340');
+    });
+  });
+
+  describe('SVG Structure', () => {
+    it('has proper viewBox attribute', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBeDefined();
+    });
+
+    it('has preserveAspectRatio attribute', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('preserveAspectRatio')).toBe('xMidYMid meet');
+    });
+
+    it('contains path elements', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('SVG is decorative and hidden from screen readers when appropriate', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const svg = wrapper.find('svg');
+
+      // For decorative images, aria-hidden should be true or role="presentation"
+      // This logo is decorative when used alongside text
+      const ariaHidden = svg.attributes('aria-hidden');
+      const role = svg.attributes('role');
+      expect(ariaHidden === 'true' || role === 'presentation').toBe(true);
+    });
+
+    it('uses proper fill attributes for theming', () => {
+      const wrapper = mount(ErrorPageLogo);
+      const paths = wrapper.findAll('path');
+
+      // All paths should have fill attribute
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBeDefined();
+      });
+    });
+
+    it('maintains aspect ratio for various sizes', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: {
+          width: '500',
+          height: '680'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('preserveAspectRatio')).toBe('xMidYMid meet');
+    });
+  });
+
+  describe('Domain-specific Rendering', () => {
+    it('renders for dental domain', () => {
+      const wrapper = mount(ErrorPageLogo);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string width', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: { width: '' }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('handles empty string height', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: { height: '' }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('renders correctly with numeric string values', () => {
+      const wrapper = mount(ErrorPageLogo, {
+        props: {
+          width: '100',
+          height: '50'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('100');
+      expect(svg.attributes('height')).toBe('50');
+    });
+  });
+});