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

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

@@ -1,197 +1,197 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Loader from '@components/Loader/Loader.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-describe('Loader', () => {
-  describe('Default Behavior', () => {
-    it('renders with default props', () => {
-      const wrapper = mount(Loader);
-
-      expect(wrapper.find('.loader-container').exists()).toBe(true);
-      expect(wrapper.find('.loader-svg').exists()).toBe(true);
-    });
-
-    it('renders spinner SVG', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('applies default size of 96px', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.vm.size).toBe(96);
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts custom size prop', () => {
-      const wrapper = mount(Loader, {
-        props: {
-          size: 48
-        }
-      });
-
-      expect(wrapper.vm.size).toBe(48);
-    });
-
-    it('applies size to SVG element', () => {
-      const wrapper = mount(Loader, {
-        props: {
-          size: 64
-        }
-      });
-
-      const svg = wrapper.find('.loader-svg');
-      expect(svg.attributes('style')).toContain('width: 64px');
-      expect(svg.attributes('style')).toContain('height: 64px');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has role="alert" for screen readers', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
-    });
-
-    it('has aria-live="assertive" for immediate announcement', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
-    });
-
-    it('has aria-busy="true" to indicate loading state', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
-    });
-
-    it('has role="status" for the spinner', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('[role="status"]').exists()).toBe(true);
-    });
-
-    it('has aria-hidden="true" on decorative SVG', () => {
-      const wrapper = mount(Loader);
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('aria-hidden')).toBe('true');
-    });
-
-    it('provides proper semantic structure for assistive technologies', () => {
-      const wrapper = mount(Loader);
-
-      // Container announces loading state
-      const container = wrapper.find('.loader-container');
-      expect(container.attributes('role')).toBe('alert');
-      expect(container.attributes('aria-live')).toBe('assertive');
-      expect(container.attributes('aria-busy')).toBe('true');
-
-      // Inner status provides spinner context
-      const status = wrapper.find('[role="status"]');
-      expect(status.exists()).toBe(true);
-    });
-
-    it('follows WCAG 2.1 guidelines for loading indicators', () => {
-      const wrapper = mount(Loader);
-
-      // Should have proper ARIA attributes
-      expect(wrapper.find('[aria-busy]').exists()).toBe(true);
-      expect(wrapper.find('[aria-live]').exists()).toBe(true);
-
-      // SVG should be hidden from screen readers
-      expect(wrapper.find('svg[aria-hidden="true"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('has loader-container wrapper', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('.loader-container').exists()).toBe(true);
-    });
-
-    it('has loader-content for centering', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('.loader-content').exists()).toBe(true);
-    });
-
-    it('contains animated spinner arc', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
-    });
-  });
-
-  describe('SVG Content', () => {
-    it('renders SVG with proper viewBox', () => {
-      const wrapper = mount(Loader);
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('viewBox')).toBe('0 0 100 101');
-    });
-
-    it('renders path elements for spinner', () => {
-      const wrapper = mount(Loader);
-      const paths = wrapper.findAll('path');
-      expect(paths.length).toBeGreaterThan(0);
-    });
-
-    it('renders W logo in the center', () => {
-      const wrapper = mount(Loader);
-      // The W logo is inside a g element
-      const gElements = wrapper.findAll('g');
-      expect(gElements.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Size Variations', () => {
-    it('handles small size (24px)', () => {
-      const wrapper = mount(Loader, {
-        props: { size: 24 }
-      });
-
-      const svg = wrapper.find('.loader-svg');
-      expect(svg.attributes('style')).toContain('width: 24px');
-    });
-
-    it('handles large size (200px)', () => {
-      const wrapper = mount(Loader, {
-        props: { size: 200 }
-      });
-
-      const svg = wrapper.find('.loader-svg');
-      expect(svg.attributes('style')).toContain('width: 200px');
-    });
-
-    it('handles zero size gracefully', () => {
-      const wrapper = mount(Loader, {
-        props: { size: 0 }
-      });
-
-      expect(wrapper.vm.size).toBe(0);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('renders without props', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('.loader-container').exists()).toBe(true);
-    });
-
-    it('maintains structure with undefined size', () => {
-      const wrapper = mount(Loader, {
-        props: { size: undefined }
-      });
-
-      // Should fall back to default size
-      expect(wrapper.vm.size).toBe(96);
-    });
-  });
-
-  describe('Animation', () => {
-    it('has animated spinner arc class', () => {
-      const wrapper = mount(Loader);
-      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Loader from '@components/Loader/Loader.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('Loader', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+      expect(wrapper.find('.loader-svg').exists()).toBe(true);
+    });
+
+    it('renders spinner SVG', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('applies default size of 96px', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom size prop', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 48
+        }
+      });
+
+      expect(wrapper.vm.size).toBe(48);
+    });
+
+    it('applies size to SVG element', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 64
+        }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 64px');
+      expect(svg.attributes('style')).toContain('height: 64px');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has role="alert" for screen readers', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+    });
+
+    it('has aria-live="assertive" for immediate announcement', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
+    });
+
+    it('has aria-busy="true" to indicate loading state', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
+    });
+
+    it('has role="status" for the spinner', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    });
+
+    it('has aria-hidden="true" on decorative SVG', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-hidden')).toBe('true');
+    });
+
+    it('provides proper semantic structure for assistive technologies', () => {
+      const wrapper = mount(Loader);
+
+      // Container announces loading state
+      const container = wrapper.find('.loader-container');
+      expect(container.attributes('role')).toBe('alert');
+      expect(container.attributes('aria-live')).toBe('assertive');
+      expect(container.attributes('aria-busy')).toBe('true');
+
+      // Inner status provides spinner context
+      const status = wrapper.find('[role="status"]');
+      expect(status.exists()).toBe(true);
+    });
+
+    it('follows WCAG 2.1 guidelines for loading indicators', () => {
+      const wrapper = mount(Loader);
+
+      // Should have proper ARIA attributes
+      expect(wrapper.find('[aria-busy]').exists()).toBe(true);
+      expect(wrapper.find('[aria-live]').exists()).toBe(true);
+
+      // SVG should be hidden from screen readers
+      expect(wrapper.find('svg[aria-hidden="true"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has loader-container wrapper', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('has loader-content for centering', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-content').exists()).toBe(true);
+    });
+
+    it('contains animated spinner arc', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+
+  describe('SVG Content', () => {
+    it('renders SVG with proper viewBox', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 100 101');
+    });
+
+    it('renders path elements for spinner', () => {
+      const wrapper = mount(Loader);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('renders W logo in the center', () => {
+      const wrapper = mount(Loader);
+      // The W logo is inside a g element
+      const gElements = wrapper.findAll('g');
+      expect(gElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Size Variations', () => {
+    it('handles small size (24px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 24 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 24px');
+    });
+
+    it('handles large size (200px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 200 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 200px');
+    });
+
+    it('handles zero size gracefully', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 0 }
+      });
+
+      expect(wrapper.vm.size).toBe(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders without props', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('maintains structure with undefined size', () => {
+      const wrapper = mount(Loader, {
+        props: { size: undefined }
+      });
+
+      // Should fall back to default size
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Animation', () => {
+    it('has animated spinner arc class', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+});