KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use performActionOnChild method in ng-mocks

Best JavaScript code snippet using ng-mocks

mock-component.spec.ts

Source:mock-component.spec.ts

...76  public childComponent?: ChildComponent;77  public emitted = '';78  public someOutputHasEmitted = '';79  public readonly formControl = new FormControl('');80  public performActionOnChild(s: string): void {81    if (this.childComponent) {82      this.childComponent.performAction(s);83    }84  }85}86describe('MockComponent', () => {87  let component: ExampleContainerComponent;88  let fixture: ComponentFixture<ExampleContainerComponent>;89  beforeEach(async () => {90    await TestBed.configureTestingModule({91      declarations: [92        ExampleContainerComponent,93        MockComponents(94          EmptyComponent,95          GetterSetterComponent,96          SimpleComponent,97          TemplateOutletComponent,98          ChildComponent,99          CustomFormControlComponent,100        ),101      ],102      imports: [FormsModule, ReactiveFormsModule],103    }).compileComponents();104    fixture = TestBed.createComponent(ExampleContainerComponent);105    component = fixture.componentInstance;106  });107  it('should have use a selector of the original component', () => {108    fixture.detectChanges();109    const mockComponent = fixture.debugElement.query(110      By.css('simple-component'),111    );112    expect(mockComponent).not.toBeNull();113  });114  it('should have the input set on the mock component', () => {115    fixture.detectChanges();116    const mockComponent = fixture.debugElement.query(117      By.directive(SimpleComponent),118    ).componentInstance;119    expect(mockComponent.someInput).toEqual('hi');120    expect(mockComponent.someInput2).toEqual('bye');121  });122  it('has no issues with multiple decorators on an input', () => {123    fixture.detectChanges();124    const mockComponent = fixture.debugElement.query(125      By.directive(SimpleComponent),126    );127    expect(mockComponent.componentInstance.someInput3).toEqual(true);128  });129  it('should trigger output bound behavior', () => {130    fixture.detectChanges();131    const mockComponent = fixture.debugElement.query(132      By.directive(SimpleComponent),133    ).componentInstance;134    mockComponent.someOutput1.emit('hi');135    expect(component.emitted).toEqual('hi');136  });137  it('should trigger output bound behavior for extended outputs', () => {138    fixture.detectChanges();139    const mockComponent = fixture.debugElement.query(140      By.directive(SimpleComponent),141    ).componentInstance;142    mockComponent.someOutput2.emit('hi');143    expect(component.emitted).toEqual('hi');144  });145  it('the mock should have an ng-content body', () => {146    fixture.detectChanges();147    const mockComponent = fixture.debugElement.query(148      By.css('#ng-content-component'),149    );150    expect(mockComponent.nativeElement.textContent).toContain('doh');151  });152  it('should give each instance of a mock component its own event emitter', () => {153    const mockComponents = fixture.debugElement.queryAll(154      By.directive(SimpleComponent),155    );156    const mockComponent1 = mockComponents[0].componentInstance;157    const mockComponent2 = mockComponents[1].componentInstance;158    expect(mockComponent1.someOutput1).not.toEqual(159      mockComponent2.someOutput1,160    );161  });162  it('should work with components w/o inputs or outputs', () => {163    const mockComponent = fixture.debugElement.query(164      By.directive(EmptyComponent),165    );166    expect(mockComponent).not.toBeNull();167  });168  it('should allow ngModel bindings', () => {169    const mockComponent = fixture.debugElement.query(170      By.css('#ngmodel-component'),171    );172    expect(mockComponent).not.toBeNull();173  });174  it('should memoize the return value by argument', () => {175    expect(MockComponent(EmptyComponent)).toBe(176      MockComponent(EmptyComponent),177    );178    expect(MockComponent(SimpleComponent)).toBe(179      MockComponent(SimpleComponent),180    );181    expect(MockComponent(EmptyComponent)).not.toBe(182      MockComponent(SimpleComponent),183    );184  });185  it('should set ViewChild components correctly', () => {186    fixture.detectChanges();187    expect(component.childComponent).toBeTruthy();188  });189  it('should allow spying of viewchild component methods', () => {190    const spy = component.childComponent191      ? component.childComponent.performAction192      : null;193    component.performActionOnChild('test');194    expect(spy).toHaveBeenCalledWith('test');195  });196  it('should set getters and setters to undefined instead of function', () => {197    const mockComponent = ngMocks.findInstance(198      fixture.debugElement,199      GetterSetterComponent,200    ) as MockedDirective<GetterSetterComponent>;201    expect(mockComponent.normalMethod).toBeDefined();202    expect(mockComponent.myGetter).not.toBeDefined();203    expect(mockComponent.mySetter).not.toBeDefined();204    expect(mockComponent.normalProperty).not.toBeDefined();205  });206  describe('ReactiveForms - ControlValueAccessor', () => {207    it('should allow you simulate the component being touched', () => {...

mock-directive.spec.ts

Source:mock-directive.spec.ts

...88  @ViewChild(ExampleDirective, {} as any)89  public childDirective?: ExampleDirective;90  public emitted = false;91  public readonly foo = new FormControl('');92  public performActionOnChild(s: string): void {93    if (this.childDirective) {94      this.childDirective.performAction(s);95    }96  }97}98describe('MockDirective', () => {99  let component: ExampleContainerComponent;100  let fixture: ComponentFixture<ExampleContainerComponent>;101  beforeEach(async () => {102    return TestBed.configureTestingModule({103      declarations: [104        ExampleContainerComponent,105        MockDirective(FormControlDirective),106        MockDirective(ExampleDirective),107        MockDirective(ExampleStructuralDirective),108        MockDirective(GettersAndSettersDirective),109      ],110    }).compileComponents();111  });112  beforeEach(() => {113    fixture = TestBed.createComponent(ExampleContainerComponent);114    component = fixture.componentInstance;115    fixture.detectChanges();116  });117  it('should have use a selector of the original component', () => {118    const element = fixture.debugElement.query(119      By.directive(ExampleDirective),120    );121    expect(element).not.toBeNull();122  });123  it('should have the input set on the mock component', () => {124    const debugElement = fixture.debugElement.query(125      By.directive(ExampleDirective),126    );127    const element = ngMocks.get(debugElement, ExampleDirective);128    expect(element.something).toEqual('hi');129    expect(element.exampleDirective).toEqual('bye');130  });131  it('triggers output bound behavior for extended outputs', () => {132    const debugElement = fixture.debugElement.query(133      By.directive(ExampleDirective),134    );135    const element = ngMocks.get(debugElement, ExampleDirective);136    element.someOutput.emit(true);137    expect(component.emitted).toEqual(true);138  });139  it('should memoize the return value by argument', () => {140    expect(MockDirective(ExampleDirective)).toEqual(141      MockDirective(ExampleDirective),142    );143    expect(MockDirective(ExampleDirective)).not.toEqual(144      ExampleDirective,145    );146  });147  it('can mock formControlDirective from angular', () => {148    // Some angular directives set up their metadata in a different way than @Directive does149    // I found that FormControlDirective is one of those weird directives.150    // Since I do not know how they did it, I don't know how to test it except to write this151    // Test around a known-odd directive.152    const debugElement = fixture.debugElement.query(153      By.directive(ExampleDirective),154    );155    expect(debugElement).not.toBeNull();156  });157  it('should display structural directive content', () => {158    const mockDirective = ngMocks.findInstance(159      fixture.debugElement,160      ExampleStructuralDirective,161    ) as MockedDirective<ExampleStructuralDirective>;162    // structural directives should be rendered first.163    mockDirective.__render();164    fixture.detectChanges();165    expect(mockDirective.exampleStructuralDirective).toBeTruthy();166    const debugElement = fixture.debugElement.query(167      By.css('#example-structural-directive'),168    );169    expect(debugElement.nativeElement.innerHTML).toContain('hi');170  });171  it('renders with true', async () => {172    await MockBuilder(ExampleContainerComponent).mock(173      ExampleStructuralDirective,174      {175        render: true,176      },177    );178    expect(() => MockRender(ExampleContainerComponent)).not.toThrow();179  });180  it('renders with $implicit', async () => {181    await MockBuilder(ExampleContainerComponent).mock(182      ExampleStructuralDirective,183      {184        render: {185          $implicit: true,186        },187      },188    );189    expect(() => MockRender(ExampleContainerComponent)).not.toThrow();190  });191  it('should set ViewChild directives correctly', () => {192    fixture.detectChanges();193    expect(component.childDirective).toBeTruthy();194  });195  it('should allow spying of viewchild directive methods', () => {196    const spy = component.childDirective197      ? component.childDirective.performAction198      : null;199    component.performActionOnChild('test');200    expect(spy).toHaveBeenCalledWith('test');201  });202  it('should set getters and setters to undefined instead of function', () => {203    const mockDirective = ngMocks.findInstance(204      fixture.debugElement,205      GettersAndSettersDirective,206    ) as MockedDirective<GettersAndSettersDirective>;207    expect(() => mockDirective.__render()).not.toThrow();208    expect(mockDirective.normalMethod).toBeDefined();209    expect(mockDirective.myGetter).not.toBeDefined();210    expect(mockDirective.mySetter).not.toBeDefined();211    expect(mockDirective.normalProperty).not.toBeDefined();212  });213  it('mocks several directives', () => {...

Using AI Code Generation

1import { performActionOnChild } from 'ng-mocks';2describe('TestComponent', () => {3  let component: TestComponent;4  let fixture: ComponentFixture<TestComponent>;5  beforeEach(async(() => {6    TestBed.configureTestingModule({7    })8    .compileComponents();9  }));10  beforeEach(() => {11    fixture = TestBed.createComponent(TestComponent);12    component = fixture.componentInstance;13    fixture.detectChanges();14  });15  it('should create', () => {16    expect(component).toBeTruthy();17  });18  it('should have a child component', () => {19    const child = fixture.debugElement.query(By.directive(ChildComponent));20    expect(child).not.toBeNull();21  });22  it('should have a child component with a specific input', () => {23    const child = fixture.debugElement.query(By.directive(ChildComponent));24    const input = child.properties.input;25    expect(input).toEqual('test');26  });27  it('should have a child component with a specific input using performActionOnChild', () => {28    const input = performActionOnChild(fixture.debugElement, ChildComponent, child => child.properties.input);29    expect(input).toEqual('test');30  });31});32@Component({33})34export class ChildComponent implements OnInit {35  @Input() input: string;36  constructor() { }37  ngOnInit() {38  }39}40  {{input}}41import { async, ComponentFixture, TestBed } from '@angular/core/testing';42import { ChildComponent } from './child.component';43describe('ChildComponent', () => {44  let component: ChildComponent;45  let fixture: ComponentFixture<ChildComponent>;46  beforeEach(async(() => {47    TestBed.configureTestingModule({48    })49    .compileComponents();50  }));51  beforeEach(() => {52    fixture = TestBed.createComponent(ChildComponent);53    component = fixture.componentInstance;54    component.input = 'test';55    fixture.detectChanges();56  });57  it('should create', () => {58    expect(component).toBeTruthy();59  });60});

Using AI Code Generation

1import { performActionOnChild } from 'ng-mocks';2import { TestComponent } from './test.component';3import { TestChildComponent } from './test-child.component';4describe('TestComponent', () => {5  let component: TestComponent;6  let fixture: ComponentFixture<TestComponent>;7  beforeEach(async(() => {8    TestBed.configureTestingModule({9    }).compileComponents();10  }));11  beforeEach(() => {12    fixture = TestBed.createComponent(TestComponent);13    component = fixture.componentInstance;14    fixture.detectChanges();15  });16  it('should create', () => {17    expect(component).toBeTruthy();18  });19  it('test performActionOnChild', () => {20    performActionOnChild(fixture, TestChildComponent, (child) => {21      child.testMethod();22    });23    expect(component.childComponent.testMethod).toHaveBeenCalled();24  });25});26import { Component, Input } from '@angular/core';27@Component({28})29export class TestChildComponent {30  @Input() testInput: string;31  testMethod() {}32}33import { Component } from '@angular/core';34import { TestChildComponent } from './test-child.component';35@Component({36})37export class TestComponent {38  testInput = 'test';39  @ViewChild(TestChildComponent) childComponent: TestChildComponent;40}41import { MockBuilder, MockRender } from 'ng-mocks';42import { TestChildComponent } from './test-child.component';43describe('TestChildComponent', () => {44  beforeEach(() => MockBuilder(TestChildComponent));45  it('should create', () => {46    const fixture = MockRender(TestChildComponent);47    expect(fixture.point.componentInstance).toBeTruthy();48  });49});50import { MockBuilder, MockRender } from 'ng-mocks';51import { TestComponent } from './test.component';52import { TestChildComponent } from './test-child.component';53describe('TestComponent', () => {54  beforeEach(() => MockBuilder(TestComponent).mock(TestChildComponent));55  it('should create', () => {56    const fixture = MockRender(TestComponent);57    expect(fixture.point.componentInstance).toBeTruthy();58  });59});

Using AI Code Generation

1import { TestBed } from '@angular/core/testing';2import { MockBuilder, MockRender, MockedComponentFixture } from 'ng-mocks';3import { AppComponent } from './app.component';4import { ChildComponent } from './child/child.component';5describe('AppComponent', () => {6  let component: AppComponent;7  let fixture: MockedComponentFixture<AppComponent>;8  beforeEach(() => MockBuilder(AppComponent)9    .mock(ChildComponent)10  );11  beforeEach(() => {12    fixture = MockRender(AppComponent);13    component = fixture.point.componentInstance;14  });15  it('should create the app', () => {16    expect(component).toBeTruthy();17  });18  it('should have as title "ng-mocks"', () => {19    expect(component.title).toEqual('ng-mocks');20  });21  it('should render title', () => {22    expect(fixture.nativeElement.querySelector('h1').textContent).toContain('Welcome to ng-mocks!');23  });24  it('should call the child method', () => {25    spyOn(component, 'performActionOnChild');26    component.performActionOnChild();27    expect(component.performActionOnChild).toHaveBeenCalled();28  });29});30performActionOnChild() {31    this.childComponent.performAction();32  }33performAction() {34    alert('perform action');35  }36import { TestBed } from '@angular/core/testing';37import { MockBuilder, MockRender, MockedComponentFixture, ngMocks } from 'ng-mocks';38import { AppComponent } from './app.component';39import { ChildComponent } from './child/child.component';40describe('AppComponent', () => {41  let component: AppComponent;42  let fixture: MockedComponentFixture<AppComponent>;43  beforeEach(() => MockBuilder(AppComponent)44    .mock(ChildComponent)45  );46  beforeEach(() => {47    fixture = MockRender(AppComponent);48    component = fixture.point.componentInstance;49  });50  it('should create the app', () => {

Using AI Code Generation

1import { performActionOnChild } from 'ng-mocks';2import { Component } from '@angular/core';3import { ComponentFixture, TestBed } from '@angular/core/testing';4import { ChildComponent } from './child.component';5import { ParentComponent } from './parent.component';6@Component({7})8class AppComponent {}9describe('AppComponent', () => {10  let fixture: ComponentFixture<AppComponent>;11  beforeEach(() => {12    TestBed.configureTestingModule({13    });14    fixture = TestBed.createComponent(AppComponent);15    fixture.detectChanges();16  });17  it('should create the app', () => {18    expect(fixture).toBeTruthy();19  });20  it('should call child method', () => {21    const spy = spyOn(ChildComponent.prototype, 'childMethod');22    performActionOnChild(fixture, ParentComponent, ChildComponent, (cmp) => {23      cmp.childMethod();24    });25    expect(spy).toHaveBeenCalled();26  });27});28import { Component, ViewChild } from '@angular/core';29import { ChildComponent } from './child.component';30@Component({31})32export class ParentComponent {33  @ViewChild(ChildComponent) childComponent: ChildComponent;34}35import { Component } from '@angular/core';36@Component({37})38export class ChildComponent {39  childMethod() {}40}

Using AI Code Generation

1import { performActionOnChild } from 'ng-mocks';2import { ChildComponent } from './child.component';3describe('ChildComponent', () => {4  let component: ChildComponent;5  beforeEach(() => {6    component = new ChildComponent();7  });8  it('should create', () => {9    expect(component).toBeTruthy();10  });11  it('should call the child method', () => {12    let result = performActionOnChild(component, 'childMethod', 'test');13    expect(result).toEqual('test');14  });15});16import { Component, OnInit } from '@angular/core';17@Component({18})19export class ChildComponent implements OnInit {20  constructor() { }21  ngOnInit() {22  }23  childMethod(input: string) {24    return input;25  }26}27div {28  color: red;29}30import { async, ComponentFixture, TestBed } from '@angular/core/testing';31import { ChildComponent } from './child.component';32describe('ChildComponent', () => {33  let component: ChildComponent;34  let fixture: ComponentFixture<ChildComponent>;35  beforeEach(async(() => {36    TestBed.configureTestingModule({37    })38    .compileComponents();39  }));40  beforeEach(() => {41    fixture = TestBed.createComponent(ChildComponent);42    component = fixture.componentInstance;43    fixture.detectChanges();44  });45  it('should create', () => {46    expect(component).toBeTruthy();47  });48});

Using AI Code Generation

1import { Component } from '@angular/core';2import { MockBuilder, MockRender, MockInstance, ngMocks } from 'ng-mocks';3import { ChildComponent } from './child.component';4@Component({5  template: `<app-child (childEvent)="onChildEvent($event)"></app-child>`,6})7export class AppComponent {8  onChildEvent(event) {9    console.log('event', event);10  }11}12describe('AppComponent', () => {13  beforeEach(() => MockBuilder(AppComponent).keep(ChildComponent));14  it('should create the app', () => {15    const fixture = MockRender(AppComponent);16    expect(fixture.point.componentInstance).toBeTruthy();17  });18  it('should call child component method', () => {19    const fixture = MockRender(AppComponent);20    ngMocks.performActionOnChild(fixture.point, 'childMethod');21    expect(ngMocks.findInstance(ChildComponent).childMethod).toHaveBeenCalled();22  });23  it('should emit child component event', () => {24    const fixture = MockRender(AppComponent);25    const mockInstance = MockInstance(AppComponent, AppComponent);26    spyOn(mockInstance, 'onChildEvent');27    ngMocks.performActionOnChild(fixture.point, 'childEvent');28    expect(mockInstance.onChildEvent).toHaveBeenCalled();29  });30});

Using AI Code Generation

1import { MockRender, MockInstance } from 'ng-mocks';2import { TestComponent } from './test.component';3import { TestModule } from './test.module';4describe('TestComponent', () => {5  beforeEach(() => MockRender(TestComponent, TestModule));6  it('should work', () => {7    const component = MockInstance(TestComponent);8    component.performActionOnChild();9  });10});11import { Component, ViewChild } from '@angular/core';12import { ChildComponent } from './child.component';13@Component({14})15export class TestComponent {16  @ViewChild(ChildComponent) child: ChildComponent;17  performActionOnChild() {18    this.child.doSomething();19  }20}21import { Component } from '@angular/core';22@Component({23})24export class ChildComponent {25  doSomething() {26    console.log('something');27  }28}29import { NgModule } from '@angular/core';30import { TestComponent } from './test.component';31import { ChildComponent } from './child.component';32@NgModule({33})34export class TestModule {}

Using AI Code Generation

1import { TestBed } from '@angular/core/testing';2import { AppComponent } from './app.component';3import { MockBuilder, MockRender, MockInstance } from 'ng-mocks';4describe('AppComponent', () => {5  beforeEach(() => MockBuilder(AppComponent));6  it('should create the app', () => {7    const fixture = MockRender(AppComponent);8    const app = fixture.point.componentInstance;9    expect(app).toBeTruthy();10  });11  it('should have as title "app"', () => {12    const fixture = MockRender(AppComponent);13    const app = fixture.point.componentInstance;14    expect(app.title).toEqual('app');15  });16  it('should render title in a h1 tag', () => {17    const fixture = MockRender(AppComponent);18    expect(fixture.nativeElement.querySelector('h1').textContent).toContain(19    );20  });21  it('should render title in a h1 tag', () => {22    const fixture = MockRender(AppComponent);23    const app = fixture.point.componentInstance;24    expect(app).toBeTruthy();25  });26  it('should render title in a h1 tag', () => {27    const fixture = MockRender(AppComponent);28    const app = fixture.point.componentInstance;29    expect(app).toBeTruthy();30  });31  it('should render title in a h1 tag', () => {32    const fixture = MockRender(AppComponent);33    const app = fixture.point.componentInstance;34    expect(app).toBeTruthy();35  });36  it('should render title in a h1 tag', () => {37    const fixture = MockRender(AppComponent);38    const app = fixture.point.componentInstance;39    expect(app).toBeTruthy();40  });41  it('should render title in a h1 tag', () => {42    const fixture = MockRender(AppComponent);43    const app = fixture.point.componentInstance;44    expect(app).toBeTruthy();45  });46  it('should render title in a h1 tag', () => {47    const fixture = MockRender(AppComponent);48    const app = fixture.point.componentInstance;49    expect(app).toBeTruthy();50  });51  it('should render title in a h1 tag', () => {52    const fixture = MockRender(AppComponent);53    const app = fixture.point.componentInstance;54    expect(app).toBeTruthy();55  });56  it('should render title in a h1 tag', () => {57    const fixture = MockRender(AppComponent);

Using AI Code Generation

1import { performActionOnChild } from 'ng-mocks';2import { MockBuilder, MockRender, MockInstance, MockProvider } from 'ng-mocks';3describe('TestComponent', () => {4  beforeEach(() => MockBuilder(TestComponent, TestModule));5  it('should render the component', () => {6    const fixture = MockRender(TestComponent);7    const component = fixture.point.componentInstance;8    performActionOnChild(component, 'child', (child) => {9      child.method();10    });11  });12});13In the previous post, we have seen how to test the method of the child component using ng-mocks. We have used the performActionOnChild method to call the method of the child component. In this post, we will see how to test the method of the child component using jest. We will see how to use jest.fn() to mock the method of the child component. We will also see

Using AI Code Generation

1import { MockRender, MockInstance, MockNgZone } from 'ng-mocks';2@Component({3})4class AppComponent {}5describe('AppComponent', () => {6  beforeEach(() => MockRender(AppComponent));7  it('should test performActionOnChild', () => {8    const mockZone = MockInstance(MockNgZone, 'performActionOnChild');9    expect(mockZone).toBeDefined();10  });11});

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.