2 files changed, 82 insertions, 0 deletions
diff --git a/tests/fixtures/todo-app/index.html b/tests/fixtures/todo-app/index.html
new file mode 100644
index 0000000..66a9798
--- /dev/null
+++ b/tests/fixtures/todo-app/index.html
@@ -0,0 +1,49 @@
+<html lang="en">
+  <head>
+    <title>Task destroyer</title>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        --cssx-children: form#task-input-form #task-list;
+      }
+
+      #task-input-form {
+        --cssx-on-submit:
+          prevent-default()
+          js-eval('console.log("todo: implement add new task")')
+        ;
+
+        --cssx-children:
+          input#text-input[data-testid="add-task-input"]
+          button#create-task-btn[type="submit"][data-testid="add-task-btn"]
+        ;
+      }
+
+      #text-input {}
+      #create-task-btn {
+        --cssx-text: Submit;
+      }
+
+      #task-list {
+        --cssx-children:
+          instance(li#task-item, map(
+            --text: "hello world",
+            --checked: 0
+          ))
+          instance(li#task-item, map(
+            --text: "coolio stuff",
+            --checked: 0
+          ))
+        ;
+      }
+
+      [data-instance="task-item"] {
+        --text: "default text";
+        --checked: 0;
+
+        --cssx-text: var(--text);
+      }
+    </style>
+  </head>
+  <body></body>
+</html>
diff --git a/tests/todo-app.spec.ts b/tests/todo-app.spec.ts
new file mode 100644
index 0000000..1e0cd72
--- /dev/null
+++ b/tests/todo-app.spec.ts
@@ -0,0 +1,33 @@
+import { getByTestId, prettyDOM } from '@testing-library/dom'
+import '@testing-library/jest-dom'
+import { delay, loadHTMLFixture } from './util'
+
+describe('todo-app example', () => {
+  describe('Add new task', () => {
+    beforeAll(async () => {
+      await loadHTMLFixture('todo-app')
+    })
+
+    it('should add new unchecked task', async () => {
+      const $textInput = getByTestId<HTMLInputElement>(
+        document.body,
+        'add-task-input',
+      )
+      $textInput.value = 'Buy Milk'
+
+      const $addBtn = getByTestId<HTMLButtonElement>(
+        document.body,
+        'add-task-btn',
+      )
+      $addBtn.click()
+
+      await delay(100)
+
+      console.log(prettyDOM(document.body))
+      console.log()
+      console.log()
+      console.log()
+      console.log()
+    })
+  })
+})