@dcrackel/hematournamentui 1.0.21 → 1.0.23

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.stories.js

@@ -1,41 +1,41 @@
-// Breadcrumb.stories.js
-import Breadcrumb from './Breadcrumb.vue';
-import { vueRouter } from 'storybook-vue3-router';
-import mockRoutes from '../../../../../.storybook/mockRoutes.js';
-import { action } from '@storybook/addon-actions';
-export default {
-    title: 'Molecules/Admin/Breadcrumb',
-    component: Breadcrumb,
-    tags: ['autodocs'],
-    argTypes: {
-        items: {
-            control: 'object',
-            description: 'Array of breadcrumb items'
-        },
-    },
-};
-
-export const Default = {
-    args: {
-        label: 'Sort By',
-        items: [
-            { text: 'Tournament', link: '/' },
-            { text: 'Event', link: '/event' },
-            { text: 'Pool', link: '' }
-        ],
-        selectedItem: {text: 'Text1', link: '/link1'},
-        props: {
-            onLinkClick: {
-                default: () => action('link-clicked')
-            }
-        },
-    }
-};
-
-Default.decorators = [vueRouter(mockRoutes)];
-
-Default.parameters = {
-    actions: {
-        handles: ['click .breadcrumb-item router-link'],
-    },
-};
+// Breadcrumb.stories.js
+import Breadcrumb from './Breadcrumb.vue';
+import { vueRouter } from 'storybook-vue3-router';
+import mockRoutes from '../../../../../.storybook/mockRoutes.js';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'Molecules/Admin/Breadcrumb',
+    component: Breadcrumb,
+    tags: ['autodocs'],
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of breadcrumb items'
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        label: 'Sort By',
+        items: [
+            { text: 'Tournament', link: '/' },
+            { text: 'Event', link: '/event' },
+            { text: 'Pool', link: '' }
+        ],
+        selectedItem: {text: 'Text1', link: '/link1'},
+        props: {
+            onLinkClick: {
+                default: () => action('link-clicked')
+            }
+        },
+    }
+};
+
+Default.decorators = [vueRouter(mockRoutes)];
+
+Default.parameters = {
+    actions: {
+        handles: ['click .breadcrumb-item router-link'],
+    },
+};

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.test.js

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Breadcrumb from './Breadcrumb.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+// Mocking BaseText and router-link
+const mocks = {
+    components: {
+        BaseText,
+        RouterLink: {
+            template: '<div><slot></slot></div>',
+            props: ['to'],
+            methods: { click: vi.fn() }
+        }
+    }
+};
+
+describe('Breadcrumb', () => {
+    it('renders breadcrumbs correctly', () => {
+        const items = [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' },
+            { text: 'Item', link: '/category/item' }
+        ];
+
+        const wrapper = shallowMount(Breadcrumb, {
+            props: { items },
+            global: mocks
+        });
+
+        const linkElements = wrapper.findAll('[to]');
+
+        // console.log(wrapper.html());
+
+        expect(linkElements.length).toBe(items.filter(item => item.link).length);
+    });
+
+    // it('calls onLinkClick on link click', async () => {
+    //     const onLinkClick = vi.fn();
+    //     const items = [
+    //         { text: 'Home', link: '/' },
+    //         { text: 'Category' } // No link
+    //     ];
+    //
+    //     const wrapper = shallowMount(Breadcrumb, {
+    //         props: { items, onLinkClick },
+    //         global: mocks
+    //     });
+    //
+    //     const link = wrapper.find('[to]');
+    //     await link.trigger('click.native');
+    //     expect(onLinkClick).toHaveBeenCalled();
+    // });
+
+    it('calls onLinkClick when a link is clicked', async () => {
+        const onLinkClick = vi.fn();
+        const items = [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' }
+        ];
+
+        const wrapper = shallowMount(Breadcrumb, {
+            props: { items, onLinkClick},
+            global: {
+                stubs: {
+                    BaseText,
+                    RouterLink: true
+                }
+            }
+        });
+
+        const links = wrapper.findAll('[to]');
+        if (links.length > 0) {
+            await links[0].trigger('click.native');
+            expect(onLinkClick).toHaveBeenCalled();
+        } else {
+            throw new Error('No links found to test');
+        }
+    });
+});

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue

