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

package/dist/{types/client/preview → client}/angular/helpers.d.ts

@@ -1,8 +1,8 @@
-import type { PartialStoryFn } from '@storybook/csf';
-import type { AngularFramework } from '../types-6-0';
+import { PartialStoryFn } from '@storybook/types';
+import { AngularRenderer } from '../types';
 declare global {
     interface Window {
         NODE_ENV: 'string' | 'development' | undefined;
     }
 }
-export declare const renderNgApp: (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => void;
+export declare const renderNgApp: (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => void;

package/dist/{types/client/preview → client}/angular/helpers.js

@@ -4,14 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderNgApp = void 0;
-// @ts-ignore
 const global_1 = __importDefault(require("global"));
 const core_1 = require("@angular/core");
 const forms_1 = require("@angular/forms");
 const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
 const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
-const app_component_1 = require("./components/app.component");
+const app_component_1 = require("./app.component");
 const app_token_1 = require("./app.token");
 const { document } = global_1.default;
 let platform = null;
@@ -111,7 +110,7 @@ const initModule = (storyFn) => {
     };
     return getModule(componentDeclarations, [AnnotatedComponent], [app_component_1.AppComponent], story, moduleMetadata);
 };
-const staticRoot = document.getElementById('root');
+const staticRoot = document.getElementById('storybook-root');
 const insertDynamicRoot = () => {
     const app = document.createElement('storybook-dynamic-app-root');
     staticRoot.innerHTML = '';

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

@@ -1,7 +1,6 @@
 import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
-declare type StoryRenderInfo = {
+import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
+type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;
 };

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

@@ -39,19 +39,6 @@ function getPlatform(newPlatform) {
     return platformRef;
 }
 class AbstractRenderer {
-    constructor(storyId) {
-        this.storyId = storyId;
-        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
-            try {
-                // platform should be set after enableProdMode()
-                (0, core_1.enableProdMode)();
-            }
-            catch (e) {
-                // eslint-disable-next-line no-console
-                console.debug(e);
-            }
-        }
-    }
     /**
      * Wait and destroy the platform
      */
@@ -71,6 +58,19 @@ class AbstractRenderer {
             getPlatform(true);
         });
     }
