diff --git a/__tests__/pages/Organizations/views/Organization.add.test.jsx b/__tests__/pages/Organizations/views/Organization.add.test.jsx
index c8822cfc38..2482c84984 100644
--- a/__tests__/pages/Organizations/views/Organization.add.test.jsx
+++ b/__tests__/pages/Organizations/views/Organization.add.test.jsx
@@ -11,4 +11,41 @@ describe('', () => {
/>
);
});
+ test('calls "onSelectChange" on dropdown select change', () => {
+ const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
+ const wrapper = mount(
+
+ );
+ expect(spy).not.toHaveBeenCalled();
+ wrapper.find('select').simulate('change');
+ expect(spy).toHaveBeenCalled();
+ });
+ test('calls "handleChange" when input values change', () => {
+ const spy = jest.spyOn(OrganizationAdd.prototype, 'handleChange');
+ const wrapper = mount(
+
+ );
+ 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);
+ });
+ test('calls "onSubmit" when Save button is clicked', () => {
+ const spy = jest.spyOn(OrganizationAdd.prototype, 'onSubmit');
+ const wrapper = mount(
+
+ );
+ expect(spy).not.toHaveBeenCalled();
+ wrapper.find('button.at-C-SubmitButton').prop('onClick')();
+ expect(spy).toBeCalled();
+ });
});
diff --git a/src/pages/Organizations/views/Organization.add.jsx b/src/pages/Organizations/views/Organization.add.jsx
index 58581f059b..6e3d9b860c 100644
--- a/src/pages/Organizations/views/Organization.add.jsx
+++ b/src/pages/Organizations/views/Organization.add.jsx
@@ -22,7 +22,14 @@ import api from '../../../api';
const { light } = PageSectionVariants;
class OrganizationAdd extends React.Component {
+ constructor(props) {
+ super(props);
+ this.handleChange = this.handleChange.bind(this);
+ this.onSelectChange = this.onSelectChange.bind(this);
+ this.onSubmit = this.onSubmit.bind(this);
+ this.resetForm = this.resetForm.bind(this);
+ }
state = {
name: '',
description: '',
@@ -31,31 +38,30 @@ class OrganizationAdd extends React.Component {
post_endpoint: API_ORGANIZATIONS,
};
- onSelectChange = (value, _) => {
+ onSelectChange (value, _) {
this.setState({ ansible_environment: value });
};
-
- envs = [ // Placeholder for Ansible Environment Dropdown
- { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
- { ansible_environment: '1', label: '1', disabled: false },
- { ansible_environment: '2', label: '2', disabled: false },
- { ansible_environment: '3', label: '3', disabled: false }
- ];
- resetForm = () => {
+ resetForm() {
this.setState({
...this.state,
name: '',
description: ''
})
}
- handleChange = (_, evt) => {
+ handleChange(_, evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
- onSubmit = async () => {
+ async onSubmit() {
const data = Object.assign({}, { ...this.state });
await api.post(API_ORGANIZATIONS, data);
this.resetForm();
}
+ envs = [ // Placeholder for Ansible Environment Dropdown
+ { ansible_environment: 'default', label: 'Select Ansible Environment', disabled: true },
+ { ansible_environment: '1', label: '1', disabled: false },
+ { ansible_environment: '2', label: '2', disabled: false },
+ { ansible_environment: '3', label: '3', disabled: false }
+ ];
render() {
const { name } = this.state;
const enabled = name.length > 0; // TODO: add better form validation
@@ -101,9 +107,9 @@ class OrganizationAdd extends React.Component {
/>
-
@@ -111,7 +117,7 @@ class OrganizationAdd extends React.Component {
-
+