@storybook/angular 9.1.0-alpha.5 → 9.1.0-alpha.7

package/dist/client/angular-beta/utils/PropertyExtractor.test.mjs

@@ -1,175 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Directive, Injectable, InjectionToken, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule, NoopAnimationsModule, provideAnimations, provideNoopAnimations, } from '@angular/platform-browser/animations';
-import { describe, expect, it, vi } from 'vitest';
-import { WithOfficialModule } from '../__testfixtures__/test.module';
-import { PropertyExtractor } from './PropertyExtractor';
-const TEST_TOKEN = new InjectionToken('testToken');
-const TestTokenProvider = { provide: TEST_TOKEN, useValue: 123 };
-const TestService = Injectable()(class {
-});
-const TestComponent1 = Component({ standalone: false })(class {
-});
-const TestComponent2 = Component({ standalone: false })(class {
-});
-const StandaloneTestComponent = Component({})(class {
-});
-const StandaloneTestDirective = Directive({})(class {
-});
-const MixedTestComponent1 = Component({})(class extends StandaloneTestComponent {
-});
-const MixedTestComponent2 = Component({ standalone: false })(class extends MixedTestComponent1 {
-});
-const MixedTestComponent3 = Component({})(class extends MixedTestComponent2 {
-});
-const TestModuleWithDeclarations = NgModule({ declarations: [TestComponent1] })(class {
-});
-const TestModuleWithImportsAndProviders = NgModule({
-    imports: [TestModuleWithDeclarations],
-    providers: [TestTokenProvider],
-})(class {
-});
-const analyzeMetadata = async (metadata, component) => {
-    const propertyExtractor = new PropertyExtractor(metadata, component);
-    await propertyExtractor.init();
-    return propertyExtractor;
-};
-const extractImports = async (metadata, component) => {
-    const propertyExtractor = new PropertyExtractor(metadata, component);
-    await propertyExtractor.init();
-    return propertyExtractor.imports;
-};
-const extractDeclarations = async (metadata, component) => {
-    const propertyExtractor = new PropertyExtractor(metadata, component);
-    await propertyExtractor.init();
-    return propertyExtractor.declarations;
-};
-const extractProviders = async (metadata, component) => {
-    const propertyExtractor = new PropertyExtractor(metadata, component);
-    await propertyExtractor.init();
-    return propertyExtractor.providers;
-};
-const extractApplicationProviders = async (metadata, component) => {
-    const propertyExtractor = new PropertyExtractor(metadata, component);
-    await propertyExtractor.init();
-    return propertyExtractor.applicationProviders;
-};
-describe('PropertyExtractor', () => {
-    vi.spyOn(console, 'warn').mockImplementation(() => { });
-    describe('analyzeMetadata', () => {
-        it('should remove BrowserModule', async () => {
-            const metadata = {
-                imports: [BrowserModule],
-            };
-            const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
-        });
-        it('should remove BrowserAnimationsModule and use its providers instead', async () => {
-            const metadata = {
-                imports: [BrowserAnimationsModule],
-            };
-            const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
-        });
-        it('should remove NoopAnimationsModule and use its providers instead', async () => {
-            const metadata = {
-                imports: [NoopAnimationsModule],
-            };
-            const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideNoopAnimations());
-        });
-        it('should remove Browser/Animations modules recursively', async () => {
-            const metadata = {
-                imports: [BrowserAnimationsModule, BrowserModule],
-            };
-            const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
-        });
-        it('should not destructure Angular official module', async () => {
-            const metadata = {
-                imports: [WithOfficialModule],
-            };
-            const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
-            expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule, WithOfficialModule]);
-            expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
-        });
-    });
-    describe('extractImports', () => {
-        it('should return Angular official modules', async () => {
-            const imports = await extractImports({ imports: [TestModuleWithImportsAndProviders] });
-            expect(imports).toEqual([CommonModule, TestModuleWithImportsAndProviders]);
-        });
-        it('should return standalone components', async () => {
-            const imports = await extractImports({
-                imports: [TestModuleWithImportsAndProviders],
-            }, StandaloneTestComponent);
-            expect(imports).toEqual([
-                CommonModule,
-                TestModuleWithImportsAndProviders,
-                StandaloneTestComponent,
-            ]);
-        });
-        it('should return standalone directives', async () => {
-            const imports = await extractImports({
-                imports: [TestModuleWithImportsAndProviders],
-            }, StandaloneTestDirective);
-            expect(imports).toEqual([
-                CommonModule,
-                TestModuleWithImportsAndProviders,
-                StandaloneTestDirective,
-            ]);
-        });
-    });
-    describe('extractDeclarations', () => {
-        it('should return an array of declarations that contains `storyComponent`', async () => {
-            const declarations = await extractDeclarations({ declarations: [TestComponent1] }, TestComponent2);
-            expect(declarations).toEqual([TestComponent1, TestComponent2]);
-        });
-    });
-    describe('analyzeDecorators', () => {
-        it('isStandalone should be false', () => {
-            const { isStandalone } = PropertyExtractor.analyzeDecorators(TestComponent1);
-            expect(isStandalone).toBe(false);
-        });
-        it('isStandalone should be true', () => {
-            const { isStandalone } = PropertyExtractor.analyzeDecorators(StandaloneTestComponent);
-            expect(isStandalone).toBe(true);
-        });
-        it('isStandalone should be true', () => {
-            const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent1);
-            expect(isStandalone).toBe(true);
-        });
-        it('isStandalone should be false', () => {
-            const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent2);
-            expect(isStandalone).toBe(false);
-        });
-        it('isStandalone should be true', () => {
-            const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent3);
-            expect(isStandalone).toBe(true);
-        });
-    });
-    describe('extractProviders', () => {
-        it('should return an array of providers', async () => {
-            const providers = await extractProviders({
-                providers: [TestService],
-            });
-            expect(providers).toEqual([TestService]);
-        });
-        it('should return an array of singletons extracted', async () => {
-            const singeltons = await extractApplicationProviders({
-                imports: [BrowserAnimationsModule],
-            });
-            expect(singeltons).toEqual(provideAnimations());
-        });
-    });
-});

