@storybook/angular 8.0.0-alpha.8 → 8.0.0-beta.0

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

@@ -7,17 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const core_1 = require("@angular/core");
+const vitest_1 = require("vitest");
 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', () => {
+(0, vitest_1.describe)('angular source decorator', () => {
+    (0, vitest_1.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>');
+        (0, vitest_1.expect)(source).toEqual('<doc-button></doc-button>');
     });
-    describe('with component without selector', () => {
+    (0, vitest_1.describe)('with component without selector', () => {
         let WithoutSelectorComponent = class WithoutSelectorComponent {
         };
         WithoutSelectorComponent = __decorate([
@@ -25,15 +26,15 @@ describe('angular source decorator', () => {
                 template: `The content`,
             })
         ], WithoutSelectorComponent);
-        it('should add component ng-container', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<ng-container *ngComponentOutlet="WithoutSelectorComponent"></ng-container>`);
         });
     });
-    describe('with component with attribute selector', () => {
+    (0, vitest_1.describe)('with component with attribute selector', () => {
         let WithAttributeComponent = class WithAttributeComponent {
         };
         WithAttributeComponent = __decorate([
@@ -42,15 +43,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithAttributeComponent);
-        it('should add attribute to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
         });
     });
-    describe('with component with attribute and value selector', () => {
+    (0, vitest_1.describe)('with component with attribute and value selector', () => {
         let WithAttributeValueComponent = class WithAttributeValueComponent {
         };
         WithAttributeValueComponent = __decorate([
@@ -59,15 +60,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithAttributeValueComponent);
-        it('should add attribute to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
         });
     });
-    describe('with component with attribute only selector', () => {
+    (0, vitest_1.describe)('with component with attribute only selector', () => {
         let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
         };
         WithAttributeOnlyComponent = __decorate([
@@ -76,15 +77,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithAttributeOnlyComponent);
-        it('should create a div and add attribute to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
         });
     });
-    describe('with component with void element and attribute selector', () => {
+    (0, vitest_1.describe)('with component with void element and attribute selector', () => {
         let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
         };
         VoidElementWithAttributeComponent = __decorate([
@@ -93,15 +94,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], VoidElementWithAttributeComponent);
-        it('should create without separate closing tag', async () => {
+        (0, vitest_1.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 />`);
+            (0, vitest_1.expect)(source).toEqual(`<input foo />`);
         });
     });
-    describe('with component with attribute and value only selector', () => {
+    (0, vitest_1.describe)('with component with attribute and value only selector', () => {
         let WithAttributeOnlyComponent = class WithAttributeOnlyComponent {
         };
         WithAttributeOnlyComponent = __decorate([
@@ -110,15 +111,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithAttributeOnlyComponent);
-        it('should create a div and add attribute to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<div foo="bar"></div>`);
         });
     });
-    describe('with component with void element, attribute and value only selector', () => {
+    (0, vitest_1.describe)('with component with void element, attribute and value only selector', () => {
         let VoidElementWithAttributeComponent = class VoidElementWithAttributeComponent {
         };
         VoidElementWithAttributeComponent = __decorate([
@@ -127,15 +128,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], VoidElementWithAttributeComponent);
-        it('should create and add attribute to template without separate closing tag', async () => {
+        (0, vitest_1.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" />`);
+            (0, vitest_1.expect)(source).toEqual(`<input foo="bar" />`);
         });
     });
-    describe('with component with class selector', () => {
+    (0, vitest_1.describe)('with component with class selector', () => {
         let WithClassComponent = class WithClassComponent {
         };
         WithClassComponent = __decorate([
@@ -144,15 +145,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithClassComponent);
-        it('should add class to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button class="foo"></doc-button>`);
         });
     });
-    describe('with component with class only selector', () => {
+    (0, vitest_1.describe)('with component with class only selector', () => {
         let WithClassComponent = class WithClassComponent {
         };
         WithClassComponent = __decorate([
@@ -161,15 +162,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithClassComponent);
-        it('should create a div and add attribute to template', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<div class="foo"></div>`);
         });
     });
-    describe('with component with multiple selectors', () => {
+    (0, vitest_1.describe)('with component with multiple selectors', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -178,15 +179,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
     });
-    describe('with component with multiple selectors starting with attribute', () => {
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -195,15 +196,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo></doc-button>`);
         });
     });
-    describe('with component with multiple selectors starting with attribute and value', () => {
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute and value', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -212,15 +213,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button foo="bar"></doc-button>`);
         });
     });
-    describe('with component with multiple selectors including 2 attributes and a class', () => {
+    (0, vitest_1.describe)('with component with multiple selectors including 2 attributes and a class', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -229,15 +230,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
     });
-    describe('with component with multiple selectors with line breaks', () => {
+    (0, vitest_1.describe)('with component with multiple selectors with line breaks', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -247,15 +248,15 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
     });
-    describe('with component with multiple selectors starting with attribute only with line breaks', () => {
+    (0, vitest_1.describe)('with component with multiple selectors starting with attribute only with line breaks', () => {
         let WithMultipleSelectorsComponent = class WithMultipleSelectorsComponent {
         };
         WithMultipleSelectorsComponent = __decorate([
@@ -265,23 +266,23 @@ describe('angular source decorator', () => {
                 template: '<button></button>',
             })
         ], WithMultipleSelectorsComponent);
-        it('should use the first selector', async () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<div foo></div>`);
         });
     });
-    describe('no argTypes', () => {
-        it('should generate tag-only template with no props', () => {
+    (0, vitest_1.describe)('no argTypes', () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button></doc-button>`);
         });
-        it('With props should generate tag with properties', () => {
+        (0, vitest_1.it)('With props should generate tag with properties', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: true,
@@ -291,9 +292,9 @@ describe('angular source decorator', () => {
             };
             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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [counter]="4" [accent]="'High'" [isDisabled]="true" [label]="'Hello world'"></doc-button>`);
         });
-        it('With props should generate tag with outputs', () => {
+        (0, vitest_1.it)('With props should generate tag with outputs', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: true,
@@ -302,20 +303,20 @@ describe('angular source decorator', () => {
             };
             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>`);
+            (0, vitest_1.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', () => {
+        (0, vitest_1.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>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [color]="'#ffffff'"></doc-button>`);
         });
     });
-    describe('with argTypes (from compodoc)', () => {
-        it('Should handle enum as strongly typed enum', () => {
+    (0, vitest_1.describe)('with argTypes (from compodoc)', () => {
+        (0, vitest_1.it)('Should handle enum as strongly typed enum', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -340,9 +341,9 @@ describe('angular source decorator', () => {
                 },
             };
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        it('Should handle enum without values as string', () => {
+        (0, vitest_1.it)('Should handle enum without values as string', () => {
             const component = input_component_1.InputComponent;
             const props = {
                 isDisabled: false,
@@ -367,9 +368,9 @@ describe('angular source decorator', () => {
                 },
             };
             const source = (0, ComputesTemplateFromComponent_1.computesTemplateSourceFromComponent)(component, props, argTypes);
-            expect(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [accent]="'High'" [isDisabled]="false" [label]="'Hello world'"></doc-button>`);
         });
-        it('Should handle objects correctly', () => {
+        (0, vitest_1.it)('Should handle objects correctly', () => {
             const component = input_component_1.InputComponent;
             const someDataObject = {
                 one: 'Hello world',
@@ -383,9 +384,7 @@ describe('angular source decorator', () => {
                     'a single quoted string with escaped \'single quotes\'',
                     // eslint-disable-next-line prettier/prettier
                     "a double quoted string with escaped \"double quotes\"",
-                    // eslint-disable-next-line no-useless-escape
                     `a string literal with \'escaped single quotes\'`,
-                    // eslint-disable-next-line no-useless-escape
                     `a string literal with \"escaped double quotes\"`,
                 ],
             };
@@ -397,7 +396,7 @@ describe('angular source decorator', () => {
             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]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\'']}"></doc-button>`);
+            (0, vitest_1.expect)(source).toEqual(`<doc-button [isDisabled]="false" [label]="'Hello world'" [someDataObject]="{one: 'Hello world', two: true, three: ['a string literal with \\'double quotes\\'', 'a string literal with \\'single quotes\\'', 'a single quoted string with \\'double quotes\\'', 'a double quoted string with \\'single quotes\\'', 'a single quoted string with escaped \\'single quotes\\'', 'a double quoted string with escaped \\'double quotes\\'', 'a string literal with \\'escaped single quotes\\'', 'a string literal with \\'escaped double quotes\\'']}"></doc-button>`);
         });
     });
 });

package/dist/client/angular-beta/DocsRenderer.d.ts

@@ -9,6 +9,5 @@ export declare class DocsRenderer extends AbstractRenderer {
         targetDOMNode: HTMLElement;
     }): Promise<void>;
     beforeFullRender(domNode?: HTMLElement): Promise<void>;
-    afterFullRender(): Promise<void>;
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
 }

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

@@ -34,9 +34,6 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
     async beforeFullRender(domNode) {
         DocsRenderer.resetApplications(domNode);
     }
-    async afterFullRender() {
-        await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
-    }
     initAngularRootElement(targetDOMNode, targetSelector) {
         super.initAngularRootElement(targetDOMNode, targetSelector);
         targetDOMNode.setAttribute(AbstractRenderer_1.STORY_UID_ATTRIBUTE, (0, StoryUID_1.getNextStoryUID)(targetDOMNode.id));

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

@@ -18,7 +18,6 @@ vitest_1.vi.mock('@angular/platform-browser-dynamic');
     let rendererFactory;
     let rootTargetDOMNode;
     let rootDocstargetDOMNode;
-    let storyInDocstargetDOMNode;
     (0, vitest_1.beforeEach)(async () => {
         rendererFactory = new RendererFactory_1.RendererFactory();
         document.body.innerHTML =
@@ -29,7 +28,7 @@ vitest_1.vi.mock('@angular/platform-browser-dynamic');
         platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
         vitest_1.vi.spyOn(console, 'log').mockImplementation(() => { });
     });
-    afterEach(() => {
+    (0, vitest_1.afterEach)(() => {
         vitest_1.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
@@ -197,5 +196,37 @@ vitest_1.vi.mock('@angular/platform-browser-dynamic');
                 (0, vitest_1.expect)(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe('<foo>🦊</foo><!--container-->');
             });
         });
+        (0, vitest_1.describe)('when bootstrapping multiple stories in parallel', () => {
+            (0, vitest_1.it)('should render both stories', async () => {
+                let FooComponent = class FooComponent {
+                };
+                FooComponent = __decorate([
+                    (0, core_1.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,
+                    }),
+                ]);
+                (0, vitest_1.expect)(global.document.querySelector('#story-1 > story-1').innerHTML).toBe('<foo>🦊</foo><!--container-->');
+                (0, vitest_1.expect)(global.document.querySelector('#story-2 > story-2').innerHTML).toBe('<foo>🦊</foo><!--container-->');
+            });
+        });
     });
 });