@storybook/angular 9.1.0-alpha.6 → 9.1.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build-schema.json +199 -0
- package/builders.json +14 -0
- package/dist/builders/build-storybook/index.js +31 -83
- package/dist/builders/start-storybook/index.js +31 -104
- package/dist/chunk-CUDJAP6K.mjs +3 -0
- package/dist/chunk-KMSSK3DZ.mjs +6 -0
- package/dist/chunk-LXSTVAFF.mjs +40 -0
- package/dist/client/config.d.ts +20 -6
- package/dist/client/config.js +49 -20
- package/dist/client/config.mjs +10 -13
- package/dist/client/docs/config.d.ts +6 -3
- package/dist/client/docs/config.js +18 -14
- package/dist/client/docs/config.mjs +6 -10
- package/dist/client/index.d.ts +144 -6
- package/dist/client/index.js +47 -30
- package/dist/client/index.mjs +3 -9
- package/dist/client/preview-prod.d.ts +2 -1
- package/dist/client/preview-prod.js +5 -4
- package/dist/client/preview-prod.mjs +1 -0
- package/dist/index.d.ts +59 -2
- package/dist/index.js +47 -29
- package/dist/index.mjs +3 -13
- package/dist/preset.js +8 -38
- package/dist/server/framework-preset-angular-cli.js +20 -84
- package/dist/server/framework-preset-angular-ivy.js +6 -59
- package/dist/{client/types.d.ts → types-3b0b7107.d.ts} +9 -9
- package/package.json +59 -12
- package/start-schema.json +234 -0
- package/dist/builders/build-storybook/index.d.ts +0 -25
- package/dist/builders/build-storybook/index.mjs +0 -81
- package/dist/builders/build-storybook/index.spec.d.ts +0 -1
- package/dist/builders/build-storybook/index.spec.js +0 -222
- package/dist/builders/build-storybook/index.spec.mjs +0 -187
- package/dist/builders/build-storybook/schema.json +0 -199
- package/dist/builders/builders.json +0 -14
- package/dist/builders/start-storybook/index.d.ts +0 -21
- package/dist/builders/start-storybook/index.mjs +0 -102
- package/dist/builders/start-storybook/index.spec.d.ts +0 -1
- package/dist/builders/start-storybook/index.spec.js +0 -188
- package/dist/builders/start-storybook/index.spec.mjs +0 -186
- package/dist/builders/start-storybook/schema.json +0 -234
- package/dist/builders/utils/error-handler.d.ts +0 -2
- package/dist/builders/utils/error-handler.js +0 -38
- package/dist/builders/utils/error-handler.mjs +0 -33
- package/dist/builders/utils/run-compodoc.d.ts +0 -6
- package/dist/builders/utils/run-compodoc.js +0 -35
- package/dist/builders/utils/run-compodoc.mjs +0 -31
- package/dist/builders/utils/run-compodoc.spec.d.ts +0 -1
- package/dist/builders/utils/run-compodoc.spec.js +0 -76
- package/dist/builders/utils/run-compodoc.spec.mjs +0 -74
- package/dist/builders/utils/standalone-options.d.ts +0 -18
- package/dist/builders/utils/standalone-options.js +0 -2
- package/dist/builders/utils/standalone-options.mjs +0 -1
- package/dist/client/angular-beta/AbstractRenderer.d.ts +0 -75
- package/dist/client/angular-beta/AbstractRenderer.js +0 -201
- package/dist/client/angular-beta/AbstractRenderer.mjs +0 -164
- package/dist/client/angular-beta/CanvasRenderer.d.ts +0 -12
- package/dist/client/angular-beta/CanvasRenderer.js +0 -13
- package/dist/client/angular-beta/CanvasRenderer.mjs +0 -9
- package/dist/client/angular-beta/ComputesTemplateFromComponent.d.ts +0 -24
- package/dist/client/angular-beta/ComputesTemplateFromComponent.js +0 -160
- package/dist/client/angular-beta/ComputesTemplateFromComponent.mjs +0 -154
- package/dist/client/angular-beta/ComputesTemplateFromComponent.test.d.ts +0 -1
- package/dist/client/angular-beta/ComputesTemplateFromComponent.test.js +0 -730
- package/dist/client/angular-beta/ComputesTemplateFromComponent.test.mjs +0 -728
- package/dist/client/angular-beta/DocsRenderer.d.ts +0 -13
- package/dist/client/angular-beta/DocsRenderer.js +0 -39
- package/dist/client/angular-beta/DocsRenderer.mjs +0 -35
- package/dist/client/angular-beta/RendererFactory.d.ts +0 -11
- package/dist/client/angular-beta/RendererFactory.js +0 -56
- package/dist/client/angular-beta/RendererFactory.mjs +0 -50
- package/dist/client/angular-beta/RendererFactory.test.d.ts +0 -1
- package/dist/client/angular-beta/RendererFactory.test.js +0 -235
- package/dist/client/angular-beta/RendererFactory.test.mjs +0 -233
- package/dist/client/angular-beta/StorybookModule.d.ts +0 -8
- package/dist/client/angular-beta/StorybookModule.js +0 -27
- package/dist/client/angular-beta/StorybookModule.mjs +0 -23
- package/dist/client/angular-beta/StorybookModule.test.d.ts +0 -1
- package/dist/client/angular-beta/StorybookModule.test.js +0 -321
- package/dist/client/angular-beta/StorybookModule.test.mjs +0 -319
- package/dist/client/angular-beta/StorybookProvider.d.ts +0 -5
- package/dist/client/angular-beta/StorybookProvider.js +0 -26
- package/dist/client/angular-beta/StorybookProvider.mjs +0 -22
- package/dist/client/angular-beta/StorybookWrapperComponent.d.ts +0 -13
- package/dist/client/angular-beta/StorybookWrapperComponent.js +0 -127
- package/dist/client/angular-beta/StorybookWrapperComponent.mjs +0 -123
- package/dist/client/angular-beta/__testfixtures__/input.component.d.ts +0 -29
- package/dist/client/angular-beta/__testfixtures__/input.component.js +0 -76
- package/dist/client/angular-beta/__testfixtures__/input.component.mjs +0 -73
- package/dist/client/angular-beta/__testfixtures__/test.module.d.ts +0 -2
- package/dist/client/angular-beta/__testfixtures__/test.module.js +0 -20
- package/dist/client/angular-beta/__testfixtures__/test.module.mjs +0 -17
- package/dist/client/angular-beta/utils/BootstrapQueue.d.ts +0 -12
- package/dist/client/angular-beta/utils/BootstrapQueue.js +0 -86
- package/dist/client/angular-beta/utils/BootstrapQueue.mjs +0 -49
- package/dist/client/angular-beta/utils/BootstrapQueue.test.d.ts +0 -1
- package/dist/client/angular-beta/utils/BootstrapQueue.test.js +0 -164
- package/dist/client/angular-beta/utils/BootstrapQueue.test.mjs +0 -162
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.d.ts +0 -22
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.js +0 -93
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.mjs +0 -84
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.d.ts +0 -1
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.js +0 -388
- package/dist/client/angular-beta/utils/NgComponentAnalyzer.test.mjs +0 -386
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.d.ts +0 -6
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.js +0 -41
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.mjs +0 -37
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.test.d.ts +0 -1
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.test.js +0 -24
- package/dist/client/angular-beta/utils/NgModulesAnalyzer.test.mjs +0 -22
- package/dist/client/angular-beta/utils/PropertyExtractor.d.ts +0 -30
- package/dist/client/angular-beta/utils/PropertyExtractor.js +0 -196
- package/dist/client/angular-beta/utils/PropertyExtractor.mjs +0 -158
- package/dist/client/angular-beta/utils/PropertyExtractor.test.d.ts +0 -1
- package/dist/client/angular-beta/utils/PropertyExtractor.test.js +0 -177
- package/dist/client/angular-beta/utils/PropertyExtractor.test.mjs +0 -175
- package/dist/client/angular-beta/utils/StoryUID.d.ts +0 -22
- package/dist/client/angular-beta/utils/StoryUID.js +0 -43
- package/dist/client/angular-beta/utils/StoryUID.mjs +0 -38
- package/dist/client/argsToTemplate.d.ts +0 -56
- package/dist/client/argsToTemplate.js +0 -58
- package/dist/client/argsToTemplate.mjs +0 -55
- package/dist/client/argsToTemplate.test.d.ts +0 -1
- package/dist/client/argsToTemplate.test.js +0 -102
- package/dist/client/argsToTemplate.test.mjs +0 -100
- package/dist/client/compodoc-types.d.ts +0 -102
- package/dist/client/compodoc-types.js +0 -2
- package/dist/client/compodoc-types.mjs +0 -1
- package/dist/client/compodoc.d.ts +0 -12
- package/dist/client/compodoc.js +0 -261
- package/dist/client/compodoc.mjs +0 -248
- package/dist/client/compodoc.test.d.ts +0 -1
- package/dist/client/compodoc.test.js +0 -132
- package/dist/client/compodoc.test.mjs +0 -130
- package/dist/client/decorateStory.d.ts +0 -4
- package/dist/client/decorateStory.js +0 -48
- package/dist/client/decorateStory.mjs +0 -45
- package/dist/client/decorateStory.test.d.ts +0 -1
- package/dist/client/decorateStory.test.js +0 -306
- package/dist/client/decorateStory.test.mjs +0 -301
- package/dist/client/decorators.d.ts +0 -13
- package/dist/client/decorators.js +0 -69
- package/dist/client/decorators.mjs +0 -63
- package/dist/client/decorators.test.d.ts +0 -1
- package/dist/client/decorators.test.js +0 -159
- package/dist/client/decorators.test.mjs +0 -157
- package/dist/client/docs/__testfixtures__/doc-button/input.d.ts +0 -110
- package/dist/client/docs/__testfixtures__/doc-button/input.js +0 -204
- package/dist/client/docs/__testfixtures__/doc-button/input.mjs +0 -201
- package/dist/client/docs/__testfixtures__/doc-button/tsconfig.json +0 -7
- package/dist/client/docs/angular-properties.test.d.ts +0 -1
- package/dist/client/docs/angular-properties.test.js +0 -36
- package/dist/client/docs/angular-properties.test.mjs +0 -34
- package/dist/client/docs/sourceDecorator.d.ts +0 -10
- package/dist/client/docs/sourceDecorator.js +0 -53
- package/dist/client/docs/sourceDecorator.mjs +0 -48
- package/dist/client/globals.d.ts +0 -1
- package/dist/client/globals.js +0 -33
- package/dist/client/globals.mjs +0 -31
- package/dist/client/portable-stories.d.ts +0 -23
- package/dist/client/portable-stories.js +0 -62
- package/dist/client/portable-stories.mjs +0 -26
- package/dist/client/public-types.d.ts +0 -54
- package/dist/client/public-types.js +0 -2
- package/dist/client/public-types.mjs +0 -1
- package/dist/client/render.d.ts +0 -7
- package/dist/client/render.js +0 -19
- package/dist/client/render.mjs +0 -14
- package/dist/client/types.js +0 -2
- package/dist/client/types.mjs +0 -1
- package/dist/node/index.d.ts +0 -2
- package/dist/node/index.js +0 -6
- package/dist/node/index.mjs +0 -3
- package/dist/preset.d.ts +0 -5
- package/dist/preset.mjs +0 -34
- package/dist/renderer.d.ts +0 -6
- package/dist/renderer.js +0 -15
- package/dist/renderer.mjs +0 -6
- package/dist/server/__mocks-ng-workspace__/empty-projects-entry/angular.json +0 -4
- package/dist/server/__mocks-ng-workspace__/minimal-config/angular.json +0 -18
- package/dist/server/__mocks-ng-workspace__/minimal-config/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/minimal-config/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/minimal-config/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/minimal-config/src/tsconfig.app.json +0 -9
- package/dist/server/__mocks-ng-workspace__/minimal-config/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/some-config/angular.json +0 -19
- package/dist/server/__mocks-ng-workspace__/some-config/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/some-config/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/some-config/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/some-config/src/tsconfig.app.json +0 -9
- package/dist/server/__mocks-ng-workspace__/some-config/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/angular.json +0 -64
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/src/tsconfig.app.json +0 -9
- package/dist/server/__mocks-ng-workspace__/with-angularBrowserTarget/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/with-lib/angular.json +0 -28
- package/dist/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/with-lib/projects/pattern-lib/tsconfig.lib.json +0 -20
- package/dist/server/__mocks-ng-workspace__/with-lib/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/with-nx/angular.json +0 -18
- package/dist/server/__mocks-ng-workspace__/with-nx/nx.json +0 -3
- package/dist/server/__mocks-ng-workspace__/with-nx/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/with-nx/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/with-nx/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/with-nx/src/tsconfig.app.json +0 -8
- package/dist/server/__mocks-ng-workspace__/with-nx/tsconfig.json +0 -14
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/nx.json +0 -3
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/src/tsconfig.app.json +0 -8
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/tsconfig.json +0 -14
- package/dist/server/__mocks-ng-workspace__/with-nx-workspace/workspace.json +0 -18
- package/dist/server/__mocks-ng-workspace__/with-options-styles/angular.json +0 -18
- package/dist/server/__mocks-ng-workspace__/with-options-styles/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/with-options-styles/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/with-options-styles/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/with-options-styles/src/tsconfig.app.json +0 -9
- package/dist/server/__mocks-ng-workspace__/with-options-styles/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/without-architect-build/angular.json +0 -5
- package/dist/server/__mocks-ng-workspace__/without-architect-build-options/angular.json +0 -11
- package/dist/server/__mocks-ng-workspace__/without-compatible-projects/angular.json +0 -7
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/angular.json +0 -3
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/projects/pattern-lib/tsconfig.lib.json +0 -20
- package/dist/server/__mocks-ng-workspace__/without-projects-entry/tsconfig.json +0 -13
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/angular.json +0 -16
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/src/main.d.ts +0 -1
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/src/main.js +0 -5
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/src/main.mjs +0 -2
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/src/tsconfig.app.json +0 -9
- package/dist/server/__mocks-ng-workspace__/without-tsConfig/tsconfig.json +0 -13
- package/dist/server/__tests__/angular.json +0 -96
- package/dist/server/angular-cli-webpack.d.ts +0 -1
- package/dist/server/angular-cli-webpack.js +0 -80
- package/dist/server/angular-cli-webpack.mjs +0 -80
- package/dist/server/framework-preset-angular-cli.d.ts +0 -3
- package/dist/server/framework-preset-angular-cli.mjs +0 -82
- package/dist/server/framework-preset-angular-ivy.d.ts +0 -10
- package/dist/server/framework-preset-angular-ivy.mjs +0 -56
- package/dist/server/plugins/storybook-normalize-angular-entry-plugin.d.ts +0 -12
- package/dist/server/plugins/storybook-normalize-angular-entry-plugin.js +0 -55
- package/dist/server/plugins/storybook-normalize-angular-entry-plugin.mjs +0 -52
- package/dist/server/preset-options.d.ts +0 -9
- package/dist/server/preset-options.js +0 -2
- package/dist/server/preset-options.mjs +0 -1
- package/dist/server/utils/filter-out-styling-rules.d.ts +0 -2
- package/dist/server/utils/filter-out-styling-rules.js +0 -17
- package/dist/server/utils/filter-out-styling-rules.mjs +0 -13
- package/dist/server/utils/module-is-available.d.ts +0 -1
- package/dist/server/utils/module-is-available.js +0 -13
- package/dist/server/utils/module-is-available.mjs +0 -9
- package/dist/test-setup.d.ts +0 -1
- package/dist/test-setup.js +0 -6
- package/dist/test-setup.mjs +0 -4
- package/dist/types.d.ts +0 -27
- package/dist/types.js +0 -2
- package/dist/types.mjs +0 -1
- package/scripts/postbuild.js +0 -17
- package/template/cli/.eslintrc.json +0 -5
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
// @vitest-environment happy-dom
|
|
2
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
-
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;
|
|
6
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
-
};
|
|
8
|
-
import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
|
|
9
|
-
import { Component, ɵresetJitOptions } from '@angular/core';
|
|
10
|
-
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
|
|
11
|
-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
12
|
-
import { CanvasRenderer } from './CanvasRenderer';
|
|
13
|
-
import { RendererFactory } from './RendererFactory';
|
|
14
|
-
import { DocsRenderer } from './DocsRenderer';
|
|
15
|
-
vi.mock('@angular/platform-browser-dynamic');
|
|
16
|
-
describe('RendererFactory', () => {
|
|
17
|
-
let rendererFactory;
|
|
18
|
-
let rootTargetDOMNode;
|
|
19
|
-
let rootDocstargetDOMNode;
|
|
20
|
-
beforeEach(async () => {
|
|
21
|
-
rendererFactory = new RendererFactory();
|
|
22
|
-
document.body.innerHTML =
|
|
23
|
-
'<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>' +
|
|
24
|
-
'<div id="storybook-docs"></div>';
|
|
25
|
-
rootTargetDOMNode = global.document.getElementById('storybook-root');
|
|
26
|
-
rootDocstargetDOMNode = global.document.getElementById('root-docs');
|
|
27
|
-
platformBrowserDynamic.mockImplementation(platformBrowserDynamicTesting);
|
|
28
|
-
vi.spyOn(console, 'log').mockImplementation(() => { });
|
|
29
|
-
// @ts-expect-error Ignore
|
|
30
|
-
globalThis.STORYBOOK_ANGULAR_OPTIONS = { experimentalZoneless: false };
|
|
31
|
-
});
|
|
32
|
-
afterEach(() => {
|
|
33
|
-
vi.clearAllMocks();
|
|
34
|
-
// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
|
|
35
|
-
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
|
|
36
|
-
ɵresetJitOptions();
|
|
37
|
-
});
|
|
38
|
-
describe('CanvasRenderer', () => {
|
|
39
|
-
it('should get CanvasRenderer instance', async () => {
|
|
40
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
41
|
-
expect(render).toBeInstanceOf(CanvasRenderer);
|
|
42
|
-
});
|
|
43
|
-
it('should render my-story for story template', async () => {
|
|
44
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
45
|
-
await render?.render({
|
|
46
|
-
storyFnAngular: {
|
|
47
|
-
template: '🦊',
|
|
48
|
-
props: {},
|
|
49
|
-
},
|
|
50
|
-
forced: false,
|
|
51
|
-
targetDOMNode: rootTargetDOMNode,
|
|
52
|
-
});
|
|
53
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
|
|
54
|
-
});
|
|
55
|
-
it('should render my-story for story component', async () => {
|
|
56
|
-
let FooComponent = class FooComponent {
|
|
57
|
-
};
|
|
58
|
-
FooComponent = __decorate([
|
|
59
|
-
Component({ selector: 'foo', template: '🦊' })
|
|
60
|
-
], FooComponent);
|
|
61
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
62
|
-
await render?.render({
|
|
63
|
-
storyFnAngular: {
|
|
64
|
-
props: {},
|
|
65
|
-
},
|
|
66
|
-
forced: false,
|
|
67
|
-
component: FooComponent,
|
|
68
|
-
targetDOMNode: rootTargetDOMNode,
|
|
69
|
-
});
|
|
70
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
|
|
71
|
-
});
|
|
72
|
-
it('should handle circular reference in moduleMetadata', async () => {
|
|
73
|
-
class Thing {
|
|
74
|
-
constructor() {
|
|
75
|
-
this.token = this;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
const token = new Thing();
|
|
79
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
80
|
-
await render?.render({
|
|
81
|
-
storyFnAngular: {
|
|
82
|
-
template: '🦊',
|
|
83
|
-
props: {},
|
|
84
|
-
moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
|
|
85
|
-
},
|
|
86
|
-
forced: false,
|
|
87
|
-
targetDOMNode: rootTargetDOMNode,
|
|
88
|
-
});
|
|
89
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
|
|
90
|
-
});
|
|
91
|
-
describe('when forced=true', () => {
|
|
92
|
-
beforeEach(async () => {
|
|
93
|
-
// Init first render
|
|
94
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
95
|
-
await render?.render({
|
|
96
|
-
storyFnAngular: {
|
|
97
|
-
template: '{{ logo }}: {{ name }}',
|
|
98
|
-
props: {
|
|
99
|
-
logo: '🦊',
|
|
100
|
-
name: 'Fox',
|
|
101
|
-
},
|
|
102
|
-
},
|
|
103
|
-
forced: true,
|
|
104
|
-
targetDOMNode: rootTargetDOMNode,
|
|
105
|
-
});
|
|
106
|
-
});
|
|
107
|
-
it('should be rendered a first time', async () => {
|
|
108
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊: Fox');
|
|
109
|
-
});
|
|
110
|
-
it('should not be re-rendered when only props change', async () => {
|
|
111
|
-
// only props change
|
|
112
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
113
|
-
await render?.render({
|
|
114
|
-
storyFnAngular: {
|
|
115
|
-
props: {
|
|
116
|
-
logo: '👾',
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
forced: true,
|
|
120
|
-
targetDOMNode: rootTargetDOMNode,
|
|
121
|
-
});
|
|
122
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('👾: Fox');
|
|
123
|
-
});
|
|
124
|
-
it('should be re-rendered when template change', async () => {
|
|
125
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
126
|
-
await render?.render({
|
|
127
|
-
storyFnAngular: {
|
|
128
|
-
template: '{{ beer }}',
|
|
129
|
-
props: {
|
|
130
|
-
beer: '🍺',
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
|
-
forced: true,
|
|
134
|
-
targetDOMNode: rootTargetDOMNode,
|
|
135
|
-
});
|
|
136
|
-
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🍺');
|
|
137
|
-
});
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
describe('DocsRenderer', () => {
|
|
141
|
-
describe('when canvas render is done before', () => {
|
|
142
|
-
beforeEach(async () => {
|
|
143
|
-
// Init first Canvas render
|
|
144
|
-
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
|
|
145
|
-
await render?.render({
|
|
146
|
-
storyFnAngular: {
|
|
147
|
-
template: 'Canvas 🖼',
|
|
148
|
-
},
|
|
149
|
-
forced: true,
|
|
150
|
-
targetDOMNode: rootTargetDOMNode,
|
|
151
|
-
});
|
|
152
|
-
});
|
|
153
|
-
it('should reset root HTML', async () => {
|
|
154
|
-
global.document
|
|
155
|
-
.getElementById('storybook-root')
|
|
156
|
-
.appendChild(global.document.createElement('👾'));
|
|
157
|
-
expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
|
|
158
|
-
await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
|
|
159
|
-
expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
|
|
160
|
-
});
|
|
161
|
-
});
|
|
162
|
-
it('should get DocsRenderer instance', async () => {
|
|
163
|
-
const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
|
|
164
|
-
expect(render).toBeInstanceOf(DocsRenderer);
|
|
165
|
-
});
|
|
166
|
-
describe('when multiple story for the same component', () => {
|
|
167
|
-
it('should render both stories', async () => {
|
|
168
|
-
let FooComponent = class FooComponent {
|
|
169
|
-
};
|
|
170
|
-
FooComponent = __decorate([
|
|
171
|
-
Component({ selector: 'foo', template: '🦊' })
|
|
172
|
-
], FooComponent);
|
|
173
|
-
const render = await rendererFactory.getRendererInstance(global.document.getElementById('storybook-docs'));
|
|
174
|
-
const targetDOMNode1 = global.document.createElement('div');
|
|
175
|
-
targetDOMNode1.id = 'story-1';
|
|
176
|
-
global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
|
|
177
|
-
await render?.render({
|
|
178
|
-
storyFnAngular: {
|
|
179
|
-
props: {},
|
|
180
|
-
},
|
|
181
|
-
forced: false,
|
|
182
|
-
component: FooComponent,
|
|
183
|
-
targetDOMNode: targetDOMNode1,
|
|
184
|
-
});
|
|
185
|
-
const targetDOMNode2 = global.document.createElement('div');
|
|
186
|
-
targetDOMNode2.id = 'story-1';
|
|
187
|
-
global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
|
|
188
|
-
await render?.render({
|
|
189
|
-
storyFnAngular: {
|
|
190
|
-
props: {},
|
|
191
|
-
},
|
|
192
|
-
forced: false,
|
|
193
|
-
component: FooComponent,
|
|
194
|
-
targetDOMNode: targetDOMNode2,
|
|
195
|
-
});
|
|
196
|
-
expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
|
|
197
|
-
expect(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe('<foo>🦊</foo><!--container-->');
|
|
198
|
-
});
|
|
199
|
-
});
|
|
200
|
-
describe('when bootstrapping multiple stories in parallel', () => {
|
|
201
|
-
it('should render both stories', async () => {
|
|
202
|
-
let FooComponent = class FooComponent {
|
|
203
|
-
};
|
|
204
|
-
FooComponent = __decorate([
|
|
205
|
-
Component({ selector: 'foo', template: '🦊' })
|
|
206
|
-
], FooComponent);
|
|
207
|
-
const render = await rendererFactory.getRendererInstance(global.document.getElementById('storybook-docs'));
|
|
208
|
-
const targetDOMNode1 = global.document.createElement('div');
|
|
209
|
-
targetDOMNode1.id = 'story-1';
|
|
210
|
-
global.document.getElementById('storybook-docs').appendChild(targetDOMNode1);
|
|
211
|
-
const targetDOMNode2 = global.document.createElement('div');
|
|
212
|
-
targetDOMNode2.id = 'story-2';
|
|
213
|
-
global.document.getElementById('storybook-docs').appendChild(targetDOMNode2);
|
|
214
|
-
await Promise.all([
|
|
215
|
-
render.render({
|
|
216
|
-
storyFnAngular: {},
|
|
217
|
-
forced: false,
|
|
218
|
-
component: FooComponent,
|
|
219
|
-
targetDOMNode: targetDOMNode1,
|
|
220
|
-
}),
|
|
221
|
-
render.render({
|
|
222
|
-
storyFnAngular: {},
|
|
223
|
-
forced: false,
|
|
224
|
-
component: FooComponent,
|
|
225
|
-
targetDOMNode: targetDOMNode2,
|
|
226
|
-
}),
|
|
227
|
-
]);
|
|
228
|
-
expect(global.document.querySelector('#story-1 > story-1').innerHTML).toBe('<foo>🦊</foo><!--container-->');
|
|
229
|
-
expect(global.document.querySelector('#story-2 > story-2').innerHTML).toBe('<foo>🦊</foo><!--container-->');
|
|
230
|
-
});
|
|
231
|
-
});
|
|
232
|
-
});
|
|
233
|
-
});
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { StoryFnAngularReturnType } from '../types';
|
|
2
|
-
import { PropertyExtractor } from './utils/PropertyExtractor';
|
|
3
|
-
export declare const getApplication: ({ storyFnAngular, component, targetSelector, analyzedMetadata, }: {
|
|
4
|
-
storyFnAngular: StoryFnAngularReturnType;
|
|
5
|
-
component?: any;
|
|
6
|
-
targetSelector: string;
|
|
7
|
-
analyzedMetadata: PropertyExtractor;
|
|
8
|
-
}) => import("@angular/core").Type<any>;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getApplication = void 0;
|
|
4
|
-
const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
|
|
5
|
-
const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
|
|
6
|
-
const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
|
|
7
|
-
const { props, styles, moduleMetadata = {} } = storyFnAngular;
|
|
8
|
-
let { template } = storyFnAngular;
|
|
9
|
-
const hasTemplate = !hasNoTemplate(template);
|
|
10
|
-
if (!hasTemplate && component) {
|
|
11
|
-
template = (0, ComputesTemplateFromComponent_1.computesTemplateFromComponent)(component, props, '');
|
|
12
|
-
}
|
|
13
|
-
/** Create a component that wraps generated template and gives it props */
|
|
14
|
-
return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)({
|
|
15
|
-
moduleMetadata,
|
|
16
|
-
selector: targetSelector,
|
|
17
|
-
template,
|
|
18
|
-
storyComponent: component,
|
|
19
|
-
styles,
|
|
20
|
-
initialProps: props,
|
|
21
|
-
analyzedMetadata,
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
exports.getApplication = getApplication;
|
|
25
|
-
function hasNoTemplate(template) {
|
|
26
|
-
return template === null || template === undefined;
|
|
27
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
|
|
2
|
-
import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
|
|
3
|
-
export const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
|
|
4
|
-
const { props, styles, moduleMetadata = {} } = storyFnAngular;
|
|
5
|
-
let { template } = storyFnAngular;
|
|
6
|
-
const hasTemplate = !hasNoTemplate(template);
|
|
7
|
-
if (!hasTemplate && component) {
|
|
8
|
-
template = computesTemplateFromComponent(component, props, '');
|
|
9
|
-
}
|
|
10
|
-
/** Create a component that wraps generated template and gives it props */
|
|
11
|
-
return createStorybookWrapperComponent({
|
|
12
|
-
moduleMetadata,
|
|
13
|
-
selector: targetSelector,
|
|
14
|
-
template,
|
|
15
|
-
storyComponent: component,
|
|
16
|
-
styles,
|
|
17
|
-
initialProps: props,
|
|
18
|
-
analyzedMetadata,
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
function hasNoTemplate(template) {
|
|
22
|
-
return template === null || template === undefined;
|
|
23
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,321 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
// @vitest-environment happy-dom
|
|
3
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
4
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
5
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
6
|
-
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;
|
|
7
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
8
|
-
};
|
|
9
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
10
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
const core_1 = require("@angular/core");
|
|
14
|
-
const vitest_1 = require("vitest");
|
|
15
|
-
const testing_1 = require("@angular/core/testing");
|
|
16
|
-
const rxjs_1 = require("rxjs");
|
|
17
|
-
const StorybookModule_1 = require("./StorybookModule");
|
|
18
|
-
const StorybookProvider_1 = require("./StorybookProvider");
|
|
19
|
-
const PropertyExtractor_1 = require("./utils/PropertyExtractor");
|
|
20
|
-
(0, vitest_1.describe)('StorybookModule', () => {
|
|
21
|
-
(0, vitest_1.describe)('getStorybookModuleMetadata', () => {
|
|
22
|
-
(0, vitest_1.describe)('with simple component', () => {
|
|
23
|
-
let FooComponent = class FooComponent {
|
|
24
|
-
constructor() {
|
|
25
|
-
this.output = new core_1.EventEmitter();
|
|
26
|
-
this.localOutput = new core_1.EventEmitter();
|
|
27
|
-
this.localFunction = () => '';
|
|
28
|
-
this.setterCallNb = 0;
|
|
29
|
-
}
|
|
30
|
-
set setter(value) {
|
|
31
|
-
this.setterCallNb += 1;
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
__decorate([
|
|
35
|
-
(0, core_1.Input)(),
|
|
36
|
-
__metadata("design:type", String)
|
|
37
|
-
], FooComponent.prototype, "input", void 0);
|
|
38
|
-
__decorate([
|
|
39
|
-
(0, core_1.Input)('inputBindingPropertyName'),
|
|
40
|
-
__metadata("design:type", String)
|
|
41
|
-
], FooComponent.prototype, "localPropertyName", void 0);
|
|
42
|
-
__decorate([
|
|
43
|
-
(0, core_1.Input)(),
|
|
44
|
-
__metadata("design:type", String),
|
|
45
|
-
__metadata("design:paramtypes", [String])
|
|
46
|
-
], FooComponent.prototype, "setter", null);
|
|
47
|
-
__decorate([
|
|
48
|
-
(0, core_1.Output)(),
|
|
49
|
-
__metadata("design:type", Object)
|
|
50
|
-
], FooComponent.prototype, "output", void 0);
|
|
51
|
-
__decorate([
|
|
52
|
-
(0, core_1.Output)('outputBindingPropertyName'),
|
|
53
|
-
__metadata("design:type", Object)
|
|
54
|
-
], FooComponent.prototype, "localOutput", void 0);
|
|
55
|
-
FooComponent = __decorate([
|
|
56
|
-
(0, core_1.Component)({
|
|
57
|
-
selector: 'foo',
|
|
58
|
-
template: `
|
|
59
|
-
<p id="input">{{ input }}</p>
|
|
60
|
-
<p id="inputBindingPropertyName">{{ localPropertyName }}</p>
|
|
61
|
-
<p id="setterCallNb">{{ setterCallNb }}</p>
|
|
62
|
-
<p id="localProperty">{{ localProperty }}</p>
|
|
63
|
-
<p id="localFunction">{{ localFunction() }}</p>
|
|
64
|
-
<p id="output" (click)="output.emit('outputEmitted')"></p>
|
|
65
|
-
<p id="outputBindingPropertyName" (click)="localOutput.emit('outputEmitted')"></p>
|
|
66
|
-
`,
|
|
67
|
-
})
|
|
68
|
-
], FooComponent);
|
|
69
|
-
(0, vitest_1.it)('should initialize inputs', async () => {
|
|
70
|
-
const props = {
|
|
71
|
-
input: 'input',
|
|
72
|
-
inputBindingPropertyName: 'inputBindingPropertyName',
|
|
73
|
-
localProperty: 'localProperty',
|
|
74
|
-
localFunction: () => 'localFunction',
|
|
75
|
-
};
|
|
76
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
77
|
-
await analyzedMetadata.init();
|
|
78
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
79
|
-
storyFnAngular: { props },
|
|
80
|
-
component: FooComponent,
|
|
81
|
-
targetSelector: 'my-selector',
|
|
82
|
-
analyzedMetadata,
|
|
83
|
-
});
|
|
84
|
-
const { fixture } = await configureTestingModule({
|
|
85
|
-
imports: [application],
|
|
86
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
|
|
87
|
-
});
|
|
88
|
-
fixture.detectChanges();
|
|
89
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(props.input);
|
|
90
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(props.inputBindingPropertyName);
|
|
91
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(props.localProperty);
|
|
92
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(props.localFunction());
|
|
93
|
-
});
|
|
94
|
-
(0, vitest_1.it)('should initialize outputs', async () => {
|
|
95
|
-
let expectedOutputValue;
|
|
96
|
-
let expectedOutputBindingValue;
|
|
97
|
-
const props = {
|
|
98
|
-
output: (value) => {
|
|
99
|
-
expectedOutputValue = value;
|
|
100
|
-
},
|
|
101
|
-
outputBindingPropertyName: (value) => {
|
|
102
|
-
expectedOutputBindingValue = value;
|
|
103
|
-
},
|
|
104
|
-
};
|
|
105
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
106
|
-
await analyzedMetadata.init();
|
|
107
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
108
|
-
storyFnAngular: { props },
|
|
109
|
-
component: FooComponent,
|
|
110
|
-
targetSelector: 'my-selector',
|
|
111
|
-
analyzedMetadata,
|
|
112
|
-
});
|
|
113
|
-
const { fixture } = await configureTestingModule({
|
|
114
|
-
imports: [application],
|
|
115
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
|
|
116
|
-
});
|
|
117
|
-
fixture.detectChanges();
|
|
118
|
-
fixture.nativeElement.querySelector('p#output').click();
|
|
119
|
-
fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
|
|
120
|
-
(0, vitest_1.expect)(expectedOutputValue).toEqual('outputEmitted');
|
|
121
|
-
(0, vitest_1.expect)(expectedOutputBindingValue).toEqual('outputEmitted');
|
|
122
|
-
});
|
|
123
|
-
(0, vitest_1.it)('should change inputs if storyProps$ Subject emit', async () => {
|
|
124
|
-
const initialProps = {
|
|
125
|
-
input: 'input',
|
|
126
|
-
inputBindingPropertyName: '',
|
|
127
|
-
};
|
|
128
|
-
const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
|
|
129
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
130
|
-
await analyzedMetadata.init();
|
|
131
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
132
|
-
storyFnAngular: { props: initialProps },
|
|
133
|
-
component: FooComponent,
|
|
134
|
-
targetSelector: 'my-selector',
|
|
135
|
-
analyzedMetadata,
|
|
136
|
-
});
|
|
137
|
-
const { fixture } = await configureTestingModule({
|
|
138
|
-
imports: [application],
|
|
139
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
|
|
140
|
-
});
|
|
141
|
-
fixture.detectChanges();
|
|
142
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
|
|
143
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual('');
|
|
144
|
-
const newProps = {
|
|
145
|
-
input: 'new input',
|
|
146
|
-
inputBindingPropertyName: 'new inputBindingPropertyName',
|
|
147
|
-
localProperty: 'new localProperty',
|
|
148
|
-
localFunction: () => 'new localFunction',
|
|
149
|
-
};
|
|
150
|
-
storyProps$.next(newProps);
|
|
151
|
-
fixture.detectChanges();
|
|
152
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
|
|
153
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#inputBindingPropertyName').innerHTML).toEqual(newProps.inputBindingPropertyName);
|
|
154
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#localProperty').innerHTML).toEqual(newProps.localProperty);
|
|
155
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#localFunction').innerHTML).toEqual(newProps.localFunction());
|
|
156
|
-
});
|
|
157
|
-
(0, vitest_1.it)('should override outputs if storyProps$ Subject emit', async () => {
|
|
158
|
-
let expectedOutputValue;
|
|
159
|
-
let expectedOutputBindingValue;
|
|
160
|
-
const initialProps = {
|
|
161
|
-
input: '',
|
|
162
|
-
output: (value) => {
|
|
163
|
-
expectedOutputValue = value;
|
|
164
|
-
},
|
|
165
|
-
outputBindingPropertyName: (value) => {
|
|
166
|
-
expectedOutputBindingValue = value;
|
|
167
|
-
},
|
|
168
|
-
};
|
|
169
|
-
const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
|
|
170
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
171
|
-
await analyzedMetadata.init();
|
|
172
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
173
|
-
storyFnAngular: { props: initialProps },
|
|
174
|
-
component: FooComponent,
|
|
175
|
-
targetSelector: 'my-selector',
|
|
176
|
-
analyzedMetadata,
|
|
177
|
-
});
|
|
178
|
-
const { fixture } = await configureTestingModule({
|
|
179
|
-
imports: [application],
|
|
180
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
|
|
181
|
-
});
|
|
182
|
-
fixture.detectChanges();
|
|
183
|
-
const newProps = {
|
|
184
|
-
input: 'new input',
|
|
185
|
-
output: () => {
|
|
186
|
-
expectedOutputValue = 'should be called';
|
|
187
|
-
},
|
|
188
|
-
outputBindingPropertyName: () => {
|
|
189
|
-
expectedOutputBindingValue = 'should be called';
|
|
190
|
-
},
|
|
191
|
-
};
|
|
192
|
-
storyProps$.next(newProps);
|
|
193
|
-
fixture.detectChanges();
|
|
194
|
-
fixture.nativeElement.querySelector('p#output').click();
|
|
195
|
-
fixture.nativeElement.querySelector('p#outputBindingPropertyName').click();
|
|
196
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
|
|
197
|
-
(0, vitest_1.expect)(expectedOutputValue).toEqual('should be called');
|
|
198
|
-
(0, vitest_1.expect)(expectedOutputBindingValue).toEqual('should be called');
|
|
199
|
-
});
|
|
200
|
-
(0, vitest_1.it)('should change template inputs if storyProps$ Subject emit', async () => {
|
|
201
|
-
const initialProps = {
|
|
202
|
-
color: 'red',
|
|
203
|
-
input: 'input',
|
|
204
|
-
};
|
|
205
|
-
const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
|
|
206
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
207
|
-
await analyzedMetadata.init();
|
|
208
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
209
|
-
storyFnAngular: {
|
|
210
|
-
props: initialProps,
|
|
211
|
-
template: '<p [style.color]="color"><foo [input]="input"></foo></p>',
|
|
212
|
-
},
|
|
213
|
-
component: FooComponent,
|
|
214
|
-
targetSelector: 'my-selector',
|
|
215
|
-
analyzedMetadata,
|
|
216
|
-
});
|
|
217
|
-
const { fixture } = await configureTestingModule({
|
|
218
|
-
imports: [application],
|
|
219
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
|
|
220
|
-
});
|
|
221
|
-
fixture.detectChanges();
|
|
222
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p').style.color).toEqual('red');
|
|
223
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(initialProps.input);
|
|
224
|
-
const newProps = {
|
|
225
|
-
color: 'black',
|
|
226
|
-
input: 'new input',
|
|
227
|
-
};
|
|
228
|
-
storyProps$.next(newProps);
|
|
229
|
-
fixture.detectChanges();
|
|
230
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p').style.color).toEqual('black');
|
|
231
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#input').innerHTML).toEqual(newProps.input);
|
|
232
|
-
});
|
|
233
|
-
(0, vitest_1.it)('should call the Input() setter the right number of times', async () => {
|
|
234
|
-
const initialProps = {
|
|
235
|
-
setter: 'init',
|
|
236
|
-
};
|
|
237
|
-
const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
|
|
238
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
239
|
-
await analyzedMetadata.init();
|
|
240
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
241
|
-
storyFnAngular: { props: initialProps },
|
|
242
|
-
component: FooComponent,
|
|
243
|
-
targetSelector: 'my-selector',
|
|
244
|
-
analyzedMetadata,
|
|
245
|
-
});
|
|
246
|
-
const { fixture } = await configureTestingModule({
|
|
247
|
-
imports: [application],
|
|
248
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(storyProps$)],
|
|
249
|
-
});
|
|
250
|
-
fixture.detectChanges();
|
|
251
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('1');
|
|
252
|
-
const newProps = {
|
|
253
|
-
setter: 'new setter value',
|
|
254
|
-
};
|
|
255
|
-
storyProps$.next(newProps);
|
|
256
|
-
fixture.detectChanges();
|
|
257
|
-
(0, vitest_1.expect)(fixture.nativeElement.querySelector('p#setterCallNb').innerHTML).toEqual('2');
|
|
258
|
-
});
|
|
259
|
-
});
|
|
260
|
-
(0, vitest_1.describe)('with component without selector', () => {
|
|
261
|
-
let WithoutSelectorComponent = class WithoutSelectorComponent {
|
|
262
|
-
};
|
|
263
|
-
WithoutSelectorComponent = __decorate([
|
|
264
|
-
(0, core_1.Component)({
|
|
265
|
-
template: `The content`,
|
|
266
|
-
})
|
|
267
|
-
], WithoutSelectorComponent);
|
|
268
|
-
(0, vitest_1.it)('should display the component', async () => {
|
|
269
|
-
const props = {};
|
|
270
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({ entryComponents: [WithoutSelectorComponent] }, WithoutSelectorComponent);
|
|
271
|
-
await analyzedMetadata.init();
|
|
272
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
273
|
-
storyFnAngular: {
|
|
274
|
-
props,
|
|
275
|
-
moduleMetadata: { entryComponents: [WithoutSelectorComponent] },
|
|
276
|
-
},
|
|
277
|
-
component: WithoutSelectorComponent,
|
|
278
|
-
targetSelector: 'my-selector',
|
|
279
|
-
analyzedMetadata,
|
|
280
|
-
});
|
|
281
|
-
const { fixture } = await configureTestingModule({
|
|
282
|
-
imports: [application],
|
|
283
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject(props))],
|
|
284
|
-
});
|
|
285
|
-
fixture.detectChanges();
|
|
286
|
-
(0, vitest_1.expect)(fixture.nativeElement.innerHTML).toContain('The content');
|
|
287
|
-
});
|
|
288
|
-
});
|
|
289
|
-
(0, vitest_1.it)('should keep template with an empty value', async () => {
|
|
290
|
-
let FooComponent = class FooComponent {
|
|
291
|
-
};
|
|
292
|
-
FooComponent = __decorate([
|
|
293
|
-
(0, core_1.Component)({
|
|
294
|
-
selector: 'foo',
|
|
295
|
-
template: `Should not be displayed`,
|
|
296
|
-
})
|
|
297
|
-
], FooComponent);
|
|
298
|
-
const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
|
|
299
|
-
await analyzedMetadata.init();
|
|
300
|
-
const application = (0, StorybookModule_1.getApplication)({
|
|
301
|
-
storyFnAngular: { template: '' },
|
|
302
|
-
component: FooComponent,
|
|
303
|
-
targetSelector: 'my-selector',
|
|
304
|
-
analyzedMetadata,
|
|
305
|
-
});
|
|
306
|
-
const { fixture } = await configureTestingModule({
|
|
307
|
-
imports: [application],
|
|
308
|
-
providers: [(0, StorybookProvider_1.storyPropsProvider)(new rxjs_1.BehaviorSubject({}))],
|
|
309
|
-
});
|
|
310
|
-
fixture.detectChanges();
|
|
311
|
-
(0, vitest_1.expect)(fixture.nativeElement.innerHTML).toEqual('');
|
|
312
|
-
});
|
|
313
|
-
});
|
|
314
|
-
async function configureTestingModule(ngModule) {
|
|
315
|
-
await testing_1.TestBed.configureTestingModule(ngModule).compileComponents();
|
|
316
|
-
const fixture = testing_1.TestBed.createComponent(ngModule.imports[0]);
|
|
317
|
-
return {
|
|
318
|
-
fixture,
|
|
319
|
-
};
|
|
320
|
-
}
|
|
321
|
-
});
|