test(cypress): add test Chronograf/Admin/Org Mappings page (#5972)

* chore(ui): add data-test attributes * chore(ui): add data-test attributes * test(cypress): add all org test * test(cypress): add All Orgs test * chore(cypress): remove only * chore(ui): add data-test attributes * chore(ui): add data-test attributes * test(cypress): add all org test * test(cypress): add All Orgs test * chore(cypress): remove only * chore(ui): add data-test attributes * chore(ui): add data-test attributes * test(cypress): add all org test * test(cypress): add All Orgs test * chore(cypress): remove only * chore(ui): add data-test attribute * chore(cypress): adjust all orgs test * chore(cypress): adjust dashboard test * chore(ui): eslint --fix * chore(cypress): adjust all orgs test * chore(cypress): format test * chore(cypress): add fixture data * chore(ui): add data-test attributes * chore(cypress): adjust chronograf fixture * chore(cypress): add deleteMappings custom command * chore(ui): add data-test attributes * test(cypress): add deleteMappings into toInitialState * chore(ui): adjust testId value * test(cypress): add Orgs Mapping test * chore(ui): adjust data-test attribute * chore(ui): add logic to data-test attribute * chore(ui): add a default value to testId
2022-07-04 07:43:06 +02:00 · 2022-07-04 07:43:06 +02:00 · 6be712ef16
parent 0b9fac3b06
commit 6be712ef16
8 changed files with 106 additions and 5 deletions
--- a/ui/cypress/fixtures/chronograf.json
+++ b/ui/cypress/fixtures/chronograf.json
@ -9,11 +9,21 @@
    "organizations": [
        {
            "name": "SmallOrg",
-            "defaultRole": "reader"
+            "defaultRole": "reader",
+            "mapping": {
+                "scheme": "oauth2",
+                "provider": "oauth-mock",
+                "providerOrg": "default"
+            }
        },
        {
            "name": "BigOrg",
-            "defaultRole": "member"
+            "defaultRole": "member",
+            "mapping": {
+                "scheme": "oauth2",
+                "provider": "oauth-mock-2",
+                "providerOrg": "default-2"
+            }
        }
    ]
 }
--- a/ui/cypress/index.d.ts
+++ b/ui/cypress/index.d.ts
@ -29,6 +29,7 @@ import {
  writePoints,
  clickAttached,
  changeUserInfo,
+  deleteMappings,
 } from './support/commands'

 declare global {
@ -62,6 +63,7 @@ declare global {
      writePoints: typeof writePoints
      clickAttached: typeof clickAttached
      changeUserInfo: typeof changeUserInfo
+      deleteMappings: typeof deleteMappings
    }
  }
 }
--- a/ui/cypress/integration/admin_chronograf.test.ts
+++ b/ui/cypress/integration/admin_chronograf.test.ts
@ -238,4 +238,73 @@ describe('Chronograf', () => {
      )
    })
  })
+
+  describe('Org Mapping', () => {
+    beforeEach(() => {
+      cy.visit(url + '/organization-mappings')
+    })
+
+    it('create, edit, and remove organization mapping', () => {
+      cy.getByTestID('providers--row').should('have.length', 1)
+      cy.get('.panel-title').should('have.text', '1 Map')
+      cy.getByTestID('create-mapping--button').click()
+      cy.getByTestID('cancel').click()
+      cy.getByTestID('providers--row').should('have.length', 1)
+      cy.getByTestID('create-mapping--button').click()
+      cy.getByTestID('providers--new-row').within(() => {
+        cy.getByTestID('dropdown-selected--*')
+          .click()
+          .then(() => {
+            cy.getByTestID(
+              `${chronograf.organizations[0].mapping.scheme}-dropdown-item`
+            ).click()
+          })
+        cy.getByTestID(
+          `dropdown-selected--${chronograf.organizations[0].mapping.scheme}`
+        ).should('contain.text', chronograf.organizations[0].mapping.scheme)
+        cy.getByTestID('new-provider-name').click()
+        cy.getByTestID('new-provider--input').type(
+          chronograf.organizations[0].mapping.provider + '{Enter}'
+        )
+        cy.getByTestID('new-provider-name').should(
+          'have.text',
+          chronograf.organizations[0].mapping.provider
+        )
+        cy.getByTestID('new-provider-org-name').click()
+        cy.getByTestID('new-provider-org--input').type(
+          chronograf.organizations[0].mapping.providerOrg + '{Enter}'
+        )
+        cy.getByTestID('new-provider-org-name').should(
+          'have.text',
+          chronograf.organizations[0].mapping.providerOrg
+        )
+        cy.getByTestID('confirm').click()
+      })
+      cy.reload()
+      cy.get('.panel-title').should('have.text', '2 Maps')
+      cy.getByTestID('providers--row')
+        .should('have.length', 2)
+        .eq(0)
+        .within(() => {
+          cy.getByTestID('provider-name').click()
+          cy.getByTestID('provider--input')
+            .clear()
+            .type(chronograf.organizations[1].mapping.provider + '{Enter}')
+          cy.getByTestID('provider-name').should(
+            'have.text',
+            chronograf.organizations[1].mapping.provider
+          )
+          cy.getByTestID('provider-org-name').click()
+          cy.getByTestID('provider-org--input').type(
+            chronograf.organizations[1].mapping.providerOrg + '{Enter}'
+          )
+          cy.getByTestID('provider-org-name').should(
+            'have.text',
+            chronograf.organizations[1].mapping.providerOrg
+          )
+          cy.getByTestID('delete-mapping--confirm-button').click()
+          cy.getByTestID('confirm-btn').click()
+        })
+    })
+  })
 })
