test(collectors) Test telegraf config creation on collectors tab

ui/cypress/e2e/collectors.tests.ts

@@ -0,0 +1,54 @@
+describe('Collectors', () => {
+  beforeEach(() => {
+    cy.flush()
+
+    cy.signin().then(({body}) => {
+      const {
+        org: {id},
+      } = body
+      cy.wrap(body.org).as('org')
+
+      cy.fixture('routes').then(({orgs}) => {
+        cy.visit(`${orgs}/${id}/telegrafs_tab`)
+      })
+    })
+  })
+
+  describe('from the org view', () => {
+    it('can create a collector', () => {
+      const newCollector = 'New Collector'
+      const collectorDescription = 'This is a new collector testing'
+
+      cy.getByTestID('table-row').should('have.length', 0)
+
+      cy.contains('Create Configuration').click()
+      cy.getByTestID('overlay--container').within(() => {
+        cy.getByInputName('System').click({force: true})
+        cy.get('.button')
+          .contains('Continue')
+          .click()
+        cy.getByInputName('name')
+          .clear()
+          .type(newCollector)
+        cy.getByInputName('description')
+          .clear()
+          .type(collectorDescription)
+        cy.get('.button')
+          .contains('Create and Verify')
+          .click()
+        cy.getByTestID('streaming').within(() => {
+          cy.get('.button')
+            .contains('Listen for Data')
+            .click()
+        })
+        cy.get('.button')
+          .contains('Finish')
+          .click()
+      })
+
+      cy.getByTestID('table-row')
+        .should('have.length', 1)
+        .and('contain', newCollector)
+    })
+  })
+})

ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx

@@ -86,6 +86,7 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
                   <Input
                     type={InputType.Text}
                     value={telegrafConfigName}
+                    name="name"
                     onChange={this.handleNameInput}
                     titleText="Telegraf Configuration Name"
                     size={ComponentSize.Medium}
@@ -96,6 +97,7 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
                   <Input
                     type={InputType.Text}
                     value={telegrafConfigDescription}
+                    name="description"
                     onChange={this.handleDescriptionInput}
                     titleText="Telegraf Configuration Description"
                     size={ComponentSize.Medium}

ui/src/dataLoaders/components/verifyStep/DataListening.tsx

@@ -71,7 +71,7 @@ class DataListening extends PureComponent<Props, State> {
 
   public render() {
     return (
-      <div className="wizard-step--body-streaming">
+      <div className="wizard-step--body-streaming" data-testID="streaming">
         {this.connectionInfo}
         {this.listenButton}
       </div>