@dcrackel/hematournamentui 1.0.21 → 1.0.23

package/src/stories/Atoms/Text/BaseText.test.js

@@ -1,172 +1,172 @@
-import {mount} from "@vue/test-utils";
-import {describe, expect, test, it} from "vitest";
-import BaseText from './BaseText.vue';
-
-describe('BaseText.vue', () => {
-    it('renders correctly with default props', () => {
-        const wrapper = mount(BaseText, {
-            props: {text: 'Test Text'}
-        });
-        expect(wrapper.text()).toBe('Test Text');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('text-primary');
-    });
-
-    it('renders text, size, weight, and color based on props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Styled Text',
-                size: 'xl',
-                weight: 'bold',
-                color: 'secondary'
-            }
-        });
-        expect(wrapper.text()).toBe('Styled Text');
-        expect(wrapper.classes()).toContain('text-xl');
-        expect(wrapper.classes()).toContain('font-bold');
-        expect(wrapper.classes()).toContain('text-secondary');
-    });
-
-    it('computes classes based on multiple props', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: '2xl',
-                weight: 'extra-bold',
-                color: 'bright',
-                hoverColor: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-2xl');
-        expect(wrapper.classes()).toContain('font-extrabold');
-        expect(wrapper.classes()).toContain('text-bright');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
-    });
-
-    it('computes classes for hover primary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'xs',
-                hoverColor: 'primary',
-                weight: 'light',
-                color: 'neutral'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('text-neutral');
-        expect(wrapper.classes()).toContain('hover:text-primary');
-    });
-
-    it('computes classes for hover secondary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'md',
-                hoverColor: 'secondary',
-                weight: 'medium',
-                color: 'tertiary'
-            }
-        });
-
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-md');
-        expect(wrapper.classes()).toContain('font-medium');
-        expect(wrapper.classes()).toContain('hover:text-secondary');
-    });
-
-    it('computes classes for hover tertiary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                size: 'lg',
-                hoverColor: 'tertiary',
-                weight: 'light',
-                color: 'tertiary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-tertiary');
-        expect(wrapper.classes()).toContain('text-lg');
-        expect(wrapper.classes()).toContain('font-light');
-        expect(wrapper.classes()).toContain('hover:text-tertiary');
-    });
-
-    it('computes classes for hover quaternary', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                weight: 'semi-bold',
-                size: '3xl',
-                hoverColor: 'quaternary',
-                color: 'quaternary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-quaternary');
-        expect(wrapper.classes()).toContain('text-3xl');
-        expect(wrapper.classes()).toContain('font-semibold');
-        expect(wrapper.classes()).toContain('hover:text-quaternary');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'neutral',
-                size: 'xs',
-                color: 'primary'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-primary');
-        expect(wrapper.classes()).toContain('text-xs');
-        expect(wrapper.classes()).toContain('font-normal');
-        expect(wrapper.classes()).toContain('hover:text-neutral');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'bright',
-                color: 'primaryHighlight'
-            }
-        });
-        expect(wrapper.classes()).toContain('hover:text-bright');
-        expect(wrapper.classes()).toContain('text-primaryHighlight');
-    });
-
-    it('computes classes for hover neutral', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Complex Styled Text',
-                hoverColor: 'none'
-            }
-        });
-        const hasHoverClass = wrapper.classes().some(className => className.startsWith('hover:'));
-        expect(hasHoverClass).toBeFalsy();
-    });
-
-    it('applies text-alarmText class when color is alarm', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Alarm Text',
-                color: 'alarm'
-            }
-        });
-        expect(wrapper.classes()).toContain('text-alarmText');
-    });
-
-    it('applies text-alarm class when invalid is true', () => {
-        const wrapper = mount(BaseText, {
-            props: {
-                text: 'Invalid Text',
-                invalid: true
-            }
-        });
-        expect(wrapper.classes()).toContain('text-alarm');
-    });
-
-});
-
+import {mount} from "@vue/test-utils";
+import {describe, expect, test, it} from "vitest";
+import BaseText from './BaseText.vue';
+
+describe('BaseText.vue', () => {
+    it('renders correctly with default props', () => {
+        const wrapper = mount(BaseText, {
+            props: {text: 'Test Text'}
+        });
+        expect(wrapper.text()).toBe('Test Text');
+        expect(wrapper.classes()).toContain('text-sm');
+        expect(wrapper.classes()).toContain('font-normal');
+        expect(wrapper.classes()).toContain('text-primary');
+    });
+
+    it('renders text, size, weight, and color based on props', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Styled Text',
+                size: 'xl',
+                weight: 'bold',
+                color: 'secondary'
+            }
+        });
+        expect(wrapper.text()).toBe('Styled Text');
+        expect(wrapper.classes()).toContain('text-xl');
+        expect(wrapper.classes()).toContain('font-bold');
+        expect(wrapper.classes()).toContain('text-secondary');
+    });
+
+    it('computes classes based on multiple props', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                size: '2xl',
+                weight: 'extra-bold',
+                color: 'bright',
+                hoverColor: 'tertiary'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-2xl');
+        expect(wrapper.classes()).toContain('font-extrabold');
+        expect(wrapper.classes()).toContain('text-bright');
+        expect(wrapper.classes()).toContain('hover:text-tertiary');
+    });
+
+    it('computes classes for hover primary', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                size: 'xs',
+                hoverColor: 'primary',
+                weight: 'light',
+                color: 'neutral'
+            }
+        });
+
+        expect(wrapper.classes()).toContain('text-xs');
+        expect(wrapper.classes()).toContain('font-light');
+        expect(wrapper.classes()).toContain('text-neutral');
+        expect(wrapper.classes()).toContain('hover:text-primary');
+    });
+
+    it('computes classes for hover secondary', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                size: 'md',
+                hoverColor: 'secondary',
+                weight: 'medium',
+                color: 'tertiary'
+            }
+        });
+
+        expect(wrapper.classes()).toContain('text-tertiary');
+        expect(wrapper.classes()).toContain('text-md');
+        expect(wrapper.classes()).toContain('font-medium');
+        expect(wrapper.classes()).toContain('hover:text-secondary');
+    });
+
+    it('computes classes for hover tertiary', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                size: 'lg',
+                hoverColor: 'tertiary',
+                weight: 'light',
+                color: 'tertiary'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-tertiary');
+        expect(wrapper.classes()).toContain('text-lg');
+        expect(wrapper.classes()).toContain('font-light');
+        expect(wrapper.classes()).toContain('hover:text-tertiary');
+    });
+
+    it('computes classes for hover quaternary', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                weight: 'semi-bold',
+                size: '3xl',
+                hoverColor: 'quaternary',
+                color: 'quaternary'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-quaternary');
+        expect(wrapper.classes()).toContain('text-3xl');
+        expect(wrapper.classes()).toContain('font-semibold');
+        expect(wrapper.classes()).toContain('hover:text-quaternary');
+    });
+
+    it('computes classes for hover neutral', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                hoverColor: 'neutral',
+                size: 'xs',
+                color: 'primary'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-primary');
+        expect(wrapper.classes()).toContain('text-xs');
+        expect(wrapper.classes()).toContain('font-normal');
+        expect(wrapper.classes()).toContain('hover:text-neutral');
+    });
+
+    it('computes classes for hover neutral', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                hoverColor: 'bright',
+                color: 'primaryHighlight'
+            }
+        });
+        expect(wrapper.classes()).toContain('hover:text-bright');
+        expect(wrapper.classes()).toContain('text-primaryHighlight');
+    });
+
+    it('computes classes for hover neutral', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Complex Styled Text',
+                hoverColor: 'none'
+            }
+        });
+        const hasHoverClass = wrapper.classes().some(className => className.startsWith('hover:'));
+        expect(hasHoverClass).toBeFalsy();
+    });
+
+    it('applies text-alarmText class when color is alarm', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Alarm Text',
+                color: 'alarm'
+            }
+        });
+        expect(wrapper.classes()).toContain('text-alarmText');
+    });
+
+    it('applies text-alarm class when invalid is true', () => {
+        const wrapper = mount(BaseText, {
+            props: {
+                text: 'Invalid Text',
+                invalid: true
+            }
+        });
+        expect(wrapper.classes()).toContain('text-alarm');
+    });
+
+});
+