How to test canvas drawing?

[pobch]

Possible approaches

• Image snapshot in Jest. Maybe convert the result canvas to an image and compare it to the previous snapshot.
• Image snapshot in Cypress. This could be slow to run.
• Sync elementsSnapshot from component's state to a global variable (window). Then, expect against the global variable. This can check if raw data for drawing is correct, but it's not cover the result of drawing.

[pobch]

Let's try Cypress first. Jest may not be suitable for stuff related to layout, reason: https://github.com/testing-library/user-event/issues/440#issuecomment-685010755

[pobch]

Helpful info

How to drag & drop in Cypress

• https://github.com/cypress-io/cypress/issues/1624
• https://github.com/cypress-io/cypress/issues/845

Image snapshot diff when cypress run, but not diff when cypress open

• https://github.com/jaredpalmer/cypress-image-snapshot/issues/95

Docs

• https://github.com/meinaart/cypress-plugin-snapshots
• https://docs.cypress.io/guides/tooling/visual-testing