@dcrackel/hematournamentui 1.0.22 → 1.0.23

package/src/stories/Atoms/Icon/BaseIcon.test.js

@@ -1,91 +1,91 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import BaseIcon from './BaseIcon.vue';
-
-describe('BaseIcon', () => {
-    // Mocking console.warn
-    const originalWarn = console.warn;
-    let consoleOutput = [];
-    const mockedWarn = output => consoleOutput.push(output);
-    console.warn = mockedWarn;
-
-    afterEach(() => {
-        console.warn = originalWarn;
-        consoleOutput = [];
-    });
-
-    it('renders without errors', () => {
-        const wrapper = mount(BaseIcon, {
-            props: { iconName: 'fa-icons' }
-        });
-        expect(wrapper.exists()).toBeTruthy();
-    });
-
-    it('default values are correctly applied when props are not provided', () => {
-        const wrapper = mount(BaseIcon, {
-            props: {}
-        });
-        expect(wrapper.classes()).toContain('fa-solid');
-        expect(wrapper.classes()).toContain('fa-face-smile');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('text-primary');
-    })
-
-    it('applies default props correctly', () => {
-        const wrapper = mount(BaseIcon, {
-            props: { iconName: 'fa-icons' }
-        });
-        expect(wrapper.classes()).toContain('fa-solid');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('text-primary');
-    });
-
-    it('computes classes based on props', () => {
-        const wrapper = mount(BaseIcon, {
-            props: {
-                iconName: 'fa-icons',
-                style: 'fa-regular',
-                size: 'lg',
-                color: 'secondary'
-            }
-        });
-        expect(wrapper.classes()).toContain('fa-regular');
-        expect(wrapper.classes()).toContain('fa-icons');
-        expect(wrapper.classes()).toContain('text-lg');
-        expect(wrapper.classes()).toContain('text-secondary');
-    });
-
-    it('validates style prop correctly with valid value', () => {
-        mount(BaseIcon, {
-            props: { style: 'fa-solid' }
-        });
-        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
-    });
-
-    it('emits a warning with invalid style prop value', () => {
-        mount(BaseIcon, {
-            props: { style: 'invalid-style' }
-        });
-        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "style".';
-        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
-        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
-    });
-
-    it('validates style size correctly with valid value', () => {
-        mount(BaseIcon, {
-            props: { size: 'sm' }
-        });
-        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
-    });
-
-    it('emits a warning with invalid size prop value', () => {
-        mount(BaseIcon, {
-            props: { size: 'invalid-size' }
-        });
-        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "size".';
-        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
-        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
-    });
-
-});
-
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BaseIcon from './BaseIcon.vue';
+
+describe('BaseIcon', () => {
+    // Mocking console.warn
+    const originalWarn = console.warn;
+    let consoleOutput = [];
+    const mockedWarn = output => consoleOutput.push(output);
+    console.warn = mockedWarn;
+
+    afterEach(() => {
+        console.warn = originalWarn;
+        consoleOutput = [];
+    });
+
+    it('renders without errors', () => {
+        const wrapper = mount(BaseIcon, {
+            props: { iconName: 'fa-icons' }
+        });
+        expect(wrapper.exists()).toBeTruthy();
+    });
+
+    it('default values are correctly applied when props are not provided', () => {
+        const wrapper = mount(BaseIcon, {
+            props: {}
+        });
+        expect(wrapper.classes()).toContain('fa-solid');
+        expect(wrapper.classes()).toContain('fa-face-smile');
+        expect(wrapper.classes()).toContain('text-sm');
+        expect(wrapper.classes()).toContain('text-primary');
+    })
+
+    it('applies default props correctly', () => {
+        const wrapper = mount(BaseIcon, {
+            props: { iconName: 'fa-icons' }
+        });
+        expect(wrapper.classes()).toContain('fa-solid');
+        expect(wrapper.classes()).toContain('text-sm');
+        expect(wrapper.classes()).toContain('text-primary');
+    });
+
+    it('computes classes based on props', () => {
+        const wrapper = mount(BaseIcon, {
+            props: {
+                iconName: 'fa-icons',
+                style: 'fa-regular',
+                size: 'lg',
+                color: 'secondary'
+            }
+        });
+        expect(wrapper.classes()).toContain('fa-regular');
+        expect(wrapper.classes()).toContain('fa-icons');
+        expect(wrapper.classes()).toContain('text-lg');
+        expect(wrapper.classes()).toContain('text-secondary');
+    });
+
+    it('validates style prop correctly with valid value', () => {
+        mount(BaseIcon, {
+            props: { style: 'fa-solid' }
+        });
+        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+    });
+
+    it('emits a warning with invalid style prop value', () => {
+        mount(BaseIcon, {
+            props: { style: 'invalid-style' }
+        });
+        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "style".';
+        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+    });
+
+    it('validates style size correctly with valid value', () => {
+        mount(BaseIcon, {
+            props: { size: 'sm' }
+        });
+        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+    });
+
+    it('emits a warning with invalid size prop value', () => {
+        mount(BaseIcon, {
+            props: { size: 'invalid-size' }
+        });
+        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "size".';
+        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+    });
+
+});
+

