ui-ib-application v1.10.0

PASHA Bank Internet Banking Application

Target tools, technologies and frameworks

• Webpack - build generator
• SCSS - for UI styles
• TypeScript - main language
• React - ui components developing library
• Redux - application state manager
• Axios - REST provider
• Jest/Enzyme - testing tools
• NodeJS/Express - local web-server

Installation

• Set up an SSH key
• clone project git clone git@github.com:PB-Digital/ui-ib-application.git
• add environment variable NPM_TOKEN=<ask_token_value_from_other_developers>.
  • Instructions for MAC: https://natelandau.com/my-mac-osx-bash_profile/.
  • Instructions for WIN: go to Control Panel -> Edit environment variable for your account and create a brand-new variable.
• install dependencies npm i

Development

Webpack

We use webpack and webpack dev server.

Available commands:

• npm start - start development server via webpack-dev-server.

Production

npm commands to run application in production mode:

• npm run build - generate "production-ready" bundle.

Testing

Unit tests

Available commands:

• npm run test - run all tests once & generate test coverage report;
• npm run test:watch - TDD mode - run tests in the watch mode.

Files with tests must have *.spec.ts extension and should be placed in folders named __tests__.

E2E tests

We use Cypress for E2E tests. E2E tests are run in CI environment and only when release PR (from develop to master) is created. The prod back-end API (https://pashabank.digital/v*) is used for E2E tests which means that we're always testing the prod.

We write E2E tests only for the crucial features of the application. Reports and video recordings are collected to Cypress Dashboard.

There is a dedicated /cypress folder in the root of the project for the E2E tests. All test suites for this application must be placed in /cypress/e2e/ui-ib-application folder.

Run & watch E2E tests locally with dev server (in headed mode) - recommended when you're writing tests

• Start up dev server and UI app - npm run start
• Open Cypress UI - npm run cypress:open (you can select the test suites to run)

Run E2E tests locally with dev server (in headless mode) - recommended when you're validating tests before commit

You will see the tests report in the terminal

• Start up dev server and UI app - npm run start
• Run tests - npm run cypress:run:local

Run E2E tests locally with prod backend API - this is what kinda happens on CI

• Start up only the UI app - npm run start:with-prod-api
• Generate auth tokens - npm run cypress:generate-auth-token (as a result auth-tokens.json will be generated in the root folder)
• Run tests - npm run cypress:run:local:with-prod-api

Bash profile issue

Apple has changed the default shell to zsh. Therefore you have to rename your configuration files. .bashrc is now .zshrc and .bash_profile is now .zprofile. If you get this issue, please follow the link

Content Security Policy (CSP)

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware. read more

In order to add/modify a new CSP header - head over to /csp-headers.yml

Guide for contributing with pull requests

1. You must have a task in JIRA
2. Then you can create a new branch from develop, it should match the following pattern:

<type-of-task>/<board-name>-<task-number>\[-v<version>\]

(version chunk is optional)

For example:

feature/LD-123
bugfix/LD-123-v3

Also there are 2 very special templates for temporary branches, which can be used in testing and experiments:

temp/<brief-description>
test/<brief-description>

For example:

test/web-socket
temp/mobx-probe

Note: Don't use it if you have a corresponding task in jira. 3. After you've completed the development and pushed your branch, you can create a pull request 4. Pull Requests should match the following pattern: <board-name>-<task-number>: <title-of-task>, and description(use a template from .github/PULL_REQUEST_TEMPLATE/ directory), read more about creating pull request descriptions with different templates with url 5. Assign your pull request to yourself 6. Add a label that describes your board (mandatory) and some other labels for describing your pull request (optional) 7. Now you are ready to share your pull request with your teammates for review

Contributors

PASHA Bank Digital Laboratory members.