@zap-wunschlachen/wl-shared-components 1.0.11 → 1.0.13

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

@@ -1,354 +1,354 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import TagLabel from '../../../../src/components/Laboratory/TagLabel/TagLabel.vue';
-
-describe('TagLabel', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    status: 'Draft',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(TagLabel, {
-      props: defaultProps
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.v-btn').exists()).toBe(true);
-    });
-
-    it('should display the status text', () => {
-      expect(wrapper.text()).toContain('Draft');
-    });
-
-    it('should have readonly attribute', () => {
-      const button = wrapper.find('.v-btn');
-      expect(button.attributes('readonly')).toBe('');
-    });
-  });
-
-  describe('Props', () => {
-    it('should require status prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.status.required).toBe(true);
-    });
-
-    it('should accept custom status', async () => {
-      await wrapper.setProps({ status: 'Done' });
-      expect(wrapper.text()).toContain('Done');
-    });
-
-    it('should update when status prop changes', async () => {
-      await wrapper.setProps({ status: 'Ready' });
-      expect(wrapper.text()).toContain('Ready');
-      expect(wrapper.text()).not.toContain('Draft');
-    });
-  });
-
-  describe('Color Schemes', () => {
-    describe('Blue Scheme', () => {
-      it('should apply blue scheme for Draft status', async () => {
-        await wrapper.setProps({ status: 'Draft' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
-      });
-
-      it('should apply blue scheme for Proof status', async () => {
-        await wrapper.setProps({ status: 'Proof' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
-      });
-    });
-
-    describe('Red Scheme', () => {
-      it('should apply red scheme for Ready status', async () => {
-        await wrapper.setProps({ status: 'Ready' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
-      });
-
-      it('should apply red scheme for Design Ready status', async () => {
-        await wrapper.setProps({ status: 'Design Ready' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
-      });
-
-      it('should apply red scheme for Production Ready status', async () => {
-        await wrapper.setProps({ status: 'Production Ready' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
-      });
-
-      it('should apply red scheme for Ready for Treatment status', async () => {
-        await wrapper.setProps({ status: 'Ready for Treatment' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
-      });
-    });
-
-    describe('Yellow Scheme', () => {
-      it('should apply yellow scheme for Started status', async () => {
-        await wrapper.setProps({ status: 'Started' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Warning-1');
-      });
-
-      it('should apply yellow scheme for Dispatched status', async () => {
-        await wrapper.setProps({ status: 'Dispatched' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
-      });
-
-      it('should apply yellow scheme for Design Started status', async () => {
-        await wrapper.setProps({ status: 'Design Started' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
-      });
-
-      it('should apply yellow scheme for Production Started status', async () => {
-        await wrapper.setProps({ status: 'Production Started' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
-      });
-
-      it('should apply yellow scheme for Shipping Dispatched status', async () => {
-        await wrapper.setProps({ status: 'Shipping Dispatched' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
-      });
-    });
-
-    describe('Green Scheme', () => {
-      it('should apply green scheme for Treatment Done status', async () => {
-        await wrapper.setProps({ status: 'Treatment Done' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Check-0');
-      });
-
-      it('should apply green scheme for Done status', async () => {
-        await wrapper.setProps({ status: 'Done' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
-      });
-
-      it('should apply green scheme for Follow-up Case Created status', async () => {
-        await wrapper.setProps({ status: 'Follow-up Case Created' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
-      });
-
-      it('should apply green scheme for Arrived status', async () => {
-        await wrapper.setProps({ status: 'Arrived' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
-      });
-    });
-
-    describe('Sky Blue Scheme', () => {
-      it('should apply sky blue scheme for Took status', async () => {
-        await wrapper.setProps({ status: 'Took' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
-      });
-
-      it('should apply sky blue scheme for Design Proof status', async () => {
-        await wrapper.setProps({ status: 'Design Proof' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
-      });
-
-      it('should apply sky blue scheme for Treatment Took status', async () => {
-        await wrapper.setProps({ status: 'Treatment Took' });
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
-      });
-    });
-
-    describe('Red White Scheme', () => {
-      it('should apply red white scheme for Warning status', async () => {
-        await wrapper.setProps({ status: 'Warning' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Power-Red-0');
-      });
-    });
-
-    describe('Default Scheme', () => {
-      it('should apply default scheme for unknown status', async () => {
-        await wrapper.setProps({ status: 'Unknown Status' });
-        const button = wrapper.find('.v-btn');
-
-        expect(button.exists()).toBe(true);
-        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check-0');
-        expect(wrapper.vm.currentColors.borderColor).toBe('Check-1');
-      });
-    });
-  });
-
-  describe('Text Color', () => {
-    it('should apply correct text color for blue scheme', async () => {
-      await wrapper.setProps({ status: 'Draft' });
-      const textElement = wrapper.find('p');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.currentColors.textColor).toBe('Dental-Blue-0');
-    });
-
-    it('should apply correct text color for yellow scheme', async () => {
-      await wrapper.setProps({ status: 'Started' });
-      const textElement = wrapper.find('p');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.currentColors.textColor).toBe('Warning-1');
-    });
-
-    it('should apply correct text color for green scheme', async () => {
-      await wrapper.setProps({ status: 'Done' });
-      const textElement = wrapper.find('p');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.currentColors.textColor).toBe('Check-0');
-    });
-
-    it('should apply correct text color for red white scheme', async () => {
-      await wrapper.setProps({ status: 'Warning' });
-      const textElement = wrapper.find('p');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.currentColors.textColor).toBe('Power-Red-0');
-    });
-  });
-
-  describe('Button Properties', () => {
-    it('should have correct button attributes', () => {
-      const button = wrapper.find('.v-btn');
-      expect(button.exists()).toBe(true);
-    });
-
-    it('should have text-none class on text element', () => {
-      const textElement = wrapper.find('p');
-      expect(textElement.classes()).toContain('text-none');
-      expect(textElement.classes()).toContain('p-small');
-    });
-  });
-
-  describe('Text Content', () => {
-    it('should display status text correctly', async () => {
-      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
-
-      for (const status of statuses) {
-        await wrapper.setProps({ status });
-        expect(wrapper.text()).toContain(status);
-      }
-    });
-
-    it('should handle empty status', async () => {
-      await wrapper.setProps({ status: '' });
-      const textElement = wrapper.find('p');
-      expect(textElement.text()).toBe('Unknown');
-    });
-
-    it('should handle unknown status text', async () => {
-      await wrapper.setProps({ status: 'Custom Status' });
-      expect(wrapper.text()).toContain('Custom Status');
-    });
-  });
-
-  describe('Computed Properties', () => {
-    it('should compute colors correctly', async () => {
-      await wrapper.setProps({ status: 'Draft' });
-      // The computed property should return blue scheme colors
-      expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
-      expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
-      expect(wrapper.vm.currentColors.textColor).toBe('Dental-Blue-0');
-    });
-
-    it('should compute statusText correctly', async () => {
-      await wrapper.setProps({ status: 'Test Status' });
-      expect(wrapper.vm.statusText).toBe('Test Status');
-    });
-
-    it('should handle unknown status in computed property', async () => {
-      await wrapper.setProps({ status: 'Unknown' });
-      expect(wrapper.vm.statusText).toBe('Unknown');
-    });
-  });
-
-  describe('Styling Classes', () => {
-    it('should have correct CSS classes', () => {
-      const button = wrapper.find('.v-btn');
-      expect(button.exists()).toBe(true);
-
-      const textElement = wrapper.find('p.p-small.text-none');
-      expect(textElement.exists()).toBe(true);
-    });
-  });
-
-  describe('Status Validation', () => {
-    it('should handle all defined status values', async () => {
-      const allStatuses = [
-        'Draft', 'Proof', // Blue scheme
-        'Ready', 'Design Ready', 'Production Ready', 'Ready for Treatment', // Red scheme
-        'Started', 'Dispatched', 'Design Started', 'Production Started', 'Shipping Dispatched', // Yellow scheme
-        'Treatment Done', 'Done', 'Follow-up Case Created', 'Arrived', // Green scheme
-        'Took', 'Design Proof', 'Treatment Took', // Sky blue scheme
-        'Warning' // Red white scheme
-      ];
-
-      for (const status of allStatuses) {
-        await wrapper.setProps({ status });
-        expect(wrapper.text()).toContain(status);
-        const button = wrapper.find('.v-btn');
-        expect(button.exists()).toBe(true);
-      }
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have appropriate button role', () => {
-      const button = wrapper.find('.v-btn');
-      expect(button.exists()).toBe(true);
-    });
-
-    it('should have readable text content', () => {
-      const textElement = wrapper.find('p');
-      expect(textElement.text().trim()).not.toBe('');
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('should have proper DOM hierarchy', () => {
-      expect(wrapper.find('[data-testid="root"] p').exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import TagLabel from '../../../../src/components/Laboratory/TagLabel/TagLabel.vue';
+
+describe('TagLabel', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    status: 'Draft',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(TagLabel, {
+      props: defaultProps
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.v-btn').exists()).toBe(true);
+    });
+
+    it('should display the status text', () => {
+      expect(wrapper.text()).toContain('Draft');
+    });
+
+    it('should have readonly attribute', () => {
+      const button = wrapper.find('.v-btn');
+      expect(button.attributes('readonly')).toBe('');
+    });
+  });
+
+  describe('Props', () => {
+    it('should require status prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.status.required).toBe(true);
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Done' });
+      expect(wrapper.text()).toContain('Done');
+    });
+
+    it('should update when status prop changes', async () => {
+      await wrapper.setProps({ status: 'Ready' });
+      expect(wrapper.text()).toContain('Ready');
+      expect(wrapper.text()).not.toContain('Draft');
+    });
+  });
+
+  describe('Color Schemes', () => {
+    describe('Blue Scheme', () => {
+      it('should apply blue scheme for Draft status', async () => {
+        await wrapper.setProps({ status: 'Draft' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
+      });
+
+      it('should apply blue scheme for Proof status', async () => {
+        await wrapper.setProps({ status: 'Proof' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
+      });
+    });
+
+    describe('Red Scheme', () => {
+      it('should apply red scheme for Ready status', async () => {
+        await wrapper.setProps({ status: 'Ready' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
+      });
+
+      it('should apply red scheme for Design Ready status', async () => {
+        await wrapper.setProps({ status: 'Design Ready' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
+      });
+
+      it('should apply red scheme for Production Ready status', async () => {
+        await wrapper.setProps({ status: 'Production Ready' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
+      });
+
+      it('should apply red scheme for Ready for Treatment status', async () => {
+        await wrapper.setProps({ status: 'Ready for Treatment' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
+      });
+    });
+
+    describe('Yellow Scheme', () => {
+      it('should apply yellow scheme for Started status', async () => {
+        await wrapper.setProps({ status: 'Started' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Warning-1');
+      });
+
+      it('should apply yellow scheme for Dispatched status', async () => {
+        await wrapper.setProps({ status: 'Dispatched' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
+      });
+
+      it('should apply yellow scheme for Design Started status', async () => {
+        await wrapper.setProps({ status: 'Design Started' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
+      });
+
+      it('should apply yellow scheme for Production Started status', async () => {
+        await wrapper.setProps({ status: 'Production Started' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
+      });
+
+      it('should apply yellow scheme for Shipping Dispatched status', async () => {
+        await wrapper.setProps({ status: 'Shipping Dispatched' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-Yellow');
+      });
+    });
+
+    describe('Green Scheme', () => {
+      it('should apply green scheme for Treatment Done status', async () => {
+        await wrapper.setProps({ status: 'Treatment Done' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Check-0');
+      });
+
+      it('should apply green scheme for Done status', async () => {
+        await wrapper.setProps({ status: 'Done' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
+      });
+
+      it('should apply green scheme for Follow-up Case Created status', async () => {
+        await wrapper.setProps({ status: 'Follow-up Case Created' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
+      });
+
+      it('should apply green scheme for Arrived status', async () => {
+        await wrapper.setProps({ status: 'Arrived' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check--1');
+      });
+    });
+
+    describe('Sky Blue Scheme', () => {
+      it('should apply sky blue scheme for Took status', async () => {
+        await wrapper.setProps({ status: 'Took' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
+      });
+
+      it('should apply sky blue scheme for Design Proof status', async () => {
+        await wrapper.setProps({ status: 'Design Proof' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
+      });
+
+      it('should apply sky blue scheme for Treatment Took status', async () => {
+        await wrapper.setProps({ status: 'Treatment Took' });
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Treatment-SkyBlue');
+      });
+    });
+
+    describe('Red White Scheme', () => {
+      it('should apply red white scheme for Warning status', async () => {
+        await wrapper.setProps({ status: 'Warning' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Power-Red--4');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Power-Red-0');
+      });
+    });
+
+    describe('Default Scheme', () => {
+      it('should apply default scheme for unknown status', async () => {
+        await wrapper.setProps({ status: 'Unknown Status' });
+        const button = wrapper.find('.v-btn');
+
+        expect(button.exists()).toBe(true);
+        expect(wrapper.vm.currentColors.backgroundColor).toBe('Check-0');
+        expect(wrapper.vm.currentColors.borderColor).toBe('Check-1');
+      });
+    });
+  });
+
+  describe('Text Color', () => {
+    it('should apply correct text color for blue scheme', async () => {
+      await wrapper.setProps({ status: 'Draft' });
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.currentColors.textColor).toBe('Dental-Blue-0');
+    });
+
+    it('should apply correct text color for yellow scheme', async () => {
+      await wrapper.setProps({ status: 'Started' });
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.currentColors.textColor).toBe('Warning-1');
+    });
+
+    it('should apply correct text color for green scheme', async () => {
+      await wrapper.setProps({ status: 'Done' });
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.currentColors.textColor).toBe('Check-0');
+    });
+
+    it('should apply correct text color for red white scheme', async () => {
+      await wrapper.setProps({ status: 'Warning' });
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.currentColors.textColor).toBe('Power-Red-0');
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have correct button attributes', () => {
+      const button = wrapper.find('.v-btn');
+      expect(button.exists()).toBe(true);
+    });
+
+    it('should have text-none class on text element', () => {
+      const textElement = wrapper.find('p');
+      expect(textElement.classes()).toContain('text-none');
+      expect(textElement.classes()).toContain('p-small');
+    });
+  });
+
+  describe('Text Content', () => {
+    it('should display status text correctly', async () => {
+      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        expect(wrapper.text()).toContain(status);
+      }
+    });
+
+    it('should handle empty status', async () => {
+      await wrapper.setProps({ status: '' });
+      const textElement = wrapper.find('p');
+      expect(textElement.text()).toBe('Unknown');
+    });
+
+    it('should handle unknown status text', async () => {
+      await wrapper.setProps({ status: 'Custom Status' });
+      expect(wrapper.text()).toContain('Custom Status');
+    });
+  });
+
+  describe('Computed Properties', () => {
+    it('should compute colors correctly', async () => {
+      await wrapper.setProps({ status: 'Draft' });
+      // The computed property should return blue scheme colors
+      expect(wrapper.vm.currentColors.backgroundColor).toBe('Dental-Blue--5');
+      expect(wrapper.vm.currentColors.borderColor).toBe('Dental-Blue-0');
+      expect(wrapper.vm.currentColors.textColor).toBe('Dental-Blue-0');
+    });
+
+    it('should compute statusText correctly', async () => {
+      await wrapper.setProps({ status: 'Test Status' });
+      expect(wrapper.vm.statusText).toBe('Test Status');
+    });
+
+    it('should handle unknown status in computed property', async () => {
+      await wrapper.setProps({ status: 'Unknown' });
+      expect(wrapper.vm.statusText).toBe('Unknown');
+    });
+  });
+
+  describe('Styling Classes', () => {
+    it('should have correct CSS classes', () => {
+      const button = wrapper.find('.v-btn');
+      expect(button.exists()).toBe(true);
+
+      const textElement = wrapper.find('p.p-small.text-none');
+      expect(textElement.exists()).toBe(true);
+    });
+  });
+
+  describe('Status Validation', () => {
+    it('should handle all defined status values', async () => {
+      const allStatuses = [
+        'Draft', 'Proof', // Blue scheme
+        'Ready', 'Design Ready', 'Production Ready', 'Ready for Treatment', // Red scheme
+        'Started', 'Dispatched', 'Design Started', 'Production Started', 'Shipping Dispatched', // Yellow scheme
+        'Treatment Done', 'Done', 'Follow-up Case Created', 'Arrived', // Green scheme
+        'Took', 'Design Proof', 'Treatment Took', // Sky blue scheme
+        'Warning' // Red white scheme
+      ];
+
+      for (const status of allStatuses) {
+        await wrapper.setProps({ status });
+        expect(wrapper.text()).toContain(status);
+        const button = wrapper.find('.v-btn');
+        expect(button.exists()).toBe(true);
+      }
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have appropriate button role', () => {
+      const button = wrapper.find('.v-btn');
+      expect(button.exists()).toBe(true);
+    });
+
+    it('should have readable text content', () => {
+      const textElement = wrapper.find('p');
+      expect(textElement.text().trim()).not.toBe('');
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should have proper DOM hierarchy', () => {
+      expect(wrapper.find('[data-testid="root"] p').exists()).toBe(true);
+    });
+  });
 });