Add more tests

ui/mocks/dummy.ts

@@ -5,5 +5,6 @@ export const kapacitor = {
   active: true,
   links: {
     self: '/chronograf/v1/sources/47/kapacitors/1',
+    proxy: '/chronograf/v1/sources/47/kapacitors/1/proxy',
   },
 }

ui/mocks/shared/apis/index.js

@@ -1,4 +1,6 @@
 import {kapacitor} from 'mocks/dummy'
 
 export const getKapacitor = jest.fn(() => Promise.resolve(kapacitor))
+export const createKapacitor = jest.fn(() => Promise.resolve({data: kapacitor}))
+export const updateKapacitor = jest.fn(() => Promise.resolve({data: kapacitor}))
 export const pingKapacitor = jest.fn(() => Promise.resolve())

ui/src/kapacitor/components/KapacitorForm.tsx

@@ -93,7 +93,11 @@ const KapacitorForm: SFC<Props> = ({
                     >
                       Reset
                     </button>
-                    <button className="btn btn-success" type="submit">
+                    <button
+                      className="btn btn-success"
+                      type="submit"
+                      data-test="submit-button"
+                    >
                       {exists ? 'Update' : 'Connect'}
                     </button>
                   </div>

ui/src/kapacitor/containers/KapacitorPage.tsx

@@ -58,6 +58,8 @@ export class KapacitorPage extends PureComponent<Props, State> {
       },
       exists: false,
     }
+
+    this.handleSubmit = this.handleSubmit.bind(this)
   }
 
   async componentDidMount() {
@@ -68,6 +70,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
 
     try {
       const kapacitor = await getKapacitor(source, id)
+      this.setState({kapacitor})
       await this.checkKapacitorConnection(kapacitor)
     } catch (err) {
       console.error('Could not get kapacitor: ', err)
@@ -91,7 +94,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
     this.setState({kapacitor: {...this.state.kapacitor, url: e.target.value}})
   }
 
-  handleSubmit = async e => {
+  handleSubmit = e => {
     e.preventDefault()
     const {
       addFlashMessage,
@@ -100,6 +103,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
       params,
       router,
     } = this.props
+
     const {kapacitor} = this.state
     kapacitor.name = kapacitor.name.trim()
     const isNameTaken = kapacitors.some(k => k.name === kapacitor.name)
@@ -166,7 +170,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
   private checkKapacitorConnection = async (kapacitor: Kapacitor) => {
     try {
       await pingKapacitor(kapacitor)
-      this.setState({kapacitor, exists: true})
+      this.setState({exists: true})
     } catch (error) {
       this.setState({exists: false})
       this.props.addFlashMessage({

ui/test/kapacitor/containers/KapacitorPage.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import {KapacitorPage} from 'src/kapacitor/containers/KapacitorPage'
 import KapacitorForm from 'src/kapacitor/components/KapacitorForm'
 import KapacitorFormInput from 'src/kapacitor/components/KapacitorFormInput'
-import {shallow} from 'enzyme'
-import {getKapacitor} from 'src/shared/apis'
+import {mount} from 'enzyme'
+import {getKapacitor, createKapacitor, updateKapacitor} from 'src/shared/apis'
 
 import {source, kapacitor} from 'test/resources'
 import * as mocks from 'mocks/dummy'
@@ -24,7 +24,7 @@ const setup = (override = {}) => {
     ...override,
   }
 
-  const wrapper = shallow(<KapacitorPage {...props} />)
+  const wrapper = mount(<KapacitorPage {...props} />)
 
   return {
     wrapper,
@@ -33,57 +33,117 @@ const setup = (override = {}) => {
 }
 
 describe('Kapacitor.Containers.KapacitorPage', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
   describe('rendering', () => {
     it('renders the KapacitorPage', () => {
       const {wrapper} = setup()
       expect(wrapper.exists()).toBe(true)
     })
 
-    it('renders the <KapacitorForm/>', async () => {
+    it('renders the KapacitorForm', async () => {
       const {wrapper} = setup()
       const form = wrapper.find(KapacitorForm)
 
       expect(form.exists()).toBe(true)
     })
-
-    describe('if it is a new kapacitor', () => {
-      it('display the default kapacitor data', async () => {
-        const {wrapper} = setup()
-        const state = wrapper.state()
-
-        const form = wrapper.find(KapacitorForm)
-        const url = form
-          .dive()
-          .findWhere(n => n.props().value === state.kapacitor.url)
-        expect(url.exists()).toBe(true)
-      })
-    })
   })
 
   describe('user interactions ', () => {
     describe('entering the url', () => {
       it('renders the text that is inputted', () => {
         const {wrapper} = setup()
-        const state = wrapper.state()
-        const event = {target: {value: 'new/url/'}}
+        const value = '/new/url'
+        const event = {target: {value}}
 
         wrapper.find(KapacitorFormInput)
-        let inputElement = wrapper
-          .find(KapacitorForm)
-          .dive()
-          .findWhere(n => n.props().value === state.kapacitor.url)
-          .dive()
-          .find('input')
+        let inputElement = wrapper.find('#kapaUrl')
 
         inputElement.simulate('change', event)
         wrapper.update()
 
-        inputElement = wrapper
-          .find(KapacitorForm)
-          .dive()
-          .findWhere(n => n.props().value === event.target.value)
+        inputElement = wrapper.find('#kapaUrl')
 
-        expect(inputElement.exists()).toBe(true)
+        expect(inputElement.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the kapacitor name', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'My New Kapacitor'
+        const event = {target: {value, name: 'name'}}
+
+        wrapper.find(KapacitorFormInput)
+        let inputElement = wrapper.find('#name')
+
+        inputElement.simulate('change', event)
+        wrapper.update()
+
+        inputElement = wrapper.find('#name')
+
+        expect(inputElement.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the username', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'user1'
+        const event = {target: {value, name: 'username'}}
+
+        wrapper.find(KapacitorFormInput)
+        let inputElement = wrapper.find('#username')
+
+        inputElement.simulate('change', event)
+        wrapper.update()
+
+        inputElement = wrapper.find('#username')
+
+        expect(inputElement.prop('value')).toBe(value)
+      })
+    })
+
+    describe('entering the password', () => {
+      it('renders the text that is inputted', () => {
+        const {wrapper} = setup()
+        const value = 'password'
+        const event = {target: {value, name: 'password'}}
+
+        wrapper.find(KapacitorFormInput)
+        let inputElement = wrapper.find('#password')
+
+        inputElement.simulate('change', event)
+        wrapper.update()
+
+        inputElement = wrapper.find('#password')
+
+        expect(inputElement.prop('value')).toBe(value)
+      })
+    })
+
+    describe('submitting the form', () => {
+      it('creates a new Kapacitor if there is no kapacitor', async () => {
+        const {wrapper} = setup()
+        const submit = wrapper.find({'data-test': 'submit-button'})
+
+        submit.simulate('submit')
+
+        expect(createKapacitor).toHaveBeenCalled()
+        expect(updateKapacitor).not.toHaveBeenCalled()
+      })
+
+      it('updates an existing Kapacitor if there is a kapacitor', () => {
+        const props = {params: {id: '1', hash: ''}}
+        const {wrapper} = setup(props)
+        const submit = wrapper.find({'data-test': 'submit-button'})
+
+        submit.simulate('submit')
+
+        expect(updateKapacitor).toHaveBeenCalled()
+        expect(createKapacitor).not.toHaveBeenCalled()
       })
     })
   })

ui/test/resources.ts

@@ -56,5 +56,6 @@ export const kapacitor = {
   active: false,
   links: {
     self: '/kapa/1',
+    proxy: '/proxy/kapacitor/1',
   },
 }