Merge pull request #271 from openkfw/fix-e2e-tests-for-v1

Fix and stabilize e2e-tests & provisioning
openkfw · May 8, 2019 · 872ccbe · 872ccbe
2 parents 8a2353b + ff7776f
commit 872ccbe
Show file tree

Hide file tree

Showing 17 changed files with 112 additions and 75 deletions.
diff --git a/e2e-test/cypress/integration/project_assignee_spec.js b/e2e-test/cypress/integration/project_assignee_spec.js
@@ -1,6 +1,6 @@
-let projects = undefined;
-
 describe("Project Assignee", function() {
+  let projects = undefined;
+
   before(() => {
     cy.login();
     cy.fetchProjects().then(p => (projects = p));
@@ -11,22 +11,17 @@ describe("Project Assignee", function() {
     cy.visit(`/projects/${projects[0].data.id}`);
   });
 
-  it("Show project details page", function() {
-    cy.location("pathname").should("eq", `/projects/${projects[0].data.id}`);
+  it("After selecting a new assignee, the corresponding checkbox is checked", function() {
+    cy.get("[data-test=assignee-selection]").click();
+    cy.get("[data-test=assignee-list]")
+      .should("be.visible")
+      .then($list => {
+        const firstUnchecked = $list.find("input:not(:checked)").first();
+        // Use timeout to wait for animation to finish
+        const options = { timeout: 10000, force: true };
+        cy.wrap(firstUnchecked, options)
+          .click(options)
+          .should("be.checked");
+      });
   });
-
-  // it("Select different assignee", function() {
-  //   cy.get("[data-test=assignee-container]").should("be.visible");
-  //   cy.get("[data-test=assignee-selection]").click();
-  //   cy.get("[data-test=assignee-list]", { timeout: 20000 })
-  //     .should("be.visible")
-  //     .then($list => {
-  //       const firstUnchecked = $list.find("input:not(:checked)").first();
-  //       // Use timeout to wait for animation to finish
-  //       const options = { timeout: 10000 };
-  //       cy.wrap(firstUnchecked, options)
-  //         .click(options)
-  //         .should("be.checked");
-  //     });
-  // });
 });
diff --git a/e2e-test/cypress/integration/project_history_spec.js b/e2e-test/cypress/integration/project_history_spec.js
@@ -1,9 +1,8 @@
-let projectId;
-
 describe("Project's history", function() {
+  let projectId;
+
   before(() => {
     cy.login();
-
     cy.createProject("project history test project", "project history test", []).then(({ id }) => {
       projectId = id;
       return cy.createSubproject(projectId, "project history test");
@@ -19,6 +18,9 @@ describe("Project's history", function() {
     cy.get("#project-history-button").click();
 
     // Count history items => should be one
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 1);
@@ -32,7 +34,7 @@ describe("Project's history", function() {
 
   it("The history is sorted from new to old", function() {
     // Change assignee to create new history event
-    cy.get("[data-test=assignee-selection]").click();
+    cy.get("[data-test=assignee-selection] [role=button]").click();
     cy.get("[role=listbox]")
       .find("[value=jdoe]")
       .click()
@@ -41,6 +43,9 @@ describe("Project's history", function() {
     cy.get("#project-history-button").click();
 
     // Count history items => should be two
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 2);

diff --git a/e2e-test/cypress/integration/subproject_history_spec.js b/e2e-test/cypress/integration/subproject_history_spec.js
@@ -1,7 +1,7 @@
-let projectId;
-let subprojectId;
-
 describe("Subproject's history", function() {
+  let projectId;
+  let subprojectId;
+
   before(() => {
     cy.login();
 
@@ -25,6 +25,9 @@ describe("Subproject's history", function() {
     cy.get("#subproject-history-button").click();
 
     // Count history items => should be one
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 1);
@@ -38,7 +41,7 @@ describe("Subproject's history", function() {
 
   it("The history is sorted from new to old", function() {
     // Change assignee to create new history event
-    cy.get("[data-test=assignee-selection]")
+    cy.get("[data-test=assignee-selection] [role=button]")
       .first()
       .click();
     cy.get("[role=listbox]")
@@ -49,6 +52,9 @@ describe("Subproject's history", function() {
     cy.get("#subproject-history-button").click();
 
     // Count history items => should be two
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 2);
@@ -57,12 +63,12 @@ describe("Subproject's history", function() {
     cy.get("#history-list")
       .find("li.history-item")
       .last()
-      .should("contain", "created project");
+      .should("contain", "created subproject");
 
     // Make sure the newest entry is the assign event
     cy.get("#history-list")
       .find("li.history-item")
       .first()
-      .should("contain", "assigned project");
+      .should("contain", "assigned subproject");
   });
 });
diff --git a/e2e-test/cypress/integration/subproject_permissions_spec.js b/e2e-test/cypress/integration/subproject_permissions_spec.js
@@ -27,8 +27,7 @@ describe("Subproject Permissions", function() {
     cy.get("[data-test=spp-button-0]").click();
     cy.get("[data-test=permission-container]").should("be.visible");
     cy.get("[data-test='permission-select-subproject.intent.grantPermission']").click();
-    cy
-      .get("[data-test='permission-list']")
+    cy.get("[data-test='permission-list']")
       .should("be.visible")
       .then($list => {
         const checkedItems = $list.find("input:checked");
@@ -41,13 +40,11 @@ describe("Subproject Permissions", function() {
       .then($list => {
         const firstUnchecked = $list.find("input:not(:checked)").first();
         // Use timeout to wait for animation to finish
-        const options = { timeout: 60000 };
-        cy
-          .wrap(firstUnchecked, options)
+        const options = { timeout: 60000, force: true };
+        cy.wrap(firstUnchecked, options)
           .click(options)
           .should("be.checked");
-        cy
-          .wrap(firstUnchecked, options)
+        cy.wrap(firstUnchecked, options)
           .click(options)
           .should("not.be.checked");
       });

diff --git a/e2e-test/cypress/integration/workflowitem_history_spec.js b/e2e-test/cypress/integration/workflowitem_history_spec.js
@@ -1,7 +1,7 @@
-let projectId;
-let subprojectId;
-
 describe("Workflowitem's history", function() {
+  let projectId;
+  let subprojectId;
+
   before(() => {
     cy.login();
 
@@ -29,6 +29,9 @@ describe("Workflowitem's history", function() {
     cy.get("#workflowitem-history-tab").click();
 
     // Count history items => should be one
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 1);
@@ -55,6 +58,9 @@ describe("Workflowitem's history", function() {
     cy.get("#workflowitem-history-tab").click();
 
     // Count history items => should be two
+    cy.get("#history-list li.history-item")
+      .first()
+      .should("be.visible");
     cy.get("#history-list")
       .find("li.history-item")
       .should("have.length", 2);

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,7 +22,7 @@
     "accounting": "^0.4.1",
     "axios": "^0.16.0",
     "chart.js": "^2.8.0",
-    "dayjs": "^1.8.13",
+    "dayjs": "^1.8.14",
     "downshift": "^2.0.16",
     "file-saver": "^1.3.8",
     "history": "^4.9.0",

diff --git a/frontend/src/pages/Common/AssigneeSelection.js b/frontend/src/pages/Common/AssigneeSelection.js
@@ -129,9 +129,13 @@ class AssigneeSelection extends Component {
     };
 
     return (
-      <FormControl data-test="assignee-container" disabled={disabled} className={classes.formControl}>
+      <FormControl
+        data-test={"assignee-container" + (disabled ? ".disabled" : "")}
+        disabled={disabled}
+        className={classes.formControl}
+      >
         <Select
-          data-test="assignee-selection"
+          data-test={"assignee-selection" + (disabled ? ".disabled" : "")}
           classes={{
             ...getSortClasses()
           }}

diff --git a/frontend/src/pages/Common/HistoryList.js b/frontend/src/pages/Common/HistoryList.js
@@ -60,7 +60,7 @@ function stringifyHistoryEvent(event, getUserDisplayname) {
   const businessEvent = event.get("businessEvent");
   const createdBy = getUserDisplayname(businessEvent.get("publisher"));
   const eventType = businessEvent.get("type");
-  const displayName = event.getIn(["snapshot", "displayName"]);
+  const displayName = event.getIn(["snapshot", "displayName"]) || "";
 
   switch (eventType) {
     case "project_created":

diff --git a/frontend/src/pages/SubProjects/ProjectHistoryDrawer.js b/frontend/src/pages/SubProjects/ProjectHistoryDrawer.js
@@ -40,7 +40,7 @@ function mapStateToProps(state) {
     nEventsTotal: state.getIn(["detailview", "historyItemsCount"]),
     hasMore: state.getIn(["detailview", "hasMoreHistory"]),
     isLoading: state.getIn(["detailview", "isHistoryLoading"]),
-    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid])
+    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid]) || "Somebody"
   };
 }
 

diff --git a/frontend/src/pages/SubProjects/SubProjectContainer.js b/frontend/src/pages/SubProjects/SubProjectContainer.js
@@ -56,20 +56,23 @@ class SubProjectContainer extends Component {
     const canCreateSubproject = canCreateSubProject(this.props.allowedIntents);
     const canAssign = canAssignProject(this.props.allowedIntents);
     const canClose = canCloseProject(this.props.allowedIntents);
+    const projectId = this.projectId;
+
     return (
       <div>
         <LiveUpdates update={this.update} />
         <div style={globalStyles.innerContainer}>
           <ProjectDetails
             {...this.props}
+            projectId={projectId}
             canAssignProject={canAssign}
             closeProject={this.closeProject}
             canClose={canClose}
           />
-          <SubProjects {...this.props} canCreateSubProject={canCreateSubproject} />
-          <ProjectHistoryDrawer projectId={this.projectId} />
+          <SubProjects {...this.props} projectId={projectId} canCreateSubProject={canCreateSubproject} />
+          <ProjectHistoryDrawer projectId={projectId} />
           <SubprojectPermissionsContainer
-            projectId={this.projectId}
+            projectId={projectId}
             subProjects={this.props.subProjects}
             title={strings.subproject.subproject_permissions_title}
           />

diff --git a/frontend/src/pages/SubProjects/SubprojectHistoryDrawer.js b/frontend/src/pages/SubProjects/SubprojectHistoryDrawer.js
@@ -41,7 +41,7 @@ function mapStateToProps(state) {
     nEventsTotal: state.getIn(["workflow", "historyItemsCount"]),
     hasMore: state.getIn(["workflow", "hasMoreHistory"]),
     isLoading: state.getIn(["workflow", "isHistoryLoading"]),
-    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid])
+    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid]) || "Somebody"
   };
 }
 

diff --git a/frontend/src/pages/SubProjects/reducer.js b/frontend/src/pages/SubProjects/reducer.js
@@ -153,17 +153,19 @@ export default function detailviewReducer(state = defaultState, action) {
         showHistory: false
       });
     case SHOW_SUBPROJECT_EDIT: {
-      return state.merge({
-        subprojectToAdd: state
-          .getIn(["subprojectToAdd"])
-          .set("id", action.id)
-          .set("displayName", action.name)
-          .set("description", action.description)
-          .set("currency", action.currency)
-          .set("projectedBudgets", fromJS(action.projectedBudgets)),
-        editDialogShown: true,
-        dialogTitle: strings.subproject.subproject_edit_title
-      });
+      return state
+        .updateIn(["subprojectToAdd"], subproject =>
+          subproject
+            .set("id", action.id)
+            .set("displayName", action.name)
+            .set("description", action.description)
+            .set("currency", action.currency)
+            .set("projectedBudgets", fromJS(action.projectedBudgets))
+        )
+        .merge({
+          editDialogShown: true,
+          dialogTitle: strings.subproject.subproject_edit_title
+        });
     }
     case HIDE_SUBPROJECT_DIALOG: {
       return state.merge({

diff --git a/frontend/src/pages/WorkflowitemDetails/WorkflowHistoryTab.js b/frontend/src/pages/WorkflowitemDetails/WorkflowHistoryTab.js
@@ -38,7 +38,7 @@ function mapStateToProps(state) {
     nEventsTotal: state.getIn(["workflowitemDetails", "nEventsTotal"]),
     hasMore: state.getIn(["workflowitemDetails", "hasMore"]),
     isLoading: state.getIn(["workflowitemDetails", "isLoading"]),
-    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid])
+    getUserDisplayname: uid => state.getIn(["login", "userDisplayNameMap", uid]) || "Somebody"
   };
 }
 

diff --git a/frontend/src/pages/Workflows/WorkflowAssigneeContainer.js b/frontend/src/pages/Workflows/WorkflowAssigneeContainer.js
@@ -28,10 +28,10 @@ class WorkflowAssigneeContainer extends Component {
   };
 
   render() {
-    const { workflowItems, workflowitemId, users, title, classes, disabled, workflowSortEnabled, status } = this.props;
+    const { workflowItems, workflowitemId, users, title, disabled, workflowSortEnabled, status } = this.props;
     const assignee = this.getWorkflowAssignee(workflowItems, workflowitemId);
     return (
-      <div className={`${classes.assigneeContainer} workflowitem-assignee`} data-test="inside">
+      <div className={disabled ? "" : "workflowitem-assignee"} data-test="inside">
         <AssigneeSelection
           assigneeId={assignee}
           disabled={disabled || workflowSortEnabled}

diff --git a/frontend/src/pages/Workflows/WorkflowEditDrawer.js b/frontend/src/pages/Workflows/WorkflowEditDrawer.js
@@ -77,8 +77,13 @@ const WorkflowEditDrawer = props => {
     storePermissions(permissions);
   };
 
+  const isOpen = !_isEmpty(selectedWorkflowItems);
+
+  // Only render the drawer if there are elements selected
+  if (!isOpen) return null;
+
   return (
-    <Drawer open={!_isEmpty(selectedWorkflowItems)} variant="persistent" anchor="right">
+    <Drawer open={isOpen} variant="persistent" anchor="right">
       <div>
         <Button
           variant="contained"