# 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

```
pnpm add --save-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 👍