test: Check history tests (#18440)

* test: Check history tests

* test: Check history tests

e2e/features/monitoring/history.feature

@@ -33,7 +33,8 @@ Feature: Monitoring - Alerts - History
     When click event history filter input
     Then the event history examples dropdown is visible
     When click the alert history title
-    Then the event history examples dropdown is not visible
+    Then the event history examples dropdown is not visible 
+    
     When get events history graph area
     When get event marker types and locations
     When zoom into event markers

ui/cypress/e2e/checks.test.ts

@@ -160,4 +160,47 @@ describe('Checks', () => {
       cy.getByTestID('inline-labels--empty').should('exist')
     })
   })
+
+  describe('Access alert history page', () => {
+    it('After check creation confirm history page has graph', () => {
+      // creates a check before each iteration
+      // TODO: refactor into a request with other before each
+      cy.getByTestID('create-check').click()
+      cy.getByTestID('create-threshold-check').click()
+      cy.getByTestID(`selector-list ${measurement}`).click()
+      cy.getByTestID('save-cell--button').should('be.disabled')
+      cy.getByTestID(`selector-list ${field}`).click()
+      cy.getByTestID('save-cell--button').should('be.disabled')
+      cy.getByTestID('checkeo--header alerting-tab').click()
+      cy.getByTestID('add-threshold-condition-CRIT').click()
+      cy.getByTestID('input-field')
+        .clear()
+        .type('0')
+      cy.getByTestID('add-threshold-condition-WARN').click()
+      cy.getByTestID('schedule-check')
+        .clear()
+        .type('5s')
+      cy.getByTestID('offset-options')
+        .clear()
+        .type('1s')
+      cy.getByTestID('save-cell--button').click()
+      cy.getByTestID('check-card').should('have.length', 1)
+      cy.getByTestID('notification-error').should('not.exist')
+      cy.getByTestID('context-history-menu').click()
+      cy.getByTestID('context-history-task').click()
+      cy.getByTestID('giraffe-axes').should('be.visible')
+
+      //Clicking the check status input results in dropdown and clicking outside removes dropdown
+      cy.getByTestID('check-status-input').click()
+      cy.getByTestID('check-status-dropdown').should('be.visible')
+      cy.getByTestID('alert-history-title').click()
+      cy.getByTestID('check-status-dropdown').should('not.exist')
+
+      //Minimize the graph by dragging
+      cy.get('.threshold-marker--area.threshold-marker--crit')
+        .trigger('mousedown', {which: 1, pageX: 600, pageY: 100})
+        .trigger('mousemove', {which: 1, pageX: 700, pageY: 100})
+        .trigger('mouseup', {force: true})
+    })
+  })
 })

ui/src/alerting/components/SearchBar.tsx

@@ -66,6 +66,7 @@ const SearchBar: FC<Props> = ({
           status={inputStatus}
           onChange={e => search(state, dispatch, loadRows, e.target.value)}
           onFocus={() => setIsFocused(true)}
+          testID="check-status-input"
         />
       </ClickOutside>
       {state.searchInput.trim() !== '' && (
@@ -78,6 +79,7 @@ const SearchBar: FC<Props> = ({
       )}
       {isFocused && (
         <DropdownMenu
+          testID="check-status-dropdown"
           className="status-search-bar--suggestions"
           noScrollX={true}
           noScrollY={true}

ui/src/checks/components/CheckCardContext.tsx

@@ -18,8 +18,12 @@ const CheckCardContext: FunctionComponent<Props> = ({
 }) => {
   return (
     <Context>
-      <Context.Menu icon={IconFont.EyeOpen}>
-        <Context.Item label="View History" action={onView} />
+      <Context.Menu icon={IconFont.EyeOpen} testID="context-history-menu">
+        <Context.Item
+          label="View History"
+          action={onView}
+          testID="context-history-task"
+        />
       </Context.Menu>
       <Context.Menu icon={IconFont.Duplicate} color={ComponentColor.Secondary}>
         <Context.Item label="Clone" action={onClone} />

ui/src/checks/components/CheckMetaCard.tsx

@@ -68,6 +68,7 @@ const CheckMetaCard: FC<Props> = ({
                   value={every}
                   suggestions={DURATIONS}
                   onSubmit={onSelectCheckEvery}
+                  testID="schedule-check"
                 />
               </Form.Element>
             </Grid.Column>
@@ -77,6 +78,7 @@ const CheckMetaCard: FC<Props> = ({
                   value={offset}
                   suggestions={CHECK_OFFSET_OPTIONS}
                   onSubmit={onSetOffset}
+                  testID="offset-options"
                 />
               </Form.Element>
             </Grid.Column>