Merge pull request #227 from zxan1285/user-search-pagination

User search pagination fixed

client/components/Users/UserOverview.jsx

@@ -61,7 +61,9 @@ class UserOverview extends React.Component {
   }
 
   handleUsersPageChange(page) {
-    this.props.getUsersOnPage(page);
+    const query = this.props && this.props.fetchQuery;
+    const filter = this.state && this.state.selectedFilter && this.state.selectedFilter.filterBy;
+    this.props.getUsersOnPage(page, query, filter);
   }
 
   renderActions(user, index) {

client/containers/Users.jsx

@@ -29,8 +29,8 @@ class Users extends React.Component {
     this.props.fetchUsers('', '', true, process.env.PER_PAGE);
   }
 
-  getUsersOnPage(page) {
-    this.props.fetchUsers('', '', true, process.env.PER_PAGE, page);
+  getUsersOnPage(page, query = '', field = '') {
+    this.props.fetchUsers(query, field, true, process.env.PER_PAGE, page);
   }
 
   render() {

package.json

@@ -113,6 +113,7 @@
   },
   "devDependencies": {
     "auth0-extensions-cli": "~1.0.9",
+    "auth0-js": "^9.7.3",
     "auth0-styleguide": "auth0/styleguide#4.6.5",
     "autoprefixer": "6.7.7",
     "babel": "6.23.0",
@@ -129,9 +130,12 @@
     "babel-register": "6.24.1",
     "babel-runtime": "6.23.0",
     "chai": "^3.5.0",
+    "chai-match": "^1.1.1",
     "classnames": "^2.2.5",
     "cross-env": "3.2.4",
     "css-loader": "0.28.1",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-15": "^1.1.0",
     "eslint": "3.19.0",
     "eslint-config-auth0": "^6.0.1",
     "eslint-plugin-babel": "^3.3.0",
@@ -148,6 +152,7 @@
     "history": "3.2.1",
     "immutable": "^3.8.1",
     "imports-loader": "0.7.1",
+    "jsdom": "^12.0.0",
     "json-loader": "^0.5.4",
     "jwt-decode": "^2.0.1",
     "mocha": "3.3.0",
@@ -165,13 +170,14 @@
     "raw-loader": "^0.5.1",
     "react": "15.4.2",
     "react-bootstrap": "0.31.0",
-    "react-dom": "15.4.2",
+    "react-dom": "15.6.1",
     "react-loader-advanced": "^1.4.0",
     "react-pure-render": "^1.0.2",
     "react-redux": "5.0.3",
     "react-router": "3.0.2",
     "react-router-redux": "4.0.8",
     "react-select": "^1.0.0-rc.1",
+    "react-test-renderer": "15.6.1",
     "react-transform-hmr": "^1.0.4",
     "redux": "^3.6.0",
     "redux-devtools": "3.4.0",

tests/unit/client/components/Users/UserOverview.tests.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { expect } from 'chai';
+import { describe, it } from 'mocha';
+import UserOverview from '../../../../../client/components/Users/UserOverview';
+
+describe('#Client-Components-UserOverview', () => {
+  const renderComponent = (options) => {
+    options = options || {};
+
+    const defaultFunction = () => '';
+    return shallow(
+      <UserOverview
+        onReset={options.onReset || defaultFunction}
+        onSearch={options.onSearch || defaultFunction}
+        error={options.error || null}
+        users={options.users || []}
+        total={options.total || 0}
+        loading={options.loading || false}
+        fetchQuery={options.fetchQuery || ''}
+        renderActions={options.renderActions || defaultFunction}
+        getUsersOnPage={options.getUsersOnPage || defaultFunction}
+      />
+    );
+  };
+
+  it('handleUsersPageChange should use correct query/filter params', (done) => {
+    const pageNum = 1;
+    const selectedFilter = 'email';
+    const options = {
+      fetchQuery: '*@example.com',
+      getUsersOnPage: (page, query, filter) => {
+        expect(page).to.equal(pageNum);
+        expect(query).to.equal(options.fetchQuery);
+        expect(filter).to.equal(selectedFilter);
+        return done();
+      }
+    };
+
+    const component = renderComponent(options);
+
+    component.setState({ selectedFilter: { filterBy: selectedFilter } });
+    component.instance().handleUsersPageChange(pageNum);
+  });
+});

tests/unit/initClientTests.js

@@ -0,0 +1,39 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+import { JSDOM } from 'jsdom';
+import auth0 from 'auth0-js';
+import chai from 'chai';
+import chaiMatch from 'chai-match';
+
+chai.use(chaiMatch);
+
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const { window } = jsdom;
+
+function copyProps(src, target) {
+  const props = Object.getOwnPropertyNames(src)
+    .filter(prop => typeof target[prop] === 'undefined')
+    .reduce((result, prop) => ({
+      ...result,
+      [prop]: Object.getOwnPropertyDescriptor(src, prop),
+    }), {});
+  Object.defineProperties(target, props);
+}
+
+/* Initialize configuration */
+window.config = {
+  AUTH0_DOMAIN: 'unitTesting.fakeAuth0.com',
+  AUTH0_CLIENT_ID: 'fake-client-id'
+};
+
+global.auth0 = auth0;
+global.window = window;
+global.document = window.document;
+global.navigator = {
+  userAgent: 'node.js'
+};
+global.self = { navigator: global.navigator };
+
+copyProps(window, global);
+
+configure({ adapter: new Adapter() });

tests/unit/mocha.js

@@ -5,3 +5,4 @@ process.env.NODE_ENV = 'test';
 // before our tests run.
 require('babel-register')();
 require('./runner');
+require('./initClientTests');