diff --git a/components/base/BaseProgressCircle.vue b/components/base/BaseProgressCircle.vue index 697df37..297215e 100644 --- a/components/base/BaseProgressCircle.vue +++ b/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 = { diff --git a/test/components/base/BaseHeading.spec.ts b/test/components/base/BaseHeading.spec.ts new file mode 100644 index 0000000..14b84bf --- /dev/null +++ b/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"', + ) + }) + }) +}) diff --git a/test/components/base/BaseProgressCircle.spec.ts b/test/components/base/BaseProgressCircle.spec.ts new file mode 100644 index 0000000..49389ce --- /dev/null +++ b/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') + }) + }) +}) diff --git a/test/components/base/BaseText.spec.ts b/test/components/base/BaseText.spec.ts new file mode 100644 index 0000000..1f1af1c --- /dev/null +++ b/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"', + ) + }) + }) +}) diff --git a/test/components/form/BaseInput.spec.ts b/test/components/form/BaseInput.spec.ts index d34845b..4f7963b 100644 --- a/test/components/form/BaseInput.spec.ts +++ b/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') + }) }) }) diff --git a/test/components/form/BaseSelect.spec.ts b/test/components/form/BaseSelect.spec.ts index 6f79f6f..7f11524 100644 --- a/test/components/form/BaseSelect.spec.ts +++ b/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() }) }) })