@storybook/angular 9.0.0-beta.6 → 9.0.0-beta.7

package/dist/client/angular-beta/DocsRenderer.mjs

@@ -0,0 +1,35 @@
+import { DOCS_RENDERED, STORY_CHANGED } from 'storybook/internal/core-events';
+import { addons } from 'storybook/preview-api';
+import { AbstractRenderer, STORY_UID_ATTRIBUTE } from './AbstractRenderer';
+import { getNextStoryUID } from './utils/StoryUID';
+export class DocsRenderer extends AbstractRenderer {
+    async render(options) {
+        const channel = addons.getChannel();
+        /**
+         * Destroy and recreate the PlatformBrowserDynamic of angular For several stories to be rendered
+         * in the same docs we should not destroy angular between each rendering but do it when the
+         * rendered stories are not needed anymore.
+         *
+         * Note for improvement: currently there is one event per story rendered in the doc. But one
+         * event could be enough for the whole docs
+         */
+        channel.once(STORY_CHANGED, async () => {
+            await DocsRenderer.resetApplications();
+        });
+        /**
+         * Destroy and recreate the PlatformBrowserDynamic of angular when doc re render. Allows to call
+         * ngOnDestroy of angular for previous component
+         */
+        channel.once(DOCS_RENDERED, async () => {
+            await DocsRenderer.resetApplications();
+        });
+        await super.render({ ...options, forced: false });
+    }
+    async beforeFullRender(domNode) {
+        DocsRenderer.resetApplications(domNode);
+    }
+    initAngularRootElement(targetDOMNode, targetSelector) {
+        super.initAngularRootElement(targetDOMNode, targetSelector);
+        targetDOMNode.setAttribute(STORY_UID_ATTRIBUTE, getNextStoryUID(targetDOMNode.id));
+    }
+}

package/dist/client/angular-beta/RendererFactory.mjs

@@ -0,0 +1,50 @@
+import { AbstractRenderer } from './AbstractRenderer';
+import { CanvasRenderer } from './CanvasRenderer';
+import { DocsRenderer } from './DocsRenderer';
+export class RendererFactory {
+    constructor() {
+        this.rendererMap = new Map();
+    }
+    async getRendererInstance(targetDOMNode) {
+        const targetId = targetDOMNode.id;
+        // do nothing if the target node is null
+        // fix a problem when the docs asks 2 times the same component at the same time
+        // the 1st targetDOMNode of the 1st requested rendering becomes null 🤷‍♂️
+        if (targetDOMNode === null) {
+            return null;
+        }
+        const renderType = getRenderType(targetDOMNode);
+        // keep only instances of the same type
+        if (this.lastRenderType && this.lastRenderType !== renderType) {
+            await AbstractRenderer.resetApplications();
+            clearRootHTMLElement(renderType);
+            this.rendererMap.clear();
+        }
+        if (!this.rendererMap.has(targetId)) {
+            this.rendererMap.set(targetId, this.buildRenderer(renderType));
+        }
+        this.lastRenderType = renderType;
+        return this.rendererMap.get(targetId);
+    }
+    buildRenderer(renderType) {
+        if (renderType === 'docs') {
+            return new DocsRenderer();
+        }
+        return new CanvasRenderer();
+    }
+}
+export const getRenderType = (targetDOMNode) => {
+    return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs';
+};
+export function clearRootHTMLElement(renderType) {
+    switch (renderType) {
+        case 'canvas':
+            global.document.getElementById('storybook-docs').innerHTML = '';
+            break;
+        case 'docs':
+            global.document.getElementById('storybook-root').innerHTML = '';
+            break;
+        default:
+            break;
+    }
+}

package/dist/client/angular-beta/RendererFactory.test.mjs