+    constructor(storyId) {
+        this.storyId = storyId;
+        if (typeof NODE_ENV === 'string' && NODE_ENV !== 'development') {
+            try {
+                // platform should be set after enableProdMode()
+                (0, core_1.enableProdMode)();
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.debug(e);
+            }
+        }
+    }
     /**
      * Bootstrap main angular module with main component or send only new `props` with storyProps$
      *

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

@@ -1,6 +1,5 @@
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
+import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class CanvasRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;

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

@@ -1,6 +1,6 @@
-import type { Type } from '@angular/core';
-import type { ArgTypes } from '@storybook/api';
-import type { ICollection } from '../types';
+import { Type } from '@angular/core';
+import { ArgTypes } from '@storybook/types';
+import { ICollection } from '../types';
 /**
  * Converts a component into a template with inputs/outputs present in initial props
  * @param component

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

@@ -37,9 +37,9 @@ const computesTemplateFromComponent = (component, initialProps, innerTemplate =
 };
 exports.computesTemplateFromComponent = computesTemplateFromComponent;
 const createAngularInputProperty = ({ propertyName, value, argType, }) => {
-    const { name: type = null, summary = null } = argType?.type || {};
-    let templateValue = type === 'enum' && !!summary ? `${summary}.${value}` : value;
-    const actualType = type === 'enum' && summary ? 'enum' : typeof value;
+    const { name: type = null } = (typeof argType?.type === 'object' && argType?.type) || {};
+    let templateValue = type === 'enum' && value;
+    const actualType = type === 'enum' && typeof value;
     const requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
     if (typeof value === 'object') {
         templateValue = propertyName;

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

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

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

@@ -0,0 +1,390 @@
+"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 ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
+const input_component_1 = require("./__testfixtures__/input.component");
+describe('angular source decorator', () => {
+    it('With no props should generate simple tag', () => {
+        const component = input_component_1.InputComponent;
+        const props = {};
+        const argTypes = {};
+        const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+        expect(source).toEqual('<doc-button></doc-button>');
+    });
+    describe('with component without selector', () => {
+        let WithoutSelectorComponent = class WithoutSelectorComponent {
+        };
+        WithoutSelectorComponent = __decorate([
+            (0, core_1.Component)({
+                template: `The content`,
+            })
+        ], WithoutSelectorComponent);
+        it('should add component ng-container', async () => {
+            const component = WithoutSelectorComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<ng-container *ngComponentOutlet="WithoutSelectorComponent"></ng-container>`);
+        });
+    });
+    describe('with component with attribute selector', () => {
+        let WithAttributeComponent = class WithAttributeComponent {
+        };
+        WithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeComponent);
+        it('should add attribute to template', async () => {
+            const component = WithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    describe('with component with attribute and value selector', () => {
+        let WithAttributeValueComponent = class WithAttributeValueComponent {
+        };
+        WithAttributeValueComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeValueComponent);
+        it('should add attribute to template', async () => {
+            const component = WithAttributeValueComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    describe('with component with attribute only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo></div>`);
+        });
+    });
+    describe('with component with void element and attribute selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        it('should create without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<input foo />`);
+        });
+    });
+    describe('with component with attribute and value only selector', () => {
+        let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
+        };
+        WithAttributeOnlyComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], WithAttributeOnlyComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithAttributeOnlyComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo="bar"></div>`);
+        });
+    });
+    describe('with component with void element, attribute and value only selector', () => {
+        let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
+        };
+        VoidElementWithAttributeComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'input[foo="bar"]',
+                template: '<button></button>',
+            })
+        ], VoidElementWithAttributeComponent);
+        it('should create and add attribute to template without separate closing tag', async () => {
+            const component = VoidElementWithAttributeComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<input foo="bar" />`);
+        });
+    });
+    describe('with component with class selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        it('should add class to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button class="foo"></doc-button>`);
+        });
+    });
+    describe('with component with class only selector', () => {
+        let WithClassComponent = class WithClassComponent {
+        };
+        WithClassComponent = __decorate([
+            (0, core_1.Component)({
+                selector: '.foo',
+                template: '<button></button>',
+            })
+        ], WithClassComponent);
+        it('should create a div and add attribute to template', async () => {
+            const component = WithClassComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div class="foo"></div>`);
+        });
+    });
+    describe('with component with multiple selectors', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute and value', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button[foo="bar"], doc-button2',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors including 2 attributes and a class', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: 'doc-button, button[foo], .button[foo], button[baz]',
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `doc-button, 
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+    });
+    describe('with component with multiple selectors starting with attribute only with line breaks', () => {
+        let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
+        };
+        WithMultipleSelectorsComponent = __decorate([
+            (0, core_1.Component)({
+                selector: `[foo], 
+      doc-button2`,
+                template: '<button></button>',
+            })
+        ], WithMultipleSelectorsComponent);
+        it('should use the first selector', async () => {
+            const component = WithMultipleSelectorsComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<div foo></div>`);
+        });
+    });
+    describe('no argTypes', () => {
+        it('should generate tag-only template with no props', () => {
+            const component = input_component_1.InputComponent;
+            const props = {};
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button></doc-button>`);
+        });
+        it('With props should generate tag with properties', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: true,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+                counter: 4,
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [counter]="4" accent="High" [isDisabled]="true" label="Hello world"></doc-button>`);
+        });
+        it('With props should generate tag with outputs', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: true,
+                label: 'Hello world',
+                onClick: ($event) => { },
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [isDisabled]="true" label="Hello world" (onClick)="onClick($event)"></doc-button>`);
+        });
+        it('should generate correct property for overridden name for Input', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                color: '#ffffff',
+            };
+            const argTypes = {};
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button color="#ffffff"></doc-button>`);
+        });
+    });
+    describe('with argTypes (from compodoc)', () => {
+        it('Should handle enum as strongly typed enum', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+            };
+            const argTypes = {
+                accent: {
+                    control: {
+                        options: ['Normal', 'High'],
+                        type: 'radio',
+                    },
+                    defaultValue: undefined,
+                    table: {
+                        category: 'inputs',
+                    },
+                    type: {
+                        name: 'enum',
+                        required: true,
+                        value: [],
+                    },
+                },
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button [accent]="ButtonAccent.High" [isDisabled]="false" label="Hello world"></doc-button>`);
+        });
+        it('Should handle enum without values as string', () => {
+            const component = input_component_1.InputComponent;
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                accent: input_component_1.ButtonAccent.High,
+            };
+            const argTypes = {
+                accent: {
+                    control: {
+                        options: ['Normal', 'High'],
+                        type: 'radio',
+                    },
+                    defaultValue: undefined,
+                    table: {
+                        category: 'inputs',
+                    },
+                    type: {
+                        name: 'object',
+                        required: true,
+                        value: {},
+                    },
+                },
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
+            expect(source).toEqual(`<doc-button accent="High" [isDisabled]="false" label="Hello world"></doc-button>`);
+        });
+        it('Should handle objects correctly', () => {
+            const component = input_component_1.InputComponent;
+            const someDataObject = {
+                one: 'Hello world',
+                two: true,
+                three: ['One', 'Two', 'Three'],
+            };
+            const props = {
+                isDisabled: false,
+                label: 'Hello world',
+                someDataObject,
+            };
+            const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, null);
+            // Ideally we should stringify the object, but that could cause the story to break because of unescaped values in the JSON object.
+            // This will have to do for now
+            expect(source).toEqual(`<doc-button [isDisabled]="false" label="Hello world" [someDataObject]="someDataObject"></doc-button>`);
+        });
+    });
+});

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

@@ -1,6 +1,5 @@
 import { AbstractRenderer } from './AbstractRenderer';
-import { StoryFnAngularReturnType } from '../types';
-import { Parameters } from '../types-6-0';
+import { StoryFnAngularReturnType, Parameters } from '../types';
 export declare class DocsRenderer extends AbstractRenderer {
     render(options: {
         storyFnAngular: StoryFnAngularReturnType;

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

@@ -1,15 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocsRenderer = void 0;
-const addons_1 = require("@storybook/addons");
-const core_events_1 = __importDefault(require("@storybook/core-events"));
+const preview_api_1 = require("@storybook/preview-api");
+const core_events_1 = require("@storybook/core-events");
 const AbstractRenderer_1 = require("./AbstractRenderer");
 class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async render(options) {
-        const channel = addons_1.addons.getChannel();
+        const channel = preview_api_1.addons.getChannel();
         /**
          * Destroy and recreate the PlatformBrowserDynamic of angular
          * For several stories to be rendered in the same docs we should
@@ -20,7 +17,7 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          * rendered in the doc. But one event could be enough for the whole docs
          *
          */
