From 1d3d80f6beccb867ef5fb87f6c4ec5d4fa9fa636 Mon Sep 17 00:00:00 2001 From: Shachar <34343793+ShaMan123@users.noreply.github.com> Date: Sun, 23 Jul 2023 12:00:15 +0530 Subject: [PATCH] docs(): revise test section (#9114) --- .github/ISSUE_TEMPLATE/config.yml | 9 +++++++ CHANGELOG.md | 1 + CONTRIBUTING.md | 41 +++++++++++++++++++------------ 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 2dc5ffecc74..040fa68c924 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -14,6 +14,15 @@ contact_links: - name: GOTCHAS url: http://fabricjs.com/fabric-gotchas about: Refer to the list of known pitfalls before assuming a bug. + - name: Vanilla Demo + url: https://codesandbox.io/p/sandbox/fabric-vanillajs-sandbox-forked-e5r48u?file=%2FREADME.md + about: Vanilla demo. + - name: Next.js Demo + url: https://codesandbox.io/p/sandbox/fabric-nextjs-sandbox-forked-h6qdh3?file=%2FREADME.md + about: Next.js demo. + - name: Node Demo + url: https://codesandbox.io/p/sandbox/fabric-node-sandbox-forked-xewlhg?file=%2FREADME.md + about: Node demo. - name: Security url: ./Security.md about: Please report security vulnerabilities here. diff --git a/CHANGELOG.md b/CHANGELOG.md index 98b8457c8ed..22169a1b92f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## [next] +- docs(): revise test section [#9114](https://github.com/fabricjs/fabric.js/pull/9114) - fix(): #8344 stroke projection [#8374](https://github.com/fabricjs/fabric.js/pull/8374) - fix(Filters) Removing type from the options passed in the constructor [#9089](https://github.com/fabricjs/fabric.js/pull/9089) - feat(InteractiveObject): add `getActiveControl()` to expose `__corner` [#9102](https://github.com/fabricjs/fabric.js/pull/9102) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0eed870169d..c2cafb17536 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -64,6 +64,8 @@ Answering questions and addressing issues, as well as fixing and adding types (s ### 🎮 Adding a DEMO (currently not possible) +**New website is under construction. Contributions are welcome.** + Take a look at an existing [demo file][demo_file].\ Create a new file in the same directory (`posts/demos/_posts`) and follow [**developing the website**](#fabricjscom-deprecated). @@ -104,11 +106,12 @@ Fabric is an open source project 🦄 and as such depends on the **genuine effor Do not reorder imports. Irrelevant changes in a PR that are not created by prettier aren't needed nor welcome. - **Tests** \ PRs must be backed with relevant tests, follow [TESTING](#-testing). If you never wrote a test or you find our tests unclear to extend, just ask for help. + Aim to cover 100% of the changes. - **Docs** \ Add relevant comments to your code if necessary using [JSDoc 3][jsdoc] and update relevant guides.\ The generated documentation can be found at [fabricjs.com][docs], see [DOCS](#-improving-docs). - **Changelog**\ - Add a concise listing to the [**CHANGELOG**](CHANGELOG.md) describing what has changed. + Add a concise listing to the [**CHANGELOG**](CHANGELOG.md) describing what has changed or let github actions add the PR title for you. - **1️⃣ PR per feature/bug** \ Create a new branch for every pull request.\ If you want to do more than one thing, create multiple pull requests 💪. @@ -125,19 +128,33 @@ It is more than likely you will be requested to change stuff and refine your wor [![🧪](../../actions/workflows/tests.yml/badge.svg)](../../actions/workflows/tests.yml) [![CodeQL](../../actions/workflows/codeql-analysis.yml/badge.svg)](../../actions/workflows/codeql-analysis.yml) -Test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for serving the browser tests +| Suite | unit (node) | e2e (browser) | +| ------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Framework | [`jest`][jest] | [`playwright`][playwright] | +| Setup | | 
npm run build -- -f -w
| +| Running Tests




\ -- [filter] [watch]
| 
npm run test:jest -- [filters] [-w]



It is advised to use filters to save time.
| 
npm run test:e2e -- [filters] [--ui]

In some machines babel is flaky and doesn't build the test files. In that is the case, try running the command using `npx` directly, see [`playwright.setup.ts`](./playwright.setup.ts). | +| Writing Tests | Add/update `src/*.(spec\|test).ts` files | - Update tests in `e2e/tests`
- Create a new test based on `e2e/template` | +| Test Gen | | 
npm start vanilla
npx playwright codegen http://localhost:1234
| +| Test Spec | | - `index.ts`: built and loaded into the web app
- `index.spec.ts`: test spec
| +| Outputs | Snapshots next to the test file | - Snapshots next to the test file
- `e2e/test-report`
- `e2e/test-results` | + +### Legacy Test Suite + +We **discourage** writing new tests in the legacy suite and **encourage** migrating failing tests to the new suite. +However, it is not carved in stone. + +The test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for serving the browser tests. - `unit` tests: test logic and state - `visual` tests: test visual outcome against image refs located at `test/visual/golden` -- `UI` tests: testing with playwright -### Getting Started +#### Getting Started - Build and watch for changes ```bash npm run build -- -f -w ``` -- Run the entire test suite on `chrome` (many tests are skipped on `node`) +- Run the _legacy_ test suite on `chrome` (many tests are skipped on `node`) ```bash npm test -- -a -c chrome ``` @@ -172,17 +189,7 @@ Test suites use [`QUnit`][qunit] for assertions and [`testem`][testem] for servi npm test -- -h ``` -## UI tests - -Run UI tests with Playwright in parallel in Chrome (headed mode). - -```bash -$ npm run test:e2e -``` - -### Adding Tests - -Backing a PR with tests that cover the changes that were made is a **MUST**. Aim to cover 100% of the cases. +#### Adding Tests Add tests to relevant files or add new files when necessary under `test/unit` or `test/visual`. @@ -256,6 +263,8 @@ Don't forget to unlink the package once you're done. [prettier_extension]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode [eslint]: https://eslint.org/ [jsdoc]: https://jsdoc.app/ +[playwright]: https://playwright.dev/ +[jest]: https://jestjs.io/ [qunit]: https://qunitjs.com/ [testem]: https://github.com/testem/testem [unit_test]: https://github.com/fabricjs/fabric.js/blob/93dd2dcca705a4b481fbc9982da4952ef5b4ed1d/test/unit/point.js#L227-L237