Skip to content
This repository was archived by the owner on Apr 9, 2025. It is now read-only.

Commit 429ecf4

Browse files
dbssmandbssman
authored
Merge pull request #8 from dbssman/feature/7-structure-and-cleanup-tests
Feature/7 structure and cleanup tests
2 parents 6d5e157 + 14b0f09 commit 429ecf4

19 files changed

+224
-82
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8" />
66
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + Vue + TS</title>
8+
<title>Playground | Vue Form Handler</title>
99
</head>
1010

1111
<body>

‎test/FormHandler.test.ts renamed to ‎src/test/component.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import FormHandler from '../src/FormHandler'
2-
import {mount} from '@vue/test-utils'
1+
import FormHandler from '../FormHandler'
2+
import { mount } from '@vue/test-utils'
33
import { expect, it, describe } from "vitest"
44

55
describe('FormHandler component testing', () => {

‎test/useFormHandler.test.ts renamed to ‎src/test/handler.test.ts

Lines changed: 1 addition & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import useFormHandler, { initialState } from '../src/useFormHandler';
1+
import useFormHandler, { initialState } from '../useFormHandler';
22
import { expect, it, describe } from "vitest"
33

44
const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
@@ -108,77 +108,4 @@ describe('Form handler testing', () => {
108108
await setValue('field2', 'another thing')
109109
expect(modifiedValues()).toStrictEqual({ field2: 'another thing' })
110110
})
111-
})
112-
113-
describe('Register function testing', () => {
114-
it('Registering a field', () => {
115-
const { values, register } = useFormHandler();
116-
const field = register('field')
117-
expect(field.name).toBe('field')
118-
expect(field.errors).toStrictEqual([])
119-
expect(field.onBlur).toBeDefined()
120-
expect(field.isDirty).toBeUndefined()
121-
expect(field.isTouched).toBeUndefined()
122-
expect(field.onClear).toBeDefined()
123-
expect(field.onChange).toBeDefined()
124-
expect(field.modelValue).toBe(null)
125-
expect(field['onUpdate:modelValue']).toBeDefined()
126-
expect(values.field).toBe(null)
127-
})
128-
it('Specified native field should have native handlers', () => {
129-
const { register } = useFormHandler();
130-
const field = register('field', { native: true })
131-
expect(field.ref).toBeDefined()
132-
expect(field.onChange).toBeDefined()
133-
})
134-
it('Specified custom field shouldn\'t have native handlers', () => {
135-
const { register } = useFormHandler();
136-
const field = register('field', { native: false })
137-
expect(field.onChange).toBeUndefined()
138-
expect(field.modelValue).toBeDefined()
139-
expect(field['onUpdate:modelValue']).toBeDefined()
140-
})
141-
it('Input registered with details receives dirty and touched states', () => {
142-
const { register } = useFormHandler();
143-
const field = register('field', { withDetails: true })
144-
expect(field.isDirty).toBeDefined()
145-
expect(field.isTouched).toBeDefined()
146-
})
147-
it('Clearable inputs should have a bound clear handler', () => {
148-
const { register } = useFormHandler();
149-
const field = register('field', { clearable: true })
150-
expect(field.onClear).toBeDefined()
151-
})
152-
it('Registering a field with default value', () => {
153-
const { values, register } = useFormHandler();
154-
register('field', { defaultValue: 'something' })
155-
expect(values.field).toBe('something')
156-
})
157-
it('Registered validations work on update via handler', async () => {
158-
const { values, register, formState } = useFormHandler();
159-
const field = register('field', {
160-
validations: {
161-
error: (val) => val !== 'error' || 'Error with your field'
162-
}
163-
})
164-
if (field['onUpdate:modelValue']) {
165-
field['onUpdate:modelValue']('error')
166-
await sleep()
167-
expect(values.field).toBe('error')
168-
expect(formState.isValid).toBeFalsy()
169-
}
170-
})
171-
it('Registered validations work on update via setter', async () => {
172-
const { values, register, formState, setValue, triggerValidation } = useFormHandler();
173-
register('field', {
174-
validations: {
175-
error: (val) => val !== 'error' || 'Error with your field'
176-
}
177-
})
178-
await setValue('field', 'error')
179-
await triggerValidation('field')
180-
expect(values.field).toBe('error')
181-
await sleep()
182-
expect(formState.isValid).toBeFalsy()
183-
})
184111
})

