Skip to content

Latest commit

 

History

History
225 lines (155 loc) · 6.1 KB

README.md

File metadata and controls

225 lines (155 loc) · 6.1 KB
Raw

Frontend application

The project uses a Node.js (v20) or newer runtime environment and React.js library for the frontend.

Module and Library dependencies

The application requires a whole suite of npm modules for building/testing/running the application. All the required modules can be found under package.json file.

Building

  • webpack : Project building and asset compilation.
  • esbuild : Web asset bundler
  • sass : Clean CSS files

Testing

  • jest : Mocking and writing tests
  • enzyme : Assert, manipulate and traverse react components

Contributors to this codebase are expected to follow the testing standards set out and determined by the team.

Which includes:

  • Maintaining 80% coverage throughout the frontend

Create new test suites for:

  • New Components
  • New ActionCreators
  • New reducers switch statements
  • New selectors
  • Every new function stored under /utils/**

If coverage is lower than before writing a new feature, the tests need to be updated, and the feature is considered incomplete

Running Tests:

  1. To run the test suite without updating snapshots run:
yarn test
  1. To run the test suite while updating ALL snapshots run within the core-web directory:
yarn test:updateAll
  1. To run the test suite while updating snapshots case by case Interactively run within the core-web directory:
yarn test:watch

Then choose option 'i' and go through the failing snapshots case by case

Setup Cypress test

Add the following cypress related environment variables from env-example.

CYPRESS_TEST_USER CYPRESS_TEST_PASSWORD CYPRESS_CORE_WEB_TEST_URL CYPRESS_BACKEND CYPRESS_API_URL CYPRESS_KEYCLOAK_URL CYPRESS_ENVIRONMENT CYPRESS_DOC_MAN_URL CYPRESS_MATOMO_URL CYPRESS_FLAGSMITH_URL CYPRESS_FLAGSMITH_KEY CYPRESS_KEYCLOAK_CLIENT_ID CYPRESS_KEYCLOAK_RESOURCE CYPRESS_KEYCLOAK_IDP_HINT CYPRESS_FILE_SYSTEM_PROVIDER_URL

run the command docker-compose up -d keycloak

Navigate to http://localhost:8080 to check if keycloak was successfully installed.

Run Cypress test To run your cypress tests with a browser, type the command yarn run cypress open from within the core-web directory, or yarn workspace @mds/core-web run cypress run open. To run your cypress tests in headless mode, type the command yarn cypress run.

Running

  • react : JS library to build single page apps
  • redux : State management
  • prop-types : Runtime object type check
  • axios : Library to manage network calls

Directory/Naming convention

The SASS/CSS files naming convention is based off of BEM and ITCSS.

The application is structured as follows:

|-- public
    |-- Assets that are accessible by everyone on the internet.

|-- src (Source code of the application)
    |-- actionsCreators (Axios calls for retrieving data from an external source)
    |-- actions (JSON objects that are dispatched to the redux store)
    |-- assets (Static images, icons, fonts etc)
    |-- components (React components for the application)
    |-- constants (Global constants i.e. URLs, Keys etc.)
    |-- HOC (Higher order React components to be re-used)
    |-- reducers (Redux functions for handling data sets)
    |-- routes (React page routes)
    |-- selectors (Functions to retrieve data from the redux store)
    |-- store (Redux store with required middleware configurations)
    |-- styles (SCSS files for styling)
    |-- tests (Unit/Integration tests)
    |-- utils (Commonly used helper functions)

Pre-requisites and Installation

The application assumes you already have a working python backend running.

Follow the .env-example template to create an .env file with valid values before running the application.

A. OS Level Installation

  1. Install package dependencies
yarn install
  1. Run the application
yarn serve

Code Contribution Standards

Contributors to this codebase are expected to follow the formatting and style standards, as enforced by the Prettier and ESLint rules. The provided git hooks will automatically lint and format on-commit.

The linting rules are built on the Airbnb configuration. Contributors should ensure that they are not introducing linting errors into the codebase with their changes. Modern text editors, such as VS Code, will indicate errors. See the usage guide below for more information on the linting CLI options.

Lint all files

npm run lint

Lint one file

npm run lint:file ./filepath

Apply linting rules to all files

npm run lint -- --fix

Apply linting rules to one file

npm run lint:file ./filepath -- --fix

Developers are encouraged to install the Prettier plugin appropriate for their editor. This ensures that all committed code is properly formatted. VS Code is commonly used by MDS contributors, so it will be used as an example for setting up formatting on-save:

  1. Install the VS Code Prettier plugin
  2. Set "editor.formatOnSave": true in your editor config
  3. Ensure that no conflicting code formatting tools are enabled (ex. Beautify)

Any developer who is unable or unwilling to apply the formatting on-save is asked to either use the provided npm scripts to format their code before each commit or to ensure that the git hooks are running.

See the usage guide below for more information on manual formatting.

Check one file

npm run format:check ./filepath

Check all files matching a pattern

npm run format:check ./*.json

Format one file

npm run format:write ./filepath

Format all files matching a pattern

npm run format:write ./*.json

Check all files

npm run format:check-all

Format all files

npm run format:write-all