From e812c5ac1e5d51f5b1c554072e2ed170a24f36b3 Mon Sep 17 00:00:00 2001
From: Zoe Steinkamp <zoe.steinkamp@gmail.com>
Date: Thu, 11 Jun 2020 09:36:38 -0600
Subject: [PATCH] test: Check history tests (#18440)

* test: Check history tests

* test: Check history tests
---
 e2e/features/monitoring/history.feature       |  3 +-
 ui/cypress/e2e/checks.test.ts                 | 43 +++++++++++++++++++
 ui/src/alerting/components/SearchBar.tsx      |  2 +
 ui/src/checks/components/CheckCardContext.tsx |  8 +++-
 ui/src/checks/components/CheckMetaCard.tsx    |  2 +
 5 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/e2e/features/monitoring/history.feature b/e2e/features/monitoring/history.feature
index 8ba3cb877d..162cb8e9ee 100644
--- a/e2e/features/monitoring/history.feature
+++ b/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
diff --git a/ui/cypress/e2e/checks.test.ts b/ui/cypress/e2e/checks.test.ts
index 54bfc42723..75dfc255d8 100644
--- a/ui/cypress/e2e/checks.test.ts
+++ b/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})
+    })
+  })
 })
diff --git a/ui/src/alerting/components/SearchBar.tsx b/ui/src/alerting/components/SearchBar.tsx
index 9cb5c9418a..f91f10b7fa 100644
--- a/ui/src/alerting/components/SearchBar.tsx
+++ b/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}
diff --git a/ui/src/checks/components/CheckCardContext.tsx b/ui/src/checks/components/CheckCardContext.tsx
index 2e20b4b9b4..cb386e7def 100644
--- a/ui/src/checks/components/CheckCardContext.tsx
+++ b/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} />
diff --git a/ui/src/checks/components/CheckMetaCard.tsx b/ui/src/checks/components/CheckMetaCard.tsx
index 26f86aeb71..3446b65f3c 100644
--- a/ui/src/checks/components/CheckMetaCard.tsx
+++ b/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>