package/src/stories/Atoms/Icon/BaseIcon.vue

@@ -1,48 +1,48 @@
-<template>
-  <i :class="computedIconClass"></i>
-</template>
-
-<script>
-
-export default {
-  name: 'BaseIcon',
-  props: {
-    iconName: {
-      type: String,
-      default: 'fa-face-smile',
-      required: true
-    },
-    style: {
-      type: String,
-      default: 'fa-solid',
-      validator: function (value) {
-        return ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'].indexOf(value) !== -1;
-      },
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].indexOf(value) !== -1;
-      },
-      default: 'sm'
-    },
-    color: {
-      type: String,
-      default: 'primary'
-    }
-  },
-  computed: {
-    computedIconClass() {
-      return [
-        this.style,
-        this.iconName,
-        `text-${this.size}`,
-        this.colorClass
-      ];
-    },
-    colorClass() {
-      return `text-${this.color}`;
-    }
-  }
-};
-</script>
+<template>
+  <i :class="computedIconClass"></i>
+</template>
+
+<script>
+
+export default {
+  name: 'BaseIcon',
+  props: {
+    iconName: {
+      type: String,
+      default: 'fa-face-smile',
+      required: true
+    },
+    style: {
+      type: String,
+      default: 'fa-solid',
+      validator: function (value) {
+        return ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'].indexOf(value) !== -1;
+      },
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].indexOf(value) !== -1;
+      },
+      default: 'sm'
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  computed: {
+    computedIconClass() {
+      return [
+        this.style,
+        this.iconName,
+        `text-${this.size}`,
+        this.colorClass
+      ];
+    },
+    colorClass() {
+      return `text-${this.color}`;
+    }
+  }
+};
+</script>

package/src/stories/Atoms/Input/BaseInput.stories.js

@@ -1,28 +1,29 @@
-import BaseInput from './BaseInput.vue';
-
-export default {
-    title: 'Atoms/BaseInput',
-    component: BaseInput,
-    tags: ['autodocs'],
-    argTypes: {
-        placeholder: { control: 'text' },
-        value: { control: 'text' }
-    }
-};
-
-const Template = args => ({
-    components: { BaseInput },
-    props: Object.keys(args),
-    methods: {
-        onValueUpdate(newValue) {
-            console.log('Value updated:', newValue);
-        }
-    }
-});
-
-export const Default = {
-    args: {
-        placeholder: 'Enter text...',
-        value: ''
-    }
-};
+import BaseInput from './BaseInput.vue';
+
+export default {
+    title: 'Atoms/BaseInput',
+    component: BaseInput,
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: {control: 'text'},
+        value: {control: 'text'},
+        icon: {control: ''}
+    }
+};
+
+const Template = args => ({
+    components: {BaseInput},
+    props: Object.keys(args),
+    methods: {
+        onValueUpdate(newValue) {
+            console.log('Value updated:', newValue);
+        }
+    }
+});
+
+export const Default = {
+    args: {
+        placeholder: 'Enter text...',
+        value: ''
+    }
+};

package/src/stories/Atoms/Input/BaseInput.test.js