-        channel.once(core_events_1.default.STORY_CHANGED, async () => {
+        channel.once(core_events_1.STORY_CHANGED, async () => {
             await DocsRenderer.resetPlatformBrowserDynamic();
         });
         /**
@@ -28,7 +25,7 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          * when doc re render. Allows to call ngOnDestroy of angular
          * for previous component
          */
-        channel.once(core_events_1.default.DOCS_RENDERED, async () => {
+        channel.once(core_events_1.DOCS_RENDERED, async () => {
             await DocsRenderer.resetPlatformBrowserDynamic();
         });
         await super.render({ ...options, forced: false });

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

@@ -1,5 +1,5 @@
 import { AbstractRenderer } from './AbstractRenderer';
-declare type RenderType = 'canvas' | 'docs';
+type RenderType = 'canvas' | 'docs';
 export declare class RendererFactory {
     private lastRenderType;
     private rendererMap;

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

@@ -37,16 +37,16 @@ class RendererFactory {
 }
 exports.RendererFactory = RendererFactory;
 const getRenderType = (targetDOMNode) => {
-    return targetDOMNode.id === 'root' ? 'canvas' : 'docs';
+    return targetDOMNode.id === 'storybook-root' ? 'canvas' : 'docs';
 };
 exports.getRenderType = getRenderType;
 function clearRootHTMLElement(renderType) {
     switch (renderType) {
         case 'canvas':
-            global.document.getElementById('docs-root').innerHTML = '';
+            global.document.getElementById('storybook-docs').innerHTML = '';
             break;
         case 'docs':
-            global.document.getElementById('root').innerHTML = '';
+            global.document.getElementById('storybook-root').innerHTML = '';
             break;
         default:
             break;

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

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