feat: test case for todo-app with adding new items

2 files changed, 40 insertions, 18 deletions

diff --git a/tests/fixtures/todo-app/index.html b/tests/fixtures/todo-app/index.html
index 55996f3..25ccde7 100644
--- a/tests/fixtures/todo-app/index.html
+++ b/tests/fixtures/todo-app/index.html
@@ -11,9 +11,7 @@
         --cssx-on-submit:
           prevent-default()
           add-children(task-list,
-            instance(li#task-item, map(
-              --text: "Hello world",
-            ))
+            instance(li#task-item, map(--text: attr(text-input, 'value')))
           )
         ;
 
@@ -28,13 +26,14 @@
         --cssx-text: "Submit";
       }
 
-      #task-list { }
-
       [data-instance="task-item"] {
         --text: default text;
         --checked: 0;
 
-        --cssx-text: var(--text);
+        --cssx-on-mount: set-attr('data-testid', attr(id));
+      }
+      [data-instance="task-item"]::after {
+        content: var(--text);
       }
     </style>
   </head>
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',
+      )
     })
   })
 })