package/dist/client/angular-beta/utils/StoryUID.d.ts

@@ -1,22 +0,0 @@
-/**
- * Increments the count for a storyId and returns the next UID.
- *
- * When a story is bootstrapped, the storyId is used as the element tag. That becomes an issue when
- * a story is rendered multiple times in the same docs page. This function returns a UID that is
- * appended to the storyId to make it unique.
- *
- * @param storyId Id of a story
- * @returns Uid of a story
- */
-export declare const getNextStoryUID: (storyId: string) => string;
-/**
- * Clears the storyId counts.
- *
- * Can be useful for testing, where you need predictable increments, without reloading the global
- * state.
- *
- * If onlyStoryId is provided, only that storyId is cleared.
- *
- * @param onlyStoryId Id of a story
- */
-export declare const clearStoryUIDs: (onlyStoryId?: string) => void;

package/dist/client/angular-beta/utils/StoryUID.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clearStoryUIDs = exports.getNextStoryUID = void 0;
-/** Count of stories for each storyId. */
-const storyCounts = new Map();
-/**
- * Increments the count for a storyId and returns the next UID.
- *
- * When a story is bootstrapped, the storyId is used as the element tag. That becomes an issue when
- * a story is rendered multiple times in the same docs page. This function returns a UID that is
- * appended to the storyId to make it unique.
- *
- * @param storyId Id of a story
- * @returns Uid of a story
- */
-const getNextStoryUID = (storyId) => {
-    if (!storyCounts.has(storyId)) {
-        storyCounts.set(storyId, -1);
-    }
-    const count = storyCounts.get(storyId) + 1;
-    storyCounts.set(storyId, count);
-    return `${storyId}-${count}`;
-};
-exports.getNextStoryUID = getNextStoryUID;
-/**
- * Clears the storyId counts.
- *
- * Can be useful for testing, where you need predictable increments, without reloading the global
- * state.
- *
- * If onlyStoryId is provided, only that storyId is cleared.
- *
- * @param onlyStoryId Id of a story
- */
-const clearStoryUIDs = (onlyStoryId) => {
-    if (onlyStoryId !== undefined && onlyStoryId !== null) {
-        storyCounts.delete(onlyStoryId);
-    }
-    else {
-        storyCounts.clear();
-    }
-};
-exports.clearStoryUIDs = clearStoryUIDs;

