@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,352 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import TicketCard from '../../../../src/components/Laboratory/TicketCard/TicketCard.vue';
+
+describe('TicketCard', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    status: 'Open',
+    number: '123',
+    tagNumber: 'T456',
+    name: 'John Doe',
+    description: 'Test ticket description',
+    isSelected: false,
+    toggle: vi.fn(),
+    taskNumber: '789',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(TicketCard, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div data-testid="tag-label">{{ status }}</div>',
+            props: ['status']
+          },
+          'NotificationBubble': {
+            template: '<div data-testid="notification-bubble">{{ text }}</div>',
+            props: ['textColor', 'color', 'text', 'size', 'readonly']
+          },
+          'Button': {
+            template: '<button data-testid="button">{{ label }}</button>',
+            props: ['variant', 'prependIcon', 'label', 'readonly']
+          },
+          'v-hover': {
+            template: '<div data-testid="v-hover"><slot v-bind="{ isHovering: false, props: {} }" /></div>'
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.ticket-card').exists()).toBe(true);
+    });
+
+    it('should display the name', () => {
+      expect(wrapper.text()).toContain('John Doe');
+    });
+
+    it('should display the description', () => {
+      expect(wrapper.text()).toContain('Test ticket description');
+    });
+
+    it('should display the tag number', () => {
+      expect(wrapper.text()).toContain('#T456');
+    });
+
+    it('should render TagLabel with status', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.text()).toBe('Open');
+    });
+
+    it('should render NotificationBubble when number is provided', () => {
+      const notificationBubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(notificationBubble.exists()).toBe(true);
+      expect(notificationBubble.text()).toBe('123');
+    });
+
+    it('should render Button when taskNumber is provided', () => {
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('789');
+    });
+  });
+
+  describe('Required Props', () => {
+    it('should require status prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.status.required).toBe(true);
+    });
+
+    it('should require tagNumber prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.tagNumber.required).toBe(true);
+    });
+
+    it('should require name prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.name.required).toBe(true);
+    });
+
+    it('should require description prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.description.required).toBe(true);
+    });
+  });
+
+  describe('Optional Props', () => {
+    it('should handle missing number prop', async () => {
+      await wrapper.setProps({ number: undefined });
+      const notificationBubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(notificationBubble.exists()).toBe(false);
+    });
+
+    it('should handle missing taskNumber prop', async () => {
+      await wrapper.setProps({ taskNumber: undefined });
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(false);
+    });
+
+    it('should use default isSelected value', async () => {
+      await wrapper.setProps({ isSelected: undefined });
+      expect(wrapper.vm.$props.isSelected).toBe(false);
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Closed' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Closed');
+    });
+
+    it('should accept string or number for number prop', async () => {
+      await wrapper.setProps({ number: 456 });
+      const notificationBubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(notificationBubble.text()).toBe('456');
+    });
+
+    it('should accept string or number for tagNumber prop', async () => {
+      await wrapper.setProps({ tagNumber: 789 });
+      expect(wrapper.text()).toContain('#789');
+    });
+  });
+
+  describe('Card Hover and Selection States', () => {
+    it('should have default card styling when not hovered or selected', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+    });
+
+    it('should update styling when isSelected is true', async () => {
+      await wrapper.setProps({ isSelected: true });
+      const card = wrapper.find('.v-card');
+
+      // Check that the card exists and isSelected prop is set
+      expect(card.exists()).toBe(true);
+      expect(wrapper.vm.isSelected).toBe(true);
+    });
+
+    it('should handle hover state through v-hover component', () => {
+      const vHover = wrapper.find('[data-testid="root"]');
+      expect(vHover.exists()).toBe(true);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should call toggle function when card is clicked', async () => {
+      const toggleSpy = vi.fn();
+      await wrapper.setProps({ toggle: toggleSpy });
+
+      const card = wrapper.find('.v-card');
+      await card.trigger('click');
+
+      expect(toggleSpy).toHaveBeenCalled();
+    });
+
+    it('should handle missing toggle function gracefully', async () => {
+      await wrapper.setProps({ toggle: undefined });
+      const card = wrapper.find('.v-card');
+
+      // Should not throw error when clicked
+      expect(async () => {
+        await card.trigger('click');
+      }).not.toThrow();
+    });
+  });
+
+  describe('NotificationBubble Properties', () => {
+    it('should pass correct props to NotificationBubble', async () => {
+      await wrapper.setProps({ number: 'TEST' });
+      const notificationBubble = wrapper.find('[data-testid="notification-bubble"]');
+
+      expect(notificationBubble.exists()).toBe(true);
+      expect(notificationBubble.text()).toBe('TEST');
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should pass correct props to Button', async () => {
+      await wrapper.setProps({ taskNumber: 'TASK123' });
+      const button = wrapper.find('[data-testid="button"]');
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('TASK123');
+    });
+
+    it('should not render button when taskNumber is null', async () => {
+      await wrapper.setProps({ taskNumber: null });
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(false);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct title layout', () => {
+      const titleRow = wrapper.find('.d-flex.flex-row.align-center.py-1.ga-2');
+      expect(titleRow.exists()).toBe(true);
+    });
+
+    it('should have correct content layout', () => {
+      const contentDiv = wrapper.find('.d-flex.flex-column.ga-2.align-start');
+      expect(contentDiv.exists()).toBe(true);
+    });
+
+    it('should have tag number with mr-auto class', () => {
+      const tagNumberElement = wrapper.find('.p-medium.ml-auto');
+      expect(tagNumberElement.exists()).toBe(true);
+      expect(tagNumberElement.text()).toContain('#T456');
+    });
+  });
+
+  describe('Typography', () => {
+    it('should use h4 tag for name', () => {
+      const nameElement = wrapper.find('h4');
+      expect(nameElement.exists()).toBe(true);
+      expect(nameElement.text()).toBe('John Doe');
+    });
+
+    it('should use p tag for description', () => {
+      const descriptionElements = wrapper.findAll('p');
+      const descriptionElement = descriptionElements.find(el =>
+        el.text() === 'Test ticket description'
+      );
+      expect(descriptionElement).toBeTruthy();
+    });
+
+    it('should use p tag with specific classes for tag number', () => {
+      const tagNumberElement = wrapper.find('p.p-medium.ml-auto');
+      expect(tagNumberElement.exists()).toBe(true);
+      expect(tagNumberElement.text()).toBe('#T456');
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('should handle long names', async () => {
+      const longName = 'Very Long Customer Name That Should Display Properly';
+      await wrapper.setProps({ name: longName });
+      expect(wrapper.text()).toContain(longName);
+    });
+
+    it('should handle long descriptions', async () => {
+      const longDescription = 'This is a very long description that provides detailed information about the ticket and its requirements';
+      await wrapper.setProps({ description: longDescription });
+      expect(wrapper.text()).toContain(longDescription);
+    });
+
+    it('should handle special characters in content', async () => {
+      await wrapper.setProps({
+        name: 'John & Jane Doe',
+        description: 'Ticket #123 - Special request (priority: high)',
+        tagNumber: 'T-456-SPECIAL'
+      });
+
+      expect(wrapper.text()).toContain('John & Jane Doe');
+      expect(wrapper.text()).toContain('Ticket #123 - Special request (priority: high)');
+      expect(wrapper.text()).toContain('#T-456-SPECIAL');
+    });
+  });
+
+  describe('Status Variations', () => {
+    it('should handle different status values', async () => {
+      const statuses = ['Open', 'In Progress', 'Closed', 'Pending', 'Resolved'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        const tagLabel = wrapper.find('[data-testid="tag-label"]');
+        expect(tagLabel.text()).toBe(status);
+      }
+    });
+  });
+
+  describe('Selection State', () => {
+    it('should apply selected styling when isSelected is true', async () => {
+      await wrapper.setProps({ isSelected: true });
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+      expect(wrapper.vm.isSelected).toBe(true);
+    });
+
+    it('should apply default styling when isSelected is false', async () => {
+      await wrapper.setProps({ isSelected: false });
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+      expect(wrapper.vm.isSelected).toBe(false);
+    });
+  });
+
+  describe('Conditional Rendering', () => {
+    it('should conditionally render NotificationBubble based on number prop', async () => {
+      // With number
+      await wrapper.setProps({ number: '123' });
+      expect(wrapper.find('[data-testid="notification-bubble"]').exists()).toBe(true);
+
+      // Without number
+      await wrapper.setProps({ number: undefined });
+      expect(wrapper.find('[data-testid="notification-bubble"]').exists()).toBe(false);
+    });
+
+    it('should conditionally render Button based on taskNumber prop', async () => {
+      // With taskNumber
+      await wrapper.setProps({ taskNumber: 'TASK123' });
+      expect(wrapper.find('[data-testid="button"]').exists()).toBe(true);
+
+      // Without taskNumber
+      await wrapper.setProps({ taskNumber: undefined });
+      expect(wrapper.find('[data-testid="button"]').exists()).toBe(false);
+    });
+  });
+
+  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 integrate properly with NotificationBubble component when number is provided', () => {
+      const notificationBubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(notificationBubble.exists()).toBe(true);
+    });
+
+    it('should integrate properly with Button component when taskNumber is provided', () => {
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have clickable card', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+    });
+
+    it('should maintain proper heading hierarchy', () => {
+      const h4 = wrapper.find('h4');
+      expect(h4.exists()).toBe(true);
+    });
+  });
+});