@@ -0,0 +1,233 @@
+// @vitest-environment happy-dom
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { Component, ɵresetJitOptions } from '@angular/core';
+import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { CanvasRenderer } from './CanvasRenderer';
+import { RendererFactory } from './RendererFactory';
+import { DocsRenderer } from './DocsRenderer';
+vi.mock('@angular/platform-browser-dynamic');
+describe('RendererFactory', () => {
+    let rendererFactory;
+    let rootTargetDOMNode;
+    let rootDocstargetDOMNode;
+    beforeEach(async () => {
+        rendererFactory = new RendererFactory();
+        document.body.innerHTML =
+            '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>' +
+                '<div id="storybook-docs"></div>';
+        rootTargetDOMNode = global.document.getElementById('storybook-root');
+        rootDocstargetDOMNode = global.document.getElementById('root-docs');
+        platformBrowserDynamic.mockImplementation(platformBrowserDynamicTesting);
+        vi.spyOn(console, 'log').mockImplementation(() => { });
+        // @ts-expect-error Ignore
+        globalThis.STORYBOOK_ANGULAR_OPTIONS = { experimentalZoneless: false };
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+        // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+        // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+        ɵresetJitOptions();
+    });
+    describe('CanvasRenderer', () => {
+        it('should get CanvasRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            expect(render).toBeInstanceOf(CanvasRenderer);
+        });
+        it('should render my-story for story template', async () => {
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                },
+                forced: false,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
+        });
+        it('should render my-story for story component', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                Component({ selector: 'foo', template: '🦊' })
+            ], FooComponent);
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    props: {},
+                },
+                forced: false,
+                component: FooComponent,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+        });
+        it('should handle circular reference in moduleMetadata', async () => {
+            class Thing {
+                constructor() {
+                    this.token = this;
+                }
+            }
+            const token = new Thing();
+            const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+            await render?.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                    moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
+                },
+                forced: false,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
+        });
+        describe('when forced=true', () => {
+            beforeEach(async () => {
+                // Init first render
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: '{{ logo }}: {{ name }}',
+                        props: {
+                            logo: '🦊',
+                            name: 'Fox',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+            });
+            it('should be rendered a first time', async () => {
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊: Fox');
+            });
+            it('should not be re-rendered when only props change', async () => {
+                // only props change
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {
+                            logo: '👾',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('👾: Fox');
+            });
+            it('should be re-rendered when template change', async () => {
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: '{{ beer }}',
+                        props: {
+                            beer: '🍺',
+                        },
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🍺');
+            });
+        });
+    });
+    describe('DocsRenderer', () => {
+        describe('when canvas render is done before', () => {
+            beforeEach(async () => {
+                // Init first Canvas render
+                const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+                await render?.render({
+                    storyFnAngular: {
+                        template: 'Canvas 🖼',
+                    },
+                    forced: true,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+            });
+            it('should reset root HTML', async () => {
+                global.document
+                    .getElementById('storybook-root')
+                    .appendChild(global.document.createElement('👾'));
+                expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
+                await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+                expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
+            });
+        });
+        it('should get DocsRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+            expect(render).toBeInstanceOf(DocsRenderer);
+        });
+        describe('when multiple story for the same component', () => {
+            it('should render both stories', async () => {
+                let FooComponent = class FooComponent {
+                };
+                FooComponent = __decorate([
+                    Component({ selector: 'foo', template: '🦊' })
+                ], FooComponent);
+                const render = await rendererFactory.getRendererInstance(global.document.getElementById('storybook-docs'));
+                const targetDOMNode1 = global.document.createElement('div');
+                targetDOMNode1.id = 'story-1';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {},
+                    },
+                    forced: false,
+                    component: FooComponent,
+                    targetDOMNode: targetDOMNode1,
+                });
+                const targetDOMNode2 = global.document.createElement('div');
+                targetDOMNode2.id = 'story-1';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
+                await render?.render({
+                    storyFnAngular: {
+                        props: {},
+                    },
+                    forced: false,
+                    component: FooComponent,
+                    targetDOMNode: targetDOMNode2,
+                });
+                expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+                expect(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+            });
+        });
+        describe('when bootstrapping multiple stories in parallel', () => {
+            it('should render both stories', async () => {
+                let FooComponent = class FooComponent {
+                };
+                FooComponent = __decorate([
+                    Component({ selector: 'foo', template: '🦊' })
+                ], FooComponent);
+                const render = await rendererFactory.getRendererInstance(global.document.getElementById('storybook-docs'));
+                const targetDOMNode1 = global.document.createElement('div');
+                targetDOMNode1.id = 'story-1';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
+                const targetDOMNode2 = global.document.createElement('div');
+                targetDOMNode2.id = 'story-2';
+                global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
+                await Promise.all([
+                    render.render({
+                        storyFnAngular: {},
+                        forced: false,
+                        component: FooComponent,
+                        targetDOMNode: targetDOMNode1,
+                    }),
+                    render.render({
+                        storyFnAngular: {},
+                        forced: false,
+                        component: FooComponent,
+                        targetDOMNode: targetDOMNode2,
+                    }),
+                ]);
+                expect(global.document.querySelector('#story-1 > story-1').innerHTML).toBe('<foo>🦊</foo><!--container-->');
+                expect(global.document.querySelector('#story-2 > story-2').innerHTML).toBe('<foo>🦊</foo><!--container-->');
+            });
+        });
+    });
+});

