fix(priceRanges): pass the bound refine to the form

Form was no more working.

Took the opportunity to write real tests for the priceRanges widget.

Author: vvo

functional-tests/config.js

@@ -1,4 +1,4 @@
-import server from './server';
+import startServer from './startServer';
 
 let conf = {
   specs: [
@@ -14,7 +14,7 @@ let conf = {
   baseUrl: 'http://localhost:9000',
   framework: 'mocha',
   onPrepare() {
-    return server();
+    return startServer();
   },
   before() {
     let init = browser
@@ -64,13 +64,6 @@ if (process.env.CI === 'true') {
       browserName: 'safari',
       version: '9',
       ...defaultCapabilities
-    }, {
-      browserName: 'iphone',
-      deviceName: 'iPhone 6 Plus',
-      platform: 'OS X 10.10',
-      version: '9.2',
-      deviceOrientation: 'portrait',
-      ...defaultCapabilities
     }],
     ...conf
   };

functional-tests/specs/priceRanges.js

@@ -0,0 +1,61 @@
+import expect from 'expect';
+import {getCurrentRefinements} from '../utils.js';
+
+describe('priceRanges', () => {
+  const widget = '#price-ranges';
+  const item = '.item';
+  const priceRange = 'a*=$80';
+
+  it('has some default ranges', () =>
+    browser
+      .element(widget)
+      .elements(item)
+      .then(items =>
+        expect(items.value.length)
+          .toBe(7)
+      )
+  );
+
+  it('can refine by clicking a range', () =>
+    browser
+      .element(widget)
+      .click(priceRange)
+      .then(getCurrentRefinements)
+      .then(refinements =>
+        expect(refinements.length).toBe(2) &&
+        expect(refinements[0].name).toBe('Price ≤ 160') &&
+        expect(refinements[1].name).toBe('Price ≥ 80')
+      )
+  );
+
+  context('the form', () => {
+    beforeEach(() =>
+      browser
+        .element(widget)
+        .setValue('label:nth-of-type(1) input', '94')
+        .setValue('label:nth-of-type(2) input', '113')
+    );
+
+    it('can be submitted with ENTER key', () =>
+      browser
+        .element(widget)
+        .addValue('label:nth-of-type(2) input', 'Enter')
+        .then(getCurrentRefinements)
+        .then(refinements => expect(refinements.length).toBe(2) &&
+          expect(refinements[0].name).toBe('Price ≤ 113') &&
+          expect(refinements[1].name).toBe('Price ≥ 94')
+        )
+    );
+
+    it('can be submitted by using the submit button', () =>
+      browser
+        .element(widget)
+        .click('button')
+        .then(getCurrentRefinements)
+        .then(refinements => expect(refinements.length).toBe(2) &&
+          expect(refinements[0].name).toBe('Price ≤ 113') &&
+          expect(refinements[1].name).toBe('Price ≥ 94')
+        )
+    );
+  });
+});

functional-tests/server.js functional-tests/startServer.jsfunctional-tests/server.js renamed to functional-tests/startServer.js

@@ -21,9 +21,9 @@ export default () => {
 
     app.use(express.static(path.join(__dirname, 'app')));
     app.use(express.static(path.join(__dirname, '..', 'dist')));
-    let server = app.listen(9000);
+    let server = app.listen(process.env.PORT || 9000);
 
-    server.once('listening', resolve);
+    server.once('listening', () => resolve(server));
     server.once('error', reject);
   });
 };

functional-tests/utils.js

@@ -1,3 +1,5 @@
+import cheerio from 'cheerio';
+
 export function getNumberOfResults() {
   return browser
     .getText('#stats')
@@ -6,12 +8,8 @@ export function getNumberOfResults() {
 
 export function getCurrentRefinements() {
   return browser
-    .element('#current-refined-values .item')
-    .then(() => browser
-      .getText('#current-refined-values .item')
-      .then(res => Array.isArray(res) ? res : [res])
-      .then(res => res.map(formatTextRefinement))
-    )
+    .getHTML('#current-refined-values .facet-value > div')
+    .then(formatRefinements)
     .catch(() => Promise.resolve([]));
 }
 
@@ -21,6 +19,7 @@ export function clearAll() {
 }
 
 export const searchBox = {
+  selector: '#search-box',
   set(query) {
     return browser.setValue('#search-box', query);
   },
@@ -33,30 +32,32 @@ export const searchBox = {
 };
 
 // export function getRefinementFromSelector(selector) {
-//  return browser.getText(selector).then(formatTextRefinement);
+//  return browser.getText(selector).then(formatRefinements);
 // }
 
-function formatTextRefinement(textRefinement) {
-  let data = textRefinement.split('\n');
-
-  // some browsers like IE will send a slighty different html
-  // they send "Appliances 1543" instead of "Appliances \n1543"
-  if (data.length === 1) {
-    let countPosition = textRefinement.lastIndexOf(' ');
-    data = [
-      textRefinement.slice(0, countPosition),
-      textRefinement.slice(-(textRefinement.length - countPosition))
-    ];
+function formatRefinements(refinementsAsHTML) {
+  if (!Array.isArray(refinementsAsHTML)) {
+    refinementsAsHTML = [refinementsAsHTML];
   }
 
-  const refinement = {
-    name: data[0].trim()
-  };
+  return refinementsAsHTML.map(refinementAsHTML => {
+    // element is (simplified) <div>facetName <span>facetCount</span></div>
+    const element = cheerio.parseHTML(refinementAsHTML)[0];
 
-  if (data[1] !== undefined) {
-    refinement.count = parseInt(data[1], 10);
-  }
+    // <div>**facetName** <span>facetCount</span></div>
+    const name = element.firstChild.nodeValue.trim();
+
+    // some widgets have no counts (pricesRanges)
+    // <div>facetName <span>**facetCount**</span></div>
+    const maybeCount = element.firstChild.nextSibling.children;
+
+    return {
+      name,
 
-  return refinement;
+      count: maybeCount && maybeCount[0] && maybeCount[0].nodeValue !== undefined ?
+        parseInt(maybeCount[0].nodeValue, 10) :
+        'n/a'
+    };
+  });
 }