chore(ui): add testId attributes

ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx

@@ -14,7 +14,7 @@ interface Props {
   color?: ComponentColor
   disabled?: boolean
   tooltipText?: string
-  dataTest?: string
+  test?: string
 }
 
 @ErrorHandling
@@ -27,14 +27,14 @@ class SlideToggle extends Component<Props> {
   }
 
   public render() {
-    const {tooltipText, dataTest} = this.props
+    const {tooltipText, testId} = this.props
 
     return (
       <div
         className={this.className}
         onClick={this.handleClick}
         title={tooltipText}
-        data-test={dataTest}
+        data-test={testId}
       >
         <div className="slide-toggle--knob" />
       </div>

ui/src/reusable_ui/components/wizard/WizardCheckbox.tsx

@@ -9,12 +9,13 @@ interface Props {
   subtext?: string
   onChange: (isChecked: boolean) => void
   halfWidth?: boolean
+  testId?: string
 }
 
 @ErrorHandling
 class WizardCheckbox extends PureComponent<Props> {
   public render() {
-    const {text, isChecked, subtext, halfWidth} = this.props
+    const {text, isChecked, subtext, halfWidth, testId} = this.props
 
     return (
       <div className={'form-group ' + (halfWidth ? 'col-xs-6' : 'col-xs-12')}>
@@ -25,6 +26,7 @@ class WizardCheckbox extends PureComponent<Props> {
             active={isChecked}
             onChange={this.onChangeSlideToggle}
             tooltipText={text}
+            dataTest={testId}
           />
           <span
             className="wizard-checkbox--label"

ui/src/reusable_ui/components/wizard/WizardTextInput.tsx

@@ -17,6 +17,7 @@ interface Props {
   placeholder?: string
   autoFocus?: boolean
   type?: string
+  testId?: string
 }
 
 interface State {
@@ -55,6 +56,7 @@ class WizardTextInput extends PureComponent<Props, State> {
       autoFocus,
       label,
       type,
+      testId,
     } = this.props
 
     let inputClass = ''
@@ -81,6 +83,7 @@ class WizardTextInput extends PureComponent<Props, State> {
           autoFocus={autoFocus}
           spellCheck={false}
           autoComplete={'off'}
+          data-test={testId}
         />
         {errorText}
       </div>

ui/src/sources/components/InfluxTableHeader.tsx

@@ -19,7 +19,7 @@ class InfluxTableHeader extends PureComponent<Props> {
       <div className="panel-heading">
         <h2 className="panel-title">{this.title}</h2>
         <Authorized requiredRole={EDITOR_ROLE}>
-          <div onClick={toggleWizard(true)} className="btn btn-sm btn-primary">
+          <div onClick={toggleWizard(true)} className="btn btn-sm btn-primary" data-test="add-connection--button">
             <span className="icon plus" /> Add Connection
           </div>
         </Authorized>

ui/src/sources/components/InfluxTableRow.tsx

@@ -58,6 +58,7 @@ class InfluxTableRow extends PureComponent<Props & WithRouterProps> {
               text="Delete Connection"
               confirmAction={this.handleDeleteSource}
               customClass="delete-source table--show-on-row-hover"
+              testId="delete-connection--button"
             />
           </Authorized>
         </td>

ui/src/sources/components/SourceStep.tsx

@@ -116,17 +116,20 @@ class SourceStep extends PureComponent<Props, State> {
           onChange={this.onChangeInput('url')}
           valueModifier={this.URLModifier}
           onSubmit={this.handleSubmitUrl}
+          testId="connection-url--input"
         />
         <WizardTextInput
           value={source.name}
           label="Connection Name"
           onChange={this.onChangeInput('name')}
+          testId="connection-name--input"
         />
         <WizardTextInput
           value={source.username}
           label={sourceIsV2 ? 'Organization' : 'Username'}
           onChange={this.onChangeInput('username')}
           onSubmit={this.handleSubmitUsername}
+          testId="connection-username--input"
         />
         <WizardTextInput
           value={source.password}
@@ -135,11 +138,13 @@ class SourceStep extends PureComponent<Props, State> {
           type="password"
           onChange={this.onChangeInput('password')}
           onSubmit={this.handleSubmitPassword}
+          testId="connection-password--input"
         />
         <WizardTextInput
           value={source.telegraf}
           label="Telegraf Database Name"
           onChange={this.onChangeInput('telegraf')}
+          testId="connection-"
         />
         <WizardTextInput
           value={source.defaultRP}
@@ -151,6 +156,7 @@ class SourceStep extends PureComponent<Props, State> {
             value={source.metaUrl}
             label="Meta Service Connection URL"
             onChange={this.onChangeInput('metaUrl')}
+            testId="meta-service-connection-url--input"
           />
         )}
         {!onBoarding && (
@@ -159,6 +165,7 @@ class SourceStep extends PureComponent<Props, State> {
             isChecked={source.default}
             text={'Default connection'}
             onChange={this.onChangeInput('default')}
+            testId="default-connection--checkbox"
           />
         )}
         <WizardCheckbox
@@ -174,6 +181,7 @@ class SourceStep extends PureComponent<Props, State> {
             text={`Unsafe SSL`}
             onChange={this.onChangeInput('insecureSkipVerify')}
             subtext={insecureSkipVerifyText}
+            testId="unsafe-ssl--checkbox"
           />
         )}
       </>