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.

ui/src/kapacitor/components/KapacitorRulesTable.tsx

@@ -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)
   }
 

ui/src/types/kapacitor.tsx

@@ -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

ui/test/kapacitor/components/KapacitorRules.test.tsx

@@ -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', () => {
+describe('Kapacitor.Containers.KapacitorRules.RuleRow', () => {
-    it('toggles each checkbox when clicked', () => {
+  const props = {
-      const wrapper = mount(<KapacitorRules {...props} />)
+    source,
+    rule: kapacitorRules[0],
+    onDelete: () => {},
+    onChangeRuleStatus: () => {},
+  }
 
-      // assert each pair has the same checked value
+  describe('rendering', () => {
-      // assert that when either a pair is clicked, both reflect the toggle
+    it('renders RuleRow', () => {
-      // assert also here that no others have changed
+      const wrapper = shallow(<RuleRow {...props} />)
 
-      const findRows = table =>
+      expect(wrapper.exists()).toBe(true)
-        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)
     })
   })
 })