From 27e13ca082d773dfb856fc406d671d3259bae294 Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Mon, 10 Dec 2018 15:03:33 -0500
Subject: [PATCH] Add tests for Organization add view plus code refactoring.

---
 .../views/Organization.add.test.jsx           | 37 +++++++++++++++++++
 .../Organizations/views/Organization.add.jsx  | 34 ++++++++++-------
 2 files changed, 57 insertions(+), 14 deletions(-)

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('<OrganizationAdd />', () => {
       />
     );
   });
+  test('calls "onSelectChange" on dropdown select change', () => {
+    const spy = jest.spyOn(OrganizationAdd.prototype, 'onSelectChange');
+    const wrapper = mount(
+      <OrganizationAdd
+        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        location={{ search: '', pathname: '/organizations/add' }}
+      />
+    );
+    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(
+      <OrganizationAdd
+        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        location={{ search: '', pathname: '/organizations/add' }}
+      />
+    );
+    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(
+      <OrganizationAdd
+        match={{ path: '/organizations/add', url: '/organizations/add' }}
+        location={{ search: '', pathname: '/organizations/add' }}
+      />
+    );
+    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 {
                     />
                   </FormGroup>
                   <FormGroup label="Ansible Environment" fieldId="simple-form-instance-groups">
-                    <Select value={this.state.value} onChange={this.onSelectChange} aria-label="Select Input">
+                    <Select value={this.state.ansible_environment} onChange={this.onSelectChange} aria-label="Select Input">
                       {this.envs.map((env, index) => (
-                        <SelectOption isDisabled={env.disabled} key={index} value={env.value} label={env.label} />
+                        <SelectOption isDisabled={env.disabled} key={index} value={env.ansible_environment} label={env.label} />
                       ))}
                     </Select>
                   </FormGroup>
@@ -111,7 +117,7 @@ class OrganizationAdd extends React.Component {
                 <ActionGroup className="at-align-right">
                   <Toolbar>
                     <ToolbarGroup>
-                      <Button variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
+                      <Button className="at-C-SubmitButton" variant="primary" onClick={this.onSubmit} isDisabled={!enabled}>Save</Button>
                     </ToolbarGroup>
                     <ToolbarGroup>
                       <Button variant="secondary">Cancel</Button>