Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Integration testing improvements and comments. WIP Query Builder test.

experiment/integration-testing
Hunter Trujillo 2017-08-09 15:16:15 -07:00
parent 5634d5c752
commit d7c237f5a9
15 changed files with 110 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/nightwatch.json
View File

@ -28,7 +28,7 @@
"browserstack.key": "${BROWSERSTACK_KEY}",
"browserstack.debug": true,
"browserstack.local": true,
"resolution": "1920x1080"
"resolution": "1024x768"
}
}
}

1
ui/src/data_explorer/components/DatabaseList.js
View File

@ -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>

1
ui/src/data_explorer/components/FieldListItem.js
View File

@ -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" />

1
ui/src/data_explorer/components/MeasurementList.js
View File

@ -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" />

1
ui/src/data_explorer/components/QueryMaker.js
View File

@ -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>

6
ui/src/data_explorer/components/QueryMakerTab.js
View File

@ -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>
)
},

2
ui/src/data_explorer/components/Table.js
View File

@ -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

8
ui/src/data_explorer/components/TagListItem.js
View File

@ -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" />

1
ui/src/data_explorer/components/WriteDataBody.js
View File

@ -24,6 +24,7 @@ const WriteDataBody = ({
onKeyUp={handleKeyUp}
onChange={handleEdit}
autoFocus={true}
data-test="manual-entry-field"
/>
: <div className="write-data-form--file">
<input

1
ui/src/data_explorer/components/WriteDataFooter.js
View File

@ -37,6 +37,7 @@ const WriteDataFooter = ({
(!uploadContent && !isManual) ||
isUploading
}
data-test="write-data-submit-button"
>
Write
</button>

1
ui/src/data_explorer/components/WriteDataHeader.js
View File

@ -27,6 +27,7 @@ const WriteDataHeader = ({
<li
onClick={() => toggleWriteView(true)}
className={isManual ? 'active' : ''}
data-test="manual-entry-button"
>
Manual Entry
</li>

6
ui/src/data_explorer/containers/Header.js
View File

@ -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>

2
ui/src/shared/components/AutoRefresh.js
View File

@ -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>
)
},

2
ui/src/shared/components/LayoutRenderer.js
View File

@ -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>
)
}

90
ui/tests/DataExplorer.js
View File

@ -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()
},
}