tests(visual): add Argos CI

.eslintignore

@@ -5,3 +5,6 @@ packages/react-instantsearch/examples/*/node_modules/
 docs/
 docs-production/
 dist/
+
+# Happo visual regression build
+test/.happo

.gitignore

@@ -9,3 +9,9 @@ npm-debug.log
 *.iml
 preview.zip
 .happypack/
+
+# Ignore Argos CI screenshots.
+test/screenshots/
+
+# Ignore Happo build.
+test/.happo/

.happo.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const FirefoxTarget = require('happo-target-firefox');
+
+module.exports = {
+  snapshotsFolder: 'test/screenshots',
+  targets: [
+    new FirefoxTarget({
+      name: 'firefox',
+      sourceFiles: ['test/.happo/tests.js'],
+      stylesheets: [
+        'storybook/public/default.css',
+        'storybook/public/react-autosuggest.css',
+        'storybook/public/rheostat.css',
+        'storybook/public/util.css',
+      ],
+      viewports: {
+        medium: {
+          width: 640,
+          height: 888,
+        },
+      },
+    }),
+  ],
+};

.travis.yml

@@ -4,9 +4,17 @@ before_script:
 branches:
   only:
     - master
+addons:
+  firefox: 50.0
+before_install:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
 cache:
   yarn: true
   directories:
     - node_modules
     - packages/react-instantsearch/node_modules
     - packages/react-instantsearch-theme-algolia/node_modules
+env:
+  global:
+  - ARGOS_TOKEN=da82cbbe3add183c6adb18f5c61da515d9bf99dd

docgen/assets/js/sidebar.js

@@ -32,7 +32,8 @@ function sidebarFollowScroll(sidebarContainer) {
         sidebarContainer.style.top = null;
       }
       sidebarContainer.classList.add('fixed');
-      linksContainer.style.maxHeight = `calc(100vh - ${titleHeight + navHeight}px)`;
+      linksContainer.style.maxHeight = `calc(100vh - ${titleHeight +
+        navHeight}px)`;
     } else {
       sidebarContainer.classList.remove('fixed');
       linksContainer.style.maxHeight = '';
@@ -78,7 +79,7 @@ function scrollSpy(sidebarContainer, headersContainer) {
       // then we take the closest to this position as reference
       .sort(
         (header1, header2) =>
-          (Math.abs(header1.rect.top) < Math.abs(header2.rect.top) ? -1 : 1)
+          Math.abs(header1.rect.top) < Math.abs(header2.rect.top) ? -1 : 1
       );
 
     if (headers[0] && highestVisibleHeaders.length === 0) {

docgen/plugins/jsdoc-data.js

@@ -10,9 +10,9 @@ export default function() {
   return function(files, metalsmith, done) {
     const allFilles = Object.entries(files).reduce(
       (memo, [filename, file]) =>
-        (/\.jsdoc$/.test(filename)
+        /\.jsdoc$/.test(filename)
           ? [...memo, { filename: filename.replace(/\.jsdoc$/, ''), ...file }]
-          : memo),
+          : memo,
       []
     );
 
@@ -80,9 +80,9 @@ export default function() {
             stats: fileFromMetalsmith && fileFromMetalsmith.stats,
             filename: fileFromMetalsmith && fileFromMetalsmith.filename,
             title,
-            mainTitle: `${data.kind
-              .charAt(0)
-              .toUpperCase()}${data.kind.slice(1)}s`, //
+            mainTitle: `${data.kind.charAt(0).toUpperCase()}${data.kind.slice(
+              1
+            )}s`, //
             withHeadings: false,
             layout: `${data.kind}.pug`,
             category: data.kind,

docgen/plugins/onlyChanged.js

@@ -17,10 +17,10 @@ const cssFiles = join(__dirname, '../src/stylesheets/**/*');
 const CSSEntryPoints = ['stylesheets/index.css', 'stylesheets/header.css'];
 
 export const hasChanged = file =>
