Comments (4)
I think the dev
command seems like it'd be useful for storybook still. Aren't stories in storybook essentially analogous to -happo.js
files in the end?
from happo.io.
@monokrome They definitely are. Getting happo dev
to work for storybook integrations is a little more tricky though because of how the integration is set up. Basically happo delegates preparing a static package to storybook (i.e. build-storybook
) and then that package is sent to happo.io for screenshots. In a regular Happo examples integration we are in control of the build process, which means we can single out -happo
files and make smaller packages, which makes the dev experience better as we're getting screenshots back quicker.
I've been thinking about a slightly different dev experience for Storybook projects with happo where we would have a button in the Storybook UI to quickly check what this components look like in different browsers, and then you can incrementally make changes to the component and get diffs along the way. Do you think this would be interesting? If so, maybe we can outline/sketch out the feature here?
from happo.io.
I've had an initial look at the outlined dev experience (button in the Storybook UI) and these are some thoughts and challenges:
- In Storybook dev mode (
start-storybook
), there's no ready-made package we can send to happo.io. I'm not 100% sure how the dev storybook server works, but I believe it might be generating bundles on the fly -- I couldn't find the files referenced from the storybook web app in the filesystem. - Instead of sending a package (which is what the plugin normally does) we could send html+css payloads to happo.io. But that would make it behave different from what a full CI run.
- Perhaps we could use something like ngrok to set up a tunnel to the local development server 🤔? Then we would be able to talk to the local dev server from happo.
from happo.io.
By the way, this is what I had in mind for the Storybook UI (in its simplest form):
If you hit that button, we would show one or more screenshots in that box. If you hit it again, we would compare the new screenshots with the previous ones.
There are of course other features we could consider down the road. Here are some ideas:
- Directly comparing the screenshot(s) to what's already on the main branch.
- Allowing you to edit the browser targets.
from happo.io.
Related Issues (20)
- Running happo with more than 1 test file. HOT 3
- Error: Error: The NODE_ENV environment variable is required but was not specified. HOT 2
- Failures when running Happo HOT 4
- Trouble using Limiting Targets HOT 9
- Failure when running happo on safari browser HOT 2
- Spurious diffs with radio buttons on Safari HOT 8
- Environment variables in CircleCI run HOT 2
- Failures running Happo - File Already Exists HOT 4
- Script for `happo-ci-circleci` broken on custom base branch HOT 1
- Spurious diffs with iOS-safari HOT 4
- Script `happo-ci-github-actions` fails in 6.6.0
- Images created by `next/image` are not rendered in screenshots HOT 9
- Does this work with Rollup.js? HOT 13
- babel-polyfill always imported
- [Feature request] Run Function After Comparison Request HOT 6
- Can you expand support for babel-loader to include v9 HOT 3
- Failure due to maxHeight not being applied HOT 5
- Allow customization of prerender DOM HOT 1
- Request to apply a lock if the test is going to exceed the number of available snapshots HOT 4
- @babel/preset-react and babel-plugin-dynamic-import-node HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from happo.io.