From 68c805e4fd37d481d48e53dfba800d9bc0af8390 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Apr 2023 18:33:18 +0200
Subject: [PATCH] implement it in form

---
 src/use-cases/task/components/NewTaskForm.vue |  9 ++++---
 .../task/components/StepInput.test.ts         | 27 +++++++++++++++++--
 src/use-cases/task/components/StepInput.vue   |  2 +-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/use-cases/task/components/NewTaskForm.vue b/src/use-cases/task/components/NewTaskForm.vue
index f10ff3d..09b28aa 100644
--- a/src/use-cases/task/components/NewTaskForm.vue
+++ b/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 type { Step } from '../models/step'
+import { ref } from 'vue'
+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>
diff --git a/src/use-cases/task/components/StepInput.test.ts b/src/use-cases/task/components/StepInput.test.ts
index 1ce9b31..8d95b61 100644
--- a/src/use-cases/task/components/StepInput.test.ts
+++ b/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)
   })
 })
diff --git a/src/use-cases/task/components/StepInput.vue b/src/use-cases/task/components/StepInput.vue
index 57c18ad..f259dbe 100644
--- a/src/use-cases/task/components/StepInput.vue
+++ b/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>