added some ui tests still wip

src/components/EntryForm.test.ts

@@ -2,20 +2,104 @@ import { faker } from "@faker-js/faker";
 import { describe, expect, it } from "vitest";
 import { mount } from '@vue/test-utils'
 import EntryForm from './EntryForm.vue'
+import { Entry } from "@/data/entries";
 
 describe('Entry Form tests', () => {
 
+	function getFormFields(component: ReturnType<typeof mount>) {
+		return {
+			nameField: component.get('input'),
+			textField: component.get('textarea')
+		}
+	}
+
+	function getSampleValues() {
+		return {
+			name: faker.word.noun(),
+			text: faker.lorem.paragraph()
+		}
+	}
+
+	function getAdditionalElements(component: ReturnType<typeof mount>, ...ids: string[]) {
+		const arr = []
+
+		for (const id of ids) {
+			arr.push(component.find(id))
+		}
+
+		return arr;
+	}
+
 	it('takes in values for name and title and displays them in the respected fields', () => {
-		const name = faker.word.noun()
+		const { name, text } = getSampleValues()
-		const text = faker.lorem.paragraph()
+
 		const component = mount(EntryForm, {
 			props: {
-				name, text, action: 'edit'
+				action: 'edit', inputEntry: <Entry>{
+					name, text
+				}
 			}
 		})
 
-		const nameField = component.find('input')
+		const { nameField, textField } = getFormFields(component)
-		const textField = component.find('textarea')
+		expect(nameField.element.value).toBe(name)
-		console.log(nameField.element.classList, textField.text())
+		expect(textField.element.value).toBe(text)
 	})
+
+	it('takes no entry data and displays empty fields', () => {
+		const component = mount(EntryForm, {
+			props: {
+				action: 'edit'
+			}
+		})
+
+		const { nameField, textField } = getFormFields(component)
+		expect(nameField.element.value).toBe('')
+		expect(textField.element.value).toBe('')
+	})
+
+
+	it('takes no action and displays create on the Button', () => {
+		const component = mount(EntryForm)
+		const button = component.find('button')
+		expect(button.text()).toBe('Create')
+	})
+
+	it('takes create action and displays Create on the Button', () => {
+		const component = mount(EntryForm, { props: { action: 'create' } })
+		const button = component.find('button')
+		expect(button.text()).toBe('Create')
+	})
+
+	it('takes edit action and displays Edit on the Button', () => {
+		const component = mount(EntryForm, { props: { action: 'edit' } })
+		const button = component.find('button')
+		expect(button.text()).toBe('Edit')
+	})
+
+	it('displays nothing when the form is valid and processed', () => {
+		const { name, text } = getSampleValues()
+		const component = mount(EntryForm)
+		const { nameField, textField } = getFormFields(component)
+		const [button, errorSpan] = getAdditionalElements(component, 'button', 'span')
+
+		nameField.element.value = name
+		textField.element.value = text
+
+		button.trigger('click')
+		expect(errorSpan.text()).toBe('')
+	})
+
+	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')
+
+		nameField.element.value = name
+
+		button.trigger('click')
+		expect(errorSpan.text()).toBe('name is required')
+	})
+
 })

src/components/EntryForm.vue

@@ -4,22 +4,25 @@ import { Input } from '@/components/ui/input';
 import { Button } from './ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Entry } from '@/data/entries';
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
 
 const emit = defineEmits<{
 	submit: [value: CreateEntrySchema]
 }>()
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
-	action: 'create' | 'edit'
+	action?: 'create' | 'edit'
 	inputEntry?: Entry | undefined
-}>()
+}>(), {
+	action: 'create'
+})
 
 const nameField = ref(props.inputEntry ? props.inputEntry.name : '')
 const textField = ref(props.inputEntry ? props.inputEntry.text : '')
+const errorMessage: Ref<string | undefined> = ref(undefined)
 
 const createEntrySchema = z.object({
-	name: z.string(),
+	name: z.string({required_error: 'name is required'}),
 	text: z.string().optional()
 })
 
@@ -34,6 +37,7 @@ function submit() {
 
 	if (result.success) {
 		emit('submit', result.data)
+	} else {
 	}
 }
 
@@ -42,6 +46,8 @@ function submit() {
 
 <template>
 	<form class="flex gap-3 flex-col">
+		<span>{{ errorMessage }}</span>
+
 		<Input placeholder="Name" v-model:model-value="nameField" />
 		<Textarea placeholder="Text" v-model:model-value="textField" />
 		<Button class="w-full" v-if="props.action === 'create'" @click="submit()">Create</Button>