WIP introduce mocking api requests and testing resultant behavior

ui/mocks/dummy.ts

@@ -1,6 +1,6 @@
 export const kapacitor = {
   id: '1',
-  name: 'My Kapacitor',
+  name: 'Test Kapacitor',
   url: 'http://localhost:9092',
   active: true,
   links: {

ui/mocks/shared/apis/index.js

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

ui/src/kapacitor/containers/KapacitorPage.tsx

@@ -47,7 +47,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
     super(props)
     this.state = {
       kapacitor: {
-        url: this._parseKapacitorURL(),
+        url: this.parseKapacitorURL(),
         name: defaultName,
         username: '',
         password: '',
@@ -68,8 +68,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
 
     try {
       const kapacitor = await getKapacitor(source, id)
-      this.setState({kapacitor})
+      await this.checkKapacitorConnection(kapacitor)
-      this.checkKapacitorConnection(kapacitor)
     } catch (err) {
       console.error('Could not get kapacitor: ', err)
       addFlashMessage({
@@ -164,7 +163,7 @@ export class KapacitorPage extends PureComponent<Props, State> {
   handleResetToDefaults = e => {
     e.preventDefault()
     const defaultState = {
-      url: this._parseKapacitorURL(),
+      url: this.parseKapacitorURL(),
       name: defaultName,
       username: '',
       password: '',
@@ -177,7 +176,21 @@ export class KapacitorPage extends PureComponent<Props, State> {
     this.setState({kapacitor: {...defaultState}})
   }
 
-  _parseKapacitorURL = () => {
+  private checkKapacitorConnection = async kapacitor => {
+    try {
+      await pingKapacitor(kapacitor)
+      console.log('what kapacitor are you getting: ', kapacitor)
+      this.setState({kapacitor, exists: true})
+    } catch (error) {
+      this.setState({exists: false})
+      this.props.addFlashMessage({
+        type: 'error',
+        text: 'Could not connect to Kapacitor. Check settings.',
+      })
+    }
+  }
+
+  private parseKapacitorURL = () => {
     const parser = document.createElement('a')
     parser.href = this.props.source.url
 

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

@@ -2,14 +2,14 @@ import React from 'react'
 import {KapacitorPage} from 'src/kapacitor/containers/KapacitorPage'
 import KapacitorForm from 'src/kapacitor/components/KapacitorForm'
 import {shallow} from 'enzyme'
-import {getKapacitor} from 'src/shared/apis'
+import {getKapacitor, pingKapacitor} from 'src/shared/apis'
 
 import {source, kapacitor} from 'test/resources'
-import * as dummy from 'mocks/dummy'
+import * as mocks from 'mocks/dummy'
 
 jest.mock('src/shared/apis', () => require('mocks/shared/apis'))
 
-const setup = async (override = {}, returnWrapper = true) => {
+const setup = (override = {}, returnWrapper = true) => {
   const props = {
     source: source,
     addFlashMessage: () => {},
@@ -29,7 +29,7 @@ const setup = async (override = {}, returnWrapper = true) => {
     }
   }
 
-  const wrapper = await shallow(<KapacitorPage {...props} />)
+  const wrapper = shallow(<KapacitorPage {...props} />)
 
   return {
     wrapper,
@@ -39,13 +39,13 @@ const setup = async (override = {}, returnWrapper = true) => {
 
 describe('Kapacitor.Containers.KapacitorPage', () => {
   describe('rendering', () => {
-    it('renders the KapacitorPage', async () => {
+    it('renders the KapacitorPage', () => {
-      const {wrapper} = await setup()
+      const {wrapper} = setup()
       expect(wrapper.exists()).toBe(true)
     })
 
     it('renders the <KapacitorForm/>', async () => {
-      const {wrapper} = await setup()
+      const {wrapper} = setup()
       const form = wrapper.find(KapacitorForm)
 
       expect(form.exists()).toBe(true)
@@ -54,19 +54,23 @@ describe('Kapacitor.Containers.KapacitorPage', () => {
 
   describe('instance methods', () => {
     describe('componentDidMount', () => {
-      describe('if there is no id in the params', () => {
+      describe('if it is a new kapacitor', () => {
-        it('does not get the kapacitor', () => {
+        it('does not get the kapacitor', async () => {
+          const {wrapper} = setup()
+          await wrapper.instance().componentDidMount()
           expect(getKapacitor).not.toHaveBeenCalled()
         })
       })
 
-      describe('if there is an id in the params', () => {
+      describe('if it is an existing kapacitor', () => {
-        it('gets the kapacitor', async () => {
+        it('gets the kapacitor info and sets the appropriate state', async () => {
           const params = {id: '1', hash: ''}
-          const {wrapper} = await setup({params})
+          const {wrapper} = setup({params})
 
-          expect(getKapacitor).toHaveBeenCalledWith(source, params.id)
+          await wrapper.instance().componentDidMount()
-          expect(wrapper.state().kapacitor).toEqual(dummy.kapacitor)
+
+          expect(wrapper.state().exists).toBe(true)
+          expect(wrapper.state().kapacitor).toEqual(mocks.kapacitor)
         })
       })
     })