@@ -1,31 +1,31 @@
-<template>
-  <nav class="flex flex-row">
-    <div v-for="(item, index) in items" :key="index">
-      <BaseText v-if="index > 0" :text="' > '" size="lg" color="quaternary" class="mr-2" />
-      <BaseText v-if="!item.link" class="mr-2" :text="item.text" size="lg" color="quaternary" />
-      <router-link v-if="item.link" :to="item.link" @click.native="onLinkClick" class="mr-2">
-        <BaseText :text="item.text" size="lg" color="quaternary" hover-color="bright" class="underline" />
-      </router-link>
-    </div>
-  </nav>
-</template>
-
-<script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-
-export default {
-  name: 'Breadcrumb',
-  components: {BaseText},
-  props: {
-    items: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    onLinkClick: {
-      type: Function,
-      default: () => {}
-    }
-  }
-};
-</script>
+<template>
+  <nav class="flex flex-row w-full">
+    <div v-for="(item, index) in items" :key="index" class="flex flex-row">
+      <BaseText v-if="index > 0" :text="' > '" size="lg" color="quaternary" class="mr-2" />
+      <BaseText v-if="!item.link" class="mr-2" :text="item.text" size="lg" color="quaternary" />
+      <router-link v-if="item.link" :to="item.link" @click.native="onLinkClick" class="mr-2">
+        <BaseText :text="item.text" size="lg" color="quaternary" hover-color="bright" class="underline" />
+      </router-link>
+    </div>
+  </nav>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'Breadcrumb',
+  components: {BaseText},
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    onLinkClick: {
+      type: Function,
+      default: () => {}
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Button/BaseButton.stories.js

@@ -1,76 +1,93 @@
-import BaseButton from './BaseButton.vue';
-
-export default {
-    title: 'Molecules/Button/BaseButton',
-    component: BaseButton,
-    tags: ['autodocs'],
-    argTypes: {
-        onClick: {},
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['small', 'medium', 'large']
-        },
-        iconName: {
-            control: {
-                type: 'text'
-            },
-            defaultValue: ''
-        },
-        iconStyle: {
-            control: {
-                type: 'select'
-            },
-            options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
-            defaultValue: 'fa-solid'
-        },
-        type: {
-            control: {
-                type: 'select'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin']
-        }
-    }
-};
-export const Primary = {
-    args: {
-        type: 'primary',
-        label: 'Button'
-    }
-};
-export const PrimaryButtonWithIcon = {
-    args: {
-        type: 'primary',
-        label: 'Button',
-        iconName: 'fa-check'
-    }
-};
-export const Secondary = {
-    args: {
-        label: 'Button'
-    }
-};
-export const HighlightedButtonLarge = {
-    args: {
-        type: 'bright',
-        size: '3xl',
-        label: 'Button'
-    }
-};
-export const SmallTertiary = {
-    args: {
-        type: 'tertiary',
-        size: 'sm',
-        label: 'Button'
-    }
-};
-
-export const AdminMunuButton = {
-    args: {
-        type: 'admin',
-        size: 'md',
-        label: 'Admin Button',
-        hoverColor: 'highlightPrimary'
-    }
-};
+import BaseButton from './BaseButton.vue';
+
+export default {
+    title: 'Molecules/Button/BaseButton',
+    component: BaseButton,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: {},
+        size: {
+            control: {
+                type: 'select'
+            },
+            options: ['small', 'medium', 'large']
+        },
+        iconName: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: ''
+        },
+        iconStyle: {
+            control: {
+                type: 'select'
+            },
+            options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
+            defaultValue: 'fa-solid'
+        },
+        type: {
+            control: {
+                type: 'select'
+            },
+            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'square'],
+            defaultValue: 'primary'
+        }
+    }
+};
+export const Primary = {
+    args: {
+        type: 'primary',
+        label: 'Button'
+    }
+};
+export const PrimaryButtonWithIcon = {
+    args: {
+        type: 'primary',
+        label: 'Button',
+        iconName: 'fa-check'
+    }
+};
+export const Secondary = {
+    args: {
+        type: 'secondary',
+        label: 'Button'
+    }
+};
+export const HighlightedButtonLarge = {
+    args: {
+        type: 'bright',
+        size: '3xl',
+        label: 'Button'
+    }
+};
+export const SmallTertiary = {
+    args: {
+        type: 'tertiary',
+        size: 'sm',
+        label: 'Button'
+    }
+};
+
+export const AdminMenuButton = {
+    args: {
+        type: 'admin',
+        size: 'md',
+        label: 'Admin Button',
+        hoverColor: 'highlightPrimary'
+    }
+};
+
+export const SquareButton = {
+    args: {
+        type: 'square',
+        label: 'Button',
+        hoverColor: 'highlightPrimary'
+    }
+};
+
+export const IconButton = {
+    args: {
+        type: 'iconOnly',
+        iconName: 'fa-check',
+    }
+};