From 2c2bf0136a92b7ca49e7df952a44d9000a07fa8b Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Sun, 13 Aug 2023 17:33:26 +0530
Subject: feat: test case for todo-app with adding new items

---
 tests/todo-app.spec.ts | 47 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

(limited to 'tests/todo-app.spec.ts')

diff --git a/tests/todo-app.spec.ts b/tests/todo-app.spec.ts
index 2bdcdee..7fe7d2f 100644
--- a/tests/todo-app.spec.ts
+++ b/tests/todo-app.spec.ts
@@ -4,27 +4,50 @@ import { delay, loadHTMLFixture } from './util'
 
 describe('todo-app example', () => {
   describe('Add new task', () => {
+    let $textInput: HTMLInputElement
+    let $addBtn: HTMLButtonElement
+
+    let $taskItems: Array<HTMLElement> = []
+
+    const submit = async (text: string) => {
+      $textInput.value = text
+      $addBtn.click()
+
+      await delay(100)
+      $taskItems = [
+        ...document.querySelectorAll<HTMLElement>(
+          '[data-instance="task-item"]',
+        ),
+      ]
+    }
+
     beforeAll(async () => {
       await loadHTMLFixture('todo-app')
-    })
 
-    it('should add new unchecked task', async () => {
-      const $textInput = getByTestId<HTMLInputElement>(
+      $textInput = getByTestId<HTMLInputElement>(
         document.body,
         'add-task-input',
       )
-      $textInput.value = 'Buy Milk'
+      $addBtn = getByTestId<HTMLButtonElement>(document.body, 'add-task-btn')
+    })
 
-      const $addBtn = getByTestId<HTMLButtonElement>(
-        document.body,
-        'add-task-btn',
+    it('should add new unchecked task', async () => {
+      // Add first item
+      await submit('Buy Milk')
+      expect($taskItems).toHaveLength(1)
+      expect(getComputedStyle($taskItems[0]).getPropertyValue('--text')).toBe(
+        'Buy Milk',
       )
-      $addBtn.click()
 
-      await delay(100)
-
-      console.log(prettyDOM(document.getElementById('task-list')!))
-      console.log('-------------------')
+      // Add the second item
+      await submit('Kill all the non-believers')
+      expect($taskItems).toHaveLength(2)
+      expect(getComputedStyle($taskItems[0]).getPropertyValue('--text')).toBe(
+        'Buy Milk',
+      )
+      expect(getComputedStyle($taskItems[1]).getPropertyValue('--text')).toBe(
+        'Kill all the non-believers',
+      )
     })
   })
 })
-- 
cgit v1.3.1