Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Add a shallowSnapshot option for storyshots test functions #1232

Merged
merged 5 commits into from
Jun 15, 2017
Merged

Add a shallowSnapshot option for storyshots test functions #1232

merged 5 commits into from
Jun 15, 2017

Conversation

heinzmuller
Copy link
Contributor

@heinzmuller heinzmuller commented Jun 9, 2017

Issue: #995 StoryShots doesn't have a preset for shallow rendering snapshots

What I did

Added a test body for shallow rendering snapshots

How to test

Add this as a storyshot test file

import initStoryshots, { shallowSnapshot } from '@storybook/addon-storyshots'

initStoryshots({
  test: shallowSnapshot
})

@codecov
Copy link

codecov bot commented Jun 9, 2017

Codecov Report

Merging #1232 into master will decrease coverage by 0.02%.
The diff coverage is 0%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1232      +/-   ##
==========================================
- Coverage   13.73%   13.71%   -0.03%     
==========================================
  Files         207      207              
  Lines        4638     4646       +8     
  Branches      510      512       +2     
==========================================
  Hits          637      637              
- Misses       3550     3565      +15     
+ Partials      451      444       -7
Impacted Files Coverage Δ
addons/storyshots/src/test-bodies.js 0% <0%> (ø) ⬆️
addons/storyshots/src/index.js 0% <0%> (ø) ⬆️
...rc/modules/ui/components/left_panel/text_filter.js 33.33% <0%> (ø) ⬆️
addons/info/src/components/markdown/code.js 0% <0%> (ø) ⬆️
lib/ui/src/modules/ui/configs/handle_routing.js 28.94% <0%> (ø) ⬆️
app/react/src/client/preview/client_api.js 39.28% <0%> (ø) ⬆️
addons/knobs/src/components/PropForm.js 8.51% <0%> (ø) ⬆️
...codemod/src/transforms/update-organisation-name.js 40.62% <0%> (ø) ⬆️
addons/info/src/components/PropVal.js 0% <0%> (ø) ⬆️
... and 18 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 36d7ec2...1288dfb. Read the comment docs.

@ndelangen
Copy link
Member

Can you explain why you'd want to shallow render stories? Is this something people want to do?

@heinzmuller
Copy link
Contributor Author

heinzmuller commented Jun 12, 2017

I can only speak for myself, but when you have huge library of smaller react components, if you don't do shallow rendering you will get huge snapshot mismatches when you change those components. Granted that snapshot tests are really easy to update, but when you have large mismatches it is also increases the likelihood that you miss a real error.

And secondly when you shallow render, it makes it that more important to make sure you have tests for all components.

PS. It's not important for me to have this functionality built into storybooks as it's really easy to do yourself, but I was asked in #995 to make a PR. If this isn't something you'd like to have added that is fine aswell! :)

@ndelangen
Copy link
Member

@tmeasday Can you review this?

Copy link
Member

@tmeasday tmeasday left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great, Thanks @heinzmuller !

@tmeasday tmeasday changed the title Add shallow render snapshot as a test body Add a shallowSnapshot option for storyshots test functions Jun 15, 2017
@tmeasday tmeasday merged commit 103c72e into storybookjs:master Jun 15, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants