Angular and Vue storyshots #2564
Conversation
# Conflicts: # addons/storyshots/package.json # app/angular/src/client/preview/angular/helpers.ts # examples/angular-cli/package.json # jest.config.js
# Conflicts: # addons/storyshots/package.json # examples/angular-cli/package.json
Codecov Report
@@ Coverage Diff @@
## master #2564 +/- ##
==========================================
+ Coverage 34.35% 36.35% +1.99%
==========================================
Files 390 401 +11
Lines 8772 8937 +165
Branches 909 911 +2
==========================================
+ Hits 3014 3249 +235
+ Misses 5135 5090 -45
+ Partials 623 598 -25
Continue to review full report at Codecov.
|
|
@Hypnosphi , what do you think of using this: https://github.com/Wizcorp/codependency ? |
|
Description looks a bit outdated (npm stopped installing peers quite a long time ago) |
|
Probably that's because it was last updated in 2014 |
|
I think I've found a solution. Now |
| @@ -1,4 +1,6 @@ | |||
| // eslint-disable-next-line import/no-extraneous-dependencies | |||
There was a problem hiding this comment.
How are people expected to get jest-preset-angular dependency? As contrary to @angular/core, it's by no means guaranteed to be present in an angular project
| @@ -1,3 +1,4 @@ | |||
| // eslint-disable-next-line import/no-extraneous-dependencies | |||
There was a problem hiding this comment.
People who are already using Storyshots were already needed to install react-test-renderer, so for them, there won't be a problem. I need to add a section in Readme about these "optional peers", that people have to install by hand.
BTW, For angular and vue these deps are needed to configure jestconfig (I've already added it to readme)
addons/storyshots/README.md
Outdated
| @@ -36,6 +38,43 @@ Usually, you might already have completed this step. If not, here are some resou | |||
|
|
|||
| > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039). | |||
|
|
|||
| ### Configure Jest for React | |||
| StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but | |||
| doesn't install it, so you need yo install it separately. | |||
There was a problem hiding this comment.
Please add a note explaining why we can't have it as a peer dep
There was a problem hiding this comment.
Also, "yo" is probably a typo =D
There was a problem hiding this comment.
Please add the shell command to copypaste:
npm install --save-dev react-test-renderer
addons/storyshots/README.md
Outdated
| @@ -40,11 +40,19 @@ Usually, you might already have completed this step. If not, here are some resou | |||
|
|
|||
| ### Configure Jest for React | |||
| StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but | |||
| doesn't install it, so you need yo install it separately. | |||
| doesn't install it, so you need to install it separately (read [here](#deps-issue) why). | |||
There was a problem hiding this comment.
It's a super-nit, but I prefer when a sentence keeps making sense if you replace links with their text, that's why I don't really like links with "here" text.
Can we just make "doesn't" a link?
addons/storyshots/README.md
Outdated
| ### <a name="deps-issue"></a>Why don't we install dependencies of each framework ? | ||
| Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. | ||
|
|
||
| `dependancies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer). |
Codecov Report
@@ Coverage Diff @@
## master #2564 +/- ##
==========================================
+ Coverage 33.83% 35.73% +1.89%
==========================================
Files 422 433 +11
Lines 9265 9430 +165
Branches 983 987 +4
==========================================
+ Hits 3135 3370 +235
+ Misses 5452 5433 -19
+ Partials 678 627 -51
Continue to review full report at Codecov.
|
# Conflicts: # addons/storyshots/README.md # addons/storyshots/src/index.js
# Conflicts: # package.json # yarn.lock
# Conflicts: # .editorconfig # addons/storyshots/package.json # examples/angular-cli/package.json # examples/vue-kitchen-sink/package.json # yarn.lock
# Conflicts: # package.json # yarn.lock
|
I'm merging this one since I'm tired solving conflicts. Still didn't get a feedback on the angular part, but I think it will be easier to test in beta. |
Issue: Adding storyshots support for angular
What I did
I have concerns about adding every new framework to peer dep... Should people install all these angular/polymer/aurelia packages?@storybook/angular-coreI don't know how to make props to be visible in snapshots =(One storyshot is failing. We need to refactor more things to be able to run framework-specific preparations with beforeEach.How to test
For running only angular sthoryshots:
For running only vue sthoryshots: