test(dashboards): create dashboard from template in dashboard index

influxdata · Apr 2, 2019 · d10d216 · d10d216
1 parent bceac1a
commit d10d216
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 1 deletion.
diff --git a/ui/cypress/e2e/dashboardsIndex.test.ts b/ui/cypress/e2e/dashboardsIndex.test.ts
@@ -51,6 +51,25 @@ describe('Dashboards', () => {
     cy.getByTestID('dashboard-card').should('have.length', 1)
   })
 
+  it('can create a dashboard from a Template', () => {
+    cy.getByTestID('dashboard-card').should('have.length', 0)
+    cy.get<Organization>('@org').then(({id}) => {
+      cy.createDashboardTemplate(id)
+    })
+
+    cy.get('.page-header--container')
+      .contains('Create')
+      .click()
+
+    cy.getByTestID('dropdown--item From a Template').click()
+
+    cy.getByTestID('card-select-Bashboard-Template').click()
+
+    cy.getByTestID('create-dashboard-button').click()
+
+    cy.getByTestID('dashboard-card').should('have.length', 1)
+  })
+
   describe('Dashboard List', () => {
     beforeEach(() => {
       cy.get<Organization>('@org').then(({id}) => {

diff --git a/ui/cypress/index.d.ts b/ui/cypress/index.d.ts
@@ -17,6 +17,7 @@ import {
   createScraper,
   fluxEqual,
   createTelegraf,
+  createDashboardTemplate,
 } from './support/commands'
 
 declare global {
@@ -27,6 +28,7 @@ declare global {
       createSource: typeof createSource
       createTask: typeof createTask
       createVariable: typeof createVariable
+      createDashboardTemplate: typeof createDashboardTemplate
       createDashboard: typeof createDashboard
       createOrg: typeof createOrg
       flush: typeof flush

diff --git a/ui/cypress/support/commands.ts b/ui/cypress/support/commands.ts
@@ -28,6 +28,37 @@ export const createDashboard = (
   })
 }
 
+export const createDashboardTemplate = (
+  orgID?: string,
+  name: string = 'Bashboard'
+): Cypress.Chainable<Cypress.Response> => {
+  return cy.request({
+    method: 'POST',
+    url: '/api/v2/documents/templates',
+    body: {
+      content: {
+        data: {
+          attributes: {name, description: ''},
+          relationships: {
+            label: {data: []},
+            cell: {data: []},
+            variable: {data: []},
+          },
+          type: 'dashboard',
+        },
+        included: [],
+      },
+      labels: [],
+      meta: {
+        description: `template created from dashboard: ${name}`,
+        version: '1',
+        name: `${name}-Template`,
+      },
+      orgID,
+    },
+  })
+}
+
 export const createOrg = (): Cypress.Chainable<Cypress.Response> => {
   return cy.request({
     method: 'POST',
@@ -270,6 +301,7 @@ Cypress.Commands.add('setupUser', setupUser)
 
 // dashboards
 Cypress.Commands.add('createDashboard', createDashboard)
+Cypress.Commands.add('createDashboardTemplate', createDashboardTemplate)
 
 // orgs
 Cypress.Commands.add('createOrg', createOrg)

diff --git a/ui/src/clockface/components/card_select/CardSelectCard.tsx b/ui/src/clockface/components/card_select/CardSelectCard.tsx
@@ -13,6 +13,7 @@ interface Props {
   hideImage?: boolean
   checked: boolean
   disabled: boolean
+  testID?: string
 }
 
 @ErrorHandling
@@ -23,11 +24,13 @@ class CardSelectCard extends PureComponent<Props> {
   }
 
   public render() {
-    const {id, label, checked, name, disabled} = this.props
+    const {id, label, checked, name, disabled, testID} = this.props
+
     return (
       <div
         data-toggle="card_toggle"
         onClick={this.handleClick}
+        data-testid={testID}
         className={classnames('card-select--card', {
           'card-select--checked': checked,
           'card-select--disabled': disabled,

diff --git a/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx b/ui/src/dashboards/components/DashboardImportFromTemplateOverlay.tsx
@@ -121,6 +121,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
           checked={_.get(selectedTemplateSummary, 'id', '') === t.id}
           label={t.meta.name}
           hideImage={true}
+          testID={`card-select-${t.meta.name}`}
         />
       )
     })
@@ -133,6 +134,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
         text="Create Dashboard"
         onClick={this.onSubmit}
         key="submit-button"
+        testID="create-dashboard-button"
         color={ComponentColor.Primary}
       />,
     ]