‎src/test/register.test.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { describe, it, expect } from 'vitest'
2+
import useFormHandler from '../useFormHandler'
3+
4+
const sleep = () => new Promise((resolve) => setTimeout(() => resolve(true), 50))
5+
6+
describe('Register function testing', () => {
7+
it('Registering a field', () => {
8+
const { values, register } = useFormHandler();
9+
const field = register('field')
10+
expect(field.name).toBe('field')
11+
expect(field.errors).toStrictEqual([])
12+
expect(field.onBlur).toBeDefined()
13+
expect(field.isDirty).toBeUndefined()
14+
expect(field.isTouched).toBeUndefined()
15+
expect(field.onClear).toBeDefined()
16+
expect(field.onChange).toBeDefined()
17+
expect(field.modelValue).toBe(null)
18+
expect(field['onUpdate:modelValue']).toBeDefined()
19+
expect(values.field).toBe(null)
20+
})
21+
it('Specified native field should have native handlers', () => {
22+
const { register } = useFormHandler();
23+
const field = register('field', { native: true })
24+
expect(field.ref).toBeDefined()
25+
expect(field.onChange).toBeDefined()
26+
})
27+
it('Specified custom field shouldn\'t have native handlers', () => {
28+
const { register } = useFormHandler();
29+
const field = register('field', { native: false })
30+
expect(field.onChange).toBeUndefined()
31+
expect(field.modelValue).toBeDefined()
32+
expect(field['onUpdate:modelValue']).toBeDefined()
33+
})
34+
it('Input registered with details receives dirty and touched states', () => {
35+
const { register } = useFormHandler();
36+
const field = register('field', { withDetails: true })
37+
expect(field.isDirty).toBeDefined()
38+
expect(field.isTouched).toBeDefined()
39+
})
40+
it('Clearable inputs should have a bound clear handler', () => {
41+
const { register } = useFormHandler();
42+
const field = register('field', { clearable: true })
43+
expect(field.onClear).toBeDefined()
44+
})
45+
it('Registering a field with default value', () => {
46+
const { values, register } = useFormHandler();
47+
register('field', { defaultValue: 'something' })
48+
expect(values.field).toBe('something')
49+
})
50+
it('Registered validations work on update via handler', async () => {
51+
const { values, register, formState } = useFormHandler();
52+
const field = register('field', {
53+
validations: {
54+
error: (val) => val !== 'error' || 'Error with your field'
55+
}
56+
})
57+
if (field['onUpdate:modelValue']) {
58+
field['onUpdate:modelValue']('error')
59+
await sleep()
60+
expect(values.field).toBe('error')
61+
expect(formState.isValid).toBeFalsy()
62+
}
63+
})
64+
it('Registered validations work on update via setter', async () => {
65+
const { values, register, formState, setValue, triggerValidation } = useFormHandler();
66+
register('field', {
67+
validations: {
68+
error: (val) => val !== 'error' || 'Error with your field'
69+
}
70+
})
71+
await setValue('field', 'error')
72+
await triggerValidation('field')
73+
expect(values.field).toBe('error')
74+
await sleep()
75+
expect(formState.isValid).toBeFalsy()
76+
})
77+
})

‎src/utils/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ export { default as isCheckboxInput } from './isCheckboxInput'
22
export { default as isNativeControl } from './isNativeControl'
33
export { default as isRadioInput } from './isRadioInput'
44
export { default as isMultipleSelect } from './isMultipleSelect'
5-
export { default as isDefined } from './isDefined'
65
export { default as max } from './max'
76
export { default as maxLength } from './maxLength'
87
export { default as min } from './min'

‎src/utils/isDefined.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/utils/isMultipleSelect.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export default (element: HTMLInputElement) =>
1+
export default (element: HTMLSelectElement) =>
22
element.type === `select-multiple`;

‎src/utils/isNativeControl.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export default (element: HTMLElement) =>
2-
['input', 'select', 'textarea'].includes(element.nodeName.toLowerCase())
2+
['input', 'select', 'textarea'].includes(element.nodeName?.toLowerCase())

‎src/utils/test/isCheckboxInput.test.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { describe, it, expect } from 'vitest'
2+
import isCheckboxInput from '../isCheckboxInput'
3+
4+
describe('isCheckboxInput', () => {
5+
it('should return true for checkbox inputs', () => {
6+
expect(isCheckboxInput({ type: 'checkbox' } as HTMLInputElement)).toBe(true)
7+
})
8+
9+
it('should return false for non-checkbox inputs', () => {
10+
expect(isCheckboxInput({ type: 'text' } as HTMLInputElement)).toBe(false)
11+
})
12+
})

‎src/utils/test/isMultipleSelect.test.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { describe, it, expect } from 'vitest'
2+
import isMultipleSelect from '../isMultipleSelect'
3+
4+
describe('isMultipleSelect', () => {
5+
it('should return true for multiple select', () => {
6+
expect(isMultipleSelect({ type: 'select-multiple' } as HTMLSelectElement)).toBe(true)
7+
})
8+
9+
it('should return false for non-multiple select', () => {
10+
expect(isMultipleSelect({ type: 'custom' } as HTMLSelectElement)).toBe(false)
11+
})
12+
});

