Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove improper user interaction work-in-progress 

Enzyme is not intended to test toggling a checkbox.
See https://github.com/airbnb/enzyme/issues/952.

Test initial render RuleRow.
Make query an optional property in AlertRule definition.
pull/10616/head
Jared Scheib 2018-03-21 16:08:17 -07:00
parent 90e0aa1a01
commit a95b8543c3
3 changed files with 30 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/kapacitor/components/KapacitorRulesTable.tsx
View File

@ -65,11 +65,13 @@ const KapacitorRulesTable: SFC<KapacitorRulesTableProps> = ({
</table>
)
class RuleRow extends PureComponent<RuleRowProps> {
export class RuleRow extends PureComponent<RuleRowProps> {
constructor(props) {
super(props)
this.handleClickRuleStatusEnabled = this.handleClickRuleStatusEnabled.bind(this)
this.handleClickRuleStatusEnabled = this.handleClickRuleStatusEnabled.bind(
this
)
this.handleDelete = this.handleDelete.bind(this)
}

6
ui/src/types/kapacitor.tsx
View File

@ -1,4 +1,4 @@
import {QueryConfig} from "./"
import {QueryConfig} from './'
export interface Kapacitor {
id?: string
@ -16,7 +16,7 @@ export interface Kapacitor {
export interface AlertRule {
id?: string
tickscript: TICKScript
query: QueryConfig
query?: QueryConfig
every: string
alertNodes: AlertNodes
message: string
@ -31,7 +31,7 @@ export interface AlertRule {
error: string
created: string
modified: string
"last-enabled"?: string
'last-enabled'?: string
}
type TICKScript = string

140
ui/test/kapacitor/components/KapacitorRules.test.tsx
View File

@ -1,24 +1,25 @@
import React from 'react'
import {mount, shallow} from 'enzyme'
import {shallow} from 'enzyme'
import _ from 'lodash'
import KapacitorRules from 'src/kapacitor/components/KapacitorRules'
import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
import {RuleRow} from 'src/kapacitor/components/KapacitorRulesTable'
import TasksTable from 'src/kapacitor/components/TasksTable'
import {source, kapacitorRules} from 'test/resources'
const props = {
source,
rules: kapacitorRules,
hasKapacitor: true,
loading: false,
onDelete: () => {},
onChangeRuleStatus: () => {},
}
describe('Kapacitor.Containers.KapacitorRules', () => {
const props = {
source,
rules: kapacitorRules,
hasKapacitor: true,
loading: false,
onDelete: () => {},
onChangeRuleStatus: () => {},
}
describe('rendering', () => {
it('renders KapacitorRules', () => {
const wrapper = shallow(<KapacitorRules {...props} />)
@ -149,116 +150,21 @@ describe('Kapacitor.Containers.KapacitorRules', () => {
})
})
})
})
describe('user interactions', () => {
it('toggles each checkbox when clicked', () => {
const wrapper = mount(<KapacitorRules {...props} />)
describe('Kapacitor.Containers.KapacitorRules.RuleRow', () => {
const props = {
source,
rule: kapacitorRules[0],
onDelete: () => {},
onChangeRuleStatus: () => {},
}
// assert each pair has the same checked value
// assert that when either a pair is clicked, both reflect the toggle
// assert also here that no others have changed
describe('rendering', () => {
it('renders RuleRow', () => {
const wrapper = shallow(<RuleRow {...props} />)
const findRows = table =>
wrapper
.find(table)
.find('tbody')
.children()
.map(elRow => {
const {props} = elRow.instance()
let id, status
if (props.rule) {
id = props.rule.id
status = props.rule.status
} else if (props.task) {
id = props.task.id
status = props.task.status
}
const elCheckbox = elRow.find({type: 'checkbox'})
const {checked} = elCheckbox.props()
return {
ruleID: id,
row: {
el: elRow,
status,
},
checkbox: {
el: elCheckbox,
checked,
},
}
})
const rulesRows = findRows(KapacitorRulesTable)
const tasksRows = findRows(TasksTable)
console.log(rulesRows)
console.log(tasksRows)
// checkboxes.forEach
// const initialRulesCheckboxes = wrapper
// .find(KapacitorRulesTable)
// .find('tbody')
// .children()
// .map(child => child.find({type: 'checkbox'}))
//
// const initialRulesEnabledIDs = []
// const initialRulesEnabledState = []
//
// initialRulesCheckboxes.forEach(el => {
// const {id, checked} = el.props()
// initialRulesEnabledIDs.push(id)
// initialRulesEnabledState.push(checked)
//
// const event = {target: {checked: !checked}}
// el.simulate('change', event)
// })
//
// console.log(
// 'pre change initialRulesEnabledState',
// initialRulesEnabledState
// )
//
// wrapper.update()
//
// // const cb = wrapper.find(
// // `#kapacitor-rule-row-task-enabled ${initialRulesEnabledIDs[0]}`
// // )
// //
// // console.log(cb.props().checked)
//
// const toggledRulesCheckboxes = wrapper
// .find(KapacitorRulesTable)
// .find('tbody')
// .children()
// .map(child => child.find({type: 'checkbox'}))
//
// const toggledRulesEnabledState = []
//
// toggledRulesCheckboxes.forEach((el, i) => {
// const {checked} = el.props()
//
// toggledRulesEnabledState.push(checked)
// expect(checked).not.toEqual(initialRulesEnabledState[i])
// })
//
// expect(initialRulesEnabledState.length).toEqual(toggledRulesEnabledState.length)
//
// console.log(
// 'post change toggledRulesEnabledState',
// toggledRulesEnabledState
// )
// const tasksCheckboxes = wrapper
// .find(TasksTable)
// .dive()
// .find('tbody')
// .children()
// .map(child => child.dive().find({type: 'checkbox'}))
//
// console.log(rulesCheckboxes)
// console.log(tasksCheckboxes)
// expect(tasksCheckboxes).toEqual(true)
expect(wrapper.exists()).toBe(true)
})
})
})