@storybook/angular
Version:
Storybook for Angular: Develop Angular components in isolation with hot reloading.
165 lines (164 loc) • 7.98 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
const core_1 = require("@angular/core");
const testing_1 = require("@angular/platform-browser-dynamic/testing");
const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
const CanvasRenderer_1 = require("./CanvasRenderer");
const RendererFactory_1 = require("./RendererFactory");
const DocsRenderer_1 = require("./DocsRenderer");
jest.mock('@angular/platform-browser-dynamic');
describe('RendererFactory', () => {
let rendererFactory;
let rootTargetDOMNode;
let rootDocstargetDOMNode;
beforeEach(async () => {
rendererFactory = new RendererFactory_1.RendererFactory();
document.body.innerHTML =
'<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
rootTargetDOMNode = global.document.getElementById('storybook-root');
rootDocstargetDOMNode = global.document.getElementById('root-docs');
platform_browser_dynamic_1.platformBrowserDynamic.mockImplementation(testing_1.platformBrowserDynamicTesting);
jest.spyOn(console, 'log').mockImplementation(() => { });
});
afterEach(() => {
jest.clearAllMocks();
// Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
// Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
(0, core_1.ɵresetJitOptions)();
});
describe('CanvasRenderer', () => {
it('should get CanvasRenderer instance', async () => {
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
expect(render).toBeInstanceOf(CanvasRenderer_1.CanvasRenderer);
});
it('should render my-story for story template', async () => {
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
template: '🦊',
props: {},
},
forced: false,
targetDOMNode: rootTargetDOMNode,
});
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
});
it('should render my-story for story component', async () => {
let FooComponent = class FooComponent {
};
FooComponent = __decorate([
(0, core_1.Component)({ selector: 'foo', template: '🦊' })
], FooComponent);
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
props: {},
},
forced: false,
component: FooComponent,
targetDOMNode: rootTargetDOMNode,
});
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('<foo>🦊</foo><!--container-->');
});
it('should handle circular reference in moduleMetadata', async () => {
class Thing {
constructor() {
this.token = this;
}
}
const token = new Thing();
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
template: '🦊',
props: {},
moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
},
forced: false,
targetDOMNode: rootTargetDOMNode,
});
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊');
});
describe('when forced=true', () => {
beforeEach(async () => {
// Init first render
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
template: '{{ logo }}: {{ name }}',
props: {
logo: '🦊',
name: 'Fox',
},
},
forced: true,
targetDOMNode: rootTargetDOMNode,
});
});
it('should be rendered a first time', async () => {
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🦊: Fox');
});
it('should not be re-rendered when only props change', async () => {
// only props change
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
props: {
logo: '👾',
},
},
forced: true,
targetDOMNode: rootTargetDOMNode,
});
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('👾: Fox');
});
it('should be re-rendered when template change', async () => {
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
template: '{{ beer }}',
props: {
beer: '🍺',
},
},
forced: true,
targetDOMNode: rootTargetDOMNode,
});
expect(document.body.getElementsByTagName('storybook-root')[0].innerHTML).toBe('🍺');
});
});
});
describe('DocsRenderer', () => {
describe('when canvas render is done before', () => {
beforeEach(async () => {
// Init first Canvas render
const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
await render?.render({
storyFnAngular: {
template: 'Canvas 🖼',
},
forced: true,
targetDOMNode: rootTargetDOMNode,
});
});
it('should reset root HTML', async () => {
global.document
.getElementById('storybook-root')
.appendChild(global.document.createElement('👾'));
expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
});
});
it('should get DocsRenderer instance', async () => {
const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
expect(render).toBeInstanceOf(DocsRenderer_1.DocsRenderer);
});
});
});