> For the complete documentation index, see [llms.txt](https://duncanhunter.gitbook.io/angular-and-ngrx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://duncanhunter.gitbook.io/angular-and-ngrx/21.-test-effect.md).

# 21. Test an effect

In this section we will use marble tests to test our effects observable streams.

## 1. Fix broken EventComponent test

* Add the `dispatch` method to our fake Store provided.

{% code title="src/app/event/containers/event/event.component.spec.ts" %}

```typescript
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EventComponent } from './event.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { EventService } from '../../services/event.service';
import { Store } from '@ngrx/store';

describe('EventComponent', () => {
  let component: EventComponent;
  let fixture: ComponentFixture<EventComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        {
          provide: EventService,
          useValue: {
            getAttendees: () => {},
          }
        },
        {
          provide: Store,
          useValue: {
            pipe: () => {},
            dispatch: () => {}
          }
        }
      ],
      declarations: [EventComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

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

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

```

{% endcode %}

## 2. Install jest-marbles

{% hint style="warning" %}
Important to use @latest which is for version 6 of RxJS.
{% endhint %}

* More docs <https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md>.

```
npm i jest-marbles@latest -D
```

## 3. Add effect spec file

* Add attendees.effects.spec.ts file.

{% hint style="info" %}
Unknown why toBeObservable Matcher not working with jest?
{% endhint %}

{% code title="src/app/event/state/attendees/attendees.effects.spec.ts" %}

```typescript
import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { hot, cold } from 'jest-marbles';
import { of, Observable } from 'rxjs';

import { AttendeesEffects } from './attendees.effects';
import {
  LoadAttendees,
  LoadAttendeesSuccess,
  AttendeesActions
} from './attendees.actions';
import { Attendee } from '../../../models';
import { EventService } from '../../services/event.service';

describe(`Effect: Attendess`, () => {
  let actions: Observable<AttendeesActions>;
  let effects: AttendeesEffects;
  let service: EventService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      providers: [
        AttendeesEffects,
        provideMockActions(() => actions),
        {
          provide: EventService,
          useValue: {
            getAttendees: jest.fn()
          }
        }
      ]
    });

    service = TestBed.get(EventService);
    effects = TestBed.get(AttendeesEffects);
  });

  it('should return a cold Observable of LoadAttendeesSuccess action', () => {
    const fakeAttendees = [
      { name: 'Duncan', attending: false, guests: 0 } as Attendee
    ];
    const action = new LoadAttendees();
    const completion = new LoadAttendeesSuccess(fakeAttendees);

    jest
      .spyOn(service, 'getAttendees')
      .mockImplementation(() => of(fakeAttendees));

    actions = hot('--a-', { a: action });
    const expected = cold('--(b)', { b: completion });
    expect(effects.getAttendees$).toBeObservable(expected);
  });
});

```

{% endcode %}

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/21-test-effect>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}

## Extras and Homework <a href="#extras-and-homework" id="extras-and-homework"></a>

{% hint style="danger" %}
These extra sections are for doing after the course or if you finish a section early. Please move onto the next section if doing this as a workshop when the instructor advises.

WARNING: Some of these extra sections will make it more difficult to copy and paste the code examples later on in the course.

You might need to apply the code snippet examples a little more carefully amongst any "extras section" code you may add. If you are up for some extra challenges these sections are for you.
{% endhint %}

### Read more about testing observables <a href="#convert-the-homecomponent-into-a-feature-module" id="convert-the-homecomponent-into-a-feature-module"></a>

{% embed url="<https://netbasal.com/testing-observables-in-angular-a2dbbfaf5329>" %}