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

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

@@ -1,313 +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');
-    });
-  });
-});
+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');
+    });
+  });
+});