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

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

@@ -0,0 +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);
+    });
+  });
+});