Add Cypress integration & initial test

migtools · May 29, 2019 · e22cd4e · e22cd4e
1 parent bdc19a4
commit e22cd4e
Show file tree

Hide file tree

Showing 9 changed files with 14,355 additions and 74 deletions.
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "video": false,
+  "pluginsFile": false,
+  "supportFile": false
+}
diff --git a/cypress/integration/cluster_spec.js b/cypress/integration/cluster_spec.js
@@ -0,0 +1,24 @@
+describe('Cluster functionality test', () => {
+  it('adds cluster with valid data', () => {
+    cy.visit('/');
+    cy.get('#add-cluster-btn').then(() => {
+      cy.get('#add-cluster-btn')
+        .first()
+        .click()
+        .then(() => {
+          cy.get('#cluster-name-input')
+            .type('test cluster')
+          cy.get('#url-input')
+            .type('example.com')
+          cy.get('#token-input')
+            .type('123456')
+          cy.get('#check-connection-btn')
+            .click()
+          cy.get('#submit-cluster-btn')
+            .click()
+        })
+    });
+    cy.contains('Add cluster')
+    cy.contains('test cluster')
+  });
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,9 @@
     "prep-remote": "./scripts/prep-remote.sh",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "test": "jest --rootDir=. --config=config/jest.config.js"
+    "test:unit": "jest --rootDir=. --config=config/jest.config.js",
+    "test:integration": "cypress run",
+    "test": "yarn test:unit && yarn test:integration"
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
@@ -29,12 +31,13 @@
     "@babel/preset-typescript": "7.3.3",
     "@emotion/babel-preset-css-prop": "10.0.9",
     "@emotion/styled": "10.0.9",
-    "@types/jest": "24.0.13",
-    "@types/node": "11.13.6",
+    "@types/jest": "24.0.11",
+    "@types/node": "^11.13.6",
     "babel-loader": "8.0.6",
     "babel-plugin-emotion": "10.0.9",
     "clean-webpack-plugin": "2.0.1",
     "css-loader": "2.1.1",
+    "cypress": "^3.3.1",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin": "1.3.3",

diff --git a/src/app/cluster/components/AddClusterModal/AddClusterForm.tsx b/src/app/cluster/components/AddClusterModal/AddClusterForm.tsx
@@ -76,7 +76,7 @@ class WrappedAddClusterForm extends React.Component<any, any> {
             value={values.name}
             name="name"
             type="text"
-            id="name"
+            id="cluster-name-input"
           />
           {errors.name && touched.name && (
             <FormErrorDiv id="feedback-name">{errors.name}</FormErrorDiv>
@@ -96,7 +96,7 @@ class WrappedAddClusterForm extends React.Component<any, any> {
             name="url"
             type="text"
             // isValid={!errors.url && touched.url}
-            id="url"
+            id="url-input"
           />
           {errors.url && touched.url && (
             <FormErrorDiv id="feedback-url">{errors.url}</FormErrorDiv>
@@ -119,7 +119,7 @@ class WrappedAddClusterForm extends React.Component<any, any> {
             onInput={() => setFieldTouched('token', true, true)}
             onBlur={handleBlur}
             name="token"
-            id="token"
+            id="token-input"
             type={this.state.tokenHidden ? 'password' : 'text'}
           />
           {errors.token && touched.token && (

diff --git a/src/app/common/components/CheckConnection.tsx b/src/app/common/components/CheckConnection.tsx
@@ -44,6 +44,7 @@ const CheckConnection: React.FunctionComponent<IProps> = ({
                 variant="secondary"
                 isDisabled={!errorsObj || touchedObj}
                 onClick={() => checkConnection()}
+                id="check-connection-btn"
               >
                 Check connection
               </Button>
@@ -60,6 +61,7 @@ const CheckConnection: React.FunctionComponent<IProps> = ({
             type="submit"
             isDisabled={connectionState !== ConnectionState.Success}
             style={{ marginRight: '10px' }}
+            id="submit-cluster-btn"
           >
             Add
           </Button>

diff --git a/src/app/home/components/DataList/Clusters/ClusterDataListItem.tsx b/src/app/home/components/DataList/Clusters/ClusterDataListItem.tsx
@@ -38,9 +38,9 @@ const ClusterDataListItem = ({ dataList, isLoading, associatedPlans, migMeta, ..
               </DataListCell>,
             ]}
           />
-          <DataListAction aria-label="add-plan" aria-labelledby="plan-item" id="add-plan">
-            <Button onClick={toggleOpen} variant="link">
-              <PlusCircleIcon /> Add Cluster
+          <DataListAction aria-label="add-cluster" aria-labelledby="plan-item" id="add-cluster">
+            <Button aria-label="add-cluster-btn" id="add-cluster-btn" onClick={toggleOpen} variant="link">
+              <PlusCircleIcon /> Add cluster
             </Button>
             <AddClusterModal isOpen={isOpen} onHandleClose={toggleOpen} />
           </DataListAction>

diff --git a/tsconfig.json b/tsconfig.json
@@ -67,5 +67,5 @@
       "es7",
       "dom"
     ]
-  }
-}
+  },
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,5 +67,5 @@ @@
           "es7",
           "dom"
         ]
-      }
-    }
+      },
+    }