Merge pull request #12257 from influxdata/tests/scrapers-update

test(scrapers): update a scraper name

ui/cypress/e2e/scrapers.test.ts

@@ -1,3 +1,5 @@
+import {Organization, Bucket} from '@influxdata/influx'
+
 describe('Scrapers', () => {
   beforeEach(() => {
     cy.flush()
@@ -5,7 +7,11 @@ describe('Scrapers', () => {
     cy.signin().then(({body}) => {
       const {
         org: {id},
+        bucket,
       } = body
+      cy.wrap(body.org).as('org')
+      cy.wrap(bucket).as('bucket')
+
       cy.fixture('routes').then(({orgs}) => {
         cy.visit(`${orgs}/${id}/scrapers_tab`)
       })
@@ -36,5 +42,25 @@ describe('Scrapers', () => {
         .should('have.length', 1)
         .and('contain', newScraper)
     })
+
+    it('can update scrapers name', () => {
+      const newScraperName = 'This is new name'
+
+      const scraperName = 'New Scraper'
+      const url = 'http://google.com'
+      const type = 'Prometheus'
+
+      cy.get<Organization>('@org').then(({id}) => {
+        let orgID = id
+        cy.get<Bucket>('@bucket').then(({id}) => {
+          cy.createScraper(scraperName, url, type, orgID, id)
+        })
+      })
+
+      cy.getByTestID('table-cell').within(() => {
+        cy.getByTestID('editable-name').click()
+        cy.getByTestID('input-field').type(`${newScraperName}{enter}`)
+      })
+    })
   })
 })

ui/cypress/index.d.ts

@@ -13,6 +13,7 @@ import {
   createVariable,
   createLabel,
   createBucket,
+  createScraper,
 } from './support/commands'
 
 declare global {
@@ -31,6 +32,7 @@ declare global {
       getByTitle: typeof getByTitle
       createLabel: typeof createLabel
       createBucket: typeof createBucket
+      createScraper: typeof createScraper
     }
   }
 }

ui/cypress/support/commands.ts

@@ -148,6 +148,26 @@ export const createSource = (
   })
 }
 
+export const createScraper = (
+  scraperName?: string,
+  type?: string,
+  url?: string,
+  orgID?: string,
+  bucketID?: string
+): Cypress.Chainable<Cypress.Response> => {
+  return cy.request({
+    method: 'POST',
+    url: '/api/v2/scrapers',
+    body: {
+      name: scraperName,
+      type,
+      url,
+      orgID,
+      bucketID,
+    },
+  })
+}
+
 // TODO: have to go through setup because we cannot create a user w/ a password via the user API
 export const setupUser = (): Cypress.Chainable<Cypress.Response> => {
   return cy.fixture('user').then(({username, password, org, bucket}) => {
@@ -199,6 +219,9 @@ Cypress.Commands.add('createOrg', createOrg)
 // buckets
 Cypress.Commands.add('createBucket', createBucket)
 
+// scrapers
+Cypress.Commands.add('createScraper', createScraper)
+
 // general
 Cypress.Commands.add('flush', flush)
 

ui/src/organizations/components/__snapshots__/Buckets.test.tsx.snap

@@ -58,6 +58,7 @@ Object {
                   </a>
                   <div
                     class="editable-name--toggle"
+                    data-testid="editable-name"
                   >
                     <span
                       class="icon pencil"
@@ -200,6 +201,7 @@ Object {
                   </a>
                   <div
                     class="editable-name--toggle"
+                    data-testid="editable-name"
                   >
                     <span
                       class="icon pencil"
@@ -399,6 +401,7 @@ Object {
                 </a>
                 <div
                   class="editable-name--toggle"
+                  data-testid="editable-name"
                 >
                   <span
                     class="icon pencil"
@@ -541,6 +544,7 @@ Object {
                 </a>
                 <div
                   class="editable-name--toggle"
+                  data-testid="editable-name"
                 >
                   <span
                     class="icon pencil"

ui/src/shared/components/EditableName.tsx

@@ -22,6 +22,7 @@ interface PassedProps {
 
 interface DefaultProps {
   hrefValue?: string
+  testID?: string
 }
 
 type Props = PassedProps & DefaultProps
@@ -35,6 +36,7 @@ interface State {
 class EditableName extends Component<Props, State> {
   public static defaultProps: DefaultProps = {
     hrefValue: '#',
+    testID: 'editable-name',
   }
 
   constructor(props: Props) {
@@ -47,7 +49,7 @@ class EditableName extends Component<Props, State> {
   }
 
   public render() {
-    const {name, onEditName, hrefValue, noNameString} = this.props
+    const {name, onEditName, hrefValue, noNameString, testID} = this.props
 
     return (
       <div className={this.className}>
@@ -57,6 +59,7 @@ class EditableName extends Component<Props, State> {
         <div
           className="editable-name--toggle"
           onClick={this.handleStartEditing}
+          data-testid={testID}
         >
           <span className="icon pencil" />
         </div>