diff --git a/src/components/EntryForm.test.ts b/src/components/EntryForm.test.ts index 347412a..be2ae37 100644 --- a/src/components/EntryForm.test.ts +++ b/src/components/EntryForm.test.ts @@ -77,29 +77,65 @@ describe('Entry Form tests', () => { expect(button.text()).toBe('Edit') }) - it('displays nothing when the form is valid and processed', () => { + it('displays nothing when the form is valid and processed', async () => { const { name, text } = getSampleValues() const component = mount(EntryForm) const { nameField, textField } = getFormFields(component) - const [button, errorSpan] = getAdditionalElements(component, 'button', 'span') + const [button] = getAdditionalElements(component, 'button') + + await nameField.setValue(name) + await textField.setValue(text) + + await button.trigger('click') + const errorSpans = component.findAll('[data-test="error-msg"]') + + expect(errorSpans.length).toBe(0) + }) + + it('displays that the name is missing when no name is entered', async () => { + const { text } = getSampleValues() + const component = mount(EntryForm) + const { textField } = getFormFields(component) + const [button] = getAdditionalElements(component, 'button') - nameField.element.value = name textField.element.value = text - button.trigger('click') - expect(errorSpan.text()).toBe('') + await button.trigger('click') + const errorSpans = component.findAll('[data-test="error-msg"]') + + expect(errorSpans.length).toBe(1) + expect(errorSpans[0].text()).toBe('* name is required') }) - it('displays that the name is missing when no name is entered', () => { - const { name } = getSampleValues() - const component = mount(EntryForm) - const { nameField } = getFormFields(component) - const [button, errorSpan] = getAdditionalElements(component, 'button', 'span') + it('displays error that the name is not unique when there is another entry in the passed entries with the same name', async () => { + const { text } = getSampleValues() + const component = mount(EntryForm, {props: {entries: [{name: 'something', text: 'something else'}]}}) + const { textField, nameField } = getFormFields(component) + const [button] = getAdditionalElements(component, 'button') - nameField.element.value = name + await textField.setValue(text) + await nameField.setValue('something') - button.trigger('click') - expect(errorSpan.text()).toBe('name is required') + await button.trigger('click') + const errorSpans = component.findAll('[data-test="error-msg"]') + + expect(errorSpans.length).toBe(1) + expect(errorSpans[0].text()).toBe('* name must be unique') }) + it('fires submit when there is no issue with the inputted data', async() => { + const { text } = getSampleValues() + const component = mount(EntryForm, {props: {entries: [{name: 'something', text: 'something else'}]}}) + const { textField, nameField } = getFormFields(component) + const [button] = getAdditionalElements(component, 'button') + + await textField.setValue(text) + await nameField.setValue('something else') + + await button.trigger('click') + const errorSpans = component.findAll('[data-test="error-msg"]') + + expect(errorSpans.length).toBe(0) + expect(component.emitted('submit')) + }) }) \ No newline at end of file diff --git a/src/components/EntryForm.vue b/src/components/EntryForm.vue index c89862d..da7f94c 100644 --- a/src/components/EntryForm.vue +++ b/src/components/EntryForm.vue @@ -13,17 +13,18 @@ const emit = defineEmits<{ const props = withDefaults(defineProps<{ action?: 'create' | 'edit' inputEntry?: Entry | undefined + entries?: Entry[] }>(), { - action: 'create' + action: 'create', }) const nameField = ref(props.inputEntry ? props.inputEntry.name : '') const textField = ref(props.inputEntry ? props.inputEntry.text : '') -const errorMessage: Ref = ref(undefined) +const issues: Ref> = ref([]) const createEntrySchema = z.object({ - name: z.string({required_error: 'name is required'}), - text: z.string().optional() + name: z.string().trim().min(1, { message: 'name is required' }), + text: z.string().trim().optional() }) export type CreateEntrySchema = z.infer @@ -35,9 +36,19 @@ function submit() { text: textField.value }) + if (result.success) { - emit('submit', result.data) + const isUnique = props.entries === undefined + || !props.entries.map(entry => entry.name).includes(result.data.name) + + if (isUnique) { + emit('submit', result.data) + return + } + + issues.value = ['name must be unique'] } else { + issues.value = result.error.issues.map(issue => issue.message) } } @@ -45,14 +56,16 @@ function submit() {