feat: adds conditionals

3 files changed, 65 insertions, 8 deletions

diff --git a/tests/eval.spec.ts b/tests/eval.spec.ts
index 2212ba4..1d8b161 100644
--- a/tests/eval.spec.ts
+++ b/tests/eval.spec.ts
@@ -26,6 +26,50 @@ describe('eval', () => {
     expect(deps.addClass).toHaveBeenCalledWith('element-id', 'class-name')
   })
 
+  it('should allow conditionals classes', async () => {
+    expect(
+      await evalExpr(
+        Expr.Call({
+          name: 'if',
+          args: [
+            Expr.Identifier('true'),
+            Expr.Identifier('yes'),
+            Expr.Identifier('no'),
+          ],
+        }),
+        deps,
+      ),
+    ).toBe('yes')
+
+    expect(
+      await evalExpr(
+        Expr.Call({
+          name: 'if',
+          args: [
+            Expr.Identifier('false'),
+            Expr.Identifier('yes'),
+            Expr.Identifier('no'),
+          ],
+        }),
+        deps,
+      ),
+    ).toBe('no')
+
+    expect(
+      await evalExpr(
+        Expr.Call({
+          name: 'if',
+          args: [
+            Expr.Identifier('0'),
+            Expr.Identifier('yes'),
+            Expr.Identifier('no'),
+          ],
+        }),
+        deps,
+      ),
+    ).toBe('no')
+  })
+
   it('should remove classes', async () => {
     await evalExpr(
       Expr.Call({
diff --git a/tests/fixtures/todo-app/index.html b/tests/fixtures/todo-app/index.html
index bbf0963..4dea1b4 100644
--- a/tests/fixtures/todo-app/index.html
+++ b/tests/fixtures/todo-app/index.html
@@ -31,10 +31,10 @@
 
       [data-instance='task-item'] {
         --text: default text;
-        --checked: '0';
+        --checked: false;
 
         --cssx-on-mount: set-attr('data-testid', attr(id));
-        --cssx-on-click: update(--checked, '1');
+        --cssx-on-click: update(--checked, if(var(--checked), false, true));
       }
       [data-instance='task-item']::after {
         content: var(--text);
diff --git a/tests/todo-app.spec.ts b/tests/todo-app.spec.ts
index 6595bbf..624efb9 100644
--- a/tests/todo-app.spec.ts
+++ b/tests/todo-app.spec.ts
@@ -1,4 +1,4 @@
-import { getByTestId, prettyDOM } from '@testing-library/dom'
+import { getByTestId } from '@testing-library/dom'
 import '@testing-library/jest-dom'
 import { delay, loadHTMLFixture } from './util'
 
@@ -13,7 +13,7 @@ describe('todo-app example', () => {
       $textInput.value = text
       $addBtn.click()
 
-      await delay(100)
+      await delay(10)
       $taskItems = [
         ...document.querySelectorAll<HTMLElement>(
           '[data-instance="task-item"]',
@@ -50,18 +50,31 @@ describe('todo-app example', () => {
       )
     })
 
-    // TODO: Add toggle state after implementing conditionals
     it('should check item when clicked', async () => {
       expect(
         getComputedStyle($taskItems[0]).getPropertyValue('--checked'),
-      ).toBe(`'0'`)
+      ).toBe(`false`)
 
       $taskItems[0].click()
-      await delay(100)
+      await delay(10)
 
       expect(
         getComputedStyle($taskItems[0]).getPropertyValue('--checked'),
-      ).toBe(`"1"`) // TODO: look into the quotes issue
+      ).toBe(`"true"`) // TODO: look into the quotes issue
+
+      $taskItems[0].click()
+      await delay(10)
+
+      expect(
+        getComputedStyle($taskItems[0]).getPropertyValue('--checked'),
+      ).toBe(`"false"`) // TODO: look into the quotes issue
+
+      $taskItems[0].click()
+      await delay(10)
+
+      expect(
+        getComputedStyle($taskItems[0]).getPropertyValue('--checked'),
+      ).toBe(`"true"`) // TODO: look into the quotes issue
     })
   })
 })