diff --git a/README.md b/README.md
index 9a76436cf..294ec8eff 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ Enter the component you want most in the components, leave the emojis and follow
### Components
### Components
-| Component | Status | 🔗 Hook v1 | 👀 Visual Check | 📄 Docs | 📝 Note |
+| Component | Status | 🔗 Hook v1 | 👀 Visual Check | 📄 Test | 📝 Note |
| ------------------------------------------------------------------------------------------------ | ------------ | ---------- | --------------- | ------- | ------------------------------ |
| [Accordion](https://vue-primitives.netlify.app/?path=/story/components-accordion--single) | ✅ Completed | ✅ | ✅ | | |
| [AlertDialog](https://vue-primitives.netlify.app/?path=/story/components-alertdialog--styled) | ✅ Completed | ✅ | | | |
@@ -50,7 +50,7 @@ Enter the component you want most in the components, leave the emojis and follow
| [DropdownMenu](https://vue-primitives.netlify.app/?path=/story/components-dropdownmenu--styled) | ✅ Completed | ✅ | | | |
| Form | ❌ Not Started | ❌ | | | |
| [HoverCard](https://vue-primitives.netlify.app/?path=/story/components-hovercard--chromatic) | ✅ Completed | ✅ | | | 🔧 Needs polygon; fix close |
-| [Label](https://vue-primitives.netlify.app/?path=/story/components-label--styled) | ✅ Completed | ✅ | | | |
+| [Label](https://vue-primitives.netlify.app/?path=/story/components-label--styled) | ✅ Completed | ✅ | | ✅ | |
| [Menubar](https://vue-primitives.netlify.app/?path=/story/components-menubar--styled) | ✅ Completed | ✅ | | | |
| NavigationMenu | 🚧 In Progress | 🚧 | | | |
| [Popover](https://vue-primitives.netlify.app/?path=/story/components-popover--styled) | ✅ Completed | ✅ | | | |
diff --git a/packages/core/package.json b/packages/core/package.json
index 7cddf0d67..84db4c5a0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -92,6 +92,9 @@
"build-storybook": "storybook build",
"eslint": "eslint .",
"eslint:fix": "eslint . --fix",
+ "test": "vitest run",
+ "test:watch": "vitest --watch",
+ "test:nuxt": "vitest -c vitest.nuxt.config.ts --coverage",
"release": "pnpm build && pnpm publish --no-git-checks --access public",
"release:beta": "pnpm release --tag beta --access public",
"release:alpha": "pnpm release --tag alpha --access public",
@@ -107,6 +110,7 @@
"aria-hidden": "^1.2.4"
},
"devDependencies": {
+ "@testing-library/vue": "^8.1.0",
"@tsconfig/node20": "^20.1.4",
"@types/jsdom": "^21.1.7",
"@types/node": "^22.9.0",
@@ -126,7 +130,9 @@
"vite-plugin-externalize-deps": "^0.8.0",
"vite-plugin-pages": "^0.32.3",
"vite-tsconfig-paths": "^5.1.3",
- "vitest": "^2.1.4",
+ "vitest": "link:@testing-library/jest-dom/vitest",
+ "vitest-axe": "1.0.0-pre.3",
+ "vitest-canvas-mock": "^0.3.3",
"vue": "^3.5.12",
"vue-router": "^4.4.5",
"vue-tsc": "^2.1.10"
diff --git a/packages/core/src/label/__tests__/Label.test.ts b/packages/core/src/label/__tests__/Label.test.ts
new file mode 100644
index 000000000..d06738fa9
--- /dev/null
+++ b/packages/core/src/label/__tests__/Label.test.ts
@@ -0,0 +1,273 @@
+import { render, screen } from '@testing-library/vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { axe } from 'vitest-axe'
+import { Label } from '../index'
+import { useLabel } from '../Label'
+
+describe('label', () => {
+ describe('component', () => {
+ it('should render correctly', () => {
+ const wrapper = mount(Label)
+ expect(wrapper.element.tagName).toBe('LABEL')
+ })
+
+ it('should render with custom tag', () => {
+ const wrapper = mount(Label, {
+ props: {
+ as: 'div',
+ },
+ })
+ expect(wrapper.element.tagName).toBe('DIV')
+ })
+
+ it('should pass through attrs', () => {
+ const wrapper = mount(Label, {
+ attrs: {
+ 'id': 'test-label',
+ 'data-testid': 'label',
+ },
+ })
+ expect(wrapper.attributes('id')).toBe('test-label')
+ expect(wrapper.attributes('data-testid')).toBe('label')
+ })
+
+ it('should emit mousedown event', async () => {
+ const wrapper = mount(Label)
+ await wrapper.trigger('mousedown')
+ expect(wrapper.emitted('mousedown')).toBeTruthy()
+ })
+
+ it('should handle slot content updates', async () => {
+ const wrapper = mount({
+ components: { Label },
+ data() {
+ return {
+ content: 'Initial Label',
+ }
+ },
+ template: ``,
+ })
+ expect(wrapper.text()).toBe('Initial Label')
+ await wrapper.setData({ content: 'Updated Label' })
+ expect(wrapper.text()).toBe('Updated Label')
+ })
+
+ it('should handle dynamic class changes', async () => {
+ const wrapper = mount(Label, {
+ attrs: {
+ class: 'initial-class',
+ },
+ })
+ expect(wrapper.classes()).toContain('initial-class')
+ await wrapper.setProps({ class: 'updated-class' })
+ expect(wrapper.classes()).toContain('updated-class')
+ })
+
+ it('should handle multiple mousedown events', async () => {
+ const wrapper = mount(Label)
+ await wrapper.trigger('mousedown')
+ await wrapper.trigger('mousedown')
+ expect(wrapper.emitted('mousedown')).toHaveLength(2)
+ })
+ })
+
+ describe('useLabel', () => {
+ it('should prevent text selection on double click', () => {
+ const mockProps = {
+ onMousedown: vi.fn(),
+ }
+ const { attrs } = useLabel(mockProps)
+ const div = document.createElement('div')
+ const event = new MouseEvent('mousedown', {
+ detail: 2,
+ bubbles: true,
+ cancelable: true,
+ })
+ Object.defineProperty(event, 'target', { value: div })
+ event.preventDefault = vi.fn()
+
+ const resolvedAttrs = attrs([])
+ if (resolvedAttrs.onMousedown) {
+ resolvedAttrs.onMousedown(event)
+ }
+
+ expect(event.preventDefault).toHaveBeenCalled()
+ expect(mockProps.onMousedown).toHaveBeenCalledWith(event)
+ })
+
+ it('should not prevent mousedown on form controls', () => {
+ const mockProps = {
+ onMousedown: vi.fn(),
+ }
+ const { attrs } = useLabel(mockProps)
+ const button = document.createElement('button')
+ const event = new MouseEvent('mousedown')
+ Object.defineProperty(event, 'target', { value: button })
+
+ const resolvedAttrs = attrs([])
+ if (resolvedAttrs.onMousedown) {
+ resolvedAttrs.onMousedown(event)
+ }
+
+ expect(mockProps.onMousedown).not.toHaveBeenCalled()
+ })
+
+ it('should merge extra attrs', () => {
+ const { attrs } = useLabel()
+ const extraAttrs = [{
+ class: 'test-class',
+ id: 'test-id',
+ }]
+
+ const resolvedAttrs = attrs(extraAttrs)
+
+ expect(resolvedAttrs.class).toBe('test-class')
+ expect(resolvedAttrs.id).toBe('test-id')
+ expect(resolvedAttrs.onMousedown).toBeDefined()
+ })
+ })
+
+ describe('form control interactions', () => {
+ it('should trigger associated input focus on click', async () => {
+ // Mount using @testing-library/vue
+ render({
+ components: { Label },
+ template: `
+
+
+
+
+ `,
+ })
+
+ const input = screen.getByTestId('input')
+ const label = screen.getByText('Click me')
+
+ // Mock focus method
+ const focusSpy = vi.spyOn(input, 'focus')
+
+ // Simulate the native behavior
+ label.click()
+ input.focus()
+
+ expect(focusSpy).toHaveBeenCalled()
+ focusSpy.mockRestore()
+ })
+
+ it('should work with nested form controls', async () => {
+ const wrapper = mount(Label, {
+ slots: {
+ default: '',
+ },
+ })
+
+ const checkbox = wrapper.find('input')
+ await wrapper.trigger('click')
+ expect(checkbox.element.checked).toBe(true)
+ })
+ })
+
+ describe('accessibility', () => {
+ it('should have no accessibility violations', async () => {
+ const wrapper = mount(Label, {
+ slots: {
+ default: 'Test Label',
+ },
+ })
+
+ const results = await axe(wrapper.element)
+ expect(results).toHaveNoViolations()
+ })
+
+ it('should have no accessibility violations with custom tag', async () => {
+ const wrapper = mount(Label, {
+ props: {
+ as: 'div',
+ },
+ slots: {
+ default: 'Test Label',
+ },
+ })
+
+ const results = await axe(wrapper.element)
+ expect(results).toHaveNoViolations()
+ })
+
+ it('should have no violations when associated with form control', async () => {
+ const wrapper = mount({
+ template: `
+
+
+
+
+ `,
+ components: { Label },
+ })
+
+ const results = await axe(wrapper.element)
+ expect(results).toHaveNoViolations()
+ })
+
+ it('should maintain accessibility when content changes dynamically', async () => {
+ const wrapper = mount({
+ components: { Label },
+ data() {
+ return {
+ content: 'Initial Label',
+ }
+ },
+ template: `
+
+ `,
+ })
+
+ expect(wrapper.text()).toBe('Initial Label')
+ await wrapper.setData({ content: 'Updated Label' })
+ const results = await axe(wrapper.element)
+ expect(results).toHaveNoViolations()
+ })
+
+ it('should be keyboard navigable', () => {
+ const wrapper = mount(Label, {
+ attrs: {
+ tabindex: '0',
+ },
+ })
+ expect(wrapper.attributes('tabindex')).toBe('0')
+ })
+
+ it('should support aria-labelledby', async () => {
+ const wrapper = mount({
+ template: `
+
+
+
Labeled content
+