From 3f69abb9af010fb7de4ae9a759bfbf9d96cd3bf1 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Mon, 12 Mar 2018 13:38:17 -0700 Subject: [PATCH] Add more tests --- ui/mocks/dummy.ts | 1 + ui/mocks/shared/apis/index.js | 2 + ui/src/kapacitor/components/KapacitorForm.tsx | 6 +- ui/src/kapacitor/containers/KapacitorPage.tsx | 8 +- .../containers/KapacitorPage.test.tsx | 120 +++++++++++++----- ui/test/resources.ts | 1 + 6 files changed, 105 insertions(+), 33 deletions(-) diff --git a/ui/mocks/dummy.ts b/ui/mocks/dummy.ts index 696407733..ffab51681 100644 --- a/ui/mocks/dummy.ts +++ b/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', }, } diff --git a/ui/mocks/shared/apis/index.js b/ui/mocks/shared/apis/index.js index c66fbce14..d70eaa530 100644 --- a/ui/mocks/shared/apis/index.js +++ b/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()) diff --git a/ui/src/kapacitor/components/KapacitorForm.tsx b/ui/src/kapacitor/components/KapacitorForm.tsx index 2e26e5b9e..38eaf1e62 100644 --- a/ui/src/kapacitor/components/KapacitorForm.tsx +++ b/ui/src/kapacitor/components/KapacitorForm.tsx @@ -93,7 +93,11 @@ const KapacitorForm: SFC = ({ > Reset - diff --git a/ui/src/kapacitor/containers/KapacitorPage.tsx b/ui/src/kapacitor/containers/KapacitorPage.tsx index d299a2cab..dabb32d01 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.tsx +++ b/ui/src/kapacitor/containers/KapacitorPage.tsx @@ -58,6 +58,8 @@ export class KapacitorPage extends PureComponent { }, exists: false, } + + this.handleSubmit = this.handleSubmit.bind(this) } async componentDidMount() { @@ -68,6 +70,7 @@ export class KapacitorPage extends PureComponent { 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 { 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 { 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 { 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({ diff --git a/ui/test/kapacitor/containers/KapacitorPage.test.tsx b/ui/test/kapacitor/containers/KapacitorPage.test.tsx index 8d57d3b69..50ee4c7ec 100644 --- a/ui/test/kapacitor/containers/KapacitorPage.test.tsx +++ b/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() + const wrapper = mount() 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 ', 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() }) }) }) diff --git a/ui/test/resources.ts b/ui/test/resources.ts index 7217bd9c9..caee2f9c5 100644 --- a/ui/test/resources.ts +++ b/ui/test/resources.ts @@ -56,5 +56,6 @@ export const kapacitor = { active: false, links: { self: '/kapa/1', + proxy: '/proxy/kapacitor/1', }, }