package/dist/client/angular-beta/utils/StoryUID.mjs

@@ -1,38 +0,0 @@
-/** Count of stories for each storyId. */
-const storyCounts = new Map();
-/**
- * Increments the count for a storyId and returns the next UID.
- *
- * When a story is bootstrapped, the storyId is used as the element tag. That becomes an issue when
- * a story is rendered multiple times in the same docs page. This function returns a UID that is
- * appended to the storyId to make it unique.
- *
- * @param storyId Id of a story
- * @returns Uid of a story
- */
-export const getNextStoryUID = (storyId) => {
-    if (!storyCounts.has(storyId)) {
-        storyCounts.set(storyId, -1);
-    }
-    const count = storyCounts.get(storyId) + 1;
-    storyCounts.set(storyId, count);
-    return `${storyId}-${count}`;
-};
-/**
- * Clears the storyId counts.
- *
- * Can be useful for testing, where you need predictable increments, without reloading the global
- * state.
- *
- * If onlyStoryId is provided, only that storyId is cleared.
- *
- * @param onlyStoryId Id of a story
- */
-export const clearStoryUIDs = (onlyStoryId) => {
-    if (onlyStoryId !== undefined && onlyStoryId !== null) {
-        storyCounts.delete(onlyStoryId);
-    }
-    else {
-        storyCounts.clear();
-    }
-};

package/dist/client/argsToTemplate.d.ts

@@ -1,56 +0,0 @@
-/**
- * Options for controlling the behavior of the argsToTemplate function.
- *
- * @template T The type of the keys in the target object.
- */
-export interface ArgsToTemplateOptions<T> {
-    /**
-     * An array of keys to specifically include in the output. If provided, only the keys from this
-     * array will be included in the output, irrespective of the `exclude` option. Undefined values
-     * will still be excluded from the output.
-     */
-    include?: Array<T>;
-    /**
-     * An array of keys to specifically exclude from the output. If provided, these keys will be
-     * omitted from the output. This option is ignored if the `include` option is also provided
-     */
-    exclude?: Array<T>;
-}
-/**
- * Converts an object of arguments to a string of property and event bindings and excludes undefined
- * values. Why? Because Angular treats undefined values in property bindings as an actual value and
- * does not apply the default value of the property as soon as the binding is set. This feels
- * counter-intuitive and is a common source of bugs in stories.
- *
- * @example
- *
- * ```ts
- * // component.ts
- * ㅤ@Component({ selector: 'example' })
- *  export class ExampleComponent {
- *   ㅤ@Input() input1: string = 'Default Input1';
- *   ㅤ@Input() input2: string = 'Default Input2';
- *   ㅤ@Output() click = new EventEmitter();
- *  }
- *
- * // component.stories.ts
- * import { argsToTemplate } from '@storybook/angular';
- * export const Input1: Story = {
- *  render: (args) => ({
- *    props: args,
- *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
- *    // This will set input2 to undefined and the internal default value will not be used.
- *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
- *    // The default value of input2 will be used, but it is not overridable by the user via controls.
- *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
- *    template: `<example ${argsToTemplate(args)}"></example>`,
- *  }),
- *  args: {
- *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
- *    input1: 'Input 1',
- *    click: { action: 'clicked' },
- *  },
- * };
- * ```
- */
-export declare function argsToTemplate<A extends Record<string, any>>(args: A, options?: ArgsToTemplateOptions<keyof A>): string;

