Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[client][ci] Tests: Add screenshot testing #889

Merged
merged 14 commits into from
May 27, 2022

Conversation

ix5
Copy link
Member

@ix5 ix5 commented May 27, 2022

Checklist

  • All new and existing tests are passing
  • (If adding features:) I have added tests to cover my changes
  • (If docs changes needed:) I have updated the documentation accordingly.
  • I have added an entry to CHANGES.rst because this is a user-facing change or an important bugfix
  • I have written proper commit message(s)

What changes does this Pull Request introduce?

js: test/integration: Add screenshot tests

These tests generate actual .png screenshots, saved to the isso/js/tests/integration/screenshots/ folder.

js: test/integration: Add Jest snapshots for whole widget

In addition to the unit tests (which rely on manual insertion of elements), test the default embed.dev.js behavior and ensure the generated output matches.

js: test/integration: Add screenshot comparison script

Relies on imagemagick to strip out metadata and only compare the image contents (via known hashes)

Why is this necessary?

Better test coverage and checking if CSS changes do unexpected things.

@ix5 ix5 added client (Javascript) client code and CSS testing/ci Test coverage & GitHub actions etc. labels May 27, 2022
@ix5 ix5 added this to the 0.13 milestone May 27, 2022
@ix5 ix5 force-pushed the js-jest-screenshots branch 3 times, most recently from e9938cc to 0caae62 Compare May 27, 2022 01:26
@ix5 ix5 force-pushed the js-jest-screenshots branch from 996b20f to 584eb5e Compare May 27, 2022 02:04
ix5 added 3 commits May 27, 2022 04:06
> The nocopy modifier is for when you are creating a volume
> and data already exists in the container's path, you can
> specify if you want that data copied when the volume is
> created.

https://stackoverflow.com/a/38288382
These tests generate actual `.png` screenshots, saved to the
`isso/js/tests/integration/screenshots/` folder.

Utilization of those screenshots will follow in a later
commit.
In addition to the unit tests (which rely on manual
insertion of elements), test the default `embed.dev.js`
behavior and ensure the generated output matches.
@ix5 ix5 force-pushed the js-jest-screenshots branch 4 times, most recently from 50edbab to fcaccad Compare May 27, 2022 02:21
ix5 added 2 commits May 27, 2022 04:57
Relies on imagemagick to strip out metadata and only compare
the image contents (via known hashes)

Screenshots generated by running `npm run test-integration`
in docker testbed.
Screenshot hashes generated by running `compare-hashes.sh`
in docker testbed.
@ix5 ix5 force-pushed the js-jest-screenshots branch 2 times, most recently from afab9de to 3936165 Compare May 27, 2022 03:16
@ix5 ix5 force-pushed the js-jest-screenshots branch from 3936165 to d76d235 Compare May 27, 2022 03:25
@ix5 ix5 marked this pull request as ready for review May 27, 2022 03:26
@ix5 ix5 changed the title [client] Tests: Add screenshot testing [client][ci] Tests: Add screenshot testing May 27, 2022
@ix5 ix5 merged commit b3ac15e into isso-comments:master May 27, 2022
@ix5 ix5 deleted the js-jest-screenshots branch May 27, 2022 04:03
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
client (Javascript) client code and CSS testing/ci Test coverage & GitHub actions etc.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant