@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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

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