@toptal/davinci-qa
Version:
QA package to test your application
106 lines (75 loc) • 4.14 kB
Markdown
# Integration
> **Prerequisites:**
>
> - project uses latest [davinci-engine](https://github.com/toptal/davinci/tree/master/packages/engine) to build (based on webpack 5) or webpack 5
> - project follows [Integration testing](https://toptal-core.atlassian.net/wiki/spaces/ENG/pages/1194985097/Frontend+Testing+-+Integration+testing) and [Cypress tests location](https://toptal-core.atlassian.net/wiki/spaces/ENG/pages/2827780782/Frontend+Testing+-+Cypress+Component+tests+location) guidelines
> - add Cypress to your project `devDependencies`
> - for `integration` and `component` testing users should add files from below
> table to their project
| | e2e | component |
| -------------------------------------------------------------------------------------------------------- | ------------------ | ------------------ |
| [`tsconfig.json`](https://github.com/toptal/davinci/blob/master/packages/skeleton/tsconfig.json) | :heavy_check_mark: | :heavy_check_mark: |
| [`cypress.config.js`](https://github.com/toptal/davinci/blob/master/packages/skeleton/cypress.config.js) | :heavy_check_mark: | :heavy_check_mark: |
| [`.browserslistrc`](https://github.com/toptal/davinci/blob/master/packages/skeleton/.browserslistrc) | | :heavy_check_mark: |
> **NOTE:**
>
> .browserslistrc is necessary for Cypress
## Commands
| command | description |
| ----------------------------- | ---------------------------------------- |
| `davinci-qa integration open` | Open Cypress Test Runner app |
| `davinci-qa integration run` | Run cypress tests without the cypress ui |
### Options:
- `--component|--e2e` (default: `--e2e`): Type of cypress test (e2e or components)
- `--baseUrl`: URL used as prefix for cy.visit() or cy.request() command's URL
- `--anvilTag`(_run only_): the project name matching Anvil's expected tag to generate Anvil Reports
- Any other cypress option (ex. `--parallel`)
### Environment Variables
- `CYPRESS_COVERAGE`: Set this variable to `true` to enable coverage reports for component tests. Coverage reports are automatically enabled on continuous integration (**CI**) platforms.
#### Example:
```
CYPRESS_COVERAGE=true davinci-qa integration run --component
```
[Cypress CLI docs](https://docs.cypress.io/guides/guides/command-line.html)
## Visual tests
Both `--component` (Cypress Component tests) and `--e2e` (Cypress E2E tests) support visual tests via [Happo](https://happo.io/).
If you have your project bootstrapped from the Davinci - you just need to create your account in [Happo](https://happo.io/) and specify the Happo secrets in environment variables on CI:
```shell
HAPPO_PROJECT=<happo project name>
HAPPO_API_KEY=<happo api key>
HAPPO_API_SECRET=<happo api secret>
```
After that you can start doing visual screenshots by using `happoScreenshot` function ([docs](https://docs.happo.io/docs/cypress#usage)):
```js
cy.get('body').happoScreenshot()
```
If you want to start using visual testing in the existing application:
- add `.happo.js` file in the root of your application
```js
// .happo.js
module.exports = async () => {
const {
default: { configs },
} = await import('@toptal/davinci-qa')
return {
project: process.env.HAPPO_PROJECT,
apiKey: process.env.HAPPO_API_KEY,
apiSecret: process.env.HAPPO_API_SECRET,
...configs.happoConfig,
}
}
```
- install packages
```
yarn add --dev @types/happo-cypress
```
- change your npm scripts
```diff
- "test:cypress:run": "davinci-qa integration run"
+ "test:cypress:run": "happo-e2e -- -- davinci-qa integration run"
- "test:cypress:ct:run": "davinci-qa integration run --component"
+ "test:cypress:ct:run": "happo-e2e -- -- davinci-qa integration run --component"
```
- add types for Happo. You can do that by adding `happo-cypress` to `tsconfig.json` (`types` section) or import it from some global `.d.ts` file
- add Happo secrets and `happoScreenshot`
- done 👍