@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/components/Core/NotificationBubble.spec.ts

@@ -0,0 +1,607 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
+
+describe('NotificationBubble', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(NotificationBubble);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.notification-bubble').exists()).toBe(true);
+      expect(wrapper.vm.color).toBe('');
+      expect(wrapper.vm.size).toBe('30');
+      expect(wrapper.vm.textColor).toBe('var(--Dental-Blue-0)');
+      expect(wrapper.vm.iconSize).toBe('20');
+      expect(wrapper.vm.readonly).toBe(false);
+      expect(wrapper.vm.variant).toBe('flat');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies notification-bubble CSS class', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.find('.notification-bubble').exists()).toBe(true);
+    });
+  });
+
+  // Test text display
+  describe('Text Display', () => {
+    it('displays text when text prop is provided', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Test Notification'
+        }
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(true);
+      expect(wrapper.find('h4').text()).toBe('Test Notification');
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(false);
+    });
+
+    it('applies text color to text element', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Colored Text',
+          textColor: '#FF0000'
+        }
+      });
+      
+      const h4Element = wrapper.find('h4');
+      expect(h4Element.exists()).toBe(true);
+      // The style would be applied by Vue's style binding
+      expect(h4Element.text()).toBe('Colored Text');
+    });
+
+    it('handles empty text', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: ''
+        }
+      });
+      
+      // Empty string is falsy for v-if="text", so h4 should not exist
+      expect(wrapper.find('h4').exists()).toBe(false);
+      // Instead, it should render the icon
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('handles long text', () => {
+      const longText = 'This is a very long notification text that might wrap or overflow depending on the container size and styling';
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: longText
+        }
+      });
+      
+      expect(wrapper.find('h4').text()).toBe(longText);
+    });
+
+    it('handles special characters in text', () => {
+      const specialText = 'Notification: !@#$%^&*()_+ ñáéíóú ≈≠≤≥';
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: specialText
+        }
+      });
+      
+      expect(wrapper.find('h4').text()).toBe(specialText);
+    });
+  });
+
+  // Test icon display
+  describe('Icon Display', () => {
+    it('displays icon when text prop is not provided', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          icon: 'mdi-bell'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.vm.icon).toBe('mdi-bell');
+    });
+
+    it('displays icon when text is undefined', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: undefined,
+          icon: 'mdi-notification'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.find('h4').exists()).toBe(false);
+    });
+
+    it('prioritizes text over icon when both are provided', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Text Priority',
+          icon: 'mdi-bell'
+        }
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(true);
+      expect(wrapper.find('h4').text()).toBe('Text Priority');
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(false);
+    });
+
+    it('applies icon size', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          icon: 'mdi-bell',
+          iconSize: '24'
+        }
+      });
+      
+      expect(wrapper.vm.iconSize).toBe('24');
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('applies icon color', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          icon: 'mdi-bell',
+          textColor: '#00FF00'
+        }
+      });
+      
+      expect(wrapper.vm.textColor).toBe('#00FF00');
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('handles different icon names', () => {
+      const icons = [
+        'mdi-bell',
+        'heroicons:bell',
+        'fa-solid:bell',
+        'custom-icon'
+      ];
+      
+      icons.forEach(iconName => {
+        const wrapper = mount(NotificationBubble, {
+          props: {
+            icon: iconName
+          }
+        });
+        
+        expect(wrapper.vm.icon).toBe(iconName);
+        expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      });
+    });
+  });
+
+  // Test color properties
+  describe('Color Properties', () => {
+    it('uses default text color', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.textColor).toBe('var(--Dental-Blue-0)');
+    });
+
+    it('accepts custom text color', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          textColor: '#FF5722'
+        }
+      });
+      
+      expect(wrapper.vm.textColor).toBe('#FF5722');
+    });
+
+    it('uses default empty background color', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.color).toBe('');
+    });
+
+    it('accepts custom background color', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          color: '#E3F2FD'
+        }
+      });
+      
+      expect(wrapper.vm.color).toBe('#E3F2FD');
+    });
+
+    it('handles CSS color formats', () => {
+      const colorFormats = [
+        '#FF0000',
+        'rgb(255, 0, 0)',
+        'rgba(255, 0, 0, 0.5)',
+        'hsl(0, 100%, 50%)',
+        'red',
+        'var(--custom-color)'
+      ];
+      
+      colorFormats.forEach(color => {
+        const wrapper = mount(NotificationBubble, {
+          props: {
+            color,
+            textColor: color
+          }
+        });
+        
+        expect(wrapper.vm.color).toBe(color);
+        expect(wrapper.vm.textColor).toBe(color);
+      });
+    });
+  });
+
+  // Test size properties
+  describe('Size Properties', () => {
+    it('uses default size', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.size).toBe('30');
+    });
+
+    it('accepts string size', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          size: '40'
+        }
+      });
+      
+      expect(wrapper.vm.size).toBe('40');
+    });
+
+    it('accepts number size', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          size: 50
+        }
+      });
+      
+      expect(wrapper.vm.size).toBe(50);
+    });
+
+    it('uses default icon size', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.iconSize).toBe('20');
+    });
+
+    it('accepts custom icon size', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          iconSize: '32'
+        }
+      });
+      
+      expect(wrapper.vm.iconSize).toBe('32');
+    });
+
+    it('handles different size values', () => {
+      const sizes = ['16', '24', '32', '48', '64'];
+      
+      sizes.forEach(size => {
+        const wrapper = mount(NotificationBubble, {
+          props: {
+            size,
+            iconSize: size
+          }
+        });
+        
+        expect(wrapper.vm.size).toBe(size);
+        expect(wrapper.vm.iconSize).toBe(size);
+      });
+    });
+  });
+
+  // Test state properties
+  describe('State Properties', () => {
+    it('uses default readonly state', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.readonly).toBe(false);
+    });
+
+    it('accepts readonly true', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          readonly: true
+        }
+      });
+      
+      expect(wrapper.vm.readonly).toBe(true);
+    });
+
+    it('uses default variant', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.vm.variant).toBe('flat');
+    });
+
+    it('accepts custom variant', () => {
+      const variants = ['flat', 'outlined', 'contained', 'tonal', 'text'];
+      
+      variants.forEach(variant => {
+        const wrapper = mount(NotificationBubble, {
+          props: { variant }
+        });
+        
+        expect(wrapper.vm.variant).toBe(variant);
+      });
+    });
+  });
+
+  // Test Vuetify integration
+  describe('Vuetify Integration', () => {
+    it('applies Vuetify button props correctly', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          color: '#2196F3',
+          size: 40,
+          variant: 'outlined',
+          readonly: true
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.color).toBe('#2196F3');
+      expect(wrapper.vm.size).toBe(40);
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.readonly).toBe(true);
+    });
+
+    it('uses fixed Vuetify props', () => {
+      const wrapper = mount(NotificationBubble);
+      
+      // These props are hardcoded in the template
+      // elevation="0", flat=true, rounded="xl"
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(NotificationBubble);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('provides semantic heading for text content', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Important Notification'
+        }
+      });
+      
+      const heading = wrapper.find('h4');
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toBe('Important Notification');
+    });
+
+    it('uses icon for non-text notifications', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          icon: 'mdi-alert'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('maintains button semantics from v-btn', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Clickable Notification'
+        }
+      });
+      
+      // v-btn provides button semantics
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles undefined text prop', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: undefined,
+          icon: 'mdi-bell'
+        }
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('handles null text prop', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: null,
+          icon: 'mdi-bell'
+        }
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('handles empty string text', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: '',
+          icon: 'mdi-bell'
+        }
+      });
+      
+      // Empty string is falsy for v-if="text", so h4 should not exist
+      expect(wrapper.find('h4').exists()).toBe(false);
+      // Icon should be rendered instead
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('handles missing icon prop when no text', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          // No text, no icon
+        }
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.vm.icon).toBeUndefined();
+    });
+
+    it('handles zero size values', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          size: 0,
+          iconSize: '0'
+        }
+      });
+      
+      expect(wrapper.vm.size).toBe(0);
+      expect(wrapper.vm.iconSize).toBe('0');
+    });
+
+    it('handles very large size values', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          size: 1000,
+          iconSize: '500'
+        }
+      });
+      
+      expect(wrapper.vm.size).toBe(1000);
+      expect(wrapper.vm.iconSize).toBe('500');
+    });
+
+    it('handles empty string colors', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          color: '',
+          textColor: ''
+        }
+      });
+      
+      expect(wrapper.vm.color).toBe('');
+      expect(wrapper.vm.textColor).toBe('');
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props configured for text display', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Complete Configuration',
+          color: '#E8F5E8',
+          textColor: '#2E7D32',
+          size: 48,
+          variant: 'outlined',
+          readonly: true
+        }
+      });
+      
+      expect(wrapper.vm.text).toBe('Complete Configuration');
+      expect(wrapper.vm.color).toBe('#E8F5E8');
+      expect(wrapper.vm.textColor).toBe('#2E7D32');
+      expect(wrapper.vm.size).toBe(48);
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.readonly).toBe(true);
+      expect(wrapper.find('h4').exists()).toBe(true);
+      expect(wrapper.find('h4').text()).toBe('Complete Configuration');
+    });
+
+    it('works with all props configured for icon display', () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          icon: 'mdi-notification-important',
+          iconSize: '28',
+          color: '#FFEBEE',
+          textColor: '#C62828',
+          size: 36,
+          variant: 'contained',
+          readonly: false
+        }
+      });
+      
+      expect(wrapper.vm.icon).toBe('mdi-notification-important');
+      expect(wrapper.vm.iconSize).toBe('28');
+      expect(wrapper.vm.color).toBe('#FFEBEE');
+      expect(wrapper.vm.textColor).toBe('#C62828');
+      expect(wrapper.vm.size).toBe(36);
+      expect(wrapper.vm.variant).toBe('contained');
+      expect(wrapper.vm.readonly).toBe(false);
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.find('h4').exists()).toBe(false);
+    });
+
+    it('handles prop changes dynamically', async () => {
+      const wrapper = mount(NotificationBubble, {
+        props: {
+          text: 'Initial Text',
+          color: '#000000'
+        }
+      });
+      
+      // Initial state
+      expect(wrapper.find('h4').exists()).toBe(true);
+      expect(wrapper.find('h4').text()).toBe('Initial Text');
+      
+      // Change to icon
+      await wrapper.setProps({ 
+        text: undefined, 
+        icon: 'mdi-bell',
+        color: '#FF0000' 
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.vm.color).toBe('#FF0000');
+      
+      // Change back to text
+      await wrapper.setProps({ 
+        text: 'Updated Text',
+        color: '#00FF00'
+      });
+      
+      expect(wrapper.find('h4').exists()).toBe(true);
+      expect(wrapper.find('h4').text()).toBe('Updated Text');
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(false);
+      expect(wrapper.vm.color).toBe('#00FF00');
+    });
+
+    it('maintains consistent styling across different content types', () => {
+      const commonProps = {
+        color: '#F3E5F5',
+        textColor: '#7B1FA2',
+        size: 32,
+        variant: 'tonal'
+      };
+      
+      // Text version
+      const textWrapper = mount(NotificationBubble, {
+        props: {
+          ...commonProps,
+          text: '5'
+        }
+      });
+      
+      // Icon version
+      const iconWrapper = mount(NotificationBubble, {
+        props: {
+          ...commonProps,
+          icon: 'mdi-numeric-5',
+          iconSize: '24'
+        }
+      });
+      
+      // Both should have consistent styling
+      expect(textWrapper.vm.color).toBe(iconWrapper.vm.color);
+      expect(textWrapper.vm.textColor).toBe(iconWrapper.vm.textColor);
+      expect(textWrapper.vm.size).toBe(iconWrapper.vm.size);
+      expect(textWrapper.vm.variant).toBe(iconWrapper.vm.variant);
+    });
+  });
+});