Clean up the tests and comments a bit

README.md

@@ -39,7 +39,8 @@ I outline the rationale for these proposals in [this talk I gave at Big Sky Dev
 The standards proposals for each of these issues is forthcoming - if you're interested in working on
 that reach out to me!
 
-Inspired by [htmx](https://htmx.org/), [htmz](https://leanrada.com/htmz/), and the entire ecosystem of attribute-based hypermedia libraries.
+Inspired by [htmx](https://htmx.org/), [htmz](https://leanrada.com/htmz/), and the entire ecosystem
+of attribute-based hypermedia libraries.
 
 ## Installation
 
@@ -94,7 +95,6 @@ You can also play around with manual tests by running `npm run dev`
 ### To-do
 
 * Add full-page tests that verify existing GET/POST forms are not affected
-* Push new methods to history
 
 ## FAQ
 
@@ -111,4 +111,7 @@ appropriately. It's not deployed to a CDN yet, but will be soon.
 
 ### What if multiple elements match the target?
 
-Targeting is done using the [querySelector API](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), which performs a depth-first pre-order traversal of the document's nodes. The target will be the first matching element found, per that algorithm.
+Targeting is done using the [querySelector
+API](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), which performs a
+depth-first pre-order traversal of the document's nodes. The target will be the first matching
+element found, per that algorithm.

test/buttons.js

@@ -85,39 +85,4 @@ describe("<button>", async () => {
     assertEqual(button2, null)
   })
 
-  it('replaces itself with plaintext', async () => {
-    fetchMock.get('/test', 'plaintext')
-    const div = make(`
-    <div><button id=test action="/test" target="_this">Plain Text</button></div>
-    `);
-    const button = byId('test')
-    button.click()
-    await fetchMock.flush(true)
-    assertEqual(div.innerHTML, 'plaintext')
-  })
-
-  it('replaces itself with an HTML element', async () => {
-    fetchMock.get("/test", '<div id=response>Success!</div>')
-    const button = make(`
-      <button id=test action="/test" target="_this">HTML</button>
-    `)
-    button.click()
-    await fetchMock.flush(true)
-    const response = byId('response')
-    assertEqual(response.innerHTML, 'Success!')
-  })
-
-  it('replaces itself with multiple HTML elements', async () => {
-    fetchMock.get("/test", `
-      <div id=response>Success!</div>
-      <style id=stylesheet>div { color: red }</style>
-    `)
-    const button = make('<button id=test action="/test" target="_this">HTML</button>')
-    button.click()
-    await fetchMock.flush(true)
-    const div = byId('response')
-    const style = byId('stylesheet')
-    assertEqual(div.innerHTML, 'Success!')
-    assertTruthy(style)
-  })
 })

test/forms.js

@@ -8,7 +8,7 @@ describe("<form>", async () => {
     clearWorkArea()
   })
 
-  it('issues PUT requests', async () => {
+  it('makes a PUT request', async () => {
     fetchMock.put((url, options) => {
       assertEqual(url, '/test')
       assertEqual(options.body.get('i1'), 'test')
@@ -26,7 +26,7 @@ describe("<form>", async () => {
     assertTruthy(find('#response'))
   })
 
-  it('issues PATCH requests', async () => {
+  it('makes a PATCH request', async () => {
     fetchMock.patch((url, options) => {
       assertEqual(url, '/test')
       assertEqual(options.body.get('i1'), 'test')
@@ -44,7 +44,7 @@ describe("<form>", async () => {
     assertTruthy(find('#response'))
   })
 
-  it('issues DELETE requests', async () => {
+  it('makes a DELETE request', async () => {
     fetchMock.delete((url, options) => {
       assertEqual(url, '/test?i1=test')
       assertNull(options.body)

test/index.html

@@ -12,7 +12,7 @@
 }
 </style>
 
-<h1 style="margin-top: 40px">Missing Piece test suite</h1>
+<h1 style="margin-top: 40px">Triptych test suite</h1>
 
 <h2>Mocha Test Suite</h2>
 <a href="./index.html">[ALL]</a>

test/misc.js

@@ -22,7 +22,7 @@ describe("Misc", async () => {
   })
 
 
-  it('old methods are case-independent', async () => {
+  it('old methods are case-insensitive', async () => {
     fetchMock.get('/test', '<div id=response>success</div>')
     const button = make('<button id=test action="/test" target="_this" method=get>Plain Text</button>')
     button.click()
@@ -31,7 +31,7 @@ describe("Misc", async () => {
     assertTruthy(find('#response'))
   })
 
-  it('new methods are case-independent', async () => {
+  it('new methods are case-insensitive', async () => {
     fetchMock.put('/test', '<div id=response>success</div>')
     const button = make('<button id=test action="/test" target="_this" method=put>Plain Text</button>')
     button.click()

test/targeting.js

@@ -1,4 +1,4 @@
-describe("Targeting", async () => {
+describe("Targeting and replacement", async () => {
   beforeEach(async () => {
     clearWorkArea()
   })
@@ -32,4 +32,39 @@ describe("Targeting", async () => {
     assertEqual(response.innerHTML, 'success')
   })
 
+  it('replaces itself with plaintext', async () => {
+    fetchMock.get('/test', 'plaintext')
+    const div = make(`
+    <div><button id=test action="/test" target="_this">Plain Text</button></div>
+    `);
+    const button = byId('test')
+    button.click()
+    await fetchMock.flush(true)
+    assertEqual(div.innerHTML, 'plaintext')
+  })
+
+  it('replaces itself with an HTML element', async () => {
+    fetchMock.get("/test", '<div id=response>Success!</div>')
+    const button = make(`
+      <button id=test action="/test" target="_this">HTML</button>
+    `)
+    button.click()
+    await fetchMock.flush(true)
+    const response = byId('response')
+    assertEqual(response.innerHTML, 'Success!')
+  })
+
+  it('replaces itself with multiple HTML elements', async () => {
+    fetchMock.get("/test", `
+      <div id=response>Success!</div>
+      <style id=stylesheet>div { color: red }</style>
+    `)
+    const button = make('<button id=test action="/test" target="_this">HTML</button>')
+    button.click()
+    await fetchMock.flush(true)
+    const div = byId('response')
+    const style = byId('stylesheet')
+    assertEqual(div.innerHTML, 'Success!')
+    assertTruthy(style)
+  })
 })

triptych.js

@@ -13,8 +13,8 @@ function replacePage(html, url, addHistory) {
     history.replaceState(state, "")
   }
 
+  // Replace the page's HTML and, if applicable, add it to the history state
   document.querySelector('html').innerHTML = html
-  // If we didn't just pop the state (i.e. "go back"), then push the new state to history
   if (addHistory) history.pushState({ html, url }, "", url)
 
 
@@ -44,7 +44,7 @@ function ajax(rawUrl, method, formData, target) {
 
   /** @param {Event} e */
   return async (e) => {
-    // Check if there's an existing iFrame, and don't do anything if so
+    // End immediately if there's an iFrame with the target name
     if (document.querySelector(`iframe[name="${target}"]`)) return null
     // This comes after the iFrame check so that normal iFrame targeting is preserved
     e.preventDefault()
@@ -62,9 +62,10 @@ function ajax(rawUrl, method, formData, target) {
     }
 
     const opts = { method }
-    // Add data to the request, if appropriate
+    // If the methods allow for request bodies, add the data there
     if (method !== 'GET' && method !== 'DELETE') {
       opts.body = formData
+    // Otherwise, if there is formData at all, add it to the URL params
     } else if (formData != null) { // != null checks for both null and undefined
       const queryParams = (new URLSearchParams(formData)).toString()
       url += '?' + queryParams