@storybook/angular 7.0.0-alpha.6 → 7.0.0-alpha.61

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

@@ -0,0 +1,297 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const testing_1 = require("@angular/platform-browser-dynamic/testing");
+const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const CanvasRenderer_1 = require("./CanvasRenderer");
+const RendererFactory_1 = require("./RendererFactory");
+const DocsRenderer_1 = require("./DocsRenderer");
+jest.mock('@angular/platform-browser-dynamic');
+describe('RendererFactory', () => {
+    let rendererFactory;
+    let rootTargetDOMNode;
+    let rootDocstargetDOMNode;
+    beforeEach(async () => {
+        rendererFactory = new RendererFactory_1.RendererFactory();
+        document.body.innerHTML =
+            '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+        rootTargetDOMNode = global.document.getElementById('storybook-root');
+        rootDocstargetDOMNode = global.document.getElementById('root-docs');
+        platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
+        jest.spyOn(console, 'log').mockImplementation(() => { });
+    });
+    afterEach(() => {
+        jest.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
+        (0, core_1.ɵresetJitOptions)();
+    });
+    describe('CanvasRenderer', () => {
+        it('should get CanvasRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            expect(render).toBeInstanceOf(CanvasRenderer_1.CanvasRenderer);
+        });
+        it('should render my-story for story template', async () => {
+            const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            await render.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                },
+                forced: false,
+                parameters: {},
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('🦊');
+        });
+        it('should render my-story for story component', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                (0, core_1.Component)({ selector: 'foo', template: '🦊' })
+            ], FooComponent);
+            const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            await render.render({
+                storyFnAngular: {
+                    props: {},
+                },
+                forced: false,
+                parameters: {},
+                component: FooComponent,
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('my-story')[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('my-story', rootTargetDOMNode);
+            await render.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                    moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
+                },
+                forced: false,
+                parameters: {},
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('🦊');
+        });
+        describe('when forced=true', () => {
+            beforeEach(async () => {
+                // Init first render
+                const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        template: '{{ logo }}: {{ name }}',
+                        props: {
+                            logo: '🦊',
+                            name: 'Fox',
+                        },
+                    },
+                    forced: true,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+            });
+            it('should be rendered a first time', async () => {
+                expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('🦊: Fox');
+            });
+            it('should not be re-rendered when only props change', async () => {
+                let countDestroy = 0;
+                (0, core_1.getPlatform)().onDestroy(() => {
+                    countDestroy += 1;
+                });
+                // only props change
+                const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        props: {
+                            logo: '👾',
+                        },
+                    },
+                    forced: true,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(countDestroy).toEqual(0);
+                expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('👾: Fox');
+            });
+            it('should be re-rendered when template change', async () => {
+                const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        template: '{{ beer }}',
+                        props: {
+                            beer: '🍺',
+                        },
+                    },
+                    forced: true,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('🍺');
+            });
+            it('should be re-rendered when moduleMetadata structure change', async () => {
+                let countDestroy = 0;
+                (0, core_1.getPlatform)().onDestroy(() => {
+                    countDestroy += 1;
+                });
+                // Only props change -> no full rendering
+                const firstRender = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await firstRender.render({
+                    storyFnAngular: {
+                        template: '{{ logo }}: {{ name }}',
+                        props: {
+                            logo: '🍺',
+                            name: 'Beer',
+                        },
+                    },
+                    forced: true,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(countDestroy).toEqual(0);
+                // Change in the module structure -> full rendering
+                const secondRender = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await secondRender.render({
+                    storyFnAngular: {
+                        template: '{{ logo }}: {{ name }}',
+                        props: {
+                            logo: '🍺',
+                            name: 'Beer',
+                        },
+                        moduleMetadata: { providers: [{ provide: 'foo', useValue: 42 }] },
+                    },
+                    forced: true,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(countDestroy).toEqual(1);
+            });
+        });
+        it('should properly destroy angular platform between each render', async () => {
+            let countDestroy = 0;
+            const firstRender = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            await firstRender.render({
+                storyFnAngular: {
+                    template: '🦊',
+                    props: {},
+                },
+                forced: false,
+                parameters: {},
+                targetDOMNode: rootTargetDOMNode,
+            });
+            (0, core_1.getPlatform)().onDestroy(() => {
+                countDestroy += 1;
+            });
+            const secondRender = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            await secondRender.render({
+                storyFnAngular: {
+                    template: '🐻',
+                    props: {},
+                },
+                forced: false,
+                parameters: {},
+                targetDOMNode: rootTargetDOMNode,
+            });
+            expect(countDestroy).toEqual(1);
+        });
+        describe('when story id contains non-Ascii characters', () => {
+            it('should render my-story for story template', async () => {
+                const render = await rendererFactory.getRendererInstance('my-ストーリー', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        template: '🦊',
+                        props: {},
+                    },
+                    forced: false,
+                    parameters: {},
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('sb-my--component')[0].innerHTML).toBe('🦊');
+            });
+            it('should render my-story for story component', async () => {
+                let FooComponent = class FooComponent {
+                };
+                FooComponent = __decorate([
+                    (0, core_1.Component)({ selector: 'foo', template: '🦊' })
+                ], FooComponent);
+                const render = await rendererFactory.getRendererInstance('my-ストーリー', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        props: {},
+                    },
+                    forced: false,
+                    parameters: {},
+                    component: FooComponent,
+                    targetDOMNode: rootTargetDOMNode,
+                });
+                expect(document.body.getElementsByTagName('sb-my--component')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
+            });
+        });
+    });
+    describe('DocsRenderer', () => {
+        describe('when canvas render is done before', () => {
+            beforeEach(async () => {
+                // Init first Canvas render
+                const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+                await render.render({
+                    storyFnAngular: {
+                        template: 'Canvas 🖼',
+                    },
+                    forced: true,
+                    parameters: {},
+                    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('my-story-in-docs', rootDocstargetDOMNode);
+                expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
+            });
+        });
+        it('should get DocsRenderer instance', async () => {
+            const render = await rendererFactory.getRendererInstance('my-story-in-docs', rootDocstargetDOMNode);
+            expect(render).toBeInstanceOf(DocsRenderer_1.DocsRenderer);
+        });
+    });
+    describe('bootstrap module options', () => {
+        async function setupComponentWithWhitespace(bootstrapModuleOptions) {
+            const render = await rendererFactory.getRendererInstance('my-story', rootTargetDOMNode);
+            await render.render({
+                storyFnAngular: {
+                    template: '<div>   </div>',
+                    props: {},
+                },
+                forced: false,
+                parameters: {
+                    bootstrapModuleOptions,
+                },
+                targetDOMNode: rootTargetDOMNode,
+            });
+        }
+        it('should preserve whitespaces', async () => {
+            await setupComponentWithWhitespace({ preserveWhitespaces: true });
+            expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<div>   </div>');
+        });
+        it('should remove whitespaces', async () => {
+            await setupComponentWithWhitespace({ preserveWhitespaces: false });
+            expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<div></div>');
+        });
+    });
+});

