implement it in form

src/use-cases/task/components/NewTaskForm.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { createUuid } from '@/shared/create-uuid'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
-import type { Step } from '../models/step'
+import { createStepFixture } from '../models/step.fixture'
 import { Task } from '../models/task'
 import StepInput from './StepInput.vue'
 
 const id = createUuid()
 
 const title = ref('')
-const steps: Step[] = reactive([])
+const steps = ref([createStepFixture(), createStepFixture()])
 
 const saveTask = () => {
   const task = new Task(id, title.value)
-  task.addSteps(...steps)
+  task.addSteps(...steps.value)
 
   if (Task.validate(task)) {
     return true
@@ -31,6 +31,7 @@ const saveTask = () => {
         <input type="text" id="title" v-model="title" />
       </div>
       <StepInput v-model="steps" />
+      {{ steps }}
     </form>
   </div>
 </template>

src/use-cases/task/components/StepInput.test.ts

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import { createStepFixture } from '../models/step.fixture'
 import StepInput from './StepInput.vue'
 
-describe('Step input', () => {
+describe('Step input textarea', () => {
   it('displays a text area with steps inside', () => {
     const wrapper = mount(StepInput, {
       props: {
@@ -10,6 +11,28 @@ describe('Step input', () => {
       }
     })
 
-    expect(wrapper.text()).toContain('textarea')
+    expect(wrapper.get('textarea')).toBeDefined()
+  })
+
+  it('displays the steps in the textarea', () => {
+    const steps = [
+      createStepFixture(),
+      createStepFixture(),
+      createStepFixture()
+    ]
+
+    const stepsInTextarea = steps
+      .map((s) => `- ${s.title} | ${s.estimation}`)
+      .join('\n')
+
+    const wrapper = mount(StepInput, {
+      props: {
+        modelValue: steps
+      }
+    })
+
+    const textarea = wrapper.get('textarea')
+
+    expect(textarea.element.value).toEqual(stepsInTextarea)
   })
 })

src/use-cases/task/components/StepInput.vue

@@ -30,7 +30,7 @@ const stepsTextarea = computed({
 
 <template>
   <div class="step-input">
-    <textarea v-model="stepsTextarea"></textarea>
+    <textarea v-model="stepsTextarea" cols="40" rows="20"></textarea>
     <div>beautiful data</div>
   </div>
 </template>