Comments (21)
@gavriguy great. And you can publish your storybook to GitHub pages.
Checkout react-cdk for this. It has the sample code to do it.
from storybook.
@sokki See: Stubbing React Containers for Testing
from storybook.
@MasterAM Some of us are following the Mantra spec, which usually has 2 composer types for each component type, so I had to use a different approach.
@arunoda It doesn't look like https://github.com/gavriguy/react-indie would work well with mantra-core either.
I added a composeAllWithStub function on top of the setTestMode. Will submit PR shortly.
from storybook.
That's the kind of thing I'm looking at. With React Komposer, I use a way to disable the container functionality at all.
See: https://github.com/mantrajs/mantra-sample-blog-app/blob/master/.storybook/config.js#L4
I hope we can do a much better job as well.
from storybook.
Looking for some ideas.
from storybook.
One option that comes to mind is stub the context.
Something like a more function-complete version of meteor-stubs could be useful for this.
Another idea is providing a parameter to ComposeAll
that will include metadata about the component being composed. This could be a string, for the requirements of this set of functionality.
When in test mode, the composer could take a "stub composer" provided by the test and ignore the one in the original container file.
original container:
export default composeAll(
'myComponentKey'
composeWithTracker(composer),
useDeps(depsMapper)
)(Component);
story file:
// will cause composeAll in the original container file to ignore the composers
// provided to it and wrap the dumb component using testComposer
stubComposer('myComponentKey', composeWithTracker(testComposer));
Another option is to have composeAll
return a function that (when in test mode) identifies the component sent to it and ignores the composers if a "test composer" was defined in the tests. This has the benefit of not requiring API changes.
In the previous example, this means importing the "dumb" component in the story file, defining a composer for it:
story file:
import dumbComponent from '../my_dumb_component.jsx';
stubComposer(dumbComponent, composeWithTracker(testComposer));
original container:
// Component is the same as dumbComponent, so the composer will use testComposer instead
export default composeAll(
composeWithTracker(composer),
useDeps(depsMapper)
)(Component);
from storybook.
I have implemented my last suggestion for react-komposer.
It works pretty well, as long as you don't need more than one composer type for the same component type (which seems to me like a reasonable expectation).
If I have a component that depends on a composition, I can enable the test mode and register a stub composer for it, which will override the original composer:
original component:
// components/my_component.js
import React from 'react';
import OtherComponet from '../containers/other_component';
class MyComponent extends React.Component {
render() {
return (<OtherComponet foo="bar" />);
}
}
export default MyComponent;
If not stubbed, it may fail to get data, so let's create a stub:
// components/.stories/composer.js
import OtherComponet from '../other_component.jsx';
import {
createStubComposers, setTestMode, compose
} from 'react-komposer';
const myStubComposer = (props, onData) => {
// get data here
onData(null, data);
};
setTestMode(true);
createStubComposers(OtherComponet, compose(myStubComposer));
and now we can use MyComponet
in our story:
// components/.stories/my_component.js
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import './composer'; // this is the file that registers the composer stub. import it before MyComponent
import MyComponent from '../my_component.jsx';
storiesOf('core.MyComponent', module)
.add('default view', () => {
return (<MyComponent />);
});
@arunoda , any thoughts?
from storybook.
@MasterAM overall, this seems like a good idea.
Send a PR and let's discuss.
from storybook.
@arunoda, PR sent.
Currently I use some fixtures located in a file under .stories
as the alternative data source for the composer stub. The composer stub itself is set up in another file inside the .stories
directory.
In the stub setup file I import those fixtures and the base component, use the fixtures in the stub composer function and call createStubComposers
with the base component and the stub.
It is also possible use a completely different composer with the same component later on (if another component is using a composition that includes it) by overriding the stub composer for it. It can by done by calling the createStubComposers
again with the same component and a different composer.
It all depends on the identity of the composer at the moment of invoking the function returned from composeAll()
. The invocation is usually done in the file in which the composition is defined, so the file that sets up the stub should be imported before the actual composition file is imported.
from storybook.
you might want to try https://github.com/gavriguy/react-indie which has some similar concepts to react-komposer but takes a different approach for handling data defaults, data loading and errors. it lets the component itself deal with the ui of all of the above making it a perfect fit.
it even uses storybook to showcase how the component works.
(note: im the creator of react-indie)
from storybook.
I run @MasterAM 's setTestMode(), then
export default composeAllWithStub([
composeWithTracker(composer),
useDeps(depsMapper)
],[
compose(composerStub),
useDeps(depsMapperStub)
])(Component);
Please check mantrajs/mantra-sample-blog-app#110 to see a working example.
from storybook.
@ihealthdavid
AFAICT, You can set the composers however you like for the original component, so you can use the Mantra spec (as I do, too). What prevents you from specifying as many composers as you like for a component? Can you show a simple example where it fails?
I created createStubComposers
the way I did because I did not want to do "scaffolding" for tests in the application code.
@arunoda It does not look like PRs for ReactKomposer are getting much love. Any chance to change that?
from storybook.
@MasterAM I'm taking all of them in this week. Stay in touch.
Sorry about the delay.
from storybook.
Hi all, I've looked at all these options. They are great.
Anyway, I come up with something which looks like simple to me.
So, I implemented that. See: https://github.com/kadirahq/react-komposer#stubbing
I hope that's more than enough.
from storybook.
Thanks, @arunoda; this looks fairly elegant and useful. I will implement it soon in one of my apps which uses StoryBook and let you know how it went. π
from storybook.
@MasterAM great.
from storybook.
Is there a way to deal with containers-in-component without react-komposer? We use Meteors createContainer
and ran into the same problem ...
from storybook.
Yes. There is a way. Check Kadira Voice in few hours.
from storybook.
I think we could close this.
from storybook.
Add ref: storybook-eol/getstorybook#1
from storybook.
Guys, sorry for reviving this thread, but I am interested in your opinion. What really works for me for unit testing is to load all all components and containers as part of the module (mantra-style). Therefore module contains: { actions, components, modules }
.
Then, in the component I load the components from the context from the given module. Such as:
export conts Component (props, { modules }) => {
const { Markdown } = modules.core.containers;
return <Markdown text="A" />
}
Component.contextTypes = {
modules: React.PropType.object
}
Do you see any issues with this approach? It makes unit testing a breeze.
from storybook.
Related Issues (20)
- [Bug]: Disabled toc in story produces error spam on scroll
- [Bug]: In 8.1.1 the empty state of controls addon has a bottom bar which wasnβt there before. HOT 1
- [Bug]: test issue HOT 1
- [BUG] Addon backgrounds - There is no "Reset background" option HOT 1
- [Bug]: After upgrade to v8.1.1 svg loader doesn't work for nextjs HOT 7
- [Bug]: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. HOT 1
- [Bug]: Controls is not updating Canvas story if they're in the same mdx. HOT 1
- [Bug]: Sidebar doesn't wrap which hides the "Run tests" and "Settings" buttons HOT 4
- πΊοΈ Public roadmap
- Core package consolidation
- Global overrides
- Official Svelte CSF
- Storybook tags
- [Bug]: Excessive React library requirement for angular storybook HOT 1
- [Bug]: Args are reset after refresh page in browser
- [Bug]: viteFinal() missing build.assetsInlineLimit from vite.config.ts
- Theming 2.0
- [Bug]: ESM presets are not loading in Windows
- [Bug]: Bundled CSS imported through preview.ts is wrongly applied to the whole docs page HOT 1
- [Bug]: Bundling React Native 0.70 with minify enabled throws error in @storybook/preview-api HOT 10
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 storybook.