Frontend Development Tooling

[tillprochaska]

Hey everyone, as we’re trying to make it easier for new contributors to get on board and to keep things consistent, we’d like to improve the development tooling and experience for the Aleph frontend.

I invite you to share your thoughts, suggestions, and personal preferences regarding linting, formatting, and frontend testing with us!

Tests

We currently do not have frontend tests for Aleph itself, although we have a few for react-ftm, which is used inside of Aleph. We want to make sure that new features have test coverage, and we’d like to add tests for existing features and components incrementally when working on/changing them to provide confidence not that we aren’t introducing regressions, and to provide documentation of component behavior.

For the tests in react-ftm, we’re currently using Jest and Enzyme, a library to render and test React components. The official React documentation now recommends using Jest and React Testing Library. Testing Library is a framework-agnostic solution that provides wrappers for multiple SPA frameworks, including React, Vue.js, and Angular.

There are a couple of differences between Enzyme and React Testing Library, the most notable a different approach to testing. In contrast to Enzyme, Testing Library promotes a behavior-driven approach, closely imitating how a real user would interact with components.

We’re considering introducing React Testing Library for the main aleph repository and react-ftm. We think it might lead to tests that are a little more resilient. Also, other contributors might already have experience with React Testing Library, be it because it’s the recommended default testing setup with React or because they’ve worked with the underlying library in other frameworks.

Linting

We have basic linting set up via eslint, although currently, it’s not run for pull requests as part of our GitHub Actions workflows. Personally, I’d prefer this to be enforced by our workflows, as I tend to forget to check for linting errors. 🙃

Regarding the linting rules to use, we’d like to keep it less restrictive for now and only add new rules once we notice specific issues. @sunu suggested adding automated testing for accessibility issues, and we might want to start using eslint-plugin-a11y-jsx to catch at least a basic set of potential accessibility issues.

Formatting

Currently, there aren’t too many people working on the frontend codebase. Still, it would be nice to have automatic code formatting (using Prettier), so we do not have to worry about it!

Implementation

We would start implementing these changes in react-ftm first, then bringing them to the main aleph repository once everything works out as expected.

[Rosencrantz]

@tillprochaska We've already talk about this a bit, but my view here is that if this isn't going to take months of work to implement, will help you be more effective as a developer, and will be appealing to anyone thinking of contributing to the project then we should get it done.