diff options
Diffstat (limited to '')
| -rw-r--r-- | tests/fixtures/todo-app/index.html | 26 | ||||
| -rw-r--r-- | tests/todo-app.spec.ts | 14 |
2 files changed, 29 insertions, 11 deletions
diff --git a/tests/fixtures/todo-app/index.html b/tests/fixtures/todo-app/index.html index 25ccde7..bbf0963 100644 --- a/tests/fixtures/todo-app/index.html +++ b/tests/fixtures/todo-app/index.html @@ -8,31 +8,35 @@ } #task-input-form { + /* prettier-ignore */ --cssx-on-submit: prevent-default() - add-children(task-list, - instance(li#task-item, map(--text: attr(text-input, 'value'))) - ) - ; + add-children( + task-list, + instance(div#task-item, map(--text: attr(text-input, 'value'))) + ); + /* prettier-ignore */ --cssx-children: - input#text-input[data-testid="add-task-input"] - button#create-task-btn[type="submit"][data-testid="add-task-btn"] + input#text-input[data-testid=add-task-input] + button#create-task-btn[type=submit][data-testid=add-task-btn] ; } - #text-input {} + #text-input { + } #create-task-btn { - --cssx-text: "Submit"; + --cssx-text: 'Submit'; } - [data-instance="task-item"] { + [data-instance='task-item'] { --text: default text; - --checked: 0; + --checked: '0'; --cssx-on-mount: set-attr('data-testid', attr(id)); + --cssx-on-click: update(--checked, '1'); } - [data-instance="task-item"]::after { + [data-instance='task-item']::after { content: var(--text); } </style> diff --git a/tests/todo-app.spec.ts b/tests/todo-app.spec.ts index 7fe7d2f..6595bbf 100644 --- a/tests/todo-app.spec.ts +++ b/tests/todo-app.spec.ts @@ -49,5 +49,19 @@ describe('todo-app example', () => { 'Kill all the non-believers', ) }) + + // TODO: Add toggle state after implementing conditionals + it('should check item when clicked', async () => { + expect( + getComputedStyle($taskItems[0]).getPropertyValue('--checked'), + ).toBe(`'0'`) + + $taskItems[0].click() + await delay(100) + + expect( + getComputedStyle($taskItems[0]).getPropertyValue('--checked'), + ).toBe(`"1"`) // TODO: look into the quotes issue + }) }) }) |