Testing: Error handler

[mal-tee]

We have a handy error handler, showing a modal to users asking them to report an error to us.

At the moment we only have very basic testing for it: https://github.com/datenanfragen/website/blob/master/cypress/integration/error-handler/console-logging.spec.js

We would like to have some more tests in cypress covering the error handler:

• [ ] Is the modal shown correctly?
• [ ] Do the mailto: and GitHub links work correctly?
• [ ] Does the "De-JSON-ification" work?
  • we have to make the error dump look as little as JSON as possible, to circumvent email spam filters 😅
  • see the collapsed example below

💡 Example for De-JSON-ification

```js { "message": "Error: Browsers are awesome!", "type": "error", "colno": 19, "filename": "javascript:(function(){throw new Error(\"Browsers are awesome!\")})();", "lineno": 1, "error": { "message": "Browsers are awesome!", "name": "Error", "stack": "@javascript:(function(){throw new Error(\"Browsers are awesome!\")})();:1:19\n@javascript:(function(){throw new Error(\"Browsers are awesome!\")})();:1:55\n" }, "defaultPrevented": false, "eventPhase": 2, "isTrusted": true, "returnValue": true, "code_version": "1.0.0", "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0", "url": { "href": "https://www.datarequests.org/", "origin": "https://www.datarequests.org", "protocol": "https:", "host": "www.datarequests.org", "hostname": "www.datarequests.org", "port": "", "pathname": "/", "search": "", "hash": "" } } ``` becomes ``` **Debug information:** message := Error: Browsers are awesome! type := error colno := 19 filename := javascript:(function(){throw new Error("Browsers are awesome!")})(); lineno := 1 error.message := Browsers are awesome! error.name := Error error.stack := @javascript:(function(){throw new Error("Browsers are awesome!")})();:1:19 @javascript:(function(){throw new Error("Browsers are awesome!")})();:1:55 error.context := defaultPrevented := false eventPhase := 2 isTrusted := true returnValue := true code_version := 1.0.0 user_agent := Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0 url.href := https://www.datarequests.org/ url.origin := https://www.datarequests.org url.protocol := https: url.host := www.datarequests.org url.hostname := www.datarequests.org url.port := url.pathname := / url.search := url.hash := ```

Tips:

• https://github.com/datenanfragen/website/blob/master/src/error-handler.js
• Cypress has great online docs: https://docs.cypress.io/guides/getting-started/writing-your-first-test
• our existing tests gives some info about how to trigger an artificial error: https://github.com/datenanfragen/website/blob/29f16ab9003ffec684cbafb4656ab3062bf9889c/cypress/integration/error-handler/console-logging.spec.js#L14

• Cypress can't navigate to a different base domain while testing, so checking if the links are correct boils down to matching them against a suitable regular expression like here:

  https://github.com/datenanfragen/website/blob/29f16ab9003ffec684cbafb4656ab3062bf9889c/cypress/integration/use-cases/donate.spec.js#L31-L36

[InfiniteVerma]

I'd like to work on this.

[baltpeter]

@InfiniteVerma I have assigned you.

[InfiniteVerma]

I have the project running locally and am trying to run the tests on Cypress. And as specified on the link, cypress visits '/' page, throws an artificial error, and queries the DOM. But, the error handler modal isn't opening up. Am I doing something wrong here? The logs show 'Browsers are awesome' text message but no modal comes up.

Img1	Img2

[baltpeter]

@InfiniteVerma The hint @mal-tee gave isn't quite correct actually.

While this will cause the error to be logged to the console, as you said, we only show the modal if you throw one of our custom error classes, particularly one with a code <= 3:

https://github.com/datenanfragen/website/blob/482efd6bebf2d819dd47d395c411af37b3ef7b50/src/error-handler.js#L183-L185

And in fact, I don't think you even need to do that javascript: trick anymore. That is a remnant from when we were using Selenium for the tests. With Cypress, you should be able to just throw the error in the JS context of the site (not tested, though).

To make your life easier, feel free to implement a function for that in our test interface. There, you can add functions that will be available on the window object in the tests.