test(examples): update snapshots

.eslintrc.js

@@ -9,6 +9,8 @@ const config = {
     'valid-jsdoc': 'off',
     // @TODO: remove once this is in `eslint-config-algolia`
     '@typescript-eslint/explicit-member-accessibility': 'off',
+    // @TODO: re-enable this once the code base is made for it
+    '@typescript-eslint/consistent-type-assertions': 'off',
     // @TODO: re-enable once the rule is properly setup for monorepos
     // https://github.com/benmosher/eslint-plugin-import/issues/1103
     // https://github.com/benmosher/eslint-plugin-import/issues/1174

examples/autocomplete/src/App.test.js

@@ -3,7 +3,13 @@ import MultiIndex from './App-Multi-Index';
 import Mentions from './App-Mentions';
 import renderer from 'react-test-renderer';
 
-jest.mock('antd/lib/mention');
+jest.mock('antd/lib/mention', () => {
+  return ({ placeholder, suggestions }) =>
+    `<Mention>
+  ${placeholder}
+  ${suggestions.join('\n')}
+</Mention>`;
+});
 
 describe('autocomplete recipe', () => {
   it('MultiIndex renders without crashing', () => {

examples/autocomplete/src/__snapshots__/App.test.js.snap

@@ -1,41 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`autocomplete recipe Mentions renders without crashing 1`] = `
-<div
-  className="ais-InstantSearch__root"
-/>
+"<Mention>
+  give someone an @-mention here
+  
+</Mention>"
 `;
 
 exports[`autocomplete recipe MultiIndex renders without crashing 1`] = `
 <div
-  className="ais-InstantSearch__root"
+  aria-expanded={false}
+  aria-haspopup="listbox"
+  aria-owns="react-autowhatever-1"
+  className="react-autosuggest__container"
+  role="combobox"
 >
+  <input
+    aria-activedescendant={null}
+    aria-autocomplete="list"
+    aria-controls="react-autowhatever-1"
+    autoComplete="off"
+    className="react-autosuggest__input"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder="Search for a product..."
+    type="text"
+    value=""
+  />
   <div
-    aria-expanded={false}
-    aria-haspopup="listbox"
-    aria-owns="react-autowhatever-1"
-    className="react-autosuggest__container"
-    role="combobox"
-  >
-    <input
-      aria-activedescendant={null}
-      aria-autocomplete="list"
-      aria-controls="react-autowhatever-1"
-      autoComplete="off"
-      className="react-autosuggest__input"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="Search for a product..."
-      type="text"
-      value=""
-    />
-    <div
-      className="react-autosuggest__suggestions-container"
-      id="react-autowhatever-1"
-      role="listbox"
-    />
-  </div>
+    className="react-autosuggest__suggestions-container"
+    id="react-autowhatever-1"
+    role="listbox"
+  />
 </div>
 `;

examples/geo-search/src/__snapshots__/App.test.js.snap

@@ -1,10 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`geo-search recipe App renders without crashing 1`] = `
-<div
-  className="ais-InstantSearch__root"
->
-  Type a destination or move the map to see the closest apartment.
+Array [
+  "Type a destination or move the map to see the closest apartment.",
   <div
     className="ais-SearchBox"
   >
@@ -66,6 +64,6 @@ exports[`geo-search recipe App renders without crashing 1`] = `
         </svg>
       </button>
     </form>
-  </div>
-</div>
+  </div>,
+]
 `;

examples/multi-index/src/__snapshots__/App.test.js.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Multi index recipe App renders without crashing 1`] = `
-<div
-  className="ais-InstantSearch__root"
->
+Array [
   <div
     className="ais-SearchBox"
   >
@@ -65,30 +63,26 @@ exports[`Multi index recipe App renders without crashing 1`] = `
         </svg>
       </button>
     </form>
-  </div>
+  </div>,
   <p>
     Results in first dataset
-  </p>
+  </p>,
   <div
     className="ais-Hits"
   >
     <ul
       className="ais-Hits-list"
     />
-  </div>
+  </div>,
+  <p>
+    Results in second dataset
+  </p>,
   <div
-    className="ais-MultiIndex__root"
+    className="ais-Hits"
   >
-    <p>
-      Results in second dataset
-    </p>
-    <div
-      className="ais-Hits"
-    >
-      <ul
-        className="ais-Hits-list"
-      />
-    </div>
-  </div>
-</div>
+    <ul
+      className="ais-Hits-list"
+    />
+  </div>,
+]
 `;

examples/next/components/app.js

@@ -1,20 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import algoliasearch from 'algoliasearch/lite';
 import {
   RefinementList,
   SearchBox,
   Hits,
   Configure,
   Highlight,
   Pagination,
+  InstantSearch,
 } from 'react-instantsearch-dom';
-import { InstantSearch } from './instantsearch';
-
-const searchClient = algoliasearch(
-  'latency',
-  '6be0576ff61c053d5f9a3225e2a90f76'
-);
 
 const HitComponent = ({ hit }) => (
   <div className="hit">
@@ -49,17 +43,20 @@ export default class extends React.Component {
     resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     onSearchStateChange: PropTypes.func,
     createURL: PropTypes.func,
+    indexName: PropTypes.string,
+    searchClient: PropTypes.object,
   };
 
   render() {
     return (
       <InstantSearch
-        searchClient={searchClient}
-        indexName="instant_search"
+        searchClient={this.props.searchClient}
         resultsState={this.props.resultsState}
         onSearchStateChange={this.props.onSearchStateChange}
         searchState={this.props.searchState}
         createURL={this.props.createURL}
+        indexName={this.props.indexName}
+        {...this.props}
       >
         <Configure hitsPerPage={12} />
         <header>

examples/next/components/index.js

@@ -1,3 +1,2 @@
 export * from './head';
 export { default as App } from './app';
-export { findResultsState } from './instantsearch';

examples/next/pages/index.js

@@ -3,7 +3,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'next/router';
 import qs from 'qs';
-import { Head, App, findResultsState } from '../components';
+import algoliasearch from 'algoliasearch/lite';
+import { findResultsState } from 'react-instantsearch-dom/server';
+import { Head, App } from '../components';
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
 
 const updateAfter = 700;
 
@@ -15,6 +22,11 @@ const pathToSearchState = path =>
 const searchStateToURL = searchState =>
   searchState ? `${window.location.pathname}?${qs.stringify(searchState)}` : '';
 
+const DEFAULT_PROPS = {
+  searchClient,
+  indexName: 'instant_search',
+};
+
 class Page extends React.Component {
   static propTypes = {
     router: PropTypes.object.isRequired,
@@ -29,7 +41,10 @@ class Page extends React.Component {
 
   static async getInitialProps({ asPath }) {
     const searchState = pathToSearchState(asPath);
-    const resultsState = await findResultsState(App, { searchState });
+    const resultsState = await findResultsState(App, {
+      ...DEFAULT_PROPS,
+      searchState,
+    });
 
     return {
       resultsState,
@@ -67,6 +82,7 @@ class Page extends React.Component {
       <div>
         <Head title="Home" />
         <App
+          {...DEFAULT_PROPS}
           searchState={this.state.searchState}
           resultsState={this.props.resultsState}
           onSearchStateChange={this.onSearchStateChange}