Ask HN: How to view UI changes before & after a pull request?

#1

Post by seestraw » Mon, Apr 25, 2022, 2:51 AM UTC

I've been a backend developer for a while. My team has been sending me frontend PRs lately. I find it hard to see visual changes before and after a PR request. This is for UI changes, not for logic changes. Is there any tool that can make this smoother?

Re: Ask HN: How to view UI changes before & after a pull request?

#2

Post by lelandfe » Mon, Apr 25, 2022, 3:09 AM UTC

I've heard this called "snapshot testing"

I've used Chromatic before and really enjoyed it: https://www.chromatic.com/features/test

Jest also offers the core functionality if you want to roll your own tests: https://jestjs.io/docs/snapshot-testing

Re: Ask HN: How to view UI changes before & after a pull request?

#3

Post by seestraw » Mon, Apr 25, 2022, 3:18 AM UTC

lelandfe wrote: post #2

I've heard this called "snapshot testing" I've used Chromatic before and really enjoyed it: https://www.chromatic.com/features/test Jest also offers the core functionality if you want to roll your own tests: https://jestjs.io/docs/snapshot-testing

Thanks! Is Chromatic only for Storybook?

Re: Ask HN: How to view UI changes before & after a pull request?

#4

Post by [deleted] » Mon, Apr 25, 2022, 3:38 AM UTC

[deleted]

Re: Ask HN: How to view UI changes before & after a pull request?

#5

Post by efortis » Mon, Apr 25, 2022, 4:14 AM UTC

I upload a before and after picture or a video to the ticket, and then link it in the PR description, so design or product can comment before developers.

Re: Ask HN: How to view UI changes before & after a pull request?

#6

Post by denysvitali » Mon, Apr 25, 2022, 5:45 AM UTC

Cypress can take screenshots too, maybe you can use the screenshot function and store the artifact in your CI job. This way you can include a before / after screenshot of your change in the PR

Re: Ask HN: How to view UI changes before & after a pull request?

#7

Post by advanderveer » Mon, Apr 25, 2022, 6:03 AM UTC

lelandfe wrote: post #2

I've heard this called "snapshot testing" I've used Chromatic before and really enjoyed it: https://www.chromatic.com/features/test Jest also offers the core functionality if you want to roll your own tests: https://jestjs.io/docs/snapshot-testing

I can second the effectiveness of Chromatic, essential for us at crewlinker.com. We have over 80 components with 281 stories, all being checked for visual regressions on every PR. It is also surprisingly effective of just catching regular errors that occur because some rendering logic may indeed result in the app crashing.

Re: Ask HN: How to view UI changes before & after a pull request?

#8

Post by hboon » Mon, Apr 25, 2022, 6:19 AM UTC

efortis wrote: post #5

I upload a before and after picture or a video to the ticket, and then link it in the PR description, so design or product can comment before developers.

Yes, for UI changes, we upload before and after screenshots too.

Re: Ask HN: How to view UI changes before & after a pull request?

#9

Post by octatrack » Mon, Apr 25, 2022, 6:42 AM UTC

lelandfe wrote: post #2

I've heard this called "snapshot testing" I've used Chromatic before and really enjoyed it: https://www.chromatic.com/features/test Jest also offers the core functionality if you want to roll your own tests: https://jestjs.io/docs/snapshot-testing

I also vouch for Chromatic, it has been extremely valuable for us. It is only working with Storybook, though, as it's made by the same company.

Re: Ask HN: How to view UI changes before & after a pull request?

#10

Post by eyilmaz » Mon, Apr 25, 2022, 8:21 AM UTC

There is also a service which can be integrated into your pipeline: https://diffy.website. You can take screenshot from your production or stage environment and compare them with your feature/PR builds.