How to use dispatchSpy method in ng-mocks

Best JavaScript code snippet using ng-mocks

settings-container.component.spec.ts

Source:settings-container.component.spec.ts

1import { By } from '@angular/platform-browser';2import { Store } from '@ngrx/store';3import { MatSlideToggle } from '@angular/material';4import { async, ComponentFixture, TestBed } from '@angular/core/testing';5import { TestingModule, MockStore } from '@testing/utils';6import { SettingsContainerComponent } from './settings-container.component';7import {8  ActionSettingsChangeAnimationsElements,9  ActionSettingsChangeAnimationsPage,10  ActionSettingsChangeAutoNightMode,11  ActionSettingsChangeTheme,12  ActionSettingsChangeStickyHeader13} from '../settings.actions';14describe('SettingsComponent', () => {15  let component: SettingsContainerComponent;16  let fixture: ComponentFixture<SettingsContainerComponent>;17  let store: MockStore<any>;18  let dispatchSpy;19  const getThemeSelectArrow = () =>20    fixture.debugElement.queryAll(By.css('.mat-select-trigger'))[1];21  const getSelectOptions = () =>22    fixture.debugElement.queryAll(By.css('mat-option'));23  beforeEach(24    async(() => {25      TestBed.configureTestingModule({26        imports: [TestingModule],27        declarations: [SettingsContainerComponent]28      }).compileComponents();29      store = TestBed.get(Store);30      store.setState({31        settings: {32          theme: 'DEFAULT-THEME',33          autoNightMode: true,34          stickyHeader: true,35          pageAnimations: true,36          pageAnimationsDisabled: false,37          elementsAnimations: true,38          language: 'en'39        }40      });41      fixture = TestBed.createComponent(SettingsContainerComponent);42      component = fixture.componentInstance;43      fixture.detectChanges();44    })45  );46  it('should be created', () => {47    expect(component).toBeTruthy();48    expect(component.settings.theme).toBe('DEFAULT-THEME');49    expect(component.settings.autoNightMode).toBeTruthy();50    expect(component.settings.pageAnimations).toBeTruthy();51  });52  it('should dispatch change sticky header on sticky header toggle', () => {53    dispatchSpy = spyOn(store, 'dispatch');54    const componentDebug = fixture.debugElement;55    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[0];56    slider.triggerEventHandler('change', { checked: false });57    fixture.detectChanges();58    expect(dispatchSpy).toHaveBeenCalledTimes(2);59    expect(dispatchSpy).toHaveBeenCalledWith(60      new ActionSettingsChangeStickyHeader({ stickyHeader: false })61    );62  });63  it('should dispatch change theme action on theme selection', () => {64    dispatchSpy = spyOn(store, 'dispatch');65    getThemeSelectArrow().triggerEventHandler('click', {});66    fixture.detectChanges();67    getSelectOptions()[1].triggerEventHandler('click', {});68    fixture.detectChanges();69    expect(dispatchSpy).toHaveBeenCalledTimes(2);70    expect(dispatchSpy).toHaveBeenCalledWith(71      new ActionSettingsChangeTheme({ theme: 'LIGHT-THEME' })72    );73  });74  it('should dispatch change auto night mode on night mode toggle', () => {75    dispatchSpy = spyOn(store, 'dispatch');76    const componentDebug = fixture.debugElement;77    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[1];78    slider.triggerEventHandler('change', { checked: false });79    fixture.detectChanges();80    expect(dispatchSpy).toHaveBeenCalledTimes(2);81    expect(dispatchSpy).toHaveBeenCalledWith(82      new ActionSettingsChangeAutoNightMode({ autoNightMode: false })83    );84  });85  it('should dispatch change animations page', () => {86    dispatchSpy = spyOn(store, 'dispatch');87    const componentDebug = fixture.debugElement;88    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[2];89    slider.triggerEventHandler('change', { checked: false });90    fixture.detectChanges();91    expect(dispatchSpy).toHaveBeenCalledTimes(2);92    expect(dispatchSpy).toHaveBeenCalledWith(93      new ActionSettingsChangeAnimationsPage({ pageAnimations: false })94    );95  });96  it('should dispatch change animations elements', () => {97    dispatchSpy = spyOn(store, 'dispatch');98    const componentDebug = fixture.debugElement;99    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[3];100    slider.triggerEventHandler('change', { checked: false });101    fixture.detectChanges();102    expect(dispatchSpy).toHaveBeenCalledTimes(2);103    expect(dispatchSpy).toHaveBeenCalledWith(104      new ActionSettingsChangeAnimationsElements({ elementsAnimations: false })105    );106  });107  it('should disable change animations page when disabled is set in state', () => {108    store.setState({109      settings: {110        theme: 'DEFAULT-THEME',111        autoNightMode: true,112        pageAnimations: true,113        pageAnimationsDisabled: true, // change animations disabled114        elementsAnimations: true,115        language: 'en'116      }117    });118    fixture.detectChanges();119    dispatchSpy = spyOn(store, 'dispatch');120    const componentDebug = fixture.debugElement;121    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[2];122    slider.triggerEventHandler('change', { checked: false });123    fixture.detectChanges();124    expect(dispatchSpy).toHaveBeenCalledTimes(0);125  });...

useMusic.test.ts

Source:useMusic.test.ts

1import {renderHook} from '@testing-library/react-hooks';2import {useDispatch} from 'react-redux';3import useMusic from 'src/hooks/useMusic';4import {MUSIC_CATEGORIES} from 'src/utils/consts';5describe('useMusic hook test', () => {6  it('getMusic function should dispatch fetching music', () => {7    const dispatchSpy = jest.fn();8    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);9    const {result} = renderHook(() => useMusic());10    result.current.getMusic();11    expect(dispatchSpy).toBeCalledTimes(1);12    expect(dispatchSpy).toBeCalledWith({13      type: 'FETCH_MUSIC',14    });15  });16  it('search function should dispatch proper actions when queryText length > 3', () => {17    const dispatchSpy = jest.fn();18    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);19    const queryText = 'lopez';20    const {result} = renderHook(() => useMusic());21    result.current.search(queryText);22    expect(dispatchSpy).toBeCalledTimes(5);23    expect(dispatchSpy).toBeCalledWith({24      type: 'CLEAR_MUSIC_COLLECTION',25    });26    expect(dispatchSpy).toBeCalledWith({27      type: 'SET_MUSIC_OFFSET',28      payload: {29        offset: 0,30      },31    });32    expect(dispatchSpy).toBeCalledWith({33      type: 'SET_MUSIC_QUERY',34      payload: {35        query: queryText,36      },37    });38    expect(dispatchSpy).toBeCalledWith({39      type: 'FETCH_MUSIC',40    });41    expect(dispatchSpy).toBeCalledWith({42      type: 'CLEAR_MUSIC_FILTERS',43      payload: {44        checked: true,45      },46    });47  });48  it('search function should not dispatch any actions when queryText length < 4', () => {49    const dispatchSpy = jest.fn();50    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);51    const queryText = 'lop';52    const {result} = renderHook(() => useMusic());53    result.current.search(queryText);54    expect(dispatchSpy).toBeCalledTimes(0);55  });56  it('filter function should dispatch action update filters', () => {57    const dispatchSpy = jest.fn();58    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);59    const {result} = renderHook(() => useMusic());60    const filter = {61      name: MUSIC_CATEGORIES[0],62      checked: true,63    };64    result.current.filter(filter);65    expect(dispatchSpy).toBeCalledTimes(1);66    expect(dispatchSpy).toBeCalledWith({67      type: 'UPDATE_MUSIC_FILTERS',68      payload: {69        filter: filter,70      },71    });72  });73  it('clear function should dispatch action clear filters with check parameter true', () => {74    const dispatchSpy = jest.fn();75    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);76    const {result} = renderHook(() => useMusic());77    result.current.clear(true);78    expect(dispatchSpy).toBeCalledTimes(1);79    expect(dispatchSpy).toBeCalledWith({80      type: 'CLEAR_MUSIC_FILTERS',81      payload: {82        checked: true,83      },84    });85  });86  it('clear function should dispatch action clear filters with check parameter false', () => {87    const dispatchSpy = jest.fn();88    jest.mocked(useDispatch).mockReturnValue(dispatchSpy);89    const {result} = renderHook(() => useMusic());90    result.current.clear(false);91    expect(dispatchSpy).toBeCalledTimes(1);92    expect(dispatchSpy).toBeCalledWith({93      type: 'CLEAR_MUSIC_FILTERS',94      payload: {95        checked: false,96      },97    });98  });...

error.test.js

Source:error.test.js

1import error from './index'2import { push } from 'react-router-redux'3describe('error middleware', () => {4  const dispatchSpy = jest.fn()5  const nextHandler = error({ dispatch: dispatchSpy })6  it('must return a function to handle next', () => {7    expect(typeof nextHandler).toBe('function')8    expect(nextHandler.length).toBe(1)9  })10  describe('handle next', () => {11    const nextSpy = jest.fn()12    const actionHandler = nextHandler(nextSpy)13    it('must return a function to handle action', () => {14      expect(typeof actionHandler).toBe('function')15      expect(actionHandler.length).toBe(1)16    })17    describe('handle action', () => {18      it('must call the function passed to handle next', () => {19        actionHandler()20        expect(nextSpy).toHaveBeenCalled()21      })22      it('let pass any action', () => {23        const result = actionHandler({24          type: 'ANY_ACTION'25        })26        expect(result).toBeUndefined()27      })28      it('must handle the SWAPI_FAILURE action with no meta data', () => {29        const result = actionHandler({30          type: 'SWAPI_FAILURE'31        })32        expect(dispatchSpy).toHaveBeenCalled()33        expect(dispatchSpy).toHaveBeenCalledWith(push('/error'))34      })35      it('must handle the SWAPI_FAILURE action with 500 status', () => {36        const result = actionHandler({37          type: 'SWAPI_FAILURE',38          meta: { status: 500 }39        })40        expect(dispatchSpy).toHaveBeenCalled()41        expect(dispatchSpy).toHaveBeenCalledWith(push('/error'))42      })43      it('must handle the SWAPI_FAILURE action with 404 status', () => {44        const result = actionHandler({45          type: 'SWAPI_FAILURE',46          meta: { status: 404 }47        })48        expect(dispatchSpy).toHaveBeenCalled()49        expect(dispatchSpy).toHaveBeenCalledWith(push('/404'))50      })51    })52  })...

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2import { Component } from '@angular/core';3import { ComponentFixture, TestBed } from '@angular/core/testing';4@Component({5  template: '<button (click)="onClick()">Click Me</button>',6})7export class TestComponent {8  onClick() {9    console.log('Clicked!');10  }11}12describe('TestComponent', () => {13  let fixture: ComponentFixture<TestComponent>;14  let component: TestComponent;15  beforeEach(() => {16    TestBed.configureTestingModule({17    }).compileComponents();18    fixture = TestBed.createComponent(TestComponent);19    component = fixture.componentInstance;20  });21  it('should call onClick method', () => {22    const spy = dispatchSpy(fixture, 'onClick');23    expect(spy).toHaveBeenCalled();24  });25});26import { TestComponent } from './test';27describe('TestComponent', () => {28  it('should create', () => {29    expect(TestComponent).toBeDefined();30  });31});32import { TestComponent } from './test';33describe('TestComponent', () => {34  it('should create', () => {35    expect(TestComponent).toBeDefined();36  });37});38import { TestComponent } from './test';39describe('TestComponent', () => {40  it('should create', () => {41    expect(TestComponent).toBeDefined();42  });43});44import { TestComponent } from './test';45describe('TestComponent', () => {46  it('should create', () => {47    expect(TestComponent).toBeDefined();48  });49});50import { TestComponent } from './test';51describe('TestComponent', () => {52  it('should create', () => {53    expect(TestComponent).toBeDefined();54  });55});56import { TestComponent } from './test';57describe('TestComponent', () => {58  it('should create', () => {59    expect(TestComponent).toBeDefined();60  });61});62import { TestComponent } from './test';63describe('TestComponent', () => {64  it('should create', () => {65    expect(TestComponent).toBeDefined();66  });67});68import { TestComponent } from './test';69describe('TestComponent', () => {70  it('should create', () =>

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2import { dispatchEvent } from 'ng-mocks';3import { createComponent } from 'ng-mocks';4import { mockProvider } from 'ng-mocks';5import { mockPipe } from 'ng-mocks';6import { mockDirective } from 'ng-mocks';7import { mockComponent } from 'ng-mocks';8import { mockExport } from 'ng-mocks';9import { mockProvider } from 'ng-mocks';10import { mockPipe } from 'ng-mocks';11import { mockDirective } from 'ng-mocks';12import { mockComponent } from 'ng-mocks';13import { mockExport } from 'ng-mocks';14import { mockProvider } from 'ng-mocks';15import { mockPipe } from 'ng-mocks';16import { mockDirective } from 'ng-mocks';17import { mockComponent } from 'ng-mocks';18import { mockExport } from 'ng-mocks';19import { mockProvider } from 'ng-mocks';20import { mockPipe } from 'ng-mocks';21import { mockDirective } from 'ng-mocks';22import { mockComponent } from 'ng-mocks';

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2import { Component, EventEmitter, Input, Output } from '@angular/core';3@Component({4})5export class ChildComponent {6  @Input() public input: string;7  @Output() public output = new EventEmitter<string>();8}9const outputSpy = dispatchSpy(ChildComponent, 'output');10expect(outputSpy).toHaveBeenCalled();11expect(outputSpy).toHaveBeenCalledWith('some value');12import { dispatchSpy } from 'ng-mocks';13import { Component } from '@angular/core';14@Component({15})16export class ChildComponent {17  public static staticMethod(): void {18    console.log('static method was called');19  }20}21const staticMethodSpy = dispatchSpy(ChildComponent, 'staticMethod');22expect(staticMethodSpy).toHaveBeenCalled();

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2import { createComponent } from 'ng-mocks';3import { AppComponent } from './app.component';4describe('AppComponent', () => {5  const component = createComponent(AppComponent);6  it('should create the app', () => {7    const fixture = TestBed.createComponent(AppComponent);8    const app = fixture.debugElement.componentInstance;9    expect(app).toBeTruthy();10  });11  it(`should have as title 'testing'`, () => {12    const fixture = TestBed.createComponent(AppComponent);13    const app = fixture.debugElement.componentInstance;14    expect(app.title).toEqual('testing');15  });16  it('should render title in a h1 tag', () => {17    const fixture = TestBed.createComponent(AppComponent);18    fixture.detectChanges();19    const compiled = fixture.debugElement.nativeElement;20    expect(compiled.querySelector('h1').textContent).toContain('Welcome to testing!');21  });22  it('should call the onClick method', () => {23    const spy = spyOn(component, 'onClick');24    dispatchSpy(spy);25    expect(spy).toHaveBeenCalled();26  });27  it('should call the onClick method with the right value', () => {28    const spy = spyOn(component, 'onClick');29    dispatchSpy(spy);30    expect(spy).toHaveBeenCalledWith('Hello World');31  });32  it('should call the onClick method with the right value', () => {33    const spy = spyOn(component, 'onClick');34    dispatchSpy(spy, 'Hello World');35    expect(spy).toHaveBeenCalledWith('Hello World');36  });37});

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2describe('AppComponent', () => {3  let component: AppComponent;4  let fixture: ComponentFixture<AppComponent>;5  let mockStore: MockStore;6  beforeEach(async(() => {7    TestBed.configureTestingModule({8      imports: [ReactiveFormsModule, FormsModule, StoreModule.forRoot({})],9      providers: [provideMockStore({})],10    }).compileComponents();11  }));12  beforeEach(() => {13    fixture = TestBed.createComponent(AppComponent);14    component = fixture.componentInstance;15    mockStore = TestBed.inject(MockStore);16    fixture.detectChanges();17  });18  it('should create', () => {19    expect(component).toBeTruthy();20  });21  it('should dispatch action', () => {22    component.add();23    expect(mockStore.dispatch).toHaveBeenCalledWith(24      new AddTodoAction({ title: 'Hello', completed: false })25    );26  });27});28import { provideMockStore } from '@ngrx/store/testing';29describe('AppComponent', () => {30  let component: AppComponent;31  let fixture: ComponentFixture<AppComponent>;32  let mockStore: MockStore;33  beforeEach(async(() => {34    TestBed.configureTestingModule({35      imports: [ReactiveFormsModule, FormsModule, StoreModule.forRoot({})],36      providers: [provideMockStore({})],37    }).compileComponents();38  }));39  beforeEach(() => {40    fixture = TestBed.createComponent(AppComponent);41    component = fixture.componentInstance;42    mockStore = TestBed.inject(MockStore);43    fixture.detectChanges();44  });45  it('should create', () => {46    expect(component).toBeTruthy();47  });48  it('should dispatch action', () => {49    component.add();50    expect(mockStore.dispatch).toHaveBeenCalledWith(51      new AddTodoAction({ title: 'Hello', completed: false })52    );53  });54});55import { provideMockStore } from

Using AI Code Generation

1import { dispatchSpy } from 'ng-mocks';2import { MockBuilder, MockRender } from 'ng-mocks';3import { AppModule } from './app.module';4import { AppService } from './app.service';5describe('AppService', () => {6  beforeEach(() => MockBuilder(AppService).keep(AppModule));7  it('should dispatch a spy', () => {8    const fixture = MockRender('<div></div>');9    const service = fixture.point.injector.get(AppService);10    dispatchSpy(service.mySpy).next('my-value');11    expect(service.mySpy).toHaveBeenCalledWith('my-value');12  });13});14import { Injectable } from '@angular/core';15import { Subject } from 'rxjs';16@Injectable()17export class AppService {18  public mySpy = jasmine.createSpy('mySpy');19  public mySubject = new Subject();20}21import { NgModule } from '@angular/core';22import { AppService } from './app.service';23@NgModule({24})25export class AppModule {}26import { Component } from '@angular/core';27import { AppService } from './app.service';28@Component({29})30export class AppComponent {31  constructor(service: AppService) {32    service.mySubject.subscribe(value => {33      service.mySpy(value);34    });35  }36}37import { MockBuilder, MockRender } from 'ng-mocks';38import { AppModule } from './app.module';39import { AppComponent } from './app.component';40describe('AppComponent', () => {41  beforeEach(() => MockBuilder(AppComponent).keep(AppModule));42  it('should call the spy', () => {43    const fixture = MockRender('<app-root></app-root>');44    const service = fixture.point.injector.get(AppService);45    service.mySubject.next('my-value');46    expect(service.mySpy).toHaveBeenCalledWith('my-value');47  });48});49import { MockBuilder, MockRender } from 'ng-mocks';50import { AppModule } from './app.module';51import { AppComponent } from './app.component';52describe('

Using AI Code Generation

1describe('testing', () => {2  it('should test', () => {3    const spy = dispatchSpy();4    expect(spy).toHaveBeenCalled();5  });6});

Using AI Code Generation

1import { dispatchSpy } from 'jasmine';2dispatchSpy('test').and.callFake(() => { return true; });3import { dispatchSpy } from 'jasmine';4dispatchSpy('test').and.callFake(() => { return true; });5import { dispatchSpy } from 'jasmine';6dispatchSpy('test').and.callFake(() => { return true; });7import { dispatchSpy } from 'jasmine';8dispatchSpy('test').and.callFake(() => { return true; });

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.