Filter and Cluster acceptance tests for the locator (#831)

Add additional filter and cluster tests

Enable clustering on the filter page and add some test coverage for filters and clusters.

J=SLAP-1362
TEST=acceptance

test-site/config-overrides/locations_full_page_map_with_filters.json

@@ -5,5 +5,12 @@
       "showMore": false,
       "searchOnChange": true
     }
+  },
+  "verticalsToConfig": {
+    "KM": { 
+      "mapConfig": {
+        "enablePinClustering": true
+      }
+    }
   }
 }

tests/acceptance/blocks/collapsiblefilters.js

@@ -0,0 +1,36 @@
+import { Selector, t } from 'testcafe';
+
+/**
+ * Models the user interaction with collapsible filters
+ */
+class CollapsibleFilters {
+  constructor () {
+    this._viewFiltersButton = Selector('.js-changeFilters');
+    this._viewResultsButton = Selector('.Hitchhiker-ViewResultsButton');
+    this._collapsibleFiltersExpanded = Selector('.CollapsibleFilters--expanded');
+  }
+
+  /**
+   * Opens the filter view
+   */
+  async viewFilters () {
+    await t.click(this._viewFiltersButton);
+  }
+
+  /**
+   * Closes the filter view and opens the list view
+   */
+  async viewResults () {
+    await t.click(this._viewResultsButton);
+  }
+
+  /**
+   * Returns true if the filter view is open
+   * @returns {Promise<boolean>}
+   */
+  async isFilterViewOpen () {
+    return this._collapsibleFiltersExpanded.exists;
+  }
+}
+
+export default new CollapsibleFilters();

tests/acceptance/suites/vertical-full-page-map-with-filters.js

@@ -0,0 +1,32 @@
+import { PORT } from '../constants';
+import SearchBar from '../blocks/searchbar';
+import VerticalResults from '../blocks/verticalresults';
+import ThemeMap from '../blocks/thememap';
+import CollapsibleFilters from '../blocks/collapsiblefilters';
+
+fixture`Vertical Full Page Map with Filters and Clusters`
+  .page(`http://localhost:${PORT}/locations_full_page_map_with_filters`)
+
+test('Clicking on a pin closes the filter view', async t => {
+  await SearchBar.submitQuery('virginia');
+  await CollapsibleFilters.viewFilters();
+  await ThemeMap.selectPin();
+  const isFilterViewOpen = await CollapsibleFilters.isFilterViewOpen();
+  await t.expect(isFilterViewOpen).notOk();
+});
+
+test('Clicking on a cluster causes the map to zoom in', async t => {
+  await SearchBar.submitQuery('virginia');
+  const zoom = await ThemeMap.getZoom();
+  await ThemeMap.selectPinCluster();
+  const zoomAfterSelectingCluster = await ThemeMap.getZoom();
+  await t.expect(zoom).lt(zoomAfterSelectingCluster);
+});
+
+test('Clicking on a cluster causes a new search to be ran', async t => {
+  await SearchBar.submitQuery('virginia');
+  const numResults = await VerticalResults.getNumResults();
+  await ThemeMap.selectPinCluster();
+  const numResultsAfterSelectingCluster = await VerticalResults.getNumResults();
+  await t.expect(numResults).notEql(numResultsAfterSelectingCluster);
+});