FIX: Reset button updates URL (without navigating) (#160)

closes #160

pages/Search/Search.test.js

@@ -16,14 +16,18 @@ describe(`Search`, function() {
       cy.contains(`.no-results`, `No results found.`)
     })
 
-    it(`some results + repopulates search box`, function() {
+    it(`some results + repopulates search box + reset search`, function() {
       const search = `atimw`
       cy.visit(`/search`)
       cy.get(`#search-box`).type(search)
       cy.get(`form`).submit()
       cy.get(`#search-box`).should(`have.value`, search)
       cy.get(`.num-results`).should(`have.text`, `Showing results 1–2 of 2.`)
       cy.get(`#results tbody tr`).should(`have.length`, 2)
+      cy.get(`#reset-button`).click()
+      cy.get(`#search-box`).should(`have.value`, ``)
+      cy.get(`#language-select`).should(`have.value`, `all`)
+      cy.location(`search`).should(`eq`, ``)
     })
 
     it(`case insensitive`, function() {
@@ -117,7 +121,7 @@ describe(`Search`, function() {
       cy.get(`#results tbody tr`).should(`have.length`, 1)
     })
 
-    it.only(`saves the user's selection across visits`, function() {
+    it(`saves the user's selection across visits`, function() {
       cy.visit(`/search`)
       cy.get(`#language-select`).select(`Cree_East`)
       cy.reload()

pages/Search/scripts/SearchForm.js

@@ -1,4 +1,4 @@
-/* global document, localStorage, location */
+/* global document, history, localStorage, location */
 
 export default class SearchForm {
 
@@ -8,16 +8,14 @@ export default class SearchForm {
 
   initialize() {
 
-    this.searchButton = document.getElementById(`search-button`)
-    this.resetButton  = document.getElementById(`reset-button`)
-    this.language     = document.getElementById(`language-select`)
-    this.search       = document.getElementById(`search-box`)
+    this.reset    = document.getElementById(`reset-button`)
+    this.language = document.getElementById(`language-select`)
+    this.search   = document.getElementById(`search-box`)
 
     // Populate search form from querystring / local storage.
     // NOTE: Query parameters take precedence over local storage.
 
-    const url = new URL(location.href)
-
+    const url      = new URL(location.href)
     const query    = url.searchParams.get(`q`)
     const language = url.searchParams.get(`language`) || localStorage.getItem(`language`)
 
@@ -29,6 +27,22 @@ export default class SearchForm {
     // Add event listeners
 
     this.language.addEventListener(`input`, this.saveLanguage.bind(this))
+    this.reset.addEventListener(`click`, this.resetForm.bind(this))
+
+  }
+
+  resetForm() {
+
+    const url = new URL(location.href)
+
+    // NB: Applying this loop directly to the keys iterator doesn't work,
+    // probably because it shifts the index of each key when one is deleted.
+    for (const key of Array.from(url.searchParams.keys())) {
+      url.searchParams.delete(key)
+    }
+
+    // NB: The second parameter to this method is deprecated and does nothing.
+    history.pushState({}, document.title, url.href)
 
   }