package/dist/client/argsToTemplate.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.argsToTemplate = argsToTemplate;
-const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
-/**
- * Converts an object of arguments to a string of property and event bindings and excludes undefined
- * values. Why? Because Angular treats undefined values in property bindings as an actual value and
- * does not apply the default value of the property as soon as the binding is set. This feels
- * counter-intuitive and is a common source of bugs in stories.
- *
- * @example
- *
- * ```ts
- * // component.ts
- * ㅤ@Component({ selector: 'example' })
- *  export class ExampleComponent {
- *   ㅤ@Input() input1: string = 'Default Input1';
- *   ㅤ@Input() input2: string = 'Default Input2';
- *   ㅤ@Output() click = new EventEmitter();
- *  }
- *
- * // component.stories.ts
- * import { argsToTemplate } from '@storybook/angular';
- * export const Input1: Story = {
- *  render: (args) => ({
- *    props: args,
- *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
- *    // This will set input2 to undefined and the internal default value will not be used.
- *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
- *    // The default value of input2 will be used, but it is not overridable by the user via controls.
- *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
- *    template: `<example ${argsToTemplate(args)}"></example>`,
- *  }),
- *  args: {
- *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
- *    input1: 'Input 1',
- *    click: { action: 'clicked' },
- *  },
- * };
- * ```
- */
-function argsToTemplate(args, options = {}) {
-    const includeSet = options.include ? new Set(options.include) : null;
-    const excludeSet = options.exclude ? new Set(options.exclude) : null;
-    return Object.entries(args)
-        .filter(([key]) => args[key] !== undefined)
-        .filter(([key]) => {
-        if (includeSet)
-            return includeSet.has(key);
-        if (excludeSet)
-            return !excludeSet.has(key);
-        return true;
-    })
-        .map(([key, value]) => typeof value === 'function'
-        ? `(${key})="${(0, ComputesTemplateFromComponent_1.formatPropInTemplate)(key)}($event)"`
-        : `[${key}]="${(0, ComputesTemplateFromComponent_1.formatPropInTemplate)(key)}"`)
-        .join(' ');
-}

package/dist/client/argsToTemplate.mjs

@@ -1,55 +0,0 @@
-import { formatPropInTemplate } from './angular-beta/ComputesTemplateFromComponent';
-/**
- * Converts an object of arguments to a string of property and event bindings and excludes undefined
- * values. Why? Because Angular treats undefined values in property bindings as an actual value and
- * does not apply the default value of the property as soon as the binding is set. This feels
- * counter-intuitive and is a common source of bugs in stories.
- *
- * @example
- *
- * ```ts
- * // component.ts
- * ㅤ@Component({ selector: 'example' })
- *  export class ExampleComponent {
- *   ㅤ@Input() input1: string = 'Default Input1';
- *   ㅤ@Input() input2: string = 'Default Input2';
- *   ㅤ@Output() click = new EventEmitter();
- *  }
- *
- * // component.stories.ts
- * import { argsToTemplate } from '@storybook/angular';
- * export const Input1: Story = {
- *  render: (args) => ({
- *    props: args,
- *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
- *    // This will set input2 to undefined and the internal default value will not be used.
- *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
- *    // The default value of input2 will be used, but it is not overridable by the user via controls.
- *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
- *    template: `<example ${argsToTemplate(args)}"></example>`,
- *  }),
- *  args: {
- *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
- *    input1: 'Input 1',
- *    click: { action: 'clicked' },
- *  },
- * };
- * ```
- */
-export function argsToTemplate(args, options = {}) {
-    const includeSet = options.include ? new Set(options.include) : null;
-    const excludeSet = options.exclude ? new Set(options.exclude) : null;
-    return Object.entries(args)
-        .filter(([key]) => args[key] !== undefined)
-        .filter(([key]) => {
-        if (includeSet)
-            return includeSet.has(key);
-        if (excludeSet)
-            return !excludeSet.has(key);
-        return true;
-    })
-        .map(([key, value]) => typeof value === 'function'
-        ? `(${key})="${formatPropInTemplate(key)}($event)"`
-        : `[${key}]="${formatPropInTemplate(key)}"`)
-        .join(' ');
-}

package/dist/client/argsToTemplate.test.d.ts

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

