| [a762898] | 1 | # Contributing to Recharts
|
|---|
| 2 |
|
|---|
| 3 | We'd love for you to contribute to our source code and to make Recharts even better than it is today!
|
|---|
| 4 |
|
|---|
| 5 | If you want to know how to develop then check out the [Development Guide](/DEVELOPING.md).
|
|---|
| 6 |
|
|---|
| 7 | Here are the guidelines we'd like you to follow:
|
|---|
| 8 |
|
|---|
| 9 | ## Ongoing Initiatives
|
|---|
| 10 |
|
|---|
| 11 | We use Github Discussion to organize our discussion along new initiatives and organize ourselves. Please do check the [announcements](https://github.com/recharts/recharts/discussions/categories/announcements) section for an overview of recent initiatives.
|
|---|
| 12 |
|
|---|
| 13 | Also feel free to join us on Slack: https://recharts.slack.com/archives/C042Q5K5UDC
|
|---|
| 14 |
|
|---|
| 15 | ## <a name="issues"></a>Issues and Bugs
|
|---|
| 16 |
|
|---|
| 17 | ### Where to Find Known Issues
|
|---|
| 18 |
|
|---|
| 19 | We will be using [GitHub Issues](https://github.com/recharts/recharts/issues) for our bugs and feature requests. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
|
|---|
| 20 |
|
|---|
| 21 | ### Reporting New Issues
|
|---|
| 22 |
|
|---|
| 23 | The best way to get your bug fixed is to provide a reduced test case. codesandbox provide a way to give live examples. You can fork our example in [recharts.github.io](https://recharts.github.io/) to show your case.
|
|---|
| 24 |
|
|---|
| 25 | ## <a name="testing"></a>Testing
|
|---|
| 26 |
|
|---|
| 27 | We do cherish tests. They help us move swiftly, and release with confidence.
|
|---|
| 28 | In our repo, you will find three types of tests: Unit tests, rendering tests with RTL, and user interaction tests in storybook.
|
|---|
| 29 | Wherever possible we prefer the simplest tests - unit tests. Only where needed / useful we would use RTL or storybook tests.
|
|---|
| 30 |
|
|---|
| 31 | ### Unit tests
|
|---|
| 32 |
|
|---|
| 33 | When writing new code, aim for 100% unit test code coverage.
|
|---|
| 34 |
|
|---|
| 35 | When implementing a new feature we would prefer to extract pure helper function for data processing.
|
|---|
| 36 | Such functions are found in a few utils files. An example is `test/util/ShallowEqual.spec.ts`.
|
|---|
| 37 |
|
|---|
| 38 | Unit testing in recharts has some specialties, please see [Recharts unit tests README](test/README.md) for more information.
|
|---|
| 39 |
|
|---|
| 40 | ### React Testing Library
|
|---|
| 41 |
|
|---|
| 42 | Some behaviour must be tested upon rendering, such as interactions between components (Line, Tooltip), see `test/component/Tooltip.visibility.spec.tsx` for an example.
|
|---|
| 43 |
|
|---|
| 44 | ### Storybook Test Runner
|
|---|
| 45 |
|
|---|
| 46 | Storybook also has a great interface for adding tests. By default every story in storybook is a smoke test (rendering without error logs means the test passed). Additionally, it is possible to add actual tests as play functions with an assert to a story. This will often be easier than using React Testing Library, because the natural test debugging tool is Storybook itself. See for example `storybook/stories/Examples/cartesian/ReferenceLine/ReferenceLineIfOverflow.stories.tsx`
|
|---|
| 47 |
|
|---|
| 48 | ### Mutation tests
|
|---|
| 49 |
|
|---|
| 50 | We have [stryker](https://stryker-mutator.io/docs/) installed and ready to use for mutation testing.
|
|---|
| 51 |
|
|---|
| 52 | If you want to run mutation test be aware that these may take hours! A single file will take 15 minutes or more.
|
|---|
| 53 |
|
|---|
| 54 | To run, update the list of checked files in `./stryker.config.mjs` and then run with `npm run test-mutation`.
|
|---|
| 55 |
|
|---|
| 56 | You will find test output in your console, and also HTML report in the `./reports` folder.
|
|---|
| 57 |
|
|---|
| 58 | ## <a name="pr"></a>Pull Requests
|
|---|
| 59 |
|
|---|
| 60 | **Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
|
|---|
| 61 |
|
|---|
| 62 | _Before_ submitting a pull request, please make sure the following is done…
|
|---|
| 63 |
|
|---|
| 64 | - Search [GitHub](https://github.com/recharts/recharts/pulls) for an open or closed Pull Request that relates to your submission. You don't want to duplicate effort.
|
|---|
| 65 |
|
|---|
| 66 | - Fork the repo and create your branch from `main`.
|
|---|
| 67 | - If you have added functionality or changed existing functionality, be sure to add a test. Ideally a unit test for helper function, or a test that includes rendering with RTL.
|
|---|
| 68 | - If you've changed APIs, make sure that the stories in Storybook are working as expected.
|
|---|
| 69 | - Ensure the test suite passes (`npm run test`).
|
|---|
| 70 | - Make sure your code lints (`npm run lint`) - we've done our best to make sure these rules match our internal linting guidelines.
|
|---|
| 71 |
|
|---|
| 72 | ## <a name="code"></a>Code Guide
|
|---|
| 73 |
|
|---|
| 74 | Our linter will catch most styling issues that may exist in your code.
|
|---|
| 75 | You can check the status of your code styling by running: `npm run lint`
|
|---|
| 76 |
|
|---|
| 77 | However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
|
|---|
| 78 |
|
|---|
| 79 | ## Types
|
|---|
| 80 |
|
|---|
| 81 | We use TypeScript for type safety. Some rules to follow:
|
|---|
| 82 |
|
|---|
| 83 | - Never use `any` type. Implicit or explicit.
|
|---|
| 84 | - Prefer `unknown` over `any`. Refine the type.
|
|---|
| 85 | - Type your function parameters and return values explicitly, do not rely on implicit any or inference. Exceptions are React components and trivial functions where the types are obvious.
|
|---|
| 86 | - Do not use `as` type assertions, ever. The only exception is `as const`.
|
|---|
| 87 |
|
|---|
| 88 | ## <a name="license"></a>License
|
|---|
| 89 |
|
|---|
| 90 | By contributing to Recharts, you agree that your contributions will be licensed under its MIT license.
|
|---|