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

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

@@ -1,177 +1,177 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Background from '@components/Background/Background.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    domain: 'domain-dental'
-  }
-}));
-
-// Mock child background components
-vi.mock('@components/Background/WunschlachenBackground.vue', () => ({
-  default: {
-    name: 'WunschlachenBackground',
-    template: '<svg class="wunschlachen-background"></svg>'
-  }
-}));
-
-vi.mock('@components/Background/WhiteCocoonBackground.vue', () => ({
-  default: {
-    name: 'WhiteCocoonBackground',
-    template: '<svg class="white-cocoon-background"></svg>'
-  }
-}));
-
-describe('Background', () => {
-  describe('Default Behavior', () => {
-    it('renders background container', () => {
-      const wrapper = mount(Background);
-      expect(wrapper.find('.background').exists()).toBe(true);
-    });
-
-    it('has background__content wrapper', () => {
-      const wrapper = mount(Background);
-      expect(wrapper.find('.background__content').exists()).toBe(true);
-    });
-
-    it('renders background SVG', () => {
-      const wrapper = mount(Background);
-      expect(wrapper.find('.background__svg').exists()).toBe(true);
-    });
-  });
-
-  describe('Domain-specific Rendering', () => {
-    it('renders WunschlachenBackground for dental domain', () => {
-      const wrapper = mount(Background);
-
-      expect(wrapper.find('.wunschlachen-background').exists()).toBe(true);
-      expect(wrapper.find('.white-cocoon-background').exists()).toBe(false);
-    });
-
-    it('does not have cocoon modifier class for dental domain', () => {
-      const wrapper = mount(Background);
-      expect(wrapper.find('.background--cocoon').exists()).toBe(false);
-    });
-  });
-
-  describe('Slots', () => {
-    it('renders default slot content', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: '<div class="test-content">Test Content</div>'
-        }
-      });
-
-      expect(wrapper.find('.test-content').exists()).toBe(true);
-      expect(wrapper.find('.test-content').text()).toBe('Test Content');
-    });
-
-    it('renders multiple slot elements', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: `
-            <header class="slot-header">Header</header>
-            <main class="slot-main">Main Content</main>
-            <footer class="slot-footer">Footer</footer>
-          `
-        }
-      });
-
-      expect(wrapper.find('.slot-header').exists()).toBe(true);
-      expect(wrapper.find('.slot-main').exists()).toBe(true);
-      expect(wrapper.find('.slot-footer').exists()).toBe(true);
-    });
-
-    it('preserves slot content structure', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: '<div class="nested"><span class="inner">Nested Content</span></div>'
-        }
-      });
-
-      expect(wrapper.find('.nested .inner').exists()).toBe(true);
-      expect(wrapper.find('.inner').text()).toBe('Nested Content');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('slot content is accessible within background', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: '<main role="main"><h1>Accessible Content</h1></main>'
-        }
-      });
-
-      expect(wrapper.find('[role="main"]').exists()).toBe(true);
-      expect(wrapper.find('h1').text()).toBe('Accessible Content');
-    });
-
-    it('background SVG does not interfere with content accessibility', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: '<button class="test-button">Click Me</button>'
-        }
-      });
-
-      // Content should be in background__content, separate from background SVG
-      const content = wrapper.find('.background__content');
-      expect(content.find('.test-button').exists()).toBe(true);
-    });
-
-    it('maintains proper z-index layering for content', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: '<div class="foreground-content">Foreground</div>'
-        }
-      });
-
-      // Content should be separate from background SVG
-      const svg = wrapper.find('.background__svg');
-      const content = wrapper.find('.background__content');
-
-      expect(svg.exists()).toBe(true);
-      expect(content.exists()).toBe(true);
-      expect(content.find('.foreground-content').exists()).toBe(true);
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('has proper class structure', () => {
-      const wrapper = mount(Background);
-
-      expect(wrapper.find('.background').exists()).toBe(true);
-      expect(wrapper.find('.background__svg').exists()).toBe(true);
-      expect(wrapper.find('.background__content').exists()).toBe(true);
-    });
-
-    it('SVG is positioned as background element', () => {
-      const wrapper = mount(Background);
-
-      const backgroundEl = wrapper.find('.background');
-      const svgEl = wrapper.find('.background__svg');
-
-      expect(backgroundEl.element.contains(svgEl.element)).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('renders correctly with no slot content', () => {
-      const wrapper = mount(Background);
-
-      expect(wrapper.find('.background').exists()).toBe(true);
-      expect(wrapper.find('.background__content').exists()).toBe(true);
-    });
-
-    it('handles empty string slot content', () => {
-      const wrapper = mount(Background, {
-        slots: {
-          default: ''
-        }
-      });
-
-      expect(wrapper.find('.background').exists()).toBe(true);
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Background from '@components/Background/Background.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    domain: 'domain-dental'
+  }
+}));
+
+// Mock child background components
+vi.mock('@components/Background/WunschlachenBackground.vue', () => ({
+  default: {
+    name: 'WunschlachenBackground',
+    template: '<svg class="wunschlachen-background"></svg>'
+  }
+}));
+
+vi.mock('@components/Background/WhiteCocoonBackground.vue', () => ({
+  default: {
+    name: 'WhiteCocoonBackground',
+    template: '<svg class="white-cocoon-background"></svg>'
+  }
+}));
+
+describe('Background', () => {
+  describe('Default Behavior', () => {
+    it('renders background container', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background').exists()).toBe(true);
+    });
+
+    it('has background__content wrapper', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('renders background SVG', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background__svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Domain-specific Rendering', () => {
+    it('renders WunschlachenBackground for dental domain', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.wunschlachen-background').exists()).toBe(true);
+      expect(wrapper.find('.white-cocoon-background').exists()).toBe(false);
+    });
+
+    it('does not have cocoon modifier class for dental domain', () => {
+      const wrapper = mount(Background);
+      expect(wrapper.find('.background--cocoon').exists()).toBe(false);
+    });
+  });
+
+  describe('Slots', () => {
+    it('renders default slot content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="test-content">Test Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.test-content').exists()).toBe(true);
+      expect(wrapper.find('.test-content').text()).toBe('Test Content');
+    });
+
+    it('renders multiple slot elements', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: `
+            <header class="slot-header">Header</header>
+            <main class="slot-main">Main Content</main>
+            <footer class="slot-footer">Footer</footer>
+          `
+        }
+      });
+
+      expect(wrapper.find('.slot-header').exists()).toBe(true);
+      expect(wrapper.find('.slot-main').exists()).toBe(true);
+      expect(wrapper.find('.slot-footer').exists()).toBe(true);
+    });
+
+    it('preserves slot content structure', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="nested"><span class="inner">Nested Content</span></div>'
+        }
+      });
+
+      expect(wrapper.find('.nested .inner').exists()).toBe(true);
+      expect(wrapper.find('.inner').text()).toBe('Nested Content');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('slot content is accessible within background', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<main role="main"><h1>Accessible Content</h1></main>'
+        }
+      });
+
+      expect(wrapper.find('[role="main"]').exists()).toBe(true);
+      expect(wrapper.find('h1').text()).toBe('Accessible Content');
+    });
+
+    it('background SVG does not interfere with content accessibility', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<button class="test-button">Click Me</button>'
+        }
+      });
+
+      // Content should be in background__content, separate from background SVG
+      const content = wrapper.find('.background__content');
+      expect(content.find('.test-button').exists()).toBe(true);
+    });
+
+    it('maintains proper z-index layering for content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: '<div class="foreground-content">Foreground</div>'
+        }
+      });
+
+      // Content should be separate from background SVG
+      const svg = wrapper.find('.background__svg');
+      const content = wrapper.find('.background__content');
+
+      expect(svg.exists()).toBe(true);
+      expect(content.exists()).toBe(true);
+      expect(content.find('.foreground-content').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has proper class structure', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+      expect(wrapper.find('.background__svg').exists()).toBe(true);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('SVG is positioned as background element', () => {
+      const wrapper = mount(Background);
+
+      const backgroundEl = wrapper.find('.background');
+      const svgEl = wrapper.find('.background__svg');
+
+      expect(backgroundEl.element.contains(svgEl.element)).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders correctly with no slot content', () => {
+      const wrapper = mount(Background);
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+      expect(wrapper.find('.background__content').exists()).toBe(true);
+    });
+
+    it('handles empty string slot content', () => {
+      const wrapper = mount(Background, {
+        slots: {
+          default: ''
+        }
+      });
+
+      expect(wrapper.find('.background').exists()).toBe(true);
+    });
+  });
+});