# E2E Tests

These tests consist in comparing the artifacts (network requests, cookies, local storage) generated by navigating websites with the two different versions of AJS (AJS classic and AJS next).

In order to do that, we use [playwright](https://playwright.dev/) to navigate, inject analytics next into existing websites and record requests (comparing cookies and local storage is supported yet).

## Structure

Scenarios are created by implementing an object with the following signature under [e2e-tests/cases](/e2e-tests/cases):

```ts
// e2e-tests/cases/myWebsite.ts

import { Page } from 'playwright'

export default {
  name: 'myWebsite',
  scenario: async function (page: Page) {
    await page.goto('https://myWebSite.com/')
    // ...
  },
}
```

This approach guarantees that requests for multiple websites can be recorded with a single run and stored in the appropriate JSON files.

Once the scenario is recorded and run, a JSON file will be created with every request made to the Tracking API.

```JSON
{
  "name": "segment",
  "trackingAPI": [
    {
      "method": "POST",
      "url": "https://api.cd.segment.com/v1/p",
      "postData": {
        "integrations": {},
        "anonymousId": "326e40b7-5a62-42fa-b215-5bed4b7b9aa1",
        // ...
      }
    }
  ]
}
```

## Creating a new scenario

To create a new scenario, we use [playwright's cli](https://github.com/microsoft/playwright-cli), that allows us to navigate and generates the necessary code. Click [here](https://github.com/microsoft/playwright-cli#generate-code) to see an example.

To start recording, you can use:

```sh
npx playwright-cli codegen wikipedia.org
```

Our scripts make sure you don't have to initialize and close the browser instance, so feel free to ignore [that part of the generated code](/e2e-tests/recorder.ts#L70-L86).

Paste the navigation code into a new typescript file and save it under [e2e-tests/cases](/e2e-tests/cases), following the pattern shown above.

# Recording requests

Import the new file created into [e2e-tests/recorder/config.ts](/e2e-tests/recorder/config.ts#L20) and add it to the scenarios list.

To record requests made by AJS Classic, run

```sh
make record-classic
```

To record requests made by AJS Next, run

```sh
make standalone-example # to serve AJS Next locally
make record-next
```

optional parameters:

- `HEADLESS=true|false` : whether or not to show chorme
- `CASES=comma,separated,names` : comma separated list of cases to run
- `ENDPOINTS=p,t,i,g,a` : comma separated list of tracking API endpoints to record
- `DEVTOOLS=true|false` : whether or not to open chrome devtools when running on `HEADLESS=false` mode
- `AJS_VERSION=classic|next` : what version of AJS to use (can also be controlled by using `make record-classic` or `make record-next`)

# Comparing Requests

Recorded requests will be stored into [e2e-tests/data/requests](/e2e-tests/data/requests). In order to compare them, run:

```
yarn jest request
```

This command assumes files follow the `<ajs_version>-<scenario_name>.json` pattern (i.e. `classic-segment.json` and `next-segment.json`), and that both `classic` and `next` files exist.