package/dist/client/angular-beta/StorybookModule.mjs

@@ -0,0 +1,23 @@
+import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
+import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
+export const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
+    const { props, styles, moduleMetadata = {} } = storyFnAngular;
+    let { template } = storyFnAngular;
+    const hasTemplate = !hasNoTemplate(template);
+    if (!hasTemplate && component) {
+        template = computesTemplateFromComponent(component, props, '');
+    }
+    /** Create a component that wraps generated template and gives it props */
+    return createStorybookWrapperComponent({
+        moduleMetadata,
+        selector: targetSelector,
+        template,
+        storyComponent: component,
+        styles,
+        initialProps: props,
+        analyzedMetadata,
+    });
+};
+function hasNoTemplate(template) {
+    return template === null || template === undefined;
+}

package/dist/client/angular-beta/StorybookModule.test.mjs

@@ -0,0 +1,319 @@
+// @vitest-environment happy-dom
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { describe, expect, it } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { getApplication } from './StorybookModule';
+import { storyPropsProvider } from './StorybookProvider';
+import { PropertyExtractor } from './utils/PropertyExtractor';
+describe('StorybookModule', () => {
+    describe('getStorybookModuleMetadata', () => {
+        describe('with simple component', () => {
+            let FooComponent = class FooComponent {
+                constructor() {
+                    this.output = new EventEmitter();
+                    this.localOutput = new EventEmitter();
+                    this.localFunction = () => '';
+                    this.setterCallNb = 0;
+                }
+                set setter(value) {
+                    this.setterCallNb += 1;
+                }
+            };
+            __decorate([
+                Input(),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "input", void 0);
+            __decorate([
+                Input('inputBindingPropertyName'),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "localPropertyName", void 0);
+            __decorate([
+                Input(),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [String])
+            ], FooComponent.prototype, "setter", null);
+            __decorate([
+                Output(),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "output", void 0);
+            __decorate([
+                Output('outputBindingPropertyName'),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "localOutput", void 0);
+            FooComponent = __decorate([
+                Component({
+                    selector: 'foo',
+                    template: `
+          <p id="input">{{ input }}</p>
+<p id="inputBindingPropertyName">{{ localPropertyName }}</p>
+<p id="setterCallNb">{{ setterCallNb }}</p>
+<p id="localProperty">{{ localProperty }}</p>
+<p id="localFunction">{{ localFunction() }}</p>
+<p id="output" (click)="output.emit('outputEmitted')"></p>
+<p id="outputBindingPropertyName" (click)="localOutput.emit('outputEmitted')"></p>
+        `,
+                })
+            ], FooComponent);
+            it('should initialize inputs', async () => {
+                const props = {
+                    input: 'input',
+                    inputBindingPropertyName: 'inputBindingPropertyName',
+                    localProperty: 'localProperty',
+                    localFunction: () => 'localFunction',
+                };
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(new BehaviorSubject(props))],
+                });
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(props.input);
+                expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(props.inputBindingPropertyName);
+                expect(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(props.localProperty);
+                expect(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(props.localFunction());
+            });
+            it('should initialize outputs', async () => {
+                let expectedOutputValue;
+                let expectedOutputBindingValue;
+                const props = {
+                    output: (value) => {
+                        expectedOutputValue = value;
+                    },
+                    outputBindingPropertyName: (value) => {
+                        expectedOutputBindingValue = value;
+                    },
+                };
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(new BehaviorSubject(props))],
+                });
+                fixture.detectChanges();
+                fixture.nativeElement.querySelector('p#output').click();
+                fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
+                expect(expectedOutputValue).toEqual('outputEmitted');
+                expect(expectedOutputBindingValue).toEqual('outputEmitted');
+            });
+            it('should change inputs if storyProps$ Subject emit', async () => {
+                const initialProps = {
+                    input: 'input',
+                    inputBindingPropertyName: '',
+                };
+                const storyProps$ = new BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(storyProps$)],
+                });
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
+                expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual('');
+                const newProps = {
+                    input: 'new input',
+                    inputBindingPropertyName: 'new inputBindingPropertyName',
+                    localProperty: 'new localProperty',
+                    localFunction: () => 'new localFunction',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+                expect(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(newProps.inputBindingPropertyName);
+                expect(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(newProps.localProperty);
+                expect(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(newProps.localFunction());
+            });
+            it('should override outputs if storyProps$ Subject emit', async () => {
+                let expectedOutputValue;
+                let expectedOutputBindingValue;
+                const initialProps = {
+                    input: '',
+                    output: (value) => {
+                        expectedOutputValue = value;
+                    },
+                    outputBindingPropertyName: (value) => {
+                        expectedOutputBindingValue = value;
+                    },
+                };
+                const storyProps$ = new BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(storyProps$)],
+                });
+                fixture.detectChanges();
+                const newProps = {
+                    input: 'new input',
+                    output: () => {
+                        expectedOutputValue = 'should be called';
+                    },
+                    outputBindingPropertyName: () => {
+                        expectedOutputBindingValue = 'should be called';
+                    },
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                fixture.nativeElement.querySelector('p#output').click();
+                fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+                expect(expectedOutputValue).toEqual('should be called');
+                expect(expectedOutputBindingValue).toEqual('should be called');
+            });
+            it('should change template inputs if storyProps$ Subject emit', async () => {
+                const initialProps = {
+                    color: 'red',
+                    input: 'input',
+                };
+                const storyProps$ = new BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: {
+                        props: initialProps,
+                        template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
+                    },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(storyProps$)],
+                });
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p').style.color).toEqual('red');
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
+                const newProps = {
+                    color: 'black',
+                    input: 'new input',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p').style.color).toEqual('black');
+                expect(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
+            });
+            it('should call the Input() setter the right number of times', async () => {
+                const initialProps = {
+                    setter: 'init',
+                };
+                const storyProps$ = new BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(storyProps$)],
+                });
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('1');
+                const newProps = {
+                    setter: 'new setter value',
+                };
+                storyProps$.next(newProps);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('2');
+            });
+        });
+        describe('with component without selector', () => {
+            let WithoutSelectorComponent = class WithoutSelectorComponent {
+            };
+            WithoutSelectorComponent = __decorate([
+                Component({
+                    template: `The content`,
+                })
+            ], WithoutSelectorComponent);
+            it('should display the component', async () => {
+                const props = {};
+                const analyzedMetadata = new PropertyExtractor({ entryComponents: [WithoutSelectorComponent] }, WithoutSelectorComponent);
+                await analyzedMetadata.init();
+                const application = getApplication({
+                    storyFnAngular: {
+                        props,
+                        moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
+                    },
+                    component: WithoutSelectorComponent,
+                    targetSelector: 'my-selector',
+                    analyzedMetadata,
+                });
+                const { fixture } = await configureTestingModule({
+                    imports: [application],
+                    providers: [storyPropsProvider(new BehaviorSubject(props))],
+                });
+                fixture.detectChanges();
+                expect(fixture.nativeElement.innerHTML).toContain('The content');
+            });
+        });
+        it('should keep template with an empty value', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                Component({
+                    selector: 'foo',
+                    template: `Should not be displayed`,
+                })
+            ], FooComponent);
+            const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+            await analyzedMetadata.init();
+            const application = getApplication({
+                storyFnAngular: { template: '' },
+                component: FooComponent,
+                targetSelector: 'my-selector',
+                analyzedMetadata,
+            });
+            const { fixture } = await configureTestingModule({
+                imports: [application],
+                providers: [storyPropsProvider(new BehaviorSubject({}))],
+            });
+            fixture.detectChanges();
+            expect(fixture.nativeElement.innerHTML).toEqual('');
+        });
+    });
+    async function configureTestingModule(ngModule) {
+        await TestBed.configureTestingModule(ngModule).compileComponents();
+        const fixture = TestBed.createComponent(ngModule.imports[0]);
+        return {
+            fixture,
+        };
+    }
+});