fix(ui/tests/e22): update tests to account for ResourceCard

influxdata · Feb 26, 2019 · 51da09f · 51da09f
1 parent 55d8c18
commit 51da09f
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 71 deletions.
diff --git a/ui/cypress/e2e/dashboardsIndex.test.ts b/ui/cypress/e2e/dashboardsIndex.test.ts
@@ -96,7 +96,8 @@ describe('Dashboards', () => {
       resourceName: 'dashboard',
       url: '/dashboards',
       createResource: id => cy.createDashboard(id),
-      rowDataTest: `dashboard-index--row`,
+      rowTestID: 'resource-card',
+      labelsTestID: id => `dashboard-labels ${id}`,
     })
   })
 })
diff --git a/ui/cypress/e2e/shared/labels.ts b/ui/cypress/e2e/shared/labels.ts
@@ -3,12 +3,14 @@ import {Organization} from '@influxdata/influx'
 export const shouldEditLabels = <T>({
   resourceName,
   url,
-  rowDataTest,
+  rowTestID,
+  labelsTestID,
   createResource,
 }: {
   resourceName: string
   url: string
-  rowDataTest: string
+  rowTestID: string
+  labelsTestID: (id?: string) => string
   createResource: (id?: string) => Cypress.Chainable<Cypress.Response>
 }) => {
   it(`can edit ${resourceName} labels`, () => {
@@ -18,7 +20,7 @@ export const shouldEditLabels = <T>({
 
     cy.visit(url)
 
-    cy.get('.index-list--row')
+    cy.getByTestID(rowTestID)
       .first()
       .get('.label--edit-button button')
       .first()
@@ -34,7 +36,7 @@ export const shouldEditLabels = <T>({
     return createResource(orgID).then(({body}) => {
       cy.visit(url)
 
-      const newResource = cy.getByDataTest(`${rowDataTest} ${body.id}`).first()
+      const newResource = cy.getByTestID(labelsTestID(body.id)).first()
 
       newResource
         .get('.label--edit-button button')
@@ -66,9 +68,9 @@ export const shouldEditLabels = <T>({
           .click()
 
         const labelPills = cy
-          .get('.index-list--row')
+          .getByTestID(rowTestID)
           .first()
-          .get('.index-list--labels .label')
+          .get('.label')
 
         labelPills.should('contain', newLabelName)
       })
@@ -88,16 +90,16 @@ export const shouldEditLabels = <T>({
       .first()
       .click()
 
-    cy.get('.index-list--row').should('have.length', 3)
+    cy.getByTestID(rowTestID).should('have.length', 3)
 
-    cy.getByDataTest(`label--pill ${newLabelName}`)
+    cy.getByTestID(`label--pill ${newLabelName}`)
       .first()
       .click()
-    cy.getByDataTest(`search-widget ${newLabelName}`)
+    cy.getByTestID(`search-widget ${newLabelName}`)
       .first()
       .should('have.value', newLabelName)
 
-    cy.get('.index-list--row').should('have.length', 1)
+    cy.getByTestID(rowTestID).should('have.length', 1)
   })
 
   it(`can filter ${resourceName} by labels in search widget`, () => {
@@ -113,15 +115,15 @@ export const shouldEditLabels = <T>({
       .first()
       .click()
 
-    cy.get('.index-list--row').should('have.length', 3)
+    cy.getByTestID(rowTestID).should('have.length', 3)
 
-    cy.getByDataTest(`search-widget `).type(newLabelName)
+    cy.getByTestID(`search-widget `).type(newLabelName)
 
-    cy.get('.index-list--row').should('have.length', 1)
+    cy.getByTestID(rowTestID).should('have.length', 1)
 
-    cy.get('.index-list--row')
+    cy.getByTestID(rowTestID)
       .first()
-      .get('.index-list--labels .label')
+      .get('.label')
       .should('contain', newLabelName)
   })
 }
diff --git a/ui/cypress/e2e/tasks.test.ts b/ui/cypress/e2e/tasks.test.ts
@@ -77,7 +77,8 @@ describe('Tasks', () => {
       resourceName: 'task',
       url: '/tasks',
       createResource: id => cy.createTask(id),
-      rowDataTest: 'task--resource-cell',
+      rowTestID: 'task-row',
+      labelsTestID: id => `task-labels ${id}`,
     })
   })
 })
diff --git a/ui/src/clockface/components/label/LabelContainer.tsx b/ui/src/clockface/components/label/LabelContainer.tsx
@@ -19,22 +19,25 @@ interface Props {
   limitChildCount?: number
   resourceName?: string
   onEdit?: () => void
+  testID?: string
 }
 
 class LabelContainer extends Component<Props> {
   public static defaultProps: Partial<Props> = {
     limitChildCount: 999,
     resourceName: 'this resource',
+    testID: 'labels-con',
   }
 
   public render() {
-    const {className} = this.props
+    const {className, testID} = this.props
 
     return (
       <div
         className={classnames('label--container', {
           [`${className}`]: className,
         })}
+        data-testid={testID}
       >
         <div className="label--container-margin">
           {this.children}

diff --git a/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx b/ui/src/dashboards/components/dashboard_index/DashboardCard.tsx
@@ -39,7 +39,7 @@ export default class DashboardCard extends PureComponent<Props> {
             name={dashboard.name}
             hrefValue={`/dashboards/${dashboard.id}`}
             noNameString={DEFAULT_DASHBOARD_NAME}
-            parentTestID={`dashboard-card--name ${dashboard.id}`}
+            parentTestID={`dashboard-card--name`}
             buttonTestID="dashboard-card--name-button"
             inputTestID="dashboard-card--input"
           />
@@ -117,6 +117,7 @@ export default class DashboardCard extends PureComponent<Props> {
           limitChildCount={4}
           onEdit={this.handleEditLabels}
           resourceName="this Dashboard"
+          testID={`dashboard-labels ${dashboard.id}`}
         />
       )
     }
@@ -126,6 +127,7 @@ export default class DashboardCard extends PureComponent<Props> {
         limitChildCount={8}
         onEdit={this.handleEditLabels}
         resourceName="this Dashboard"
+        testID={`dashboard-labels ${dashboard.id}`}
       >
         {dashboard.labels.map((label, index) => (
           <Label
@@ -141,9 +143,8 @@ export default class DashboardCard extends PureComponent<Props> {
     )
   }
 
-  private handleLabelClick =  (id: string) => {
-    const label = this.props.dashboard.labels.find(l => l.id === id) 
-
+  private handleLabelClick = (id: string) => {
+    const label = this.props.dashboard.labels.find(l => l.id === id)
 
     this.props.onFilterChange(label.name)
   }

diff --git a/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx b/ui/src/dashboards/components/dashboard_index/DashboardCards.tsx
@@ -30,7 +30,7 @@ export default class DashboardCards extends PureComponent<Props> {
       onEditLabels,
       orgs,
       showOwnerColumn,
-      onFilterChange
+      onFilterChange,
     } = this.props
 
     return dashboards.map(d => (

diff --git a/ui/src/organizations/components/Dashboards.test.tsx b/ui/src/organizations/components/Dashboards.test.tsx
@@ -74,7 +74,6 @@ describe('Dashboards', () => {
 
     fireEvent.click(labelPill)
 
-    expect(getAllByTestId(`dashboard-card--name ${dashTwo.id}`)).toHaveLength(1)
     expect(getAllByTestId('resource-card')).toHaveLength(1)
   })
 

diff --git a/ui/src/tasks/components/TaskRow.tsx b/ui/src/tasks/components/TaskRow.tsx
@@ -45,8 +45,8 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
     const {task, onDelete} = this.props
 
     return (
-      <IndexList.Row disabled={!this.isTaskActive} testID={`task-row`}>
-        <IndexList.Cell testID={`task--resource-cell ${task.id}`}>
+      <IndexList.Row disabled={!this.isTaskActive} testID="task-row">
+        <IndexList.Cell>
           <ComponentSpacer
             stackChildren={Stack.Columns}
             align={Alignment.Right}
@@ -188,6 +188,7 @@ export class TaskRow extends PureComponent<Props & WithRouterProps> {
         resourceName="this Task"
         onEdit={this.handleEditLabels}
         className="index-list--labels"
+        testID={`task-labels ${task.id}`}
       >
         {task.labels.map(label => (
           <Label

diff --git a/ui/src/tasks/components/__snapshots__/TaskRow.test.tsx.snap b/ui/src/tasks/components/__snapshots__/TaskRow.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Tasks.Components.TaskRow renders 1`] = `
   <IndexListRowCell
     alignment="left"
     revealOnHover={false}
-    testID="task--resource-cell 02ef9deff2141000"
+    testID="table-cell"
   >
     <Component
       align="right"
@@ -26,6 +26,7 @@ exports[`Tasks.Components.TaskRow renders 1`] = `
         limitChildCount={4}
         onEdit={[Function]}
         resourceName="this resource"
+        testID="labels-con"
       />
     </Component>
   </IndexListRowCell>

diff --git a/ui/src/tasks/containers/TasksPage.test.tsx b/ui/src/tasks/containers/TasksPage.test.tsx
@@ -38,50 +38,6 @@ describe('TasksPage', () => {
     expect(getAllByTestId('task-row')).toHaveLength(tasks.length)
   })
 
-  describe('label click', () => {
-    const labelName = 'clickMe'
-    const taskOne = {
-      ...tasks[0],
-      labels: [
-        {
-          id: '123',
-          name: labelName,
-          properties: {
-            color: '#FFAA99',
-            description: '',
-          },
-        },
-      ],
-    }
-    const filterTasks = [taskOne, tasks[1]]
-
-    it('filters when label is clicked', () => {
-      const {getAllByTestId, getByText} = setup({tasks: filterTasks})
-
-      expect(getAllByTestId('task-row')).toHaveLength(2)
-
-      fireEvent.click(getByText(labelName))
-
-      expect(getAllByTestId('task-row')).toHaveLength(1)
-    })
-
-    it('displays label name in input when clicked', () => {
-      const {getAllByTestId, getByText, getByTestId} = setup({
-        tasks: filterTasks,
-      })
-
-      expect(getAllByTestId('task-row')).toHaveLength(2)
-
-      const labelPill = getByText(labelName)
-      fireEvent.click(labelPill)
-
-      const input = getByTestId(
-        `search-widget ${labelName}`
-      ) as HTMLInputElement
-      expect(input.value).toEqual(labelName)
-    })
-  })
-
   describe('active filtering', () => {
     const inactiveTask = {
       ...tasks[0],
@@ -96,6 +52,7 @@ describe('TasksPage', () => {
       orgID: '1',
     }
 
+    // Todo translate to e2e
     it('resets searchTerm and active task filtering', () => {
       const {getAllByTestId} = setup({
         dropdownOrgID: '1',
@@ -121,6 +78,7 @@ describe('TasksPage', () => {
       expect(getAllByTestId('task-row')).toHaveLength(1)
     })
 
+    // Todo translate to e2e
     it('filters active on active and searchTerm', () => {
       const labelName = 'clickMe'
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,7 +74,6 @@ describe('Dashboards', () => { @@
         fireEvent.click(labelPill)
-        expect(getAllByTestId(`dashboard-card--name ${dashTwo.id}`)).toHaveLength(1)
         expect(getAllByTestId('resource-card')).toHaveLength(1)
       })
@@ Expand Down @@