‎src/utils/test/isNativeControl.test.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { describe, it, expect } from 'vitest'
2+
import isNativeControl from '../isNativeControl'
3+
4+
describe('isNativeControl', () => {
5+
it('should return true for input control', () => {
6+
const input = document.createElement('input')
7+
expect(isNativeControl(input)).toBe(true)
8+
})
9+
10+
it('should return true for select control', () => {
11+
const select = document.createElement('select')
12+
expect(isNativeControl(select)).toBe(true)
13+
})
14+
15+
it('should return true for textarea control', () => {
16+
const textarea = document.createElement('textarea')
17+
expect(isNativeControl(textarea)).toBe(true)
18+
})
19+
20+
it('should return false for non-native controls', () => {
21+
const div = document.createElement('div')
22+
expect(isNativeControl(div)).toBe(false)
23+
})
24+
})

‎src/utils/test/isRadioInput.test.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { describe, it, expect } from 'vitest'
2+
import isRadioInput from '../isRadioInput'
3+
4+
describe('isRadioInput', () => {
5+
it('should return true for radio inputs', () => {
6+
expect(isRadioInput({ type: 'radio' } as HTMLInputElement)).toBe(true)
7+
})
8+
9+
it('should return false for non-radio inputs', () => {
10+
expect(isRadioInput({ type: 'text' } as HTMLInputElement)).toBe(false)
11+
})
12+
})

‎src/utils/test/max.test.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { describe, expect, it } from 'vitest'
2+
import max from '../max'
3+
4+
describe('max', () => {
5+
it('should return a function that returns a message if the value is greater than the max', () => {
6+
const max10 = max(10, 'This field must be less than 10')
7+
expect(max10(15)).toBe('This field must be less than 10')
8+
})
9+
it('should return a function that returns true if the value is less than the max', () => {
10+
const max10 = max(10, 'This field must be less than 10')
11+
expect(max10(5)).toBe(true)
12+
})
13+
});
14+

‎src/utils/test/maxLength.test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import maxLength from '../maxLength'
3+
4+
describe('maxLength', () => {
5+
it('should return a function that returns a message if the value is greater than the max length', () => {
6+
const maxLength10 = maxLength(10, 'This field must be less than 10 characters')
7+
expect(maxLength10('12345678901')).toBe('This field must be less than 10 characters')
8+
})
9+
it('should return a function that returns true if the value is less than or equal to the max length', () => {
10+
const maxLength10 = maxLength(10, 'This field must be less than 10 characters')
11+
expect(maxLength10('1234567890')).toBe(true)
12+
})
13+
})

‎src/utils/test/min.test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import min from '../min'
3+
4+
describe('min', () => {
5+
it('should return a function that returns a message if the value is less than the min', () => {
6+
const min10 = min(10, 'This field must be greater than 10')
7+
expect(min10(5)).toBe('This field must be greater than 10')
8+
})
9+
it('should return a function that returns true if the value is greater than the min', () => {
10+
const min10 = min(10, 'This field must be greater than 10')
11+
expect(min10(15)).toBe(true)
12+
})
13+
})

‎src/utils/test/minLength.test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import minLength from '../minLength'
3+
4+
describe('minLength', () => {
5+
it('should return a function that returns a message if the value is less than the min length', () => {
6+
const minLength10 = minLength(10, 'This field must be greater than 10 characters')
7+
expect(minLength10('123456789')).toBe('This field must be greater than 10 characters')
8+
})
9+
it('should return a function that returns true if the value is greater than or equal to the min length', () => {
10+
const minLength10 = minLength(10, 'This field must be greater than 10 characters')
11+
expect(minLength10('1234567890')).toBe(true)
12+
})
13+
})

‎src/utils/test/pattern.test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import pattern from '../pattern'
3+
4+
describe('pattern', () => {
5+
it('should return a function that returns a message if the value does not match the pattern', () => {
6+
const patternABC = pattern(/abc/, 'This field must match the pattern abc')
7+
expect(patternABC('123')).toBe('This field must match the pattern abc')
8+
})
9+
it('should return a function that returns true if the value matches the pattern', () => {
10+
const patternABC = pattern(/abc/, 'This field must match the pattern abc')
11+
expect(patternABC('abc')).toBe(true)
12+
})
13+
})

‎src/utils/test/required.test.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { describe, expect, it } from 'vitest'
2+
import required from '../required'
3+
4+
describe('required', () => {
5+
it('should return a function that returns a message if the value is empty', () => {
6+
const requiredMessage = required('This field is required')
7+
expect(requiredMessage('')).toBe('This field is required')
8+
})
9+
10+
it('should return a function that returns true if the value is not empty', () => {
11+
const requiredMessage = required('This field is required')
12+
expect(requiredMessage('test')).toBe(true)
13+
})
14+
})

‎vite.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/// <reference types="vitest" />
22
/// <reference types="vitest/globals" />
33
import { defineConfig } from 'vite'
4-
import vue from '@vitejs/plugin-vue'
54
import { resolve } from 'path'
5+
import vue from '@vitejs/plugin-vue'
66
import dts from 'vite-plugin-dts'
77

88
// https://vitejs.dev/config/

0 commit comments

Comments
 (0)