Issue #2676 - Tests for v2 to prevent regression of issue from v1 (#2829

) * Tests for v2 to prevent regression of issue from v1 * Linting --------- Co-authored-by: Ed Henighan <[email protected]>
bigskysoftware · Aug 19, 2024 · 27fc37c · 27fc37c
1 parent c0f80e6
commit 27fc37c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/test/core/ajax.js b/test/core/ajax.js
@@ -559,6 +559,34 @@ describe('Core htmx AJAX Tests', function() {
     values.should.deep.equal({ c1: ['cb1', 'cb3'], c2: 'cb5', c3: 'cb6' })
   })
 
+  it('properly handles radio inputs', function() {
+    var values
+    this.server.respondWith('Post', '/test', function(xhr) {
+      values = getParameters(xhr)
+      xhr.respond(204, {}, '')
+    })
+
+    var form = make('<form hx-post="/test" hx-trigger="click">' +
+        '<div role="radiogroup">' +
+        '<input id="rb1" name="r1" value="rb1" type="radio">' +
+        '<input id="rb2" name="r1" value="rb2" type="radio">' +
+        '<input id="rb3" name="r1" value="rb3" type="radio">' +
+        '<input id="rb4" name="r2" value="rb4"  type="radio">' +
+        '<input id="rb5" name="r2" value="rb5"  type="radio">' +
+        '<input id="rb6" name="r3" value="rb6"  type="radio">' +
+        '</div>' +
+        '</form>')
+
+    form.click()
+    this.server.respond()
+    values.should.deep.equal({})
+
+    byId('rb1').checked = true
+    form.click()
+    this.server.respond()
+    values.should.deep.equal({ r1: 'rb1' })
+  })
+
   it('text nodes dont screw up settling via variable capture', function() {
     this.server.respondWith('GET', '/test', "<div id='d1' hx-trigger='click consume' hx-get='/test2'></div>fooo")
     this.server.respondWith('GET', '/test2', 'clicked')

diff --git a/test/core/validation.js b/test/core/validation.js
@@ -102,6 +102,42 @@ describe('Core htmx client side validation tests', function() {
     form.textContent.should.equal('Clicked!')
   })
 
+  it('Custom validation error prevents request for unticked checkboxes', function() {
+    this.server.respondWith('POST', '/test', 'Clicked!')
+
+    var form = make('<form hx-post="/test" hx-trigger="click">' +
+        'No Request' +
+        '<input id="i1" name="i1" type="checkbox">' +
+        '</form>')
+    byId('i1').setCustomValidity('Nope')
+    form.textContent.should.equal('No Request')
+    form.click()
+    this.server.respond()
+    form.textContent.should.equal('No Request')
+    byId('i1').setCustomValidity('')
+    form.click()
+    this.server.respond()
+    form.textContent.should.equal('Clicked!')
+  })
+
+  it('Custom validation error prevents request for unselected radiogroups', function() {
+    this.server.respondWith('POST', '/test', 'Clicked!')
+
+    var form = make('<form hx-post="/test" hx-trigger="click">' +
+        'No Request' +
+        '<input id="i1" name="i1" type="radio">' +
+        '</form>')
+    byId('i1').setCustomValidity('Nope')
+    form.textContent.should.equal('No Request')
+    form.click()
+    this.server.respond()
+    form.textContent.should.equal('No Request')
+    byId('i1').setCustomValidity('')
+    form.click()
+    this.server.respond()
+    form.textContent.should.equal('Clicked!')
+  })
+
   it('hyperscript validation error prevents request', function() {
     this.server.respondWith('POST', '/test', 'Clicked!')