test: add more tests (#130)

components/base/BaseProgressCircle.vue

@@ -81,7 +81,8 @@ const percent = computed(() => {
   if (max === 0) {
     return 0
   }
-  return (value / max) * 100
+  // Round to 2 decimal places
+  return Math.round((value / max) * 10000) / 100
 })
 
 const dasharray = computed(() => {
@@ -149,13 +150,16 @@ const colors = {
 
 <style scoped>
 .block {
+  --progress-circle-duration: v-bind(duration);
+  --progress-circle-dasharray: v-bind(dasharray);
+
   transform-origin: center;
   transform: rotate(-90deg);
 }
 
 .circle-value {
   animation-name: circle-chart-fill;
-  animation-duration: v-bind(duration);
+  animation-duration: var(--progress-circle-duration);
   /* transform: rotate(-90deg); */
   transform-origin: center;
   stroke-dashoffset: 0;
@@ -168,7 +172,7 @@ const colors = {
   }
 
   100% {
-    stroke-dasharray: v-bind(dasharray);
+    stroke-dasharray: var(--progress-circle-dasharray);
   }
 }
 </style>

test/components/base/BaseHeading.spec.ts

@@ -0,0 +1,18 @@
+import { BaseHeading } from '#components'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+describe('component: BaseHeading', () => {
+  describe('usage', () => {
+    it('should show default slot', async () => {
+      const component = mount(BaseHeading, {
+        slots: {
+          default: () => 'Default Slot',
+        },
+      })
+      expect(component.text()).toMatchInlineSnapshot(
+        '"Default Slot"',
+      )
+    })
+  })
+})

test/components/base/BaseProgressCircle.spec.ts

@@ -0,0 +1,19 @@
+import { BaseProgressCircle } from '#components'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+describe('component: BaseProgressCircle', () => {
+  describe('usage', () => {
+    it('should show default slot', async () => {
+      const component = mount(BaseProgressCircle, {
+        props: {
+          value: 12,
+          max: 42,
+        }
+      })
+      const svg = component.get('svg')
+      expect(svg.attributes('aria-valuenow')).toBe('12')
+      expect(svg.attributes('aria-valuemax')).toBe('42')
+    })
+  })
+})

test/components/base/BaseText.spec.ts

@@ -0,0 +1,18 @@
+import { BaseText } from '#components'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+describe('component: BaseText', () => {
+  describe('usage', () => {
+    it('should show default slot', async () => {
+      const component = mount(BaseText, {
+        slots: {
+          default: () => 'Default Slot',
+        },
+      })
+      expect(component.text()).toMatchInlineSnapshot(
+        '"Default Slot"',
+      )
+    })
+  })
+})

test/components/form/BaseInput.spec.ts

@@ -124,5 +124,27 @@ describe('component: BaseInput', () => {
       expect(help.classes('text-danger-500')).toBeTruthy()
       expect(help.text()).toBe('test')
     })
+
+    it('should render disabled state', async () => {
+      const component = mount(BaseInput, {
+        props: {
+          disabled: true,
+        },
+      })
+
+      const input = component.get('.nui-input')
+      expect(input.attributes('disabled')).toBeDefined()
+    })
+
+    it('should render with placeholder', async () => {
+      const component = mount(BaseInput, {
+        props: {
+          placeholder: 'Enter text',
+        },
+      })
+
+      const input = component.get('.nui-input')
+      expect(input.attributes('placeholder')).toBe('Enter text')
+    })
   })
 })

test/components/form/BaseSelect.spec.ts

@@ -40,6 +40,7 @@ describe('component: BaseSelect', () => {
       await component.get('.nui-select').setValue('42')
       expect(component.props('modelValue')).toBe('42')
     })
+
     it('should handle v-model, direct', async () => {
       const component = mount(BaseSelect, {
         props: {
@@ -64,8 +65,74 @@ describe('component: BaseSelect', () => {
       resetNuiAppConfig('BaseSelect')
     })
 
-    it('should', async () => {
-      expect(true).toBeTruthy()
+    it('should render with custom app.config', async () => {
+      useAppConfig().nui.BaseSelect!.size = 'sm'
+      useAppConfig().nui.BaseSelect!.rounded = 'lg'
+
+      const component = mount(BaseSelect)
+
+      const wrapper = component.get('.nui-select-wrapper')
+      expect(wrapper.classes('nui-select-sm')).toBeTruthy()
+      expect(wrapper.classes('nui-select-rounded-lg')).toBeTruthy()
+    })
+
+    it('should render with default app.config', async () => {
+      const component = mount(BaseSelect)
+
+      const wrapper = component.get('.nui-select-wrapper')
+      expect(wrapper.classes('nui-select-md')).toBeTruthy()
+      expect(wrapper.classes('nui-select-rounded-sm')).toBeTruthy()
+    })
+
+    it('should render with props', async () => {
+      const component = mount(BaseSelect, {
+        props: {
+          size: 'lg',
+          rounded: 'md',
+        },
+      })
+
+      const wrapper = component.get('.nui-select-wrapper')
+      expect(wrapper.classes('nui-select-lg')).toBeTruthy()
+      expect(wrapper.classes('nui-select-rounded-md')).toBeTruthy()
+    })
+
+    it('should render error', async () => {
+      const component = mount(BaseSelect, {
+        props: {
+          error: 'test',
+        },
+      })
+
+      const wrapper = component.get('.nui-select-wrapper')
+      const help = component.get('.nui-input-help-text')
+      expect(wrapper.classes('nui-select-error')).toBeTruthy()
+      expect(help.classes('text-danger-500')).toBeTruthy()
+      expect(help.text()).toBe('test')
+    })
+
+    it('should render disabled state', async () => {
+      const component = mount(BaseSelect, {
+        props: {
+          disabled: true,
+        },
+      })
+
+      const select = component.get('.nui-select')
+      expect(select.attributes('disabled')).toBeDefined()
+    })
+
+    it('should render with placeholder', async () => {
+      const component = mount(BaseSelect, {
+        props: {
+          placeholder: 'Select an option',
+        },
+      })
+
+      const option = component.get('option')
+      expect(option.text()).toBe('Select an option')
+      expect(option.attributes('disabled')).toBeDefined()
+      expect(option.attributes('hidden')).toBeDefined()
     })
   })
 })