feat: allows set-attr on other elements + adds attr function

2 files changed, 32 insertions, 17 deletions

diff --git a/tests/fixtures/signup/index.html b/tests/fixtures/signup/index.html
index df69508..690e52c 100644
--- a/tests/fixtures/signup/index.html
+++ b/tests/fixtures/signup/index.html
@@ -11,8 +11,13 @@
         content: 'Show form';
       }
       #show-form-btn {
-        --cssx-on-click: add-class(signup-form, 'visible')
-          add-class(show-form-btn, 'active');
+        /* prettier-ignore */
+        --cssx-on-click:
+          add-class(signup-form, 'visible')
+          add-class(show-form-btn, 'hidden');
+      }
+      #show-form-btn.hidden {
+        display: none;
       }
 
       #signup-form {
@@ -20,22 +25,32 @@
 
         --cssx-children: input#email input#password button#submit-btn;
 
-        --cssx-on-submit: prevent-default() add-class(signup-form, 'submitting')
-          delay(0.2s) request('http://example.com/submit/api', POST)
-          remove-class(signup-form, 'submitting')
-          add-class(signup-form, 'submitted');
+        /* prettier-ignore */
+        --cssx-on-submit: prevent-default()
+          set-attr(submit-btn, 'disabled', 'disabled')       /* disable submit button */
+          add-class(signup-form, 'submitting')               /* enable state "submitting" */
+          delay(0.2s)                                        /* fake delay */
+          request('http://example.com/submit/api', POST)     /* post form data to api */
+          remove-class(signup-form, 'submitting')            /* disable state "submitting" */
+          set-attr(submit-btn, 'disabled', '')               /* re-enable submit button */
+          add-class(signup-form, 'submitted')                /* show user that the form is submitted */
+        ;
       }
       #signup-form.visible {
         display: block;
       }
 
       #email {
-        --cssx-on-mount: set-attr('name', 'email')
-          set-attr('data-testid', 'email');
+        /* prettier-ignore */
+        --cssx-on-mount:
+          set-attr('name', 'email')
+          set-attr('data-testid', attr('name'));
       }
       #password {
-        --cssx-on-mount: set-attr('name', 'password')
-          set-attr('data-testid', 'password');
+        /* prettier-ignore */
+        --cssx-on-mount:
+          set-attr('name', 'password')
+          set-attr('data-testid', attr('name'));
       }
       #submit-btn {
         --cssx-on-mount: set-attr('type', 'submit');
diff --git a/tests/signup.spec.ts b/tests/signup.spec.ts
index c2cec0b..beede57 100644
--- a/tests/signup.spec.ts
+++ b/tests/signup.spec.ts
@@ -34,12 +34,10 @@ describe('signup example', () => {
     expect($form).not.toBeVisible()
     expect($form.nodeName).toBe('FORM')
 
-    // Click and wait for button to get active class (handles delay)
+    // Click and wait for button to get hidden class (handles delay)
     fireEvent.click($showFormBtn)
-    await waitFor(() =>
-      expect($showFormBtn.classList.contains('active')).toBe(true),
-    )
 
+    await waitFor(() => expect($showFormBtn).not.toBeVisible())
     expect($form).toBeVisible()
   })
 
@@ -47,9 +45,7 @@ describe('signup example', () => {
     beforeEach(async () => {
       const $showFormBtn = document.getElementById('show-form-btn')!
       fireEvent.click($showFormBtn)
-      await waitFor(() =>
-        expect($showFormBtn.classList.contains('active')).toBe(true),
-      )
+      await waitFor(() => expect($showFormBtn).not.toBeVisible())
       const $form = document.getElementById('signup-form')!
       expect($form).toBeVisible()
       await delay(100) // Wait for mounting
@@ -64,6 +60,8 @@ describe('signup example', () => {
       const $password = getByTestId<HTMLInputElement>(document.body, 'password')
       $password.value = 'password'
 
+      await delay(2000)
+
       // Submit form
       const $submitBtn = getByText(document.body, 'Submit')
       fireEvent.click($submitBtn)
@@ -72,12 +70,14 @@ describe('signup example', () => {
       await waitFor(() =>
         expect($form.classList.contains('submitting')).toBe(true),
       )
+      expect($submitBtn).toBeDisabled()
 
       // Should add submitted class to form and remove submitting
       await waitFor(() =>
         expect($form.classList.contains('submitted')).toBe(true),
       )
       expect($form.classList.contains('submitting')).toBe(false)
+      expect($submitBtn).toBeEnabled()
 
       // Should have made a request to post form data
       expect(window.fetch).toHaveBeenCalledTimes(1)