diff --git a/client/components/Users/UserOverview.jsx b/client/components/Users/UserOverview.jsx index a55603ff..00b9b5f5 100644 --- a/client/components/Users/UserOverview.jsx +++ b/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) { diff --git a/client/containers/Users.jsx b/client/containers/Users.jsx index 3e7679a1..e722f388 100644 --- a/client/containers/Users.jsx +++ b/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() { diff --git a/package.json b/package.json index 8c6d9023..0faaa083 100644 --- a/package.json +++ b/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", diff --git a/tests/unit/client/components/Users/UserOverview.tests.js b/tests/unit/client/components/Users/UserOverview.tests.js new file mode 100644 index 00000000..f2669ff3 --- /dev/null +++ b/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( + + ); + }; + + 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); + }); +}); diff --git a/tests/unit/initClientTests.js b/tests/unit/initClientTests.js new file mode 100644 index 00000000..8717b9e3 --- /dev/null +++ b/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(''); +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() }); diff --git a/tests/unit/mocha.js b/tests/unit/mocha.js index 4b534ffc..ae41b86e 100644 --- a/tests/unit/mocha.js +++ b/tests/unit/mocha.js @@ -5,3 +5,4 @@ process.env.NODE_ENV = 'test'; // before our tests run. require('babel-register')(); require('./runner'); +require('./initClientTests');