# Testing

## Cypress

In the demo app, type:

    $(npm bin)/cypress open


## BrowserStack
BrowserStack is used to *manually* check the behaviour of Notification across different browsers and operating systems. Some browser may require a user interaction, whereas others allow to call `requestPermission` at any point. In the past, there was also some constraints regarding where to put the `requestPermission` call and, for example, it was not allowed in the `onload` event callback.

Our first though was to create a `Cypress` test to check compatibility across different browsers, but it is not possible because Notifications are outside the tab scope. It is possible to mock them[^1], but it won't allow to check the real work of notifications

[^1] https://github.com/applitools/automation-cookbook/blob/main/cypress/cypress/integration/notification.spec.js 

To run the e2e test suite locally via browserstack, just type in the root directory of the demo application (the application that uses this SDK)

    browserstack-cypress run --sync  --cypress-config-file ./cypress.json

In the same directory, create the `browserstack.json` file. In the `browsers` section, write the desired list of browsers, platforms and versions.

```
{
    "auth": {
        "username": "andrsestvez_PakfQV",
        "access_key": "A8ySkKEV38gQc2uNxx4J"
    },
    "browsers": [
        {
            "browser": "chrome",
            "os": "Windows 10",
            "versions": [
                "latest",
                "latest-1"
            ]
        },
        {
            "browser": "firefox",
            "os": "Windows 10",
            "versions": [
                "latest",
                "latest-1"
            ]
        },
        {
            "browser": "edge",
            "os": "Windows 10",
            "versions": [
                "latest",
                "latest-1"
            ]
        }
    ],
    "connection_settings": {
        "local": true,
        "local_identifier": "local-123-andres"
    },
    "run_settings": {
        "cache_dependencies": "false",
        "specs": ["cypress/integration/demo-app/**/*"]
    },
    "disable_usage_reporting": false
}
```

# Events
Next table summarizes the events triggered in both Firefox and Chrome (v.97). This brief research have been carried out to decided which native events the SDK needs to listen:

| Action | Events |
| --- | --- |
| Load page | pageshow,load,replacestate |
| Navigate to another URL using a router | pushstate |
| Move through history within same application | popstate |
| Move through history jumping to a previous web | beforeunload |
| Write another URL and press “enter” | beforeunload |
| Switch tab | visibility-change |
| Minimize / maximize browser | visibility-change |

## Detect when the application is closing
According to the MDN docs there is no updated way to do this. The usage of events like `onunload`, `beforeunload` is discouraged. The correct way, according to MDN is to use `visibilitychanged` (https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event), but this SDK is already using it to detect tab switching. The intermediate alternative is to use `pagehide`, but


More information in:
* https://developers.google.com/web/updates/2018/07/page-lifecycle-api

* https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

## tsconfig
There are two diferent `tsconfig` files: 

* `tsconfig.typedoc.json`, for generating documentation 
* `tsconfig.json`, for exposing the types in the bundle

## Rename NPM depencies

    npm:@causalfoundry.ai/js-sdk@^1.0.0-beta.5.8

## Run library in development mode

Add `cfenv=dev` to the querystring:

    https://localhost:3000/?cfenv=dev