--- a/ui/cypress/support/commands.ts
+++ b/ui/cypress/support/commands.ts
@ -487,6 +487,17 @@ export const deleteInfluxDBs = (sourceId: string) => {
    })
 }

+export const deleteMappings = () => {
+  return cy.request('GET', `${apiUrl}/mappings`).then(({body: responseBody}) => {
+    console.log(responseBody)
+    cy.wrap(responseBody.mappings).each((map: any) => {
+      if(map.id !== 'default') {
+        cy.request('DELETE', `${apiUrl}/mappings/${map.id}`)
+      }
+    })
+  })
+}
+
 function wrapConnections() {
  return cy
    .request({
@ -557,6 +568,7 @@ export function toInitialState() {
            })
          })

+          cy.deleteMappings()
          cy.deleteDashboards()
          cy.deleteChronografUsers()
          cy.deleteOrgs()
@ -605,3 +617,4 @@ Cypress.Commands.add('toInitialState', toInitialState)
 Cypress.Commands.add('writePoints', writePoints)
 Cypress.Commands.add('clickAttached', {prevSubject: 'element'}, clickAttached)
 Cypress.Commands.add('changeUserInfo', changeUserInfo)
+Cypress.Commands.add('deleteMappings', deleteMappings)
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@ -61,6 +61,7 @@ class ProvidersTable extends Component {
            className="btn btn-sm btn-primary"
            onClick={this.handleClickCreateMap}
            disabled={isCreatingMap}
+            data-test="create-mapping--button"
          >
            <span className="icon plus" /> Create Mapping
          </button>
@ -112,6 +113,7 @@ class ProvidersTable extends Component {
                className="btn btn-sm btn-primary"
                onClick={this.handleClickCreateMap}
                disabled={isCreatingMap}
+                data-test="create-mapping--button"
              >
                <span className="icon plus" /> Create Mapping
              </button>
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRow.js
@ -61,7 +61,7 @@ class ProvidersTableRow extends Component {

    const isDefaultMapping = DEFAULT_MAPPING_ID === mapping.id
    return (
-      <div className="fancytable--row">
+      <div className="fancytable--row" data-test="providers--row">
        <div className="fancytable--td provider--scheme">
          <Dropdown
            items={schemes}
@ -77,6 +77,7 @@ class ProvidersTableRow extends Component {
          onBlur={this.handleChangeProvider}
          disabled={isDefaultMapping}
          tabIndex={rowIndex}
+          testId="provider"
        />
        <InputClickToEdit
          value={providerOrganization}
@ -84,6 +85,7 @@ class ProvidersTableRow extends Component {
          onBlur={this.handleChangeProviderOrg}
          disabled={isDefaultMapping}
          tabIndex={rowIndex}
+          testId="provider-org"
        />
        <div className="fancytable--td provider--arrow">
          <span />
@ -103,6 +105,7 @@ class ProvidersTableRow extends Component {
          confirmAction={this.handleDeleteMap}
          confirmText="Delete this Mapping?"
          disabled={isDefaultMapping}
+          testId="delete-mapping--confirm-button"
        />
      </div>
    )
--- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
+++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
@ -63,7 +63,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
    const preventCreate = !provider || !providerOrganization

    return (
-      <div className="fancytable--row">
+      <div className="fancytable--row" data-test="providers--new-row">
        <div className="fancytable--td provider--scheme">
          <Dropdown
            items={schemes}
@ -79,6 +79,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
          onBlur={this.handleChangeProvider}
          tabIndex={rowIndex}
          placeholder="google"
+          testId="new-provider"
        />
        <InputClickToEdit
          value={providerOrganization}
@ -87,6 +88,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
          onBlur={this.handleChangeProviderOrg}
          tabIndex={rowIndex}
          placeholder="*"
+          testId="new-provider-org"
        />
        <div className="fancytable--td provider--arrow">
          <span />
--- a/ui/src/shared/components/InputClickToEdit.tsx
+++ b/ui/src/shared/components/InputClickToEdit.tsx
@ -104,7 +104,7 @@ class InputClickToEdit extends PureComponent<Props, State> {
      placeholder,
      value,
      appearAsNormalInput,
-      testId,
+      testId = 'icte',
    } = this.props

    const wrapperClass = `${wrapper}${