Image snapshot testing with Puppeteer

[rolyp]

Snapshot (approval) testing is useful for easy refactoring, and well supported by Jest. It's not quite trivial to set up for us because the map view renders asynchronously, and so waiting on "Nothing to show" doesn't seem to be enough for deterministic behaviour. The following diff illustrates different states that both satisfy expect(..).toContain("Nothing to show"):

Maybe we can find a UI element to wait on that only appears when the map is fully loaded.

• install jest-image-snapshot
• import toMatchImageSnapshot from jest-image-snapshot and extend Jest’s expect API
• condition that over-approximates map being fully loaded
  • waitUntil: "networkidle0" -- probably not very reliable
• revisit snapshot tests in tgvejs (maybe no longer needed)
• set visibility of map and loader component to hidden (to avoid problem with async map content)
• change Puppeteer viewport size to include more of the side desk
• export __snapshort folder as build artifact
• set error tolerance in screenshot diffs to 0.5%

See:

• Snapshot testing with Puppeteer
• Puppeteer options for detecting navigation complete
• Puppeteer wait until page is completely loaded
• Puppeteer to listen for map.on('load') from within Node

[layik]

Shall we try waitUntil: 'networkidle2'?

[layik]

These are captured with waitUntil: 'networkidle0', tried 2 almost identical.

[layik]

OK having played with many options on puppeteer, a solution which also contributes to overall tgvejs functionality is to generate the image snapshots without "basemap"s. This can be achieved by exporting another API called mapStyle and setting it to "No map". The results would be like. Please let me know @rolyp if you like me to send the commit (small one) to tgve/tgvejs.

Leave it here, got enough about puppeteer and how we are trying to use it. Great work btw.