fix: gauge tests (#16744)

ui/cypress/e2e/explorer.test.ts

@@ -181,6 +181,48 @@ describe('DataExplorer', () => {
     })
   })
 
+  describe('Optional suffix and prefix in gauge', () => {
+    beforeEach(() => {
+      cy.getByTestID('view-type--dropdown').click()
+      cy.getByTestID(`view-type--gauge`).click()
+      cy.getByTestID('cog-cell--button').click()
+    })
+    it('can add prefix and suffix values', () => {
+      cy.get('.view-options').within(() => {
+        cy.getByTestID('prefix-input')
+          .click()
+          .type('mph')
+          .invoke('val')
+          .should('equal', 'mph')
+          .getByTestID('input-field--error')
+          .should('have.length', 0)
+        cy.getByTestID('suffix-input')
+          .click()
+          .type('mph')
+          .invoke('val')
+          .should('equal', 'mph')
+          .getByTestID('input-field--error')
+          .should('have.length', 0)
+      })
+    })
+    it('can add and remove tick values', () => {
+      cy.get('.view-options').within(() => {
+        cy.getByTestID('tickprefix-input')
+          .click()
+          .invoke('val')
+          .should('equal', '')
+          .getByTestID('input-field--error')
+          .should('have.length', 0)
+        cy.getByTestID('ticksuffix-input')
+          .click()
+          .invoke('val')
+          .should('equal', '')
+          .getByTestID('input-field--error')
+          .should('have.length', 0)
+      })
+    })
+  })
+
   describe('select time range to query', () => {
     it('can select different time ranges', () => {
       // find initial value
@@ -449,8 +491,7 @@ describe('DataExplorer', () => {
       cy.getByTestID('toolbar-function').should('have.length', 1)
     })
 
-    // TODO: fix flakeyness of focused() command
-    it.skip('shows the empty state when the query returns no results', () => {
+    it('shows the empty state when the query returns no results', () => {
       cy.getByTestID('time-machine--bottom').within(() => {
         cy.get('.react-monaco-editor-container')
           .should('be.visible')

ui/src/timeMachine/components/view_options/Affixes.tsx

@@ -37,6 +37,7 @@ class Affixes extends PureComponent<Props> {
         <Grid.Column widthXS={Columns.Six}>
           <Form.Element label="Prefix">
             <Input
+              testID="prefix-input"
               value={prefix}
               onChange={this.handleUpdatePrefix}
               placeholder="%, MPH, etc."
@@ -46,6 +47,7 @@ class Affixes extends PureComponent<Props> {
         <Grid.Column widthXS={Columns.Six}>
           <Form.Element label="Suffix">
             <Input
+              testID="suffix-input"
               value={suffix}
               onChange={this.handleUpdateSuffix}
               placeholder="%, MPH, etc."
@@ -60,6 +62,7 @@ class Affixes extends PureComponent<Props> {
           >
             <Toggle
               id="prefixoptional"
+              testID="tickprefix-input"
               type={InputToggleType.Checkbox}
               value={tickPrefix}
               onChange={this.handleUpdateTickPrefix}
@@ -76,6 +79,7 @@ class Affixes extends PureComponent<Props> {
           >
             <Toggle
               id="suffixoptional"
+              testID="ticksuffix-input"
               type={InputToggleType.Checkbox}
               value={tickSuffix}
               onChange={this.handleUpdateTickSuffix}