@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/tests/unit/components/Laboratory/StatusNotification.spec.ts

@@ -1,297 +1,297 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import StatusNotification from '../../../../src/components/Laboratory/StatusNotification/StatusNotification.vue';
-
-describe('StatusNotification', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    header: 'Test Header',
-    subheader: 'Test Subheader',
-    status: 'Draft',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(StatusNotification, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'TagLabel': {
-            template: '<div data-testid="tag-label">{{ status }}</div>',
-            props: ['status']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.d-flex.flex-column.ga-4.align-center').exists()).toBe(true);
-    });
-
-    it('should display the header', () => {
-      expect(wrapper.text()).toContain('Test Header');
-    });
-
-    it('should display the subheader', () => {
-      expect(wrapper.text()).toContain('Test Subheader');
-    });
-
-    it('should render TagLabel with status', () => {
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.text()).toBe('Draft');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default header when not provided', async () => {
-      await wrapper.setProps({ header: undefined });
-      expect(wrapper.text()).toContain('Default Header');
-    });
-
-    it('should use default subheader when not provided', async () => {
-      await wrapper.setProps({ subheader: undefined });
-      expect(wrapper.text()).toContain('Default Subheader');
-    });
-
-    it('should use default status when not provided', async () => {
-      await wrapper.setProps({ status: undefined });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Draft');
-    });
-
-    it('should accept custom header', async () => {
-      await wrapper.setProps({ header: 'Custom Header Text' });
-      expect(wrapper.text()).toContain('Custom Header Text');
-    });
-
-    it('should accept custom subheader', async () => {
-      await wrapper.setProps({ subheader: 'Custom Subheader Text' });
-      expect(wrapper.text()).toContain('Custom Subheader Text');
-    });
-
-    it('should accept custom status', async () => {
-      await wrapper.setProps({ status: 'Done' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Done');
-    });
-
-    it('should update when header prop changes', async () => {
-      await wrapper.setProps({ header: 'Updated Header' });
-      expect(wrapper.text()).toContain('Updated Header');
-      expect(wrapper.text()).not.toContain('Test Header');
-    });
-
-    it('should update when subheader prop changes', async () => {
-      await wrapper.setProps({ subheader: 'Updated Subheader' });
-      expect(wrapper.text()).toContain('Updated Subheader');
-      expect(wrapper.text()).not.toContain('Test Subheader');
-    });
-
-    it('should update when status prop changes', async () => {
-      await wrapper.setProps({ status: 'Ready' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Ready');
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
-      expect(root.exists()).toBe(true);
-    });
-
-    it('should have correct header section layout', () => {
-      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
-      expect(headerSection.exists()).toBe(true);
-    });
-
-    it('should use h6 tag for header', () => {
-      const headerElement = wrapper.find('h6');
-      expect(headerElement.exists()).toBe(true);
-      expect(headerElement.text()).toBe('Test Header');
-    });
-
-    it('should use p tag with p-small class for subheader', () => {
-      const subheaderElement = wrapper.find('p.p-small');
-      expect(subheaderElement.exists()).toBe(true);
-      expect(subheaderElement.text()).toBe('Test Subheader');
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply correct color styling to header', () => {
-      const headerElement = wrapper.find('h6');
-      expect(headerElement.exists()).toBe(true);
-    });
-
-    it('should apply correct color styling to subheader', () => {
-      const subheaderElement = wrapper.find('p.p-small');
-      expect(subheaderElement.exists()).toBe(true);
-    });
-
-    it('should have correct gap and alignment classes', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
-      expect(root.classes()).toContain('d-flex');
-      expect(root.classes()).toContain('flex-column');
-      expect(root.classes()).toContain('ga-4');
-      expect(root.classes()).toContain('align-center');
-
-      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
-      expect(headerSection.classes()).toContain('ga-1');
-      expect(headerSection.classes()).toContain('align-center');
-    });
-  });
-
-  describe('Typography', () => {
-    it('should use appropriate heading hierarchy', () => {
-      const h6 = wrapper.find('h6');
-      expect(h6.exists()).toBe(true);
-
-      // Should not have higher-level headings as default content
-      expect(wrapper.find('h1').exists()).toBe(false);
-      expect(wrapper.find('h2').exists()).toBe(false);
-      expect(wrapper.find('h3').exists()).toBe(false);
-      expect(wrapper.find('h4').exists()).toBe(false);
-      expect(wrapper.find('h5').exists()).toBe(false);
-    });
-
-    it('should use p-small class for subheader', () => {
-      const subheader = wrapper.find('p');
-      expect(subheader.classes()).toContain('p-small');
-    });
-  });
-
-  describe('Content Variations', () => {
-    it('should handle long header text', async () => {
-      const longHeader = 'This is a very long header text that should be displayed correctly without breaking the layout structure';
-      await wrapper.setProps({ header: longHeader });
-      expect(wrapper.text()).toContain(longHeader);
-    });
-
-    it('should handle long subheader text', async () => {
-      const longSubheader = 'This is a very long subheader text that provides detailed information about the notification status';
-      await wrapper.setProps({ subheader: longSubheader });
-      expect(wrapper.text()).toContain(longSubheader);
-    });
-
-    it('should handle special characters in header', async () => {
-      const specialHeader = 'Status #1 - Update & Notification (2024)';
-      await wrapper.setProps({ header: specialHeader });
-      expect(wrapper.text()).toContain(specialHeader);
-    });
-
-    it('should handle special characters in subheader', async () => {
-      const specialSubheader = 'Details: 85% complete | ETA: 2 days | Priority: High';
-      await wrapper.setProps({ subheader: specialSubheader });
-      expect(wrapper.text()).toContain(specialSubheader);
-    });
-
-    it('should handle empty header', async () => {
-      await wrapper.setProps({ header: '' });
-      const headerElement = wrapper.find('h6');
-      expect(headerElement.text()).toBe('');
-    });
-
-    it('should handle empty subheader', async () => {
-      await wrapper.setProps({ subheader: '' });
-      const subheaderElement = wrapper.find('p.p-small');
-      expect(subheaderElement.text()).toBe('');
-    });
-  });
-
-  describe('Status Variations', () => {
-    it('should handle different status values', async () => {
-      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
-
-      for (const status of statuses) {
-        await wrapper.setProps({ status });
-        const tagLabel = wrapper.find('[data-testid="tag-label"]');
-        expect(tagLabel.text()).toBe(status);
-      }
-    });
-
-    it('should pass status to TagLabel correctly', async () => {
-      await wrapper.setProps({ status: 'In Progress' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('In Progress');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('should integrate properly with TagLabel component', () => {
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.exists()).toBe(true);
-    });
-
-    it('should pass props to TagLabel correctly', () => {
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.text()).toBe('Draft');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper semantic structure', () => {
-      expect(wrapper.find('h6').exists()).toBe(true);
-      expect(wrapper.find('p').exists()).toBe(true);
-    });
-
-    it('should maintain content hierarchy', () => {
-      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
-      const header = headerSection.find('h6');
-      const subheader = headerSection.find('p');
-
-      expect(header.exists()).toBe(true);
-      expect(subheader.exists()).toBe(true);
-    });
-  });
-
-  describe('Responsive Design', () => {
-    it('should use flexbox for responsive layout', () => {
-      expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true);
-      expect(wrapper.find('.align-center').exists()).toBe(true);
-    });
-
-    it('should center align content', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
-      expect(root.classes()).toContain('align-center');
-
-      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
-      expect(headerSection.classes()).toContain('align-center');
-    });
-  });
-
-  describe('Color Consistency', () => {
-    it('should use consistent color variables', () => {
-      const headerElement = wrapper.find('h6');
-      const subheaderElement = wrapper.find('p.p-small');
-
-      expect(headerElement.exists()).toBe(true);
-      expect(subheaderElement.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('should have proper DOM hierarchy', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
-      const headerSection = root.find('.d-flex.flex-column.ga-1.align-center');
-      const tagLabel = root.find('[data-testid="tag-label"]');
-
-      expect(root.exists()).toBe(true);
-      expect(headerSection.exists()).toBe(true);
-      expect(tagLabel.exists()).toBe(true);
-    });
-
-    it('should maintain correct element order', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
-      const children = Array.from(root.element.children);
-
-      expect(children).toHaveLength(2);
-      expect(children[0].classList.contains('d-flex')).toBe(true); // Header section
-      expect(children[1].getAttribute('data-testid')).toBe('tag-label'); // TagLabel
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import StatusNotification from '../../../../src/components/Laboratory/StatusNotification/StatusNotification.vue';
+
+describe('StatusNotification', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    header: 'Test Header',
+    subheader: 'Test Subheader',
+    status: 'Draft',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(StatusNotification, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div data-testid="tag-label">{{ status }}</div>',
+            props: ['status']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.d-flex.flex-column.ga-4.align-center').exists()).toBe(true);
+    });
+
+    it('should display the header', () => {
+      expect(wrapper.text()).toContain('Test Header');
+    });
+
+    it('should display the subheader', () => {
+      expect(wrapper.text()).toContain('Test Subheader');
+    });
+
+    it('should render TagLabel with status', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.text()).toBe('Draft');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default header when not provided', async () => {
+      await wrapper.setProps({ header: undefined });
+      expect(wrapper.text()).toContain('Default Header');
+    });
+
+    it('should use default subheader when not provided', async () => {
+      await wrapper.setProps({ subheader: undefined });
+      expect(wrapper.text()).toContain('Default Subheader');
+    });
+
+    it('should use default status when not provided', async () => {
+      await wrapper.setProps({ status: undefined });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Draft');
+    });
+
+    it('should accept custom header', async () => {
+      await wrapper.setProps({ header: 'Custom Header Text' });
+      expect(wrapper.text()).toContain('Custom Header Text');
+    });
+
+    it('should accept custom subheader', async () => {
+      await wrapper.setProps({ subheader: 'Custom Subheader Text' });
+      expect(wrapper.text()).toContain('Custom Subheader Text');
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Done' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Done');
+    });
+
+    it('should update when header prop changes', async () => {
+      await wrapper.setProps({ header: 'Updated Header' });
+      expect(wrapper.text()).toContain('Updated Header');
+      expect(wrapper.text()).not.toContain('Test Header');
+    });
+
+    it('should update when subheader prop changes', async () => {
+      await wrapper.setProps({ subheader: 'Updated Subheader' });
+      expect(wrapper.text()).toContain('Updated Subheader');
+      expect(wrapper.text()).not.toContain('Test Subheader');
+    });
+
+    it('should update when status prop changes', async () => {
+      await wrapper.setProps({ status: 'Ready' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Ready');
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
+      expect(root.exists()).toBe(true);
+    });
+
+    it('should have correct header section layout', () => {
+      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
+      expect(headerSection.exists()).toBe(true);
+    });
+
+    it('should use h6 tag for header', () => {
+      const headerElement = wrapper.find('h6');
+      expect(headerElement.exists()).toBe(true);
+      expect(headerElement.text()).toBe('Test Header');
+    });
+
+    it('should use p tag with p-small class for subheader', () => {
+      const subheaderElement = wrapper.find('p.p-small');
+      expect(subheaderElement.exists()).toBe(true);
+      expect(subheaderElement.text()).toBe('Test Subheader');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply correct color styling to header', () => {
+      const headerElement = wrapper.find('h6');
+      expect(headerElement.exists()).toBe(true);
+    });
+
+    it('should apply correct color styling to subheader', () => {
+      const subheaderElement = wrapper.find('p.p-small');
+      expect(subheaderElement.exists()).toBe(true);
+    });
+
+    it('should have correct gap and alignment classes', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
+      expect(root.classes()).toContain('d-flex');
+      expect(root.classes()).toContain('flex-column');
+      expect(root.classes()).toContain('ga-4');
+      expect(root.classes()).toContain('align-center');
+
+      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
+      expect(headerSection.classes()).toContain('ga-1');
+      expect(headerSection.classes()).toContain('align-center');
+    });
+  });
+
+  describe('Typography', () => {
+    it('should use appropriate heading hierarchy', () => {
+      const h6 = wrapper.find('h6');
+      expect(h6.exists()).toBe(true);
+
+      // Should not have higher-level headings as default content
+      expect(wrapper.find('h1').exists()).toBe(false);
+      expect(wrapper.find('h2').exists()).toBe(false);
+      expect(wrapper.find('h3').exists()).toBe(false);
+      expect(wrapper.find('h4').exists()).toBe(false);
+      expect(wrapper.find('h5').exists()).toBe(false);
+    });
+
+    it('should use p-small class for subheader', () => {
+      const subheader = wrapper.find('p');
+      expect(subheader.classes()).toContain('p-small');
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('should handle long header text', async () => {
+      const longHeader = 'This is a very long header text that should be displayed correctly without breaking the layout structure';
+      await wrapper.setProps({ header: longHeader });
+      expect(wrapper.text()).toContain(longHeader);
+    });
+
+    it('should handle long subheader text', async () => {
+      const longSubheader = 'This is a very long subheader text that provides detailed information about the notification status';
+      await wrapper.setProps({ subheader: longSubheader });
+      expect(wrapper.text()).toContain(longSubheader);
+    });
+
+    it('should handle special characters in header', async () => {
+      const specialHeader = 'Status #1 - Update & Notification (2024)';
+      await wrapper.setProps({ header: specialHeader });
+      expect(wrapper.text()).toContain(specialHeader);
+    });
+
+    it('should handle special characters in subheader', async () => {
+      const specialSubheader = 'Details: 85% complete | ETA: 2 days | Priority: High';
+      await wrapper.setProps({ subheader: specialSubheader });
+      expect(wrapper.text()).toContain(specialSubheader);
+    });
+
+    it('should handle empty header', async () => {
+      await wrapper.setProps({ header: '' });
+      const headerElement = wrapper.find('h6');
+      expect(headerElement.text()).toBe('');
+    });
+
+    it('should handle empty subheader', async () => {
+      await wrapper.setProps({ subheader: '' });
+      const subheaderElement = wrapper.find('p.p-small');
+      expect(subheaderElement.text()).toBe('');
+    });
+  });
+
+  describe('Status Variations', () => {
+    it('should handle different status values', async () => {
+      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        const tagLabel = wrapper.find('[data-testid="tag-label"]');
+        expect(tagLabel.text()).toBe(status);
+      }
+    });
+
+    it('should pass status to TagLabel correctly', async () => {
+      await wrapper.setProps({ status: 'In Progress' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('In Progress');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should integrate properly with TagLabel component', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.exists()).toBe(true);
+    });
+
+    it('should pass props to TagLabel correctly', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.text()).toBe('Draft');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper semantic structure', () => {
+      expect(wrapper.find('h6').exists()).toBe(true);
+      expect(wrapper.find('p').exists()).toBe(true);
+    });
+
+    it('should maintain content hierarchy', () => {
+      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
+      const header = headerSection.find('h6');
+      const subheader = headerSection.find('p');
+
+      expect(header.exists()).toBe(true);
+      expect(subheader.exists()).toBe(true);
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('should use flexbox for responsive layout', () => {
+      expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true);
+      expect(wrapper.find('.align-center').exists()).toBe(true);
+    });
+
+    it('should center align content', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
+      expect(root.classes()).toContain('align-center');
+
+      const headerSection = wrapper.find('.d-flex.flex-column.ga-1.align-center');
+      expect(headerSection.classes()).toContain('align-center');
+    });
+  });
+
+  describe('Color Consistency', () => {
+    it('should use consistent color variables', () => {
+      const headerElement = wrapper.find('h6');
+      const subheaderElement = wrapper.find('p.p-small');
+
+      expect(headerElement.exists()).toBe(true);
+      expect(subheaderElement.exists()).toBe(true);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should have proper DOM hierarchy', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
+      const headerSection = root.find('.d-flex.flex-column.ga-1.align-center');
+      const tagLabel = root.find('[data-testid="tag-label"]');
+
+      expect(root.exists()).toBe(true);
+      expect(headerSection.exists()).toBe(true);
+      expect(tagLabel.exists()).toBe(true);
+    });
+
+    it('should maintain correct element order', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-4.align-center');
+      const children = Array.from(root.element.children);
+
+      expect(children).toHaveLength(2);
+      expect(children[0].classList.contains('d-flex')).toBe(true); // Header section
+      expect(children[1].getAttribute('data-testid')).toBe('tag-label'); // TagLabel
+    });
+  });
 });