How to use performActionOnChild method in ng-mocks

Best JavaScript code snippet using ng-mocks

mock-component.spec.ts

Source:mock-component.spec.ts Github

copy

Full Screen

...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', () => {...

Full Screen

Full Screen

mock-directive.spec.ts

Source:mock-directive.spec.ts Github

copy

Full Screen

...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', () => {...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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', () => {

Full Screen

Using AI Code Generation

copy

Full Screen

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}

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

Using AI Code Generation

copy

Full Screen

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 {}

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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});

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful