mirror of
https://github.com/ansible/awx.git
synced 2026-02-24 06:26:00 -03:30
Merge pull request #144 from keithjgrant/120-add-org-form-cleanup
Refactor org add/edit forms with Formik
This commit is contained in:
Keith Grant
GitHub
5
__tests__/.eslintrc
Normal file
5
__tests__/.eslintrc
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"rules": {
|
||||
"react/jsx-pascal-case": "0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { I18nProvider } from '@lingui/react';
|
||||
import { ConfigContext } from '../../../../src/context';
|
||||
import OrganizationForm from '../../../../src/pages/Organizations/components/OrganizationForm';
|
||||
|
||||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
describe('<OrganizationForm />', () => {
|
||||
let api;
|
||||
|
||||
const mockData = {
|
||||
id: 1,
|
||||
name: 'Foo',
|
||||
description: 'Bar',
|
||||
custom_virtualenv: 'Fizz',
|
||||
related: {
|
||||
instance_groups: '/api/v2/organizations/1/instance_groups'
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
api = {
|
||||
getInstanceGroups: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
test('should request related instance groups from api', () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
api.getOrganizationInstanceGroups = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationForm
|
||||
api={api}
|
||||
organization={mockData}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationForm');
|
||||
|
||||
expect(api.getOrganizationInstanceGroups).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('componentDidMount should set instanceGroups to state', async () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
api.getOrganizationInstanceGroups = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
const wrapper = mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationForm');
|
||||
|
||||
await wrapper.instance().componentDidMount();
|
||||
expect(wrapper.state().instanceGroups).toEqual(mockInstanceGroups);
|
||||
});
|
||||
|
||||
test('changing instance group successfully sets instanceGroups state', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationForm');
|
||||
|
||||
const lookup = wrapper.find('InstanceGroupsLookup');
|
||||
expect(lookup.length).toBe(1);
|
||||
|
||||
lookup.prop('onChange')([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
], 'instanceGroups');
|
||||
expect(wrapper.state().instanceGroups).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
test('changing inputs should update form values', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationForm');
|
||||
|
||||
const form = wrapper.find('Formik');
|
||||
wrapper.find('input#edit-org-form-name').simulate('change', {
|
||||
target: { value: 'new foo', name: 'name' }
|
||||
});
|
||||
expect(form.state('values').name).toEqual('new foo');
|
||||
wrapper.find('input#edit-org-form-description').simulate('change', {
|
||||
target: { value: 'new bar', name: 'description' }
|
||||
});
|
||||
expect(form.state('values').description).toEqual('new bar');
|
||||
});
|
||||
|
||||
test('AnsibleSelect component renders if there are virtual environments', () => {
|
||||
const config = {
|
||||
custom_virtualenvs: ['foo', 'bar'],
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<ConfigContext.Provider value={config}>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</ConfigContext.Provider>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(wrapper.find('FormSelect')).toHaveLength(1);
|
||||
expect(wrapper.find('FormSelectOption')).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('calls handleSubmit when form submitted', async () => {
|
||||
const handleSubmit = jest.fn();
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={handleSubmit}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationForm');
|
||||
expect(wrapper.prop('handleSubmit')).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Save"]').simulate('click');
|
||||
await sleep(1);
|
||||
expect(handleSubmit).toHaveBeenCalledWith({
|
||||
name: 'Foo',
|
||||
description: 'Bar',
|
||||
custom_virtualenv: 'Fizz',
|
||||
}, [], []);
|
||||
});
|
||||
|
||||
test('handleSubmit associates and disassociates instance groups', async () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
api.getOrganizationInstanceGroups = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
const mockDataForm = {
|
||||
name: 'Foo',
|
||||
description: 'Bar',
|
||||
custom_virtualenv: 'Fizz',
|
||||
};
|
||||
const handleSubmit = jest.fn();
|
||||
api.updateOrganizationDetails = jest.fn().mockResolvedValue(1, mockDataForm);
|
||||
api.associateInstanceGroup = jest.fn().mockResolvedValue('done');
|
||||
api.disassociate = jest.fn().mockResolvedValue('done');
|
||||
const wrapper = mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={handleSubmit}
|
||||
handleCancel={jest.fn()}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationForm');
|
||||
|
||||
await wrapper.instance().componentDidMount();
|
||||
|
||||
wrapper.find('InstanceGroupsLookup').prop('onChange')([
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Three', id: 3 }
|
||||
], 'instanceGroups');
|
||||
|
||||
wrapper.find('button[aria-label="Save"]').simulate('click');
|
||||
await sleep(0);
|
||||
expect(handleSubmit).toHaveBeenCalledWith(mockDataForm, [3], [2]);
|
||||
});
|
||||
|
||||
test('calls "handleCancel" when Cancel button is clicked', () => {
|
||||
const handleCancel = jest.fn();
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationForm
|
||||
organization={mockData}
|
||||
api={api}
|
||||
handleSubmit={jest.fn()}
|
||||
handleCancel={handleCancel}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(handleCancel).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
||||
expect(handleCancel).toBeCalled();
|
||||
});
|
||||
});
|
||||
@@ -2,11 +2,13 @@ import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { I18nProvider } from '@lingui/react';
|
||||
import { ConfigContext } from '../../../../../src/context';
|
||||
import APIClient from '../../../../../src/api';
|
||||
import OrganizationEdit from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
|
||||
import OrganizationEdit, { _OrganizationEdit } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationEdit';
|
||||
|
||||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
describe('<OrganizationEdit />', () => {
|
||||
let api;
|
||||
|
||||
const mockData = {
|
||||
name: 'Foo',
|
||||
description: 'Bar',
|
||||
@@ -17,228 +19,93 @@ describe('<OrganizationEdit />', () => {
|
||||
}
|
||||
};
|
||||
|
||||
test('should request related instance groups from api', () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
const getOrganizationInstanceGroups = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationEdit
|
||||
match={{ params: { id: '1' } }}
|
||||
api={{
|
||||
getOrganizationInstanceGroups
|
||||
}}
|
||||
organization={mockData}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationEdit');
|
||||
|
||||
expect(getOrganizationInstanceGroups).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('componentDidMount should set instanceGroups to state', async () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
const getOrganizationInstanceGroups = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
const wrapper = mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationEdit
|
||||
match={{
|
||||
path: '/organizations/:id',
|
||||
url: '/organizations/1',
|
||||
params: { id: '1' }
|
||||
}}
|
||||
organization={mockData}
|
||||
api={{ getOrganizationInstanceGroups }}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationEdit');
|
||||
|
||||
await wrapper.instance().componentDidMount();
|
||||
expect(wrapper.state().form.instanceGroups.value).toEqual(mockInstanceGroups);
|
||||
});
|
||||
test('onLookupSave successfully sets instanceGroups state', () => {
|
||||
const api = jest.fn();
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationEdit
|
||||
organization={mockData}
|
||||
api={api}
|
||||
match={{ path: '/organizations/:id/edit', url: '/organizations/1/edit' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationEdit');
|
||||
|
||||
wrapper.instance().onLookupSave([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
], 'instanceGroups');
|
||||
expect(wrapper.state().form.instanceGroups.value).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
]);
|
||||
});
|
||||
test('calls "onFieldChange" when input values change', () => {
|
||||
const api = new APIClient();
|
||||
const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onFieldChange');
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationEdit
|
||||
organization={mockData}
|
||||
api={api}
|
||||
match={{ path: '/organizations/:id/edit', url: '/organizations/1/edit' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationEdit');
|
||||
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.instance().onFieldChange('foo', { target: { name: 'name' } });
|
||||
wrapper.instance().onFieldChange('bar', { target: { name: 'description' } });
|
||||
expect(spy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
test('AnsibleSelect component renders if there are virtual environments', () => {
|
||||
const api = jest.fn();
|
||||
const config = {
|
||||
custom_virtualenvs: ['foo', 'bar'],
|
||||
beforeEach(() => {
|
||||
api = {
|
||||
getInstanceGroups: jest.fn(),
|
||||
updateOrganizationDetails: jest.fn(),
|
||||
associateInstanceGroup: jest.fn(),
|
||||
disassociate: jest.fn(),
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<ConfigContext.Provider value={config}>
|
||||
<OrganizationEdit
|
||||
match={{
|
||||
path: '/organizations/:id',
|
||||
url: '/organizations/1',
|
||||
params: { id: '1' }
|
||||
}}
|
||||
organization={mockData}
|
||||
api={api}
|
||||
/>
|
||||
</ConfigContext.Provider>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(wrapper.find('FormSelect')).toHaveLength(1);
|
||||
expect(wrapper.find('FormSelectOption')).toHaveLength(2);
|
||||
});
|
||||
test('calls onSubmit when Save button is clicked', () => {
|
||||
const api = jest.fn();
|
||||
const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onSubmit');
|
||||
|
||||
test('handleSubmit should call api update', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationEdit
|
||||
match={{
|
||||
path: '/organizations/:id',
|
||||
url: '/organizations/1',
|
||||
params: { id: '1' }
|
||||
}}
|
||||
organization={mockData}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Save"]').prop('onClick')();
|
||||
expect(spy).toBeCalled();
|
||||
});
|
||||
test('onSubmit associates and disassociates instance groups', async () => {
|
||||
const mockInstanceGroups = [
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Two', id: 2 }
|
||||
];
|
||||
const getOrganizationInstanceGroupsFn = jest.fn(() => (
|
||||
Promise.resolve({ data: { results: mockInstanceGroups } })
|
||||
));
|
||||
const mockDataForm = {
|
||||
name: 'Foo',
|
||||
description: 'Bar',
|
||||
custom_virtualenv: 'Fizz',
|
||||
|
||||
const updatedOrgData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
custom_virtualenv: 'Buzz',
|
||||
};
|
||||
const updateOrganizationDetailsFn = jest.fn().mockResolvedValue(1, mockDataForm);
|
||||
const associateInstanceGroupFn = jest.fn().mockResolvedValue('done');
|
||||
const disassociateInstanceGroupFn = jest.fn().mockResolvedValue('done');
|
||||
const api = {
|
||||
getOrganizationInstanceGroups: getOrganizationInstanceGroupsFn,
|
||||
updateOrganizationDetails: updateOrganizationDetailsFn,
|
||||
associateInstanceGroup: associateInstanceGroupFn,
|
||||
disassociate: disassociateInstanceGroupFn
|
||||
};
|
||||
const wrapper = mount(
|
||||
<I18nProvider>
|
||||
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
|
||||
<OrganizationEdit
|
||||
match={{
|
||||
path: '/organizations/:id',
|
||||
url: '/organizations/1',
|
||||
params: { id: '1' }
|
||||
}}
|
||||
organization={mockData}
|
||||
api={api}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</I18nProvider>
|
||||
).find('OrganizationEdit');
|
||||
wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [], []);
|
||||
|
||||
await wrapper.instance().componentDidMount();
|
||||
|
||||
wrapper.instance().onLookupSave([
|
||||
{ name: 'One', id: 1 },
|
||||
{ name: 'Three', id: 3 }
|
||||
], 'instanceGroups');
|
||||
|
||||
await wrapper.instance().onSubmit();
|
||||
expect(updateOrganizationDetailsFn).toHaveBeenCalledWith(1, mockDataForm);
|
||||
expect(associateInstanceGroupFn).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
|
||||
expect(associateInstanceGroupFn).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
|
||||
expect(associateInstanceGroupFn).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 2);
|
||||
|
||||
expect(disassociateInstanceGroupFn).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 2);
|
||||
expect(disassociateInstanceGroupFn).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
|
||||
expect(disassociateInstanceGroupFn).not.toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 3);
|
||||
expect(api.updateOrganizationDetails).toHaveBeenCalledWith(
|
||||
1,
|
||||
updatedOrgData
|
||||
);
|
||||
});
|
||||
|
||||
test('calls "onCancel" when Cancel button is clicked', () => {
|
||||
const api = jest.fn();
|
||||
const spy = jest.spyOn(OrganizationEdit.WrappedComponent.prototype, 'onCancel');
|
||||
test('handleSubmit associates and disassociates instance groups', async () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationEdit
|
||||
match={{
|
||||
path: '/organizations/:id',
|
||||
url: '/organizations/1',
|
||||
params: { id: '1' }
|
||||
}}
|
||||
organization={mockData}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
|
||||
const updatedOrgData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
custom_virtualenv: 'Buzz',
|
||||
};
|
||||
wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [3, 4], [2]);
|
||||
await sleep(1);
|
||||
|
||||
expect(api.associateInstanceGroup).toHaveBeenCalledWith(
|
||||
'/api/v2/organizations/1/instance_groups',
|
||||
3
|
||||
);
|
||||
expect(api.associateInstanceGroup).toHaveBeenCalledWith(
|
||||
'/api/v2/organizations/1/instance_groups',
|
||||
4
|
||||
);
|
||||
expect(api.disassociate).toHaveBeenCalledWith(
|
||||
'/api/v2/organizations/1/instance_groups',
|
||||
2
|
||||
);
|
||||
});
|
||||
|
||||
test('should navigate to organization detail when cancel is clicked', () => {
|
||||
const history = {
|
||||
push: jest.fn(),
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<_OrganizationEdit
|
||||
history={history}
|
||||
organization={mockData}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
expect(history.push).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
||||
expect(spy).toBeCalled();
|
||||
|
||||
expect(history.push).toHaveBeenCalledWith('/organizations/1');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,184 +1,152 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { MemoryRouter, Router } from 'react-router-dom';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { I18nProvider } from '@lingui/react';
|
||||
import { ConfigContext } from '../../../../src/context';
|
||||
import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd';
|
||||
import OrganizationAdd, { _OrganizationAdd } from '../../../../src/pages/Organizations/screens/OrganizationAdd';
|
||||
|
||||
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
describe('<OrganizationAdd />', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
match={{ path: '/organizations/add', url: '/organizations/add' }}
|
||||
location={{ search: '', pathname: '/organizations/add' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
let api;
|
||||
|
||||
beforeEach(() => {
|
||||
api = {
|
||||
getInstanceGroups: jest.fn(),
|
||||
createOrganization: jest.fn(),
|
||||
associateInstanceGroup: jest.fn(),
|
||||
disassociate: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
test('calls "onFieldChange" when input values change', () => {
|
||||
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange');
|
||||
test('handleSubmit should post to api', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
match={{ path: '/organizations/add', url: '/organizations/add' }}
|
||||
location={{ search: '', pathname: '/organizations/add' }}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
|
||||
wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } });
|
||||
expect(spy).toHaveBeenCalledTimes(2);
|
||||
|
||||
const updatedOrgData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
custom_virtualenv: 'Buzz',
|
||||
};
|
||||
wrapper.find('OrganizationForm').prop('handleSubmit')(updatedOrgData, [], []);
|
||||
|
||||
expect(api.createOrganization).toHaveBeenCalledWith(updatedOrgData);
|
||||
});
|
||||
|
||||
test('calls "onSubmit" when Save button is clicked', () => {
|
||||
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit');
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
match={{ path: '/organizations/add', url: '/organizations/add' }}
|
||||
location={{ search: '', pathname: '/organizations/add' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Save"]').prop('onClick')();
|
||||
expect(spy).toBeCalled();
|
||||
});
|
||||
|
||||
test('calls "onCancel" when Cancel button is clicked', () => {
|
||||
const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel');
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
match={{ path: '/organizations/add', url: '/organizations/add' }}
|
||||
location={{ search: '', pathname: '/organizations/add' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(spy).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
||||
expect(spy).toBeCalled();
|
||||
});
|
||||
|
||||
test('calls "onCancel" when close button (x) is clicked', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter initialEntries={['/organizations/add']} initialIndex={0}>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
match={{ path: '/organizations/add', url: '/organizations/add' }}
|
||||
location={{ search: '', pathname: '/organizations/add' }}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
const history = wrapper.find(Router).prop('history');
|
||||
expect(history.length).toBe(1);
|
||||
expect(history.location.pathname).toEqual('/organizations/add');
|
||||
wrapper.find('button[aria-label="Close"]').prop('onClick')();
|
||||
expect(history.length).toBe(2);
|
||||
expect(history.location.pathname).toEqual('/organizations');
|
||||
});
|
||||
|
||||
test('Successful form submission triggers redirect', (done) => {
|
||||
const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess');
|
||||
const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } };
|
||||
const api = { createOrganization: jest.fn().mockResolvedValue(mockedResp), associateInstanceGroup: jest.fn().mockResolvedValue('done') };
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd api={api} />
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
wrapper.find('input#add-org-form-name').simulate('change', { target: { value: 'foo' } });
|
||||
wrapper.find('button[aria-label="Save"]').prop('onClick')();
|
||||
setImmediate(() => {
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('onLookupSave successfully sets instanceGroups state', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd api={{}} />
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationAdd');
|
||||
wrapper.instance().onLookupSave([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
], 'instanceGroups');
|
||||
expect(wrapper.state('instanceGroups')).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
test('onFieldChange successfully sets custom_virtualenv state', () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd api={{}} />
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationAdd');
|
||||
wrapper.instance().onFieldChange('fooBar', { target: { name: 'custom_virtualenv' } });
|
||||
expect(wrapper.state('custom_virtualenv')).toBe('fooBar');
|
||||
});
|
||||
|
||||
test('onSubmit posts instance groups from selectedInstanceGroups', async () => {
|
||||
const createOrganizationFn = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
id: 1,
|
||||
name: 'mock org',
|
||||
related: {
|
||||
instance_groups: '/api/v2/organizations/1/instance_groups'
|
||||
}
|
||||
}
|
||||
});
|
||||
const associateInstanceGroupFn = jest.fn().mockResolvedValue('done');
|
||||
const api = {
|
||||
createOrganization: createOrganizationFn,
|
||||
associateInstanceGroup: associateInstanceGroupFn
|
||||
test('should navigate to organizations list when cancel is clicked', () => {
|
||||
const history = {
|
||||
push: jest.fn(),
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd api={api} />
|
||||
<_OrganizationAdd
|
||||
history={history}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
).find('OrganizationAdd');
|
||||
wrapper.setState({
|
||||
name: 'mock org',
|
||||
instanceGroups: [{
|
||||
id: 1,
|
||||
name: 'foo'
|
||||
}]
|
||||
);
|
||||
|
||||
expect(history.push).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
|
||||
|
||||
expect(history.push).toHaveBeenCalledWith('/organizations');
|
||||
});
|
||||
|
||||
test('should navigate to organizations list when close (x) is clicked', () => {
|
||||
const history = {
|
||||
push: jest.fn(),
|
||||
};
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<_OrganizationAdd
|
||||
history={history}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
expect(history.push).not.toHaveBeenCalled();
|
||||
wrapper.find('button[aria-label="Close"]').prop('onClick')();
|
||||
|
||||
expect(history.push).toHaveBeenCalledWith('/organizations');
|
||||
});
|
||||
|
||||
test('successful form submission should trigger redirect', async () => {
|
||||
const history = {
|
||||
push: jest.fn(),
|
||||
};
|
||||
const orgData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
custom_virtualenv: 'Buzz',
|
||||
};
|
||||
api.createOrganization.mockReturnValueOnce({
|
||||
data: {
|
||||
id: 5,
|
||||
related: {
|
||||
instance_groups: '/bar',
|
||||
},
|
||||
...orgData,
|
||||
}
|
||||
});
|
||||
await wrapper.instance().onSubmit();
|
||||
expect(createOrganizationFn).toHaveBeenCalledWith({
|
||||
custom_virtualenv: '',
|
||||
description: '',
|
||||
name: 'mock org'
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<_OrganizationAdd
|
||||
history={history}
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [], []);
|
||||
await sleep(0);
|
||||
|
||||
expect(history.push).toHaveBeenCalledWith('/organizations/5');
|
||||
});
|
||||
|
||||
test('handleSubmit should post instance groups', async () => {
|
||||
const wrapper = mount(
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<OrganizationAdd
|
||||
api={api}
|
||||
/>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const orgData = {
|
||||
name: 'new name',
|
||||
description: 'new description',
|
||||
custom_virtualenv: 'Buzz',
|
||||
};
|
||||
api.createOrganization.mockReturnValueOnce({
|
||||
data: {
|
||||
id: 5,
|
||||
related: {
|
||||
instance_groups: '/api/v2/organizations/5/instance_groups',
|
||||
},
|
||||
...orgData,
|
||||
}
|
||||
});
|
||||
expect(associateInstanceGroupFn).toHaveBeenCalledWith('/api/v2/organizations/1/instance_groups', 1);
|
||||
wrapper.find('OrganizationForm').prop('handleSubmit')(orgData, [3], []);
|
||||
await sleep(0);
|
||||
|
||||
expect(api.associateInstanceGroup)
|
||||
.toHaveBeenCalledWith('/api/v2/organizations/5/instance_groups', 3);
|
||||
});
|
||||
|
||||
test('AnsibleSelect component renders if there are virtual environments', () => {
|
||||
@@ -189,7 +157,7 @@ describe('<OrganizationAdd />', () => {
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<ConfigContext.Provider value={config}>
|
||||
<OrganizationAdd api={{}} />
|
||||
<OrganizationAdd api={api} />
|
||||
</ConfigContext.Provider>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
@@ -206,7 +174,7 @@ describe('<OrganizationAdd />', () => {
|
||||
<MemoryRouter>
|
||||
<I18nProvider>
|
||||
<ConfigContext.Provider value={config}>
|
||||
<OrganizationAdd api={{}} />
|
||||
<OrganizationAdd api={api} />
|
||||
</ConfigContext.Provider>
|
||||
</I18nProvider>
|
||||
</MemoryRouter>
|
||||
|
||||
34
__tests__/util/validators.test.js
Normal file
34
__tests__/util/validators.test.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import { required, maxLength } from '../../src/util/validators';
|
||||
|
||||
describe('validators', () => {
|
||||
test('required returns undefined if value given', () => {
|
||||
expect(required()('some value')).toBeUndefined();
|
||||
expect(required('oops')('some value')).toBeUndefined();
|
||||
});
|
||||
|
||||
test('required returns default message if value missing', () => {
|
||||
expect(required()('')).toEqual('This field must not be blank');
|
||||
});
|
||||
|
||||
test('required returns custom message if value missing', () => {
|
||||
expect(required('oops')('')).toEqual('oops');
|
||||
});
|
||||
|
||||
test('required interprets white space as empty value', () => {
|
||||
expect(required()(' ')).toEqual('This field must not be blank');
|
||||
expect(required()('\t')).toEqual('This field must not be blank');
|
||||
});
|
||||
|
||||
test('maxLength accepts value below max', () => {
|
||||
expect(maxLength(10)('snazzy')).toBeUndefined();
|
||||
});
|
||||
|
||||
test('maxLength accepts value equal to max', () => {
|
||||
expect(maxLength(10)('abracadbra')).toBeUndefined();
|
||||
});
|
||||
|
||||
test('maxLength rejects value above max', () => {
|
||||
expect(maxLength(8)('abracadbra'))
|
||||
.toEqual('This field must not exceed 8 characters');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user