package/dist/client/argsToTemplate.test.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
-const argsToTemplate_1 = require("./argsToTemplate");
-// adjust path
-(0, vitest_1.describe)('argsToTemplate', () => {
-    (0, vitest_1.it)('should correctly convert args to template string and exclude undefined values', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: undefined,
-            prop3: 'value3',
-        };
-        const options = {};
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    (0, vitest_1.it)('should include properties from include option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            include: ['prop1', 'prop3'],
-        };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    (0, vitest_1.it)('should include non-undefined properties from include option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: undefined,
-        };
-        const options = {
-            include: ['prop1', 'prop3'],
-        };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1"');
-    });
-    (0, vitest_1.it)('should exclude properties from exclude option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            exclude: ['prop2'],
-        };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    (0, vitest_1.it)('should exclude properties from exclude option and undefined properties', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: undefined,
-        };
-        const options = {
-            exclude: ['prop2'],
-        };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1"');
-    });
-    (0, vitest_1.it)('should prioritize include over exclude when both options are given', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            include: ['prop1', 'prop2'],
-            exclude: ['prop2', 'prop3'],
-        };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1" [prop2]="prop2"');
-    });
-    (0, vitest_1.it)('should work when neither include nor exclude options are given', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-        };
-        const options = {};
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, options);
-        (0, vitest_1.expect)(result).toBe('[prop1]="prop1" [prop2]="prop2"');
-    });
-    (0, vitest_1.it)('should bind events correctly when value is a function', () => {
-        const args = { event1: () => { }, event2: () => { } };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
-        (0, vitest_1.expect)(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
-    });
-    (0, vitest_1.it)('should mix properties and events correctly', () => {
-        const args = { input: 'Value1', event1: () => { } };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
-        (0, vitest_1.expect)(result).toEqual('[input]="input" (event1)="event1($event)"');
-    });
-    (0, vitest_1.it)('should format for non dot notation', () => {
-        const args = { 'non-dot': 'Value1', 'dash-out': () => { } };
-        const result = (0, argsToTemplate_1.argsToTemplate)(args, {});
-        (0, vitest_1.expect)(result).toEqual('[non-dot]="this[\'non-dot\']" (dash-out)="this[\'dash-out\']($event)"');
-    });
-});

package/dist/client/argsToTemplate.test.mjs

@@ -1,100 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { argsToTemplate } from './argsToTemplate';
-// adjust path
-describe('argsToTemplate', () => {
-    it('should correctly convert args to template string and exclude undefined values', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: undefined,
-            prop3: 'value3',
-        };
-        const options = {};
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    it('should include properties from include option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            include: ['prop1', 'prop3'],
-        };
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    it('should include non-undefined properties from include option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: undefined,
-        };
-        const options = {
-            include: ['prop1', 'prop3'],
-        };
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1"');
-    });
-    it('should exclude properties from exclude option', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            exclude: ['prop2'],
-        };
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
-    });
-    it('should exclude properties from exclude option and undefined properties', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: undefined,
-        };
-        const options = {
-            exclude: ['prop2'],
-        };
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1"');
-    });
-    it('should prioritize include over exclude when both options are given', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-            prop3: 'value3',
-        };
-        const options = {
-            include: ['prop1', 'prop2'],
-            exclude: ['prop2', 'prop3'],
-        };
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
-    });
-    it('should work when neither include nor exclude options are given', () => {
-        const args = {
-            prop1: 'value1',
-            prop2: 'value2',
-        };
-        const options = {};
-        const result = argsToTemplate(args, options);
-        expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
-    });
-    it('should bind events correctly when value is a function', () => {
-        const args = { event1: () => { }, event2: () => { } };
-        const result = argsToTemplate(args, {});
-        expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
-    });
-    it('should mix properties and events correctly', () => {
-        const args = { input: 'Value1', event1: () => { } };
-        const result = argsToTemplate(args, {});
-        expect(result).toEqual('[input]="input" (event1)="event1($event)"');
-    });
-    it('should format for non dot notation', () => {
-        const args = { 'non-dot': 'Value1', 'dash-out': () => { } };
-        const result = argsToTemplate(args, {});
-        expect(result).toEqual('[non-dot]="this[\'non-dot\']" (dash-out)="this[\'dash-out\']($event)"');
-    });
-});