Skip to content

oliviercperrier/clin-frontend

 
 

Repository files navigation

CLIN Frontend

Available Scripts

Development Set-up

Directly On Your Machine

Install Redux Devtools Chrome Extension Install Node.js LTS 10.14.1 using nvm and run

cp -p .env.development .env
npm install
npm start

It is assumed that the clin-proxy-services are running locally on your machine.

With Docker

Make sure you followed the instructions to have a Dockerized setup for the clin proxy api services: https://github.com/cr-ste-justine/clin-proxy-api#dockerized-version

Then, run:

cp env.docker.remote .env
docker-compose up -d

To stop, run:

docker-compose down

All references to other services point to the QA. A 100% local version will come in the future.

CI/CD

Pushing Images

See the documentation for our convention on gitflow and docker images: https://www.notion.so/ferlab/Developer-Handbook-ca9d689d8aca4412a78eafa2dfa0f8a8

Deployements

Updates to the QA environment are automatically done once a new image is pushed. No action is required.

Procedures to deploy to prod will be fleshed out once we have such an environment.

Integration Testing

Commands

yarn test / npm run test

Locally this command will run in --watch mode and on CI it won't

The workarounds

Ant D Form

  • The onFinish event handler on the Form component doesn't seems to run when you use form.submit() where form comes from useForm().
    • To fix this, I used the onSubmitCapture to run the same function as onFinish
      •   onSubmitCapture={() => {
            onFormSubmit(form.getFieldsValue());
          }}
          onFinish={(values) => {
            onFormSubmit(values);
          }}

Ant D Select

  • The Select component from Ant D isn't testable (you cannot open it and select an option)
    • The workaround is to mock it with the html select. Since the problem is global, the mock is done in setupTests.tsx. This way it's automatically applied for every tests. Some feature might not be supported currently but it can be modified/addapted to support them.

Ant D "Nested" Form.Item

  • When using "Nested" Form.Item (using name={['mrn', 'organization']}), AntD doesn't assign any name property on the input field. This makes it impossible to select the input with the label (best) or by role and filtering by name.

End-2-end testing

Commands

  • yarn cypress:open / npm run cypress:open
    • The app must be running (yarn start) in parallel for it to work
    • Best for tests development
  • yarn cypress:run:chrome / npm run cypress:run:chrome
    • This command will open a Chrome instance, run the tests and close the Chrome instance
    • The closest to what runs on CI
  • yarn cypress:run:cli / npm run cypress:run:cli
    • This command will run tests in a chromium instance
    • The fastest

Documentations

Main
Selectors

About

Frontend code for the CLIN project

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 53.4%
  • TypeScript 36.6%
  • SCSS 9.1%
  • Less 0.8%
  • HTML 0.1%
  • Shell 0.0%