api: Send workflow item currency with subproject details

When the subproject details are fetched, the workflow item currency is now returned as well. Removed the action 'fetchWorkflowItems' as it is not used. Add E2E-test to check this bug. Closes #281
openkfw · Jun 19, 2019 · 00079c7 · 00079c7
1 parent 3cc7077
commit 00079c7
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,7 +15,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 <!-- ### Removed -->
 
-<!-- ### Fixed-->
+### Fixed
+
+- Display correct currency when editing workflow items [#281](https://github.com/openkfw/TruBudget/issues/281)
 
 <!-- ### Security -->
 

diff --git a/api/src/subproject_view_details.ts b/api/src/subproject_view_details.ts
@@ -133,6 +133,7 @@ interface ExposedWorkflowitem {
   data: {
     id: string;
     creationUnixTs: string;
+    currency: string | null | undefined;
     displayName: string | null;
     exchangeRate: string | undefined | null;
     billingDate: string | undefined | null;
@@ -267,6 +268,7 @@ export function addHttpHandler(server: FastifyInstance, urlPrefix: string, servi
             creationUnixTs: toUnixTimestampStr(workflowitem.createdAt),
             displayName: workflowitem.displayName,
             exchangeRate: workflowitem.exchangeRate,
+            currency: workflowitem.currency,
             billingDate: workflowitem.billingDate,
             amountType: workflowitem.amountType,
             description: workflowitem.description,

diff --git a/e2e-test/cypress/integration/workflowitem_edit_spec.js b/e2e-test/cypress/integration/workflowitem_edit_spec.js
@@ -0,0 +1,115 @@
+describe("Workflowitem's history", function() {
+  let projectId;
+  let subprojectId;
+
+  before(() => {
+    cy.login();
+
+    cy.createProject("workflowitem edit test project", "workflowitem edit test", [])
+      .then(({ id }) => {
+        projectId = id;
+        return cy.createSubproject(projectId, "workflowitem edit test", "EUR");
+      })
+      .then(({ id }) => {
+        subprojectId = id;
+      });
+  });
+
+  beforeEach(function() {
+    cy.login();
+    cy.visit(`/projects/${projectId}/${subprojectId}`);
+  });
+
+  it("After creating an allocated workflowitem, the currency is equal to the subproject's currency", function() {
+    // Create a workflow item
+    cy.get("[data-test=createWorkflowitem]").click();
+    cy.get("[data-test=nameinput] input").type("Test");
+    cy.get("[data-test=commentinput] textarea")
+      .last()
+      .type("Test");
+    cy.get("[data-test=amount-type-allocated]").click();
+    cy.get("[data-test=dropdown-currencies-click]").should("contain", "EUR");
+
+    // When the currency is equal to the currency of the subproject
+    // the exchange rate field is disabled
+    cy.get("[data-test=rateinput] input").should("be.disabled");
+  });
+
+  it("After selecting another currencty, the exchange rate can be entered and is saved correctly", function() {
+    // Create a workflow item
+    cy.get("[data-test=createWorkflowitem]").click();
+    cy.get("[data-test=nameinput] input").type("Test");
+    cy.get("[data-test=commentinput] textarea")
+      .last()
+      .type("Test");
+    cy.get("[data-test=amount-type-allocated]").click();
+
+    // Select a different currency than the subproject currency
+    cy.get("[data-test=dropdown-currencies-click]").click();
+    cy.get("[data-value=USD]").click();
+
+    // Enter amount
+    cy.get("[data-test=amountinput] input").type("1234");
+
+    // The exchange rate field should be enabled because
+    // we selected a different currency
+    cy.get("[data-test=rateinput] input").should("be.enabled");
+    cy.get("[data-test=rateinput] input").type("1.5");
+    cy.get("[data-test=next]").click();
+    cy.get("[data-test=submit]").click();
+
+    // The workflow item amount should be displayed in the
+    // subproject's currency
+    cy.get("[data-test=workflowitem-amount]")
+      .first()
+      .should("contain", "€");
+
+    // The information on the workflow item amount
+    // and exchange rate is displayed in a tooltip
+    cy.get("[data-test=amount-explanation]")
+      .first()
+      .should("have.attr", "title")
+      .should("contain", "$");
+  });
+
+  it(
+    "When editing a workflow item with a different currency than the subproject currency, " +
+      "the selected currency is displayed",
+    function() {
+      // Create a workflow item and select a different currency
+      cy.get("[data-test=createWorkflowitem]").click();
+      cy.get("[data-test=nameinput] input").type("Test");
+      cy.get("[data-test=commentinput] textarea")
+        .last()
+        .type("Test");
+      cy.get("[data-test=amount-type-allocated]").click();
+      cy.get("[data-test=dropdown-currencies-click]").click();
+      cy.get("[data-value=USD]").click();
+      cy.get("[data-test=amountinput] input").type("1234");
+      cy.get("[data-test=rateinput] input").should("be.enabled");
+      cy.get("[data-test=rateinput] input").type("1.5");
+      cy.get("[data-test=next]").click();
+      cy.get("[data-test=submit]").click();
+
+      // Verify the selected values
+      cy.get("[data-test=workflowitem-amount]")
+        .first()
+        .should("contain", "€");
+      cy.get("[data-test=amount-explanation]")
+        .first()
+        .should("have.attr", "title")
+        .should("contain", "$");
+
+      // Edit the workflow item and verify that the
+      // pre-selected currency is the one we selected
+      // when the workflow item was created
+      cy.get("[data-test=edit-workflowitem]")
+        .last()
+        .click();
+      cy.get("[data-test=dropdown-currencies-click]").should("contain", "USD");
+
+      // Close the dialog
+      cy.get("[data-test=cancel]").click();
+    }
+  );
+});
diff --git a/frontend/src/pages/Common/Identifier.js b/frontend/src/pages/Common/Identifier.js
@@ -21,7 +21,7 @@ class Identifier extends Component {
           helperText={this.props.nameHintText}
           value={this.props.name}
           onChange={this.props.nameOnChange}
-          id="nameinput"
+          data-test={this.props.commentId || "nameinput"}
         />
 
         <TextInput
@@ -30,7 +30,7 @@ class Identifier extends Component {
           value={this.props.comment}
           onChange={this.props.commentOnChange}
           multiline={true}
-          id="commentinput"
+          data-test={this.props.commentId || "commentinput"}
         />
       </div>
     );

diff --git a/frontend/src/pages/Common/TextInput.js b/frontend/src/pages/Common/TextInput.js
@@ -20,7 +20,9 @@ const TextInput = ({
   multiline = false,
   type = "text",
   disabled = false,
-  id
+  id,
+  // eslint-disable-next-line no-useless-computed-key
+  ["data-test"]: dataTest
 }) => (
   <TextField
     label={label}
@@ -34,6 +36,7 @@ const TextInput = ({
     onChange={event => onChange(event.target.value)}
     onBlur={onBlur}
     pattern={pattern}
+    data-test={dataTest}
   />
 );
 

diff --git a/frontend/src/pages/Workflows/Workflow.js b/frontend/src/pages/Workflows/Workflow.js
@@ -38,7 +38,7 @@ const Workflow = props => {
         {/* Button is disabled either if the user is not allowed to edit or the user is in "sort" mode */}
         <Fab
           disabled={createDisabled}
-          id="createWorkflowItem"
+          data-test="createWorkflowitem"
           color="primary"
           onClick={() => props.showCreateDialog()}
           style={{

diff --git a/frontend/src/pages/Workflows/WorkflowContainer.js b/frontend/src/pages/Workflows/WorkflowContainer.js
@@ -21,7 +21,6 @@ import {
   enableSubProjectBudgetEdit,
   enableWorkflowEdit,
   fetchAllSubprojectDetails,
-  fetchWorkflowItems,
   hideWorkflowDetails,
   hideWorkflowDialog,
   hideWorkflowitemAdditionalData,
@@ -142,7 +141,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     closeSubproject: (pId, sId) => dispatch(closeSubproject(pId, sId, true)),
     closeWorkflowItem: (pId, sId, wId) => dispatch(closeWorkflowItem(pId, sId, wId, true)),
 
-    fetchWorkflowItems: streamName => dispatch(fetchWorkflowItems(streamName)),
     setSelectedView: (id, section) => dispatch(setSelectedView(id, section)),
 
     showWorkflowItemPermissions: wId => dispatch(showWorkflowItemPermissions(wId)),

diff --git a/frontend/src/pages/Workflows/WorkflowDialogAmount.js b/frontend/src/pages/Workflows/WorkflowDialogAmount.js
@@ -67,16 +67,19 @@ class WorkflowDialogAmount extends Component {
               value="N/A"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_na}
+              data-test="amount-type-na"
             />
             <FormControlLabel
               value="allocated"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_allocated}
+              data-test="amount-type-allocated"
             />
             <FormControlLabel
               value="disbursed"
               control={<Radio color="primary" />}
               label={strings.workflow.workflow_budget_disbursed}
+              data-test="amount-type-disbursed"
             />
           </RadioGroup>
         </div>
@@ -133,7 +136,7 @@ class WorkflowDialogAmount extends Component {
           type="text"
           multiline={false}
           aria-label="amount"
-          id="amountinput"
+          data-test="amountinput"
           style={{
             width: "20%",
             paddingRight: 20
@@ -152,7 +155,7 @@ class WorkflowDialogAmount extends Component {
           }}
           type="text"
           aria-label="rate"
-          id="rateinput"
+          data-test="rateinput"
           disabled={workflowCurrency === subProjectCurrency}
           style={{
             width: "20%",

diff --git a/frontend/src/pages/Workflows/WorkflowItem.js b/frontend/src/pages/Workflows/WorkflowItem.js
@@ -257,7 +257,7 @@ const getAmountField = (amount, type, exchangeRate, sourceCurrency, targetCurren
 
   const amountExplanationTitle = toAmountString(amount, sourceCurrency) + " x " + exchangeRate;
   const amountExplaination = (
-    <Tooltip title={amountExplanationTitle}>
+    <Tooltip data-test="amount-explanation" title={amountExplanationTitle}>
       <SwapIcon />
     </Tooltip>
   );
@@ -307,7 +307,17 @@ const getCardStyle = (workflowSortEnabled, status) => {
   return style;
 };
 
-const ActionButton = ({ notVisible, disabled, onClick, icon, title, workflowSortEnabled, status }) => {
+const ActionButton = ({
+  notVisible,
+  disabled,
+  onClick,
+  icon,
+  title,
+  workflowSortEnabled,
+  status,
+  // eslint-disable-next-line no-useless-computed-key
+  ["data-test"]: dataTest
+}) => {
   return (
     <div style={styles.actionButton}>
       <Tooltip
@@ -322,6 +332,7 @@ const ActionButton = ({ notVisible, disabled, onClick, icon, title, workflowSort
             onClick={onClick}
             style={notVisible ? { ...styles.hide } : getButtonStyle(workflowSortEnabled, status)}
             disabled={disabled}
+            data-test={dataTest}
           >
             {icon}
           </IconButton>
@@ -360,6 +371,7 @@ const renderActionButtons = (
           title={additionalDataDisabled ? "" : strings.common.additional_data}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="additional-data-icon"
         />
         <ActionButton
           notVisible={workflowSortEnabled || status === "closed"}
@@ -369,6 +381,7 @@ const renderActionButtons = (
           title={editDisabled ? "" : strings.common.edit}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="edit-workflowitem"
         />
         <ActionButton
           notVisible={workflowSortEnabled}
@@ -378,6 +391,7 @@ const renderActionButtons = (
           title={permissionsDisabled ? "" : strings.common.show_permissions}
           workflowSortEnabled={workflowSortEnabled}
           status={status}
+          data-test="show-permissions-icon"
         />
         <ActionButton
           notVisible={workflowSortEnabled || status === "closed"}
@@ -447,7 +461,7 @@ export const WorkflowItem = SortableElement(
               </Typography>
             </div>
             <div style={{ ...itemStyle, ...styles.listText, ...styles.workflowCell }}>
-              <Typography variant="body2" style={styles.typographs} component="div">
+              <Typography variant="body2" style={styles.typographs} component="div" data-test="workflowitem-amount">
                 {amountType === "N/A"
                   ? amountTypes(amountType)
                   : getAmountField(amount, amountType, exchangeRate, sourceCurrency, targetCurrency)}

diff --git a/frontend/src/pages/Workflows/actions.js b/frontend/src/pages/Workflows/actions.js
@@ -1,6 +1,3 @@
-export const FETCH_WORKFLOW_ITEMS = "FETCH_WORKFLOW_ITEMS";
-export const FETCH_WORKFLOW_ITEMS_SUCCESS = "FETCH_WORKFLOW_ITEMS_SUCCESS";
-
 export const SHOW_WORKFLOW_CREATE = "SHOW_WORKFLOW_CREATE";
 export const HIDE_WORKFLOW_DIALOG = "HIDE_WORKFLOW_DIALOG";
 
@@ -344,13 +341,6 @@ export function updateWorkflowOrderOnState(workflowItems) {
   };
 }
 
-export function fetchWorkflowItems(streamName) {
-  return {
-    type: FETCH_WORKFLOW_ITEMS,
-    streamName: streamName
-  };
-}
-
 export function storeWorkflowActions(actions) {
   return {
     type: STORE_WORKFLOWACTIONS,