package/dist/{types/client/preview → client}/angular-beta/StorybookModule.d.ts

@@ -1,7 +1,7 @@
-import { NgModule, Type } from '@angular/core';
+import { Type, NgModule } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ICollection, StoryFnAngularReturnType } from '../types';
-export declare const getStorybookModuleMetadata: ({ storyFnAngular, component: annotatedComponent, targetSelector, }: {
+export declare const getStorybookModuleMetadata: ({ storyFnAngular, component, targetSelector, }: {
     storyFnAngular: StoryFnAngularReturnType;
     component?: any;
     targetSelector: string;

package/dist/{types/client/preview → client}/angular-beta/StorybookModule.js

@@ -5,39 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createStorybookModule = exports.getStorybookModuleMetadata = void 0;
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
-const ts_dedent_1 = __importDefault(require("ts-dedent"));
-const util_deprecate_1 = __importDefault(require("util-deprecate"));
 const StorybookProvider_1 = require("./StorybookProvider");
 const NgModulesAnalyzer_1 = require("./utils/NgModulesAnalyzer");
 const NgComponentAnalyzer_1 = require("./utils/NgComponentAnalyzer");
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
-const deprecatedStoryComponentWarning = (0, util_deprecate_1.default)(() => { }, (0, ts_dedent_1.default) `\`component\` story return value is deprecated, and will be removed in Storybook 7.0.
-        Instead, use \`export const default = () => ({ component: AppComponent });\`
-        or
-        \`\`\`
-        export const Primary: Story = () => ({});
-        Primary.parameters = { component: AppComponent };
-        \`\`\`
-        Read more at 
-        - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-angular-story-component).
-        - https://storybook.js.org/docs/angular/writing-stories/parameters
-      `);
-const getStorybookModuleMetadata = ({ storyFnAngular, component: annotatedComponent, targetSelector, }, storyProps$) => {
-    const { component: storyComponent, props, styles, moduleMetadata = {} } = storyFnAngular;
+const getStorybookModuleMetadata = ({ storyFnAngular, component, targetSelector, }, storyProps$) => {
+    const { props, styles, moduleMetadata = {} } = storyFnAngular;
     let { template } = storyFnAngular;
-    if (storyComponent) {
-        deprecatedStoryComponentWarning();
-    }
-    const component = storyComponent ?? annotatedComponent;
-    if (hasNoTemplate(template) && component) {
+    const hasTemplate = !hasNoTemplate(template);
+    if (!hasTemplate && component) {
         template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props, '');
     }
     /**

package/dist/client/angular-beta/StorybookModule.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,279 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const testing_1 = require("@angular/core/testing");
+const platform_browser_1 = require("@angular/platform-browser");
+const rxjs_1 = require("rxjs");
+const StorybookModule_1 = require("./StorybookModule");
+describe('StorybookModule', () => {
+    describe('getStorybookModuleMetadata', () => {
+        describe('with simple component', () => {
+            let FooComponent = class FooComponent {
+                constructor() {
+                    this.output = new core_1.EventEmitter();
+                    this.localOutput = new core_1.EventEmitter();
+                    this.localFunction = () => '';
+                    this.setterCallNb = 0;
+                }
+                set setter(value) {
+                    this.setterCallNb += 1;
+                }
+            };
+            __decorate([
+                (0, core_1.Input)(),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "input", void 0);
+            __decorate([
+                (0, core_1.Input)('inputBindingPropertyName'),
+                __metadata("design:type", String)
+            ], FooComponent.prototype, "localPropertyName", void 0);
+            __decorate([
+                (0, core_1.Input)(),
+                __metadata("design:type", String),
+                __metadata("design:paramtypes", [String])
+            ], FooComponent.prototype, "setter", null);
+            __decorate([
+                (0, core_1.Output)(),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "output", void 0);
+            __decorate([
+                (0, core_1.Output)('outputBindingPropertyName'),
+                __metadata("design:type", Object)
+            ], FooComponent.prototype, "localOutput", void 0);
+            FooComponent = __decorate([
+                (0, core_1.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 ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, new rxjs_1.BehaviorSubject(props));
+                const { fixture } = await configureTestingModule(ngModule);
+                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 ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: { props },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, new rxjs_1.BehaviorSubject(props));
+                const { fixture } = await configureTestingModule(ngModule);
+                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 rxjs_1.BehaviorSubject(initialProps);
+                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, storyProps$);
+                const { fixture } = await configureTestingModule(ngModule);
+                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 rxjs_1.BehaviorSubject(initialProps);
+                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, storyProps$);
+                const { fixture } = await configureTestingModule(ngModule);
+                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 rxjs_1.BehaviorSubject(initialProps);
+                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: {
+                        props: initialProps,
+                        template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
+                    },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, storyProps$);
+                const { fixture } = await configureTestingModule(ngModule);
+                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 rxjs_1.BehaviorSubject(initialProps);
+                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: { props: initialProps },
+                    component: FooComponent,
+                    targetSelector: 'my-selector',
+                }, storyProps$);
+                const { fixture } = await configureTestingModule(ngModule);
+                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([
+                (0, core_1.Component)({
+                    template: `The content`,
+                })
+            ], WithoutSelectorComponent);
+            it('should display the component', async () => {
+                const props = {};
+                const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                    storyFnAngular: {
+                        props,
+                        moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
+                    },
+                    component: WithoutSelectorComponent,
+                    targetSelector: 'my-selector',
+                }, new rxjs_1.BehaviorSubject(props));
+                const { fixture } = await configureTestingModule(ngModule);
+                fixture.detectChanges();
+                expect(fixture.nativeElement.innerHTML).toContain('The content');
+            });
+        });
+        it('should keep template with an empty value', async () => {
+            let FooComponent = class FooComponent {
+            };
+            FooComponent = __decorate([
+                (0, core_1.Component)({
+                    selector: 'foo',
+                    template: `Should not be displayed`,
+                })
+            ], FooComponent);
+            const ngModule = (0, StorybookModule_1.getStorybookModuleMetadata)({
+                storyFnAngular: { template: '' },
+                component: FooComponent,
+                targetSelector: 'my-selector',
+            }, new rxjs_1.BehaviorSubject({}));
+            const { fixture } = await configureTestingModule(ngModule);
+            fixture.detectChanges();
+            expect(fixture.nativeElement.innerHTML).toEqual('');
+        });
+    });
+    async function configureTestingModule(ngModule) {
+        await testing_1.TestBed.configureTestingModule({
+            declarations: ngModule.declarations,
+            providers: ngModule.providers,
+        })
+            .overrideModule(platform_browser_1.BrowserModule, {
+            set: {
+                entryComponents: [...ngModule.entryComponents],
+            },
+        })
+            .compileComponents();
+        const fixture = testing_1.TestBed.createComponent(ngModule.bootstrap[0]);
+        return {
+            fixture,
+        };
+    }
+});

package/dist/{types/client/preview → client}/angular-beta/StorybookProvider.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Provider } from '@angular/core';
+import { Provider, InjectionToken } from '@angular/core';
 import { Subject } from 'rxjs';
 import { ICollection } from '../types';
 export declare const STORY_PROPS: InjectionToken<Subject<ICollection>>;

package/dist/{types/client/preview → client}/angular-beta/StorybookWrapperComponent.js

@@ -38,7 +38,6 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
     // storyComponent was not provided.
     const viewChildSelector = storyComponent ?? '__storybook-noop';
     let StorybookWrapperComponent = class StorybookWrapperComponent {
-        // eslint-disable-next-line no-useless-constructor
         constructor(storyProps$, changeDetectorRef) {
             this.storyProps$ = storyProps$;
             this.changeDetectorRef = changeDetectorRef;