Merge pull request #12267 from influxdata/tests(explorer)/filter-functions

test(explorer): add end-to-end testing for filtering functions by name

ui/cypress/e2e/explorer.test.ts

@@ -50,4 +50,11 @@ describe('DataExplorer', () => {
       })
     })
   })
+
+  it('can filter aggregation functions by name from script editor mode', () => {
+    cy.getByTestID('switch-to-script-editor').click()
+
+    cy.get('.input-field').type('covariance')
+    cy.getByTestID('toolbar-function').should('have.length', 1)
+  })
 })

ui/src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -49,7 +49,7 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      displayFluxFunctions: false,
+      displayFluxFunctions: true,
     }
   }
 
@@ -83,16 +83,16 @@ class TimeMachineFluxEditor extends PureComponent<Props, State> {
           return (
             <>
               <div className="toolbar-tab-container">
-                <ToolbarTab
-                  onSetActive={this.hideFluxFunctions}
-                  name={'Variables'}
-                  active={!this.state.displayFluxFunctions}
-                />
                 <ToolbarTab
                   onSetActive={this.showFluxFunctions}
                   name={'Functions'}
                   active={this.state.displayFluxFunctions}
                 />
+                <ToolbarTab
+                  onSetActive={this.hideFluxFunctions}
+                  name={'Variables'}
+                  active={!this.state.displayFluxFunctions}
+                />
               </div>
               {this.rightDivision}
             </>

ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionCategory.tsx

@@ -24,6 +24,7 @@ const FunctionCategory: SFC<Props> = props => {
           onClickFunction={onClickFunction}
           key={func.name}
           func={func}
+          testID="toolbar-function"
         />
       ))}
     </dl>

ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx

@@ -10,6 +10,7 @@ import {FluxToolbarFunction} from 'src/types/shared'
 interface Props {
   func: FluxToolbarFunction
   onClickFunction: (name: string, example: string) => void
+  testID?: string
 }
 
 interface State {
@@ -18,11 +19,14 @@ interface State {
 }
 
 class ToolbarFunction extends PureComponent<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    testID: 'toolbar-function',
+  }
   public state: State = {isActive: false, hoverPosition: undefined}
   private functionRef = createRef<HTMLDivElement>()
 
   public render() {
-    const {func} = this.props
+    const {func, testID} = this.props
 
     return (
       <div
@@ -30,6 +34,7 @@ class ToolbarFunction extends PureComponent<Props, State> {
         ref={this.functionRef}
         onMouseEnter={this.handleHover}
         onMouseLeave={this.handleStopHover}
+        data-testid={testID}
       >
         {this.tooltip}
         <dd onClick={this.handleClickFunction}>