-  (file.stats && file.stats.ctime && file.stats.mtime
+  file.stats && file.stats.ctime && file.stats.mtime
     ? Date.parse(file.stats.ctime) > lastRunTime ||
         Date.parse(file.stats.mtime) > lastRunTime
-    : true);
+    : true;
 
 export default function onlyChanged(files, metalsmith, cb) {
   if (lastRunTime === false) {

docgen/plugins/webpackEntryMetadata.js

@@ -5,7 +5,8 @@ export default function webpackEntryMetadata(webpackConfig) {
     const assets = Object.keys(webpackConfig.entry).reduce(
       (memo, entryName) => ({
         ...memo,
-        [`${entryName}.js`]: `${webpackConfig.output.publicPath}${entryName}.js`,
+        [`${entryName}.js`]: `${webpackConfig.output
+          .publicPath}${entryName}.js`,
       }),
       {}
     );

docgen/src/examples/default-theme/App.js

@@ -19,7 +19,7 @@ import {
 import { withUrlSync } from '../urlSync';
 import 'react-instantsearch-theme-algolia/style.scss';
 
-const App = props => (
+const App = props =>
   <InstantSearch
     appId="latency"
     apiKey="6be0576ff61c053d5f9a3225e2a90f76"
@@ -34,10 +34,9 @@ const App = props => (
       <Facets />
       <CustomResults />
     </div>
-  </InstantSearch>
-);
+  </InstantSearch>;
 
-const Header = () => (
+const Header = () =>
   <header className="content-wrapper header">
     <a
       href="https://community.algolia.com/react-instantsearch/"
@@ -49,10 +48,9 @@ const Header = () => (
       />
     </a>
     <SearchBox />
-  </header>
-);
+  </header>;
 
-const Facets = () => (
+const Facets = () =>
   <aside>
 
     <ClearAll
@@ -83,15 +81,13 @@ const Facets = () => (
     <div className="thank-you">
       Data courtesy of <a href="http://www.ikea.com/">ikea.com</a>
     </div>
-  </aside>
-);
+  </aside>;
 
-const SideBarSection = ({ title, children }) => (
+const SideBarSection = ({ title, children }) =>
   <section className="facet-wrapper">
     <div className="facet-category-title facet">{title}</div>
     {children}
-  </section>
-);
+  </section>;
 
 const Hit = ({ hit }) => {
   const icons = [];

docgen/src/examples/e-commerce-infinite/App.js

@@ -39,7 +39,7 @@ export default function App() {
   );
 }
 
-const Header = () => (
+const Header = () =>
   <header className="content-wrapper">
     <a
       href="https://community.algolia.com/react-instantsearch/"
@@ -52,10 +52,9 @@ const Header = () => (
     </a>
     <a href="./" className="logo">aeki</a>
     <ConnectedSearchBox />
-  </header>
-);
+  </header>;
 
-const Facets = () => (
+const Facets = () =>
   <aside>
 
     <ClearAll
@@ -101,10 +100,9 @@ const Facets = () => (
     <div className="thank-you">
       Data courtesy of <a href="http://www.ikea.com/">ikea.com</a>
     </div>
-  </aside>
-);
+  </aside>;
 
-const CustomSearchBox = ({ currentRefinement, refine }) => (
+const CustomSearchBox = ({ currentRefinement, refine }) =>
   <div className="input-group">
     <input
       type="text"
@@ -119,8 +117,7 @@ const CustomSearchBox = ({ currentRefinement, refine }) => (
         <i className="fa fa-search" />
       </button>
     </span>
-  </div>
-);
+  </div>;
 
 const ColorItem = ({ item, createURL, refine }) => {
   const active = item.isRefined ? 'checked' : '';
@@ -138,19 +135,19 @@ const ColorItem = ({ item, createURL, refine }) => {
 };
 
 const CustomColorRefinementList = ({ items, refine, createURL }) =>
-  (items.length > 0
+  items.length > 0
     ? <div>
         <h5 className={'ais-Panel__Title'}>Colors</h5>
-        {items.map(item => (
+        {items.map(item =>
           <ColorItem
             key={item.label}
             item={item}
             refine={refine}
             createURL={createURL}
           />
-        ))}
+        )}
       </div>
-    : null);
+    : null;
 
 function CustomHits({ hits, refine, hasMore }) {
   const loadMoreButton = hasMore

docgen/src/examples/e-commerce/App.js

@@ -24,7 +24,7 @@ import {
 import { withUrlSync } from '../urlSync';
 import 'react-instantsearch-theme-algolia/style.scss';
 
-const App = props => (
+const App = props =>
   <InstantSearch
     appId="latency"
     apiKey="6be0576ff61c053d5f9a3225e2a90f76"
@@ -39,10 +39,9 @@ const App = props => (
       <Facets />
       <CustomResults />
     </div>
-  </InstantSearch>
-);
+  </InstantSearch>;
 
-const Header = () => (
+const Header = () =>
   <header className="content-wrapper">
     <a
       href="https://community.algolia.com/react-instantsearch"
@@ -55,10 +54,9 @@ const Header = () => (
     </a>
     <a href="./" className="logo">aeki</a>
     <ConnectedSearchBox />
-  </header>
-);
+  </header>;
 
-const Facets = () => (
+const Facets = () =>
   <aside>
 
     <ClearAll
@@ -104,10 +102,9 @@ const Facets = () => (
     <div className="thank-you">
       Data courtesy of <a href="http://www.ikea.com/">ikea.com</a>
     </div>
-  </aside>
-);
+  </aside>;
 
-const CustomSearchBox = ({ currentRefinement, refine }) => (
+const CustomSearchBox = ({ currentRefinement, refine }) =>
   <div className="input-group">
     <input
       type="text"
@@ -122,8 +119,7 @@ const CustomSearchBox = ({ currentRefinement, refine }) => (
         <i className="fa fa-search" />
       </button>
     </span>
-  </div>
-);
+  </div>;
 
 const ColorItem = ({ item, createURL, refine }) => {
   const active = item.isRefined ? 'checked' : '';
@@ -141,19 +137,19 @@ const ColorItem = ({ item, createURL, refine }) => {
 };
 
 const CustomColorRefinementList = ({ items, refine, createURL }) =>
-  (items.length > 0
+  items.length > 0
     ? <div>
         <h5 className={'ais-Panel__Title'}>Colors</h5>
-        {items.map(item => (
+        {items.map(item =>
           <ColorItem
             key={item.label}
             item={item}
             refine={refine}
             createURL={createURL}
           />
-        ))}
+        )}
       </div>
-    : null);
+    : null;
 
 function CustomHits({ hits }) {
   return (