@@ -1,87 +1,87 @@
-import BaseInput from './BaseInput.vue';
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, it } from "vitest";
-
-describe('BaseInput.vue', () => {
-
-    it('renders with default props', () => {
-        const wrapper = mount(BaseInput);
-        const inputElement = wrapper.find('input');
-
-        expect(inputElement.attributes('placeholder')).toBe('');
-        expect(wrapper.vm.internalValue).toBe('');
-    });
-
-    it('initializes with the correct value prop', () => {
-        const initialValue = 'Hello, World!';
-        const wrapper = mount(BaseInput, {
-            props: {
-                value: initialValue
-            }
-        });
-
-        expect(wrapper.vm.internalValue).toBe(initialValue);
-    });
-
-    it('updates internalValue when value prop changes', async () => {
-        const wrapper = mount(BaseInput);
-        await wrapper.setProps({ value: 'New Value' });
-
-        expect(wrapper.vm.internalValue).toBe('New Value');
-    });
-
-    it('emits update:value with a delay upon input', async () => {
-        const wrapper = mount(BaseInput);
-        const inputElement = wrapper.find('input');
-
-        await inputElement.setValue('Test Input');
-
-        // TODO: Handle timer-related functionality with vitest
-        await new Promise(resolve => setTimeout(resolve, 350));
-
-        expect(wrapper.emitted('update:value')).toBeTruthy();
-        expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
-    });
-
-    it('applies formInput styles when type is formInput', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: false
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).toContain('border');
-        expect(inputElement.classes()).toContain('rounded-lg');
-        expect(inputElement.classes()).toContain('text-secondary');
-        expect(inputElement.classes()).toContain('placeholder:text-xs');
-        expect(inputElement.classes()).toContain('text-sm');
-        expect(inputElement.classes()).toContain('p-2');
-        expect(inputElement.classes()).toContain('w-full');
-        expect(inputElement.classes()).toContain('border-dropdownSelect');
-    });
-
-    it('applies border-alarm class when invalid is true', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: true
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).toContain('border-alarm');
-    });
-
-    it('does not apply border-alarm class when invalid is false', () => {
-        const wrapper = mount(BaseInput, {
-            props: {
-                type: 'formInput',
-                invalid: false
-            }
-        });
-        const inputElement = wrapper.find('input');
-        expect(inputElement.classes()).not.toContain('border-alarm');
-        expect(inputElement.classes()).toContain('border-dropdownSelect');
-    });
-
-});
+import BaseInput from './BaseInput.vue';
+import { mount } from "@vue/test-utils";
+import { describe, expect, test, it } from "vitest";
+
+describe('BaseInput.vue', () => {
+
+    it('renders with default props', () => {
+        const wrapper = mount(BaseInput);
+        const inputElement = wrapper.find('input');
+
+        expect(inputElement.attributes('placeholder')).toBe('');
+        expect(wrapper.vm.internalValue).toBe('');
+    });
+
+    it('initializes with the correct value prop', () => {
+        const initialValue = 'Hello, World!';
+        const wrapper = mount(BaseInput, {
+            props: {
+                value: initialValue
+            }
+        });
+
+        expect(wrapper.vm.internalValue).toBe(initialValue);
+    });
+
+    it('updates internalValue when value prop changes', async () => {
+        const wrapper = mount(BaseInput);
+        await wrapper.setProps({ value: 'New Value' });
+
+        expect(wrapper.vm.internalValue).toBe('New Value');
+    });
+
+    it('emits update:value with a delay upon input', async () => {
+        const wrapper = mount(BaseInput);
+        const inputElement = wrapper.find('input');
+
+        await inputElement.setValue('Test Input');
+
+        // TODO: Handle timer-related functionality with vitest
+        await new Promise(resolve => setTimeout(resolve, 350));
+
+        expect(wrapper.emitted('update:value')).toBeTruthy();
+        expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
+    });
+
+    it('applies formInput styles when type is formInput', () => {
+        const wrapper = mount(BaseInput, {
+            props: {
+                type: 'formInput',
+                invalid: false
+            }
+        });
+        const inputElement = wrapper.find('input');
+        expect(inputElement.classes()).toContain('border');
+        expect(inputElement.classes()).toContain('rounded-lg');
+        expect(inputElement.classes()).toContain('text-secondary');
+        expect(inputElement.classes()).toContain('placeholder:text-xs');
+        expect(inputElement.classes()).toContain('text-sm');
+        expect(inputElement.classes()).toContain('p-2');
+        expect(inputElement.classes()).toContain('w-full');
+        expect(inputElement.classes()).toContain('border-dropdownSelect');
+    });
+
+    it('applies border-alarm class when invalid is true', () => {
+        const wrapper = mount(BaseInput, {
+            props: {
+                type: 'formInput',
+                invalid: true
+            }
+        });
+        const inputElement = wrapper.find('input');
+        expect(inputElement.classes()).toContain('border-alarm');
+    });
+
+    it('does not apply border-alarm class when invalid is false', () => {
+        const wrapper = mount(BaseInput, {
+            props: {
+                type: 'formInput',
+                invalid: false
+            }
+        });
+        const inputElement = wrapper.find('input');
+        expect(inputElement.classes()).not.toContain('border-alarm');
+        expect(inputElement.classes()).toContain('border-dropdownSelect');
+    });
+
+});