Fix bug updating position after add funds (#58)

* Update portal backend version for integration test

* Update position after position update

* 2.2.1

* Merged from master

* Change errors to asserts. Made conditional a bit more obvious.

* Set INSECURE_COOKIE=true in portal backend for integration tests

* Give display names to components to ease testing

* Print more useful assertion messages when looking for various elements

* Test

* 2.3.2

* Bump chart versions

helm/finance-portal-v2-ui/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v1
-appVersion: "v2.3.1"
+appVersion: "v2.3.2"
 description: Mojaloop Finance Portal UI v2
 name: finance-portal-v2-ui
-version: 2.3.1
+version: 2.3.2

helm/finance-portal-v2-ui/values.yaml

@@ -6,7 +6,7 @@ replicaCount: 1
 
 image:
   repository: ghcr.io/mojaloop/finance-portal-v2-ui
-  tag: v2.3.1
+  tag: v2.3.2
   pullPolicy: IfNotPresent
 
 imagePullCredentials:

integration_test/tests/src/page-objects/pages/FinancialPositionsPage.ts

@@ -0,0 +1,71 @@
+import { ReactSelector } from 'testcafe-react-selectors';
+import { t } from 'testcafe';
+
+export enum PositionUpdateAction {
+  AddWithdrawFunds = 'Add / Withdraw Funds',
+  ChangeNDC        = 'Change Net Debit Cap',
+}
+
+export type FinancialPositionsRow = {
+  dfsp: Selector,
+  balance: Selector,
+  position: Selector,
+  ndc: Selector,
+  ndcUsed: Selector,
+  updateButton: Selector,
+}
+
+const finPosUpdateConfirmRoot = ReactSelector('FinancialPositionUpdateConfirm Modal');
+export const FinancialPositionUpdateConfirmModal = {
+  root: finPosUpdateConfirmRoot,
+  cancelButton: finPosUpdateConfirmRoot.findReact('Button').withText('Cancel'),
+  confirmOnlyButton: finPosUpdateConfirmRoot.findReact('Button').withText('Confirm Only'),
+  confirmUpdateNdcButton: finPosUpdateConfirmRoot.findReact('Button').withText('Confirm and Update NDC'),
+};
+
+const finPosUpdateRoot = ReactSelector('FinancialPositionUpdate Modal');
+export const FinancialPositionUpdateModal = {
+  root: finPosUpdateRoot,
+
+  actionSelect: finPosUpdateRoot.findReact('Select'),
+
+  addFundsRadioButton: finPosUpdateRoot.findReact('Radio').withText('Add Funds'),
+  withdrawFundsRadioButton: finPosUpdateRoot.findReact('Radio').withText('Withdraw Funds'),
+
+  amountInput: finPosUpdateRoot.findReact('Row input'),
+
+  cancelButton: finPosUpdateRoot.findReact('Button').withText('Cancel'),
+  submitButton: finPosUpdateRoot.findReact('Button').withText('Submit'),
+
+  async selectAction(action: PositionUpdateAction) {
+    await t.click(this.actionSelect);
+    await t.click(this.actionSelect.findReact('Option').withText(action));
+  }
+};
+
+export const FinancialPositionsPage = {
+  async getDfspRowMap(): Promise<Map<string, FinancialPositionsRow>> {
+    const rows = await this.getResultRows();
+    return new Map(await Promise.all(
+      rows.map((r) => r.dfsp.innerText.then((t): [string, FinancialPositionsRow] => [t, r]))
+    ));
+  },
+
+  async getResultRows(): Promise<FinancialPositionsRow[]> {
+    const rows = ReactSelector('FinancialPositions DataList Rows').findReact('RowItem');
+    // This `expect` forces TestCafe to take a snapshot of the DOM. If we don't make this call,
+    // rows.count always returns zero, and this function fails.
+    await t.expect(rows.exists).ok('Expected to find financial positions result rows');
+    const length = await rows.count;
+    return Array
+      .from({ length })
+      .map((_, i) => ({
+        dfsp: rows.nth(i).findReact('ItemCell').nth(0),
+        balance: rows.nth(i).findReact('ItemCell').nth(1),
+        position: rows.nth(i).findReact('ItemCell').nth(1),
+        ndc: rows.nth(i).findReact('ItemCell').nth(1),
+        ndcUsed: rows.nth(i).findReact('ItemCell').nth(1),
+        updateButton: rows.nth(i).findReact('Button'),
+      }));
+  },
+};

integration_test/tests/src/page-objects/pages/SettlementWindowsPage.ts

@@ -74,7 +74,7 @@ export const SettlementWindowsPage = {
     const rows = ReactSelector('DataList Rows').findReact('RowItem');
     // This `expect` forces TestCafe to take a snapshot of the DOM. If we don't make this call,
     // rows.count always returns zero, and this function fails.
-    await t.expect(rows.exists).ok();
+    await t.expect(rows.exists).ok('Expected to find settlement window row results');
     const length = await rows.count;
     return Array
       .from({ length })

integration_test/tests/src/page-objects/pages/SettlementsPage.ts

@@ -68,12 +68,14 @@ export const SettlementFinalizeModal = {
 const SettlementDetailModalRoot = ReactSelector('Modal').withProps({ title: 'Settlement Details' });
 export const SettlementDetailModal = {
   async getWindowsRows(): Promise<WindowRow[]> {
-    await t.expect(ReactSelector('Modal').exists).ok();
-    await t.expect(SettlementDetailModalRoot.exists).ok();
+    // TODO: this selector should be better; may need to have .displayName set on the component
+    await t.expect(ReactSelector('Modal').exists).ok('Expected to find settlement detail modal');
+    // TODO: this selector should be better; may need to have .displayName set on the component
+    await t.expect(SettlementDetailModalRoot.exists).ok('Expected to find settlement detail modal root');
     const rows = SettlementDetailModalRoot.findReact('DataList Rows').findReact('RowItem');
     // This `expect` forces TestCafe to take a snapshot of the DOM. If we don't make this call,
     // rows.count always returns zero, and this function fails.
-    await t.expect(rows.exists).ok();
+    await t.expect(rows.exists).ok('Expected to find settlement detail row results');
     const length = await rows.count;
     return Array
       .from({ length })
@@ -100,10 +102,11 @@ export const SettlementsPage = {
   clearFiltersButton: ReactSelector('Button').withProps({ label: 'Clear Filters' }),
 
   async getResultRows(): Promise<SettlementRow[]> {
+    // TODO: this selector should be better; may need to have .displayName set on the component
     const rows = ReactSelector('DataList Rows').findReact('RowItem');
     // This `expect` forces TestCafe to take a snapshot of the DOM. If we don't make this call,
     // rows.count always returns zero, and this function fails.
-    await t.expect(rows.exists).ok();
+    await t.expect(rows.exists).ok('Expected to find settlement row results');
     const length = await rows.count;
     return Array
       .from({ length })

integration_test/tests/src/tests/DFSPFinancialPositions.test.ts

@@ -1,19 +1,88 @@
+import { strict as assert } from 'assert';
+import { waitForReact } from 'testcafe-react-selectors';
 import { Selector } from 'testcafe';
 import { config } from '../config';
+import { SideMenu } from '../page-objects/components/SideMenu';
+import { LoginPage } from '../page-objects/pages/LoginPage';
+import {
+  FinancialPositionsPage,
+  FinancialPositionsRow,
+  FinancialPositionUpdateConfirmModal,
+  PositionUpdateAction,
+  FinancialPositionUpdateModal
+} from '../page-objects/pages/FinancialPositionsPage';
+import { VoodooClient, protocol } from 'mojaloop-voodoo-client';
 
-fixture.skip`DFSPFinancialPositionsFeature`.page`${config.financePortalEndpoint}`.beforeEach(async (t) => {
-  `Login and browse to "DFSP Financial Positions" page, and press "Update" button.`;
-  await t
-    .typeText('#login__input-username', config.credentials.admin.username)
-    .typeText('#login__input-password', config.credentials.admin.password)
-    .click('#login__btn-submit')
-    .click(Selector('#root div').withText('DFSP Financial Positions').nth(6))
-    // TODO: dependence on "testfsp2"
-    .click('#btn__update_testfsp2')
-    .click(Selector('#select__action div').withText('Select Action...'));
-});
+fixture`DFSPFinancialPositions`
+  .page`${config.financePortalEndpoint}`
+  .before(async (ctx) => {
+    const cli = new VoodooClient('ws://localhost:3030/voodoo', { defaultTimeout: 15000 });
+    await cli.connected();
+
+    const hubAccounts: protocol.HubAccount[] = [
+      {
+        type: "HUB_MULTILATERAL_SETTLEMENT",
+        currency: "MMK",
+      },
+      {
+        type: "HUB_RECONCILIATION",
+        currency: "MMK",
+      },
+    ];
+    await cli.createHubAccounts(hubAccounts);
+    ctx.cli = cli;
+  })
+  .beforeEach(async (t) => {
+    const accounts: protocol.AccountInitialization[] = [
+      { currency: 'MMK', initial_position: '0', ndc: 10000 },
+    ];
+    const participants = await t.fixtureCtx.cli.createParticipants(accounts);
+
+    t.fixtureCtx.participants = participants;
+
+    await waitForReact();
+
+    await t
+      .typeText(LoginPage.userName, config.credentials.admin.username)
+      .typeText(LoginPage.password, config.credentials.admin.password)
+      .click(LoginPage.submitButton)
+      .click(SideMenu.dfspFinancialPositionsButton);
+  });
 
 test.meta({
+  description: 'Add funds and update NDC should update the displayed DFSP financial position',
+})(
+  'Financial position updates after add funds',
+  async (t) => {
+    const testAmount = '5,555';
+
+    // Find our dfsp in the list and click the update button
+    const testRow = await FinancialPositionsPage.getDfspRowMap().then((m) =>
+      m.get(t.fixtureCtx.participants[0].name)
+    );
+    assert(testRow, 'Expected to find the participant we created in the list of financial positions');
+    await t.click(testRow.updateButton);
+
+    // Select to add funds and submit
+    await FinancialPositionUpdateModal.selectAction(PositionUpdateAction.AddWithdrawFunds);
+    await t.click(FinancialPositionUpdateModal.addFundsRadioButton);
+    await t.typeText(FinancialPositionUpdateModal.amountInput, testAmount);
+    await t.click(FinancialPositionUpdateModal.submitButton);
+
+    // Confirm and update NDC; close update modal
+    await t.click(FinancialPositionUpdateConfirmModal.confirmUpdateNdcButton);
+    await t.click(FinancialPositionUpdateModal.cancelButton);
+
+    // confirm the position is changed as we expect
+    const changedRow = await FinancialPositionsPage.getDfspRowMap().then((m) =>
+      m.get(t.fixtureCtx.participants[0].name)
+    );
+    assert(changedRow, 'Expected to find the participant we created in the list of financial positions');
+    await t.expect(changedRow.balance.innerText).eql(`-${testAmount}`);
+  }
+)
+
+test.skip.meta({
   ID: 'MMD-T26',
   STORY: 'MMD-376',
   description: 'Allow funds to add on payerfsp so that the transfers will not be blocked due to insufficient liquidity',
@@ -31,7 +100,7 @@ test.meta({
   },
 );
 
-test.meta({
+test.skip.meta({
   ID: 'MMD-T28',
   STORY: 'MMD-376',
 })(
@@ -47,7 +116,7 @@ test.meta({
   },
 );
 
-test.meta({
+test.skip.meta({
   ID: 'MMD-T29',
   STORY: 'MMD-376',
 })(
@@ -63,7 +132,7 @@ test.meta({
   },
 );
 
-test.meta({
+test.skip.meta({
   ID: 'MMD-T27',
   STORY: 'MMD-414',
 })(
@@ -79,7 +148,7 @@ test.meta({
   },
 );
 
-test.meta({
+test.skip.meta({
   ID: 'MMD-T30',
   STORY: 'MMD-414',
 })(
@@ -97,7 +166,7 @@ test.meta({
   },
 );
 
-test.meta({
+test.skip.meta({
   ID: 'MMD-T31',
   STORY: 'MMD-414',
 })(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "finance-portal-v2-ui",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "",
   "main": "index.js",
   "scripts": {

src/App/FinancialPositions/FinancialPositionUpdate/index.tsx

@@ -78,18 +78,19 @@ const FinancialPositionUpdate: FC<ConnectorProps> = ({
           <DataLabel>Action</DataLabel>
         </Row>
         <Row style={{ marginBottom: '30px' }}>
-          {isUpdateNDCModal && (
+          {isUpdateNDCModal ? (
             <Select
               id="select__action"
               label="Action"
               placeholder="Change Net Debit Cap"
               value={FinancialPositionsUpdateAction.ChangeNetDebitCap}
-              options={{ 'Change Net Debit Cap': FinancialPositionsUpdateAction.ChangeNetDebitCap }}
+              options={{
+                [FinancialPositionsUpdateAction.ChangeNetDebitCap]: FinancialPositionsUpdateAction.ChangeNetDebitCap,
+              }}
               onChange={setUpdateAction}
               disabled={true}
             />
-          )}
-          {!isUpdateNDCModal && (
+          ) : (
             <Select
               id="select__action"
               label="Action"
@@ -144,5 +145,6 @@ const FinancialPositionUpdate: FC<ConnectorProps> = ({
     </div>
   );
 };
+FinancialPositionUpdate.displayName = 'FinancialPositionUpdate';
 
 export default connector(FinancialPositionUpdate);

src/App/FinancialPositions/FinancialPositionUpdateConfirm/index.tsx

@@ -118,5 +118,6 @@ const FinancialPositionUpdateConfirm: FC<ConnectorProps> = ({
     </Modal>
   );
 };
+FinancialPositionUpdateConfirm.displayName = 'FinancialPositionUpdateConfirm';
 
 export default connector(FinancialPositionUpdateConfirm);