From d7c237f5a99046b6c9f63f464d4a120256f94f7f Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 9 Aug 2017 15:16:15 -0700
Subject: [PATCH] Integration testing improvements and comments. WIP Query
 Builder test.

---
 ui/nightwatch.json                            |  2 +-
 .../data_explorer/components/DatabaseList.js  |  1 +
 .../data_explorer/components/FieldListItem.js |  1 +
 .../components/MeasurementList.js             |  1 +
 ui/src/data_explorer/components/QueryMaker.js |  1 +
 .../data_explorer/components/QueryMakerTab.js |  6 +-
 ui/src/data_explorer/components/Table.js      |  2 +-
 .../data_explorer/components/TagListItem.js   |  8 +-
 .../data_explorer/components/WriteDataBody.js |  1 +
 .../components/WriteDataFooter.js             |  1 +
 .../components/WriteDataHeader.js             |  1 +
 ui/src/data_explorer/containers/Header.js     |  6 +-
 ui/src/shared/components/AutoRefresh.js       |  2 +-
 ui/src/shared/components/LayoutRenderer.js    |  2 +-
 ui/tests/DataExplorer.js                      | 90 +++++++++++++++++--
 15 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/ui/nightwatch.json b/ui/nightwatch.json
index 782749e18..d47fca7b1 100644
--- a/ui/nightwatch.json
+++ b/ui/nightwatch.json
@@ -28,7 +28,7 @@
         "browserstack.key": "${BROWSERSTACK_KEY}",
         "browserstack.debug": true,
         "browserstack.local": true,
-        "resolution": "1920x1080"
+        "resolution": "1024x768"
       }
     }
   }
diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js
index 23ad6143a..db1a34ab7 100644
--- a/ui/src/data_explorer/components/DatabaseList.js
+++ b/ui/src/data_explorer/components/DatabaseList.js
@@ -83,6 +83,7 @@ const DatabaseList = React.createClass({
                   })}
                   key={`${database}..${retentionPolicy}`}
                   onClick={_.wrap(namespace, onChooseNamespace)}
+                  data-test={`query-builder-list-item-database-${database}`}
                 >
                   {database}.{retentionPolicy}
                 </div>
diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js
index a91673de0..f1f463b5f 100644
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/ui/src/data_explorer/components/FieldListItem.js
@@ -64,6 +64,7 @@ const FieldListItem = React.createClass({
             active: isSelected,
           })}
           onClick={_.wrap(fieldFunc, this.handleToggleField)}
+          data-test={`query-builder-list-item-field-${fieldText}`}
         >
           <span>
             <div className="query-builder--checkbox" />
diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js
index d69d75198..5b9b993a3 100644
--- a/ui/src/data_explorer/components/MeasurementList.js
+++ b/ui/src/data_explorer/components/MeasurementList.js
@@ -144,6 +144,7 @@ const MeasurementList = React.createClass({
                   className={classnames('query-builder--list-item', {
                     active: isActive,
                   })}
+                  data-test={`query-builder-list-item-measurement-${measurement}`}
                 >
                   <span>
                     <div className="query-builder--caret icon caret-right" />
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 6e5dce0f5..c05b694dc 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -168,6 +168,7 @@ const QueryMaker = React.createClass({
         <div
           className="query-maker--new btn btn-sm btn-primary"
           onClick={this.handleAddQuery}
+          data-test="new-query-button"
         >
           <span className="icon plus" />
         </div>
diff --git a/ui/src/data_explorer/components/QueryMakerTab.js b/ui/src/data_explorer/components/QueryMakerTab.js
index 03207c4b4..68f0c51a1 100644
--- a/ui/src/data_explorer/components/QueryMakerTab.js
+++ b/ui/src/data_explorer/components/QueryMakerTab.js
@@ -33,7 +33,11 @@ const QueryMakerTab = React.createClass({
         <label>
           {this.props.queryTabText}
         </label>
-        <span className="query-maker--delete" onClick={this.handleDelete} />
+        <span
+          className="query-maker--delete"
+          onClick={this.handleDelete}
+          data-test="query-maker-delete"
+        />
       </div>
     )
   },
diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index c8ace2c54..4f13a53e5 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -177,7 +177,7 @@ const ChronoTable = React.createClass({
               selected={series[activeSeriesIndex].name}
               buttonSize="btn-xs"
             />}
-        <div className="table--tabs-content" data-test="data-table">
+        <div className="table--tabs-content">
           {(columns && !columns.length) || (values && !values.length)
             ? <div className="generic-empty-state">This series is empty</div>
             : <Table
diff --git a/ui/src/data_explorer/components/TagListItem.js b/ui/src/data_explorer/components/TagListItem.js
index 5575e6f98..73d2ee664 100644
--- a/ui/src/data_explorer/components/TagListItem.js
+++ b/ui/src/data_explorer/components/TagListItem.js
@@ -76,7 +76,12 @@ const TagListItem = React.createClass({
             active: selectedTagValues.indexOf(v) > -1,
           })
           return (
-            <div className={cx} onClick={_.wrap(v, this.handleChoose)} key={v}>
+            <div
+              className={cx}
+              onClick={_.wrap(v, this.handleChoose)}
+              key={v}
+              data-test={`query-builder-list-item-tag-value-${v}`}
+            >
               <span>
                 <div className="query-builder--checkbox" />
                 {v}
@@ -103,6 +108,7 @@ const TagListItem = React.createClass({
         <div
           className={classnames('query-builder--list-item', {active: isOpen})}
           onClick={this.handleClickKey}
+          data-test={`query-builder-list-item-tag-${tagKey}`}
         >
           <span>
             <div className="query-builder--caret icon caret-right" />
diff --git a/ui/src/data_explorer/components/WriteDataBody.js b/ui/src/data_explorer/components/WriteDataBody.js
index 2cb59caab..d94521a89 100644
--- a/ui/src/data_explorer/components/WriteDataBody.js
+++ b/ui/src/data_explorer/components/WriteDataBody.js
@@ -24,6 +24,7 @@ const WriteDataBody = ({
           onKeyUp={handleKeyUp}
           onChange={handleEdit}
           autoFocus={true}
+          data-test="manual-entry-field"
         />
       : <div className="write-data-form--file">
           <input
diff --git a/ui/src/data_explorer/components/WriteDataFooter.js b/ui/src/data_explorer/components/WriteDataFooter.js
index 503b302eb..7b7df4e83 100644
--- a/ui/src/data_explorer/components/WriteDataFooter.js
+++ b/ui/src/data_explorer/components/WriteDataFooter.js
@@ -37,6 +37,7 @@ const WriteDataFooter = ({
         (!uploadContent && !isManual) ||
         isUploading
       }
+      data-test="write-data-submit-button"
     >
       Write
     </button>
diff --git a/ui/src/data_explorer/components/WriteDataHeader.js b/ui/src/data_explorer/components/WriteDataHeader.js
index beba8b742..80c704f20 100644
--- a/ui/src/data_explorer/components/WriteDataHeader.js
+++ b/ui/src/data_explorer/components/WriteDataHeader.js
@@ -27,6 +27,7 @@ const WriteDataHeader = ({
         <li
           onClick={() => toggleWriteView(true)}
           className={isManual ? 'active' : ''}
+          data-test="manual-entry-button"
         >
           Manual Entry
         </li>
diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js
index 6913d778a..32cd0e0bf 100644
--- a/ui/src/data_explorer/containers/Header.js
+++ b/ui/src/data_explorer/containers/Header.js
@@ -49,7 +49,11 @@ const Header = React.createClass({
           <div className="page-header__right">
             <GraphTips />
             <SourceIndicator sourceName={this.context.source.name} />
-            <div className="btn btn-sm btn-default" onClick={showWriteForm}>
+            <div
+              className="btn btn-sm btn-default"
+              onClick={showWriteForm}
+              data-test="write-data-button"
+            >
               <span className="icon pencil" />
               Write Data
             </div>
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index 2574c1951..1997e1b6c 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.js
@@ -215,7 +215,7 @@ const AutoRefresh = ComposedComponent => {
 
       return (
         <div className="graph-empty">
-          <p>No Results</p>
+          <p data-test="data-explorer-no-results">No Results</p>
         </div>
       )
     },
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 61f1fc11a..f43e6c7fb 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -127,7 +127,7 @@ class LayoutRenderer extends Component {
     }
     return (
       <div className="graph-empty">
-        <p>No Results</p>
+        <p data-test="data-explorer-no-results">No Results</p>
       </div>
     )
   }
diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
index b46b15956..c5e546392 100644
--- a/ui/tests/DataExplorer.js
+++ b/ui/tests/DataExplorer.js
@@ -1,18 +1,92 @@
 const src = process.argv.find(s => s.includes('--src=')).replace('--src=', '')
-const url = `http://localhost:8888/sources/${src}/chronograf/data-explorer`
+const dataExplorerUrl = `http://localhost:8888/sources/${src}/chronograf/data-explorer`
+const dataTest = s => `[data-test="${s}"]`
 
 module.exports = {
   'Data Explorer (functional) - SHOW DATABASES'(browser) {
     browser
-      .url(url)
-      .waitForElementVisible('[data-test="add-query-button"]', 1000)
-      .click('[data-test="add-query-button"]')
+      // Navigate to the Data Explorer
+      .url(dataExplorerUrl)
+      // Open a new query tab
+      .waitForElementVisible(dataTest('add-query-button'), 1000)
+      .click(dataTest('add-query-button'))
+      .waitForElementVisible(dataTest('query-editor-field'), 1000)
+      // Drop any existing testing database
+      .setValue(dataTest('query-editor-field'), 'DROP DATABASE "testing"\n')
+      .click(dataTest('query-editor-field'))
       .pause(500)
-      .waitForElementVisible('[data-test="query-editor-field"]', 1000)
-      .setValue('[data-test="query-editor-field"]', 'SHOW DATABASES\n')
+      // Create a new testing database
+      .clearValue(dataTest('query-editor-field'))
+      .setValue(dataTest('query-editor-field'), 'CREATE DATABASE "testing"\n')
+      .click(dataTest('query-editor-field'))
+      .pause(2000)
+      .refresh()
+      .waitForElementVisible(dataTest('query-editor-field'), 1000)
+      .clearValue(dataTest('query-editor-field'))
+      .setValue(dataTest('query-editor-field'), 'SHOW DATABASES\n')
+      .click(dataTest('query-editor-field'))
       .pause(1000)
-      .waitForElementVisible('[data-test="data-table"]', 5000)
-      .assert.containsText('[data-test="data-table"]', '_internal')
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-database-testing'),
+        5000
+      )
+      .assert.containsText(
+        dataTest('query-builder-list-item-database-testing'),
+        'testing'
+      )
+      .end()
+  },
+  'Query Builder'(browser) {
+    browser
+      // Navigate to the Data Explorer
+      .url(dataExplorerUrl)
+      // Check to see that there are no results displayed
+      .waitForElementVisible(dataTest('data-explorer-no-results'), 5000)
+      .assert.containsText(dataTest('data-explorer-no-results'), 'No Results')
+      // Open up the Write Data dialog
+      .click(dataTest('write-data-button'))
+      // Set the dialog to manual entry mode
+      .waitForElementVisible(dataTest('manual-entry-button'), 1000)
+      .click(dataTest('manual-entry-button'))
+      // Enter some time-series data
+      .setValue(
+        dataTest('manual-entry-field'),
+        'testing,test_measurement=1,test_measurement2=2 value=3,value2=4'
+      )
+      // Pause, then click the submit button
+      .pause(500)
+      .click(dataTest('write-data-submit-button'))
+      .pause(5000)
+      // Open a new query tab
+      .waitForElementVisible(dataTest('new-query-button'), 1000)
+      .click(dataTest('new-query-button'))
+      // Start building a query
+      // Select the testing database
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-database-testing'),
+        1000
+      )
+      .click(dataTest('query-builder-list-item-database-testing'))
+      // Select both test measurements
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-tag-test_measurement'),
+        1000
+      )
+      .click('query-builder-list-item-tag-test_measurement')
+      .click('query-builder-list-item-tag-test_measurement2')
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-tag-value-1'),
+        1000
+      )
+      .click(dataTest('query-builder-list-item-tag-value-1'))
+      .click(dataTest('query-builder-list-item-tag-value-2'))
+      .waitForElementVisible(dataTest('query-builder-list-item-field-value'))
+      .click(dataTest('query-builder-list-item-field-value'))
+      .click(dataTest('query-builder-list-item-field-value2'))
+      .assert.containsText(
+        dataTest('query-editor-field'),
+        'SELECT mean("value") AS "mean_value", mean("value2") AS "mean_value2" FROM "testing"."autogen"."testing" WHERE time > now() - 1h AND "test_measurement"=\'1\' AND "test_measurement2"=\'2\' GROUP BY time(10s)'
+      )
       .end()
   },
 }