ngrx test example

counter-control.reducer.spec.ts

import { reducer, initialState } from './counter-control.reducer';
import * as CounterControlActions from './counter-control.actions';

describe('CounterControl Reducer', () => {
  describe('an unknown action', () => {
    it('should return the previous state', () => {
      const action = {} as any;

      const result = reducer(initialState, action);

      expect(result).toEqual(initialState);
    });

    it('should return the current state', () => {
      const result = reducer(
        initialState,
        CounterControlActions.loadCounterControls()
      );
      expect(result).toEqual(initialState);
    });

    it('should return the incremented state', () => {
      const result = reducer(
        initialState,
        CounterControlActions.incrementCounter()
      );
      expect(result.counter).toBe(initialState.counter + 1);
    });
  });
});

counter-control.selectors.spec.ts

import * as fromCounterControl from './counter-control.reducer';
import {
  selectCounterControlState,
  selectCounter
} from './counter-control.selectors';

describe('CounterControl Selectors', () => {
  it('should select the feature state', () => {
    const result = selectCounterControlState({
      [fromCounterControl.counterControlFeatureKey]:
        fromCounterControl.initialState
    });
    expect(result).toEqual(fromCounterControl.initialState);
  });

  it('should select the counter', () => {
    const n = selectCounter.projector({ counter: 2 });
    expect(n).toEqual(2);
  });
});

counter-viewer.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MemoizedSelector } from '@ngrx/store';
import { provideMockStore, MockStore } from '@ngrx/store/testing';
import { By } from '@angular/platform-browser';
import { CounterViewerComponent } from './counter-viewer.component';
import { selectCounter } from '../store/counter-control.selectors';
import { State } from '../store/counter-control.reducer';
import { counterControlFeatureKey } from '../store/counter-control.reducer';

describe('CounterViewerComponent', () => {
  let component: CounterViewerComponent;
  let fixture: ComponentFixture<CounterViewerComponent>;
  let mockStore: MockStore;
  let mockSelectCounter: MemoizedSelector<State, number>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CounterViewerComponent],
      providers: [
        provideMockStore({
          initialState: { [counterControlFeatureKey]: { counter: 0 } }
        })
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CounterViewerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    mockStore = TestBed.inject(MockStore);
    mockSelectCounter = mockStore.overrideSelector(selectCounter, 0);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should return hello', () => {
		expect(component.message).toBe('hello');
	});

  it('should have hello: 1', () => {
    mockSelectCounter.setResult(1);
    mockStore.refreshState();
    fixture.detectChanges();
    const elm = fixture.debugElement.query(By.css('p'));
    expect(elm.nativeElement.innerText).toBe('hello: 1');
  });
});

increment-button.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { counterControlFeatureKey } from '../store/counter-control.reducer';
import { provideMockStore, MockStore } from '@ngrx/store/testing';

import { IncrementButtonComponent } from './increment-button.component';
import { incrementCounter } from '../store/counter-control.actions';

describe('IncrementButtonComponent', () => {
  let component: IncrementButtonComponent;
  let fixture: ComponentFixture<IncrementButtonComponent>;
  let mockStore: MockStore;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [IncrementButtonComponent],
      providers: [
        provideMockStore({
          initialState: { [counterControlFeatureKey]: { counter: 0 } }
        })
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(IncrementButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    mockStore = TestBed.inject(MockStore);
    spyOn(mockStore, 'dispatch');
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should dispatch incrementCounter', () => {
    component.onClick();
    expect(mockStore.dispatch).toHaveBeenCalledWith(incrementCounter());
  });
});