# Unit Testing

Unit testing is easy with NGXS. To perform a unit test we just dispatch the events, listen to the changes and perform our expectation. A basic test looks like this:

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

describe('Zoo', () => {
  let store: Store;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [NgxsModule.forRoot([ZooState])],
    }).compileComponents();
    store = TestBed.get(Store);
  }));

  it('it toggles feed', async(() => {
    store.dispatch(new FeedAnimals());
    store.selectOnce(state => state.zoo.feed).subscribe(feed => {
      expect(feed).toBe(true);
    });
  }));
});
```

You might notice the use of `selectOnce` rather than just `select`, this is a shortcut method that allows us to only listen for one emit which is typically what we want for unit testing.

## Prepping State

Often times in your app you want to test what happens when the state is C and you dispatch action X. You can use the `store.reset(MyNewState)` to prepare the state for your next operation.

```typescript
// zoo.state.spec.ts
import { TestBed, async } from '@angular/core/testing';

export const SOME_DESIRED_STATE = {
  animals: ['Panda'],
};

describe('Zoo', () => {
  let store: Store;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [NgxsModule.forRoot([ZooState])],
    }).compileComponents();

    store = TestBed.get(Store);
    store.reset(SOME_DESIRED_STATE);
  }));

  it('it toggles feed', async(() => {
    store.dispatch(new FeedAnimals());
    store.selectOnce(state => state.zoo.feed).subscribe(feed => {
      expect(feed).toBe(true);
    });
  }));
});
```

## Testing Selectors

Selectors are just plain functions that accept the state as the argument so its really easy to test them. A simple test might look like this:

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

describe('Zoo', () => {

  it('it should select pandas', () => {
    expect(
      Zoo.pandas(['pandas', 'zebras'])
    ).toBe(['pandas']);
  });
});
```

In your application you may have selectors created dynamically using the createSelector function:

```typescript
export class ZooSelectors {
  static animalNames = (type: string) => {
    return createSelector([ZooState], (state: ZooStateModel) => {
      return state.animals
        .filter((animal) => animal.type === type )
        .map((animal => animal.name ));
    });
  }
}
```

Testing these selectors is really an easy task. You just need to mock the state and pass it as parameter to our selector:

```typescript
it('should select requested animal names from state', () => {
  const zooState = {
    animals: [ 
      { type: 'zebra', name: 'Andy'},
      { type: 'panda', name: 'Betty'},
      { type: 'zebra', name: 'Crystal'},
      { type: 'panda', name: 'Donny'},
    ]
  };

  const value = ZooSelectors.animalNames('zebra')(zooState);

  expect(value).toEqual(['Andy', 'Crystal']);
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.ngxs.io/v3.4/recipes/unit-testing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.