Merge pull request #84 from sineverba/release-0.10.0

Release 0.10.0

.semaphore/build-deploy.yml

@@ -25,8 +25,8 @@ global_job_config:
     commands:
       - checkout
       - cp .env.bak .env
-      - npm install -g [email protected].0
-      - npm ci
+      - npm install -g [email protected].1
+      - NODE_ENV=production npm ci
 
 blocks:
   - name: "Build and deploy"

.semaphore/semaphore.yml

@@ -11,7 +11,7 @@ global_job_config:
   prologue:
     commands:
       - checkout
-      - npm install -g [email protected].0
+      - npm install -g [email protected].1
 
 blocks:
 

CHANGELOG.md

@@ -1,4 +1,10 @@
-# 0.9.0
+# 0.10.0
++ Upgrade dependencies
++ Add generic detail
++ Add ModalWindow component
++ Add transaction detail
+
+## 0.9.0
 + Upgrade dependencies
 + Move login to GenericForm
 + Add payment form

Makefile

@@ -2,7 +2,7 @@ include .env
 
 IMAGE_NAME=registry.gitlab.com/cicdprojects/online-banking-frontend
 CONTAINER_NAME=online-banking-frontend
-APP_VERSION=0.9.0-dev
+APP_VERSION=0.10.0-dev
 SONARSCANNER_VERSION=4.8.0
 BUILDX_VERSION=0.10.0
 BINFMT_VERSION=qemu-v7.0.0-28

package.json

@@ -1,6 +1,6 @@
 {
   "name": "online-banking-frontend",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -15,7 +15,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-bootstrap": "^0.26.2",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
@@ -48,15 +48,15 @@
     "eslint": "^8.32.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "jest-junit": "^15.0.0",
-    "msw": "^0.49.2",
+    "msw": "^0.49.3",
     "npm-check-updates": "^16.6.2"
   },
   "jest": {

sonar-project.properties

@@ -1,5 +1,5 @@
 sonar.projectKey=online-banking-frontend
-sonar.projectVersion=0.9.0
+sonar.projectVersion=0.10.0
 sonar.organization=sineverba
 sonar.sources=src
 sonar.exclusions=**/node_modules/**,src/scss/**,src/setupTests.js,src/__tests__/**,src/assets/**

src/__tests__/__mocks__/responses/payment.js

@@ -3,7 +3,7 @@
  */
 
 export const item = {
-  id: 64,
+  id: 1,
   amount: -75,
   purpose: "Energy bill",
   transactionDate: "2023-01-17T11:00:25.499812937",

src/__tests__/components/ModalWindow.test.js

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import ModalWindow from "../../components/ModalWindow";
+
+describe("Test ModalWindow", () => {
+  it("Can render ModalWindow", () => {
+    render(<ModalWindow show />);
+    const title = screen.getByText(/detail/i);
+    expect(title).toBeInTheDocument();
+  });
+});

src/__tests__/views/TransactionsPage/TransactionForm.test.js → src/__tests__/views/PaymentsPage/PaymentsPage.test.js

@@ -26,7 +26,7 @@ afterEach(() => {
 // Clean up after the tests are finished.
 afterAll(() => server.close());
 
-describe("Test Payment Form", () => {
+describe("Test Payment Page", () => {
   it("Can perform a transaction", async () => {
     renderWithProviders(<GenericPage entity={ENTITY_PAYMENT} />);
 

src/__tests__/views/TransactionsPage/TransactionsDetail.test.js

@@ -0,0 +1,34 @@
+import { screen, waitFor } from "@testing-library/react";
+import { renderWithProviders } from "../../__test-utils__/test-utils";
+import { rest } from "msw";
+// eslint-disable-next-line jest/no-mocks-import
+import { server } from "../../__mocks__/api/server";
+import { item } from "../../__mocks__/responses/payment";
+import {GenericDetail} from "../../../views/GenericPage/GenericDetail";
+
+beforeEach(() => {
+  server.use(
+    rest.get(`${process.env.REACT_APP_BACKEND_URL}/bank-account-transactions/1`, (req, res, ctx) => {
+      return res(ctx.json(item));
+    })
+  );
+});
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => {
+  server.resetHandlers();
+});
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());
+
+describe("Test Transactions Detail", () => {
+  it("Test can show single detail", async () => {
+    renderWithProviders(<GenericDetail id={1} />);
+    await waitFor(() => {
+      const purpose = screen.getByText(/energy bill/i);
+      expect(purpose).toBeInTheDocument();
+    });
+  });
+});

src/__tests__/views/TransactionsPage/TransactionsPage.test.js

@@ -13,6 +13,11 @@ beforeEach(() => {
       return res(ctx.json(items));
     })
   );
+  server.use(
+    rest.get(`${process.env.REACT_APP_BACKEND_URL}/bank-account-transactions/56`, (req, res, ctx) => {
+      return res(ctx.json(items.content[0]));
+    })
+  );
 });
 
 // Reset any request handlers that we may add during the tests,
@@ -93,4 +98,26 @@ describe("Test TransactionsPage", () => {
     });
   });
 
+  it("Test can open and close modal on modal header", async () => {
+    renderWithProviders(<GenericPage entity={ENTITY_TRANSACTIONS} />);
+    await waitFor(() => {
+      const purpose = screen.queryAllByText(/December 2022 - Salary/i);
+      fireEvent.click(purpose.at(0));
+      // Search the close button
+      const closeButton = screen.getAllByRole("button", { name: /close/i });
+      fireEvent.click(closeButton.at(0));
+    });
+  });
+
+  it("Test can open and close modal on modal footer", async () => {
+    renderWithProviders(<GenericPage entity={ENTITY_TRANSACTIONS} />);
+    await waitFor(() => {
+      const purpose = screen.queryAllByText(/December 2022 - Salary/i);
+      fireEvent.click(purpose.at(0));
+      // Search the close button
+      const closeButton = screen.getAllByRole("button", { name: /close/i });
+      fireEvent.click(closeButton.at(1));
+    });
+  });
+
 });

src/components/ModalWindow.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button, Modal, ModalBody } from "react-bootstrap";
+
+export function ModalWindow(props) {
+  const { show, handleHide, children } = props;
+  return (
+    <Modal show={show}>
+      <Modal.Header closeButton onHide={() => handleHide(false)}>
+        <Modal.Title>Detail</Modal.Title>
+      </Modal.Header>
+      <ModalBody>{children}</ModalBody>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={() => handleHide(false)}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default ModalWindow;