Usage with Storybook (Component Story Format) #55
Description
I'm trying to use new Component Story Format of Storybook with Testing library.
The goal is to import a story as an ES6 module without having to redefine its context.
With this component:
@Component({
selector: 'app-root',
template: `<input [type]="type">`
})
export class AppComponent {
type: string;
}
I create 2 stories with Component Story Format to display two types of input.
export default {
title: 'AppComponent'
};
export const defaultInput = () => ({
component: AppComponent,
props: {
type: 'text'
}
});
export const rangeInput = () => ({
component: AppComponent,
props: {
type: 'range'
}
});
With Testing Library, i would expect to be able to test the type from each story without having to define the type in the test.
I'm aware my issue comes from the way i use render() as i call the component property of the story and at this point no property is defined for this component.
But i can't find a way to render the component and its context just by calling 'defaultInput()' or 'rangeInput()'. Is there a solution?
describe('AppComponent', () => {
// not working test : the type is not defined
it('should render a custom title', async () => {
const component = await render(defaultInput().component);
expect(component.fixture.componentInstance.type).toBe('text');
});
// working example as the property is defined into the test context
it('should render a custom title', async () => {
const component = await render(defaultInput().component, {
componentProperties: {
type: 'text'
}
});
expect(component.fixture.componentInstance.type).toBe('text');
});
// not working test : the type is not defined
it('should render a custom title', async () => {
const component = await render(rangeInput().component);
expect(component.fixture.componentInstance.type).toBe('range');
});
// working example as the property is defined into the test context
it('should render a custom title', async () => {
const component = await render(rangeInput().component, {
componentProperties: {
type: 'range'
}
});
expect(component.fixture.componentInstance.type).toBe('range');
});
});
Link to the project on Github.