From e8fe6fe33c777951487ae743b3d662deec4b80eb Mon Sep 17 00:00:00 2001 From: kialam Date: Tue, 15 Jan 2019 14:58:23 -0500 Subject: [PATCH] Fix & Add unit tests. --- __tests__/api.test.js | 12 +++++ __tests__/components/Lookup.test.jsx | 33 ++++++++++++ .../screens/OrganizationAdd.test.jsx | 50 +++++++++++-------- src/components/Lookup/Lookup.jsx | 2 +- .../Organizations/screens/OrganizationAdd.jsx | 16 ++++-- 5 files changed, 85 insertions(+), 28 deletions(-) create mode 100644 __tests__/components/Lookup.test.jsx diff --git a/__tests__/api.test.js b/__tests__/api.test.js index e9276e8c8a..54e7db395b 100644 --- a/__tests__/api.test.js +++ b/__tests__/api.test.js @@ -126,4 +126,16 @@ describe('APIClient (api.js)', () => { done(); }); + + test('getInstanceGroups calls expected http method', async (done) => { + const createPromise = () => Promise.resolve(); + const mockHttp = ({ get: jest.fn(createPromise) }); + + const api = new APIClient(mockHttp); + await api.getInstanceGroups(); + + expect(mockHttp.get).toHaveBeenCalledTimes(1); + + done(); + }); }); diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx new file mode 100644 index 0000000000..5d4093ff54 --- /dev/null +++ b/__tests__/components/Lookup.test.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Lookup from '../../src/components/Lookup'; +import { I18nProvider } from '@lingui/react'; + + +const mockData = [{ name: 'foo', id: 0, isChecked: false }]; +describe('', () => { + test('initially renders succesfully', () => { + mount( + { }} + data={mockData} + /> + ); + }); + test('calls "onLookup" when search icon is clicked', () => { + const spy = jest.spyOn(Lookup.prototype, 'onLookup'); + const wrapper = mount( + + { }} + data={mockData} + /> + + ); + expect(spy).not.toHaveBeenCalled(); + wrapper.find('#search').simulate('click'); + expect(spy).toHaveBeenCalled(); + }); +}); diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx index 577ce56441..a5e069dd2b 100644 --- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx +++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx @@ -1,28 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router-dom'; - -let OrganizationAdd; -const getAppWithConfigContext = (context = { - custom_virtualenvs: ['foo', 'bar'] -}) => { - - // Mock the ConfigContext module being used in our OrganizationAdd component - jest.doMock('../../../../src/context', () => { - return { - ConfigContext: { - Consumer: (props) => props.children(context) - } - } - }); - - // Return the updated OrganizationAdd module with mocked context - return require('../../../../src/pages/Organizations/screens/OrganizationAdd').default; -}; - -beforeEach(() => { - OrganizationAdd = getAppWithConfigContext(); -}) +import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd' describe('', () => { test('initially renders succesfully', () => { @@ -78,4 +57,31 @@ describe('', () => { wrapper.find('button.at-C-CancelButton').prop('onClick')(); expect(spy).toBeCalled(); }); + test('API response data is formatted properly', () => { + const mockData = { data: { results: [{ name: 'test instance', id: 1 }] } }; + const promise = Promise.resolve(mockData); + + return promise.then(({ data }) => { + const expected = [{ id: 1, name: 'test instance', isChecked: false }]; + const results = OrganizationAdd.WrappedComponent.prototype.format(data); + expect(results).toEqual(expected); + }); + }); + + test('Successful form submission triggers redirect', (done) => { + const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess'); + const mockedResp = {data: {id: 1, related: {instance_groups: '/bar'}}}; + const api = { createOrganization: jest.fn().mockResolvedValue(mockedResp), createInstanceGroups: jest.fn().mockResolvedValue('done') }; + const wrapper = mount( + + + + ); + wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } }); + wrapper.find('button.at-C-SubmitButton').prop('onClick')(); + setImmediate(() => { + expect(spy).toHaveBeenCalled(); + done(); + }); + }); }); diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index f2c6635139..f5caf047d4 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -9,7 +9,7 @@ import { ToolbarGroup, } from '@patternfly/react-core'; -import CheckboxListItem from '../CheckboxListItem' +import CheckboxListItem from '../ListItem' class Lookup extends React.Component { constructor(props) { diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx index bf745be5a2..e61c3aa1a5 100644 --- a/src/pages/Organizations/screens/OrganizationAdd.jsx +++ b/src/pages/Organizations/screens/OrganizationAdd.jsx @@ -30,7 +30,9 @@ class OrganizationAdd extends React.Component { this.onSelectChange = this.onSelectChange.bind(this); this.onLookupChange = this.onLookupChange.bind(this); this.onSubmit = this.onSubmit.bind(this); + this.onSuccess = this.onSuccess.bind(this); this.onCancel = this.onCancel.bind(this); + this.format = this.format.bind(this); } state = { @@ -98,19 +100,23 @@ class OrganizationAdd extends React.Component { this.props.history.push(`/organizations/${id}`); } + format(data) { + let results = []; + data.results.map((result) => { + results.push({ id: result.id, name: result.name, isChecked: false }); + }); + return results; + }; + async componentDidMount() { const { api } = this.props; try { const { data } = await api.getInstanceGroups(); - let results = []; - data.results.map((result) => { - results.push({ id: result.id, name: result.name, isChecked: false }); - }) + this.format(data); this.setState({ results }); } catch (error) { this.setState({ getInstanceGroupsError: error }) } - } render() {