Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! Join TestMu Conference

How to use fooComponentFactory method in storybook-root

Best JavaScript code snippet using storybook-root

NgComponentAnalyzer.test.ts

Source:NgComponentAnalyzer.test.ts

1import {2  Component,3  ComponentFactory,4  ComponentFactoryResolver,5  Directive,6  EventEmitter,7  HostBinding,8  Injectable,9  Input,10  Output,11  Pipe,12  Type,13} from '@angular/core';14import { TestBed } from '@angular/core/testing';15import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';16import {17  getComponentInputsOutputs,18  isComponent,19  isDeclarable,20  getComponentDecoratorMetadata,21} from './NgComponentAnalyzer';22describe('getComponentInputsOutputs', () => {23  it('should return empty if no I/O found', () => {24    @Component({})25    class FooComponent {}26    expect(getComponentInputsOutputs(FooComponent)).toEqual({27      inputs: [],28      outputs: [],29    });30    class BarComponent {}31    expect(getComponentInputsOutputs(BarComponent)).toEqual({32      inputs: [],33      outputs: [],34    });35  });36  it('should return I/O', () => {37    @Component({38      template: '',39      inputs: ['inputInComponentMetadata'],40      outputs: ['outputInComponentMetadata'],41    })42    class FooComponent {43      @Input()44      public input: string;45      @Input('inputPropertyName')46      public inputWithBindingPropertyName: string;47      @Output()48      public output = new EventEmitter<Event>();49      @Output('outputPropertyName')50      public outputWithBindingPropertyName = new EventEmitter<Event>();51    }52    const fooComponentFactory = resolveComponentFactory(FooComponent);53    const { inputs, outputs } = getComponentInputsOutputs(FooComponent);54    expect({ inputs, outputs }).toEqual({55      inputs: [56        { propName: 'inputInComponentMetadata', templateName: 'inputInComponentMetadata' },57        { propName: 'input', templateName: 'input' },58        { propName: 'inputWithBindingPropertyName', templateName: 'inputPropertyName' },59      ],60      outputs: [61        { propName: 'outputInComponentMetadata', templateName: 'outputInComponentMetadata' },62        { propName: 'output', templateName: 'output' },63        { propName: 'outputWithBindingPropertyName', templateName: 'outputPropertyName' },64      ],65    });66    expect(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));67    expect(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));68  });69  it("should return I/O when some of component metadata has the same name as one of component's properties", () => {70    @Component({71      template: '',72      inputs: ['input', 'inputWithBindingPropertyName'],73      outputs: ['outputWithBindingPropertyName'],74    })75    class FooComponent {76      @Input()77      public input: string;78      @Input('inputPropertyName')79      public inputWithBindingPropertyName: string;80      @Output()81      public output = new EventEmitter<Event>();82      @Output('outputPropertyName')83      public outputWithBindingPropertyName = new EventEmitter<Event>();84    }85    const fooComponentFactory = resolveComponentFactory(FooComponent);86    const { inputs, outputs } = getComponentInputsOutputs(FooComponent);87    expect(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));88    expect(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));89  });90  it('should return I/O in the presence of multiple decorators', () => {91    @Component({92      template: '',93    })94    class FooComponent {95      @Input()96      @HostBinding('class.preceeding-first')97      public inputPreceedingHostBinding: string;98      @HostBinding('class.following-binding')99      @Input()100      public inputFollowingHostBinding: string;101    }102    const fooComponentFactory = resolveComponentFactory(FooComponent);103    const { inputs, outputs } = getComponentInputsOutputs(FooComponent);104    expect({ inputs, outputs }).toEqual({105      inputs: [106        { propName: 'inputPreceedingHostBinding', templateName: 'inputPreceedingHostBinding' },107        { propName: 'inputFollowingHostBinding', templateName: 'inputFollowingHostBinding' },108      ],109      outputs: [],110    });111    expect(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));112    expect(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));113  });114  it('should return I/O with extending classes', () => {115    @Component({116      template: '',117    })118    class BarComponent {119      @Input()120      public a: string;121      @Input()122      public b: string;123    }124    @Component({125      template: '',126    })127    class FooComponent extends BarComponent {128      @Input()129      public b: string;130      @Input()131      public c: string;132    }133    const fooComponentFactory = resolveComponentFactory(FooComponent);134    const { inputs, outputs } = getComponentInputsOutputs(FooComponent);135    expect({ inputs, outputs }).toEqual({136      inputs: [137        { propName: 'a', templateName: 'a' },138        { propName: 'b', templateName: 'b' },139        { propName: 'c', templateName: 'c' },140      ],141      outputs: [],142    });143    expect(sortByPropName(inputs)).toEqual(sortByPropName(fooComponentFactory.inputs));144    expect(sortByPropName(outputs)).toEqual(sortByPropName(fooComponentFactory.outputs));145  });146});147describe('isDeclarable', () => {148  it('should return true with a Component', () => {149    @Component({})150    class FooComponent {}151    expect(isDeclarable(FooComponent)).toEqual(true);152  });153  it('should return true with a Directive', () => {154    @Directive({})155    class FooDirective {}156    expect(isDeclarable(FooDirective)).toEqual(true);157  });158  it('should return true with a Pipe', () => {159    @Pipe({ name: 'pipe' })160    class FooPipe {}161    expect(isDeclarable(FooPipe)).toEqual(true);162  });163  it('should return false with simple class', () => {164    class FooPipe {}165    expect(isDeclarable(FooPipe)).toEqual(false);166  });167  it('should return false with Injectable', () => {168    @Injectable()169    class FooInjectable {}170    expect(isDeclarable(FooInjectable)).toEqual(false);171  });172});173describe('isComponent', () => {174  it('should return true with a Component', () => {175    @Component({})176    class FooComponent {}177    expect(isComponent(FooComponent)).toEqual(true);178  });179  it('should return false with simple class', () => {180    class FooPipe {}181    expect(isComponent(FooPipe)).toEqual(false);182  });183  it('should return false with Directive', () => {184    @Directive()185    class FooDirective {}186    expect(isComponent(FooDirective)).toEqual(false);187  });188});189describe('getComponentDecoratorMetadata', () => {190  it('should return Component with a Component', () => {191    @Component({ selector: 'foo' })192    class FooComponent {}193    expect(getComponentDecoratorMetadata(FooComponent)).toBeInstanceOf(Component);194    expect(getComponentDecoratorMetadata(FooComponent)).toEqual({195      changeDetection: 1,196      selector: 'foo',197    });198  });199  it('should return Component with extending classes', () => {200    @Component({ selector: 'bar' })201    class BarComponent {}202    @Component({ selector: 'foo' })203    class FooComponent extends BarComponent {}204    expect(getComponentDecoratorMetadata(FooComponent)).toBeInstanceOf(Component);205    expect(getComponentDecoratorMetadata(FooComponent)).toEqual({206      changeDetection: 1,207      selector: 'foo',208    });209  });210});211function sortByPropName(212  array: {213    propName: string;214    templateName: string;215  }[]216) {217  return array.sort((a, b) => a.propName.localeCompare(b.propName));218}219function resolveComponentFactory<T extends Type<any>>(component: T): ComponentFactory<T> {220  TestBed.configureTestingModule({221    declarations: [component],222  }).overrideModule(BrowserDynamicTestingModule, {223    set: {224      entryComponents: [component],225    },226  });227  const componentFactoryResolver = TestBed.inject(ComponentFactoryResolver);228  return componentFactoryResolver.resolveComponentFactory(component);...

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.