Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(store): add option to mock selectors in MockStoreConfig #1836

Merged
merged 2 commits into from
May 13, 2019
Merged

feat(store): add option to mock selectors in MockStoreConfig #1836

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e009b2f
feat(store): feat(store): add option to mock selectors in MockStoreCo…
May 2, 2019
ed7cc49
feat(store): move mock selectors token to testing module
May 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 42 additions & 5 deletions modules/store/spec/store.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,11 +449,24 @@ describe('ngRx Store', () => {

describe('Mock Store', () => {
let mockStore: MockStore<TestAppSchema>;
const initialState = { counter1: 0, counter2: 1 };
const initialState = { counter1: 0, counter2: 1, counter4: 3 };
const stringSelector = 'counter4';
const memoizedSelector = createSelector(
() => initialState,
state => state.counter4
);

beforeEach(() => {
TestBed.configureTestingModule({
providers: [provideMockStore({ initialState })],
providers: [
provideMockStore({
initialState,
selectors: [
{ selector: stringSelector, value: 87 },
{ selector: memoizedSelector, value: 98 },
],
}),
],
});

mockStore = TestBed.get(Store);
Expand Down Expand Up @@ -483,7 +496,31 @@ describe('ngRx Store', () => {
mockStore.dispatch(action);
});

it('should allow mocking of store.select with string selector', () => {
it('should allow mocking of store.select with string selector using provideMockStore', () => {
const expectedValue = 87;

mockStore
.select(stringSelector)
.subscribe(result => expect(result).toBe(expectedValue));
});

it('should allow mocking of store.select with a memoized selector using provideMockStore', () => {
const expectedValue = 98;

mockStore
.select(memoizedSelector)
.subscribe(result => expect(result).toBe(expectedValue));
});

it('should allow mocking of store.pipe(select()) with a memoized selector using provideMockStore', () => {
const expectedValue = 98;

mockStore
.pipe(select(memoizedSelector))
.subscribe(result => expect(result).toBe(expectedValue));
});

it('should allow mocking of store.select with string selector using overrideSelector', () => {
const mockValue = 5;

mockStore.overrideSelector('counter1', mockValue);
Expand All @@ -493,7 +530,7 @@ describe('ngRx Store', () => {
.subscribe(result => expect(result).toBe(mockValue));
});

it('should allow mocking of store.select with a memoized selector', () => {
it('should allow mocking of store.select with a memoized selector using overrideSelector', () => {
const mockValue = 5;
const selector = createSelector(
() => initialState,
Expand All @@ -507,7 +544,7 @@ describe('ngRx Store', () => {
.subscribe(result => expect(result).toBe(mockValue));
});

it('should allow mocking of store.pipe(select()) with a memoized selector', () => {
it('should allow mocking of store.pipe(select()) with a memoized selector using overrideSelector', () => {
const mockValue = 5;
const selector = createSelector(
() => initialState,
Expand Down
1 change: 1 addition & 0 deletions modules/store/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export {
META_REDUCERS,
FEATURE_REDUCERS,
USER_PROVIDED_META_REDUCERS,
MOCK_SELECTORS,
} from './tokens';
export {
StoreModule,
Expand Down
3 changes: 3 additions & 0 deletions modules/store/src/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ export const _INITIAL_STATE = new InjectionToken(
'@ngrx/store Internal Initial State'
);
export const INITIAL_STATE = new InjectionToken('@ngrx/store Initial State');
export const MOCK_SELECTORS = new InjectionToken(
jtcrowson marked this conversation as resolved.
Show resolved Hide resolved
'@ngrx/store Initial Selector Values'
);
export const REDUCER_FACTORY = new InjectionToken(
'@ngrx/store Reducer Factory'
);
Expand Down
9 changes: 9 additions & 0 deletions modules/store/testing/src/mock_selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { MemoizedSelector, MemoizedSelectorWithProps } from '@ngrx/store';

export interface MockSelector {
selector:
| string
| MemoizedSelector<any, any>
| MemoizedSelectorWithProps<any, any, any>;
value: any;
}
15 changes: 14 additions & 1 deletion modules/store/testing/src/mock_store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import {
Action,
ActionsSubject,
INITIAL_STATE,
MOCK_SELECTORS,
ReducerManager,
Store,
createSelector,
MemoizedSelectorWithProps,
MemoizedSelector,
} from '@ngrx/store';
import { MockState } from './mock_state';
import { MockSelector } from './mock_selector';

@Injectable()
export class MockStore<T> extends Store<T> {
Expand All @@ -27,12 +29,23 @@ export class MockStore<T> extends Store<T> {
private state$: MockState<T>,
actionsObserver: ActionsSubject,
reducerManager: ReducerManager,
@Inject(INITIAL_STATE) private initialState: T
@Inject(INITIAL_STATE) private initialState: T,
@Inject(MOCK_SELECTORS) mockSelectors?: MockSelector[]
) {
super(state$, actionsObserver, reducerManager);
this.resetSelectors();
this.state$.next(this.initialState);
this.scannedActions$ = actionsObserver.asObservable();
if (mockSelectors) {
mockSelectors.forEach(mockSelector => {
const selector = mockSelector.selector;
if (typeof selector === 'string') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason why this if statement is here? I think the overrideSelector is the same 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typescript doesn't seem to be able to infer between the two:

Screen Shot 2019-05-08 at 2 06 42 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we would tweak the overrideSelector type?

overrideSelector<
    T,
    Result,
    SelectorKind =
      | string
      | MemoizedSelector<T, Result>
      | MemoizedSelectorWithProps<T, any, Result>
>(selector: SelectorKind, value: Result): SelectorKind;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tweaking the overrideSelector type straighten things out :
Screen Shot 2019-05-09 at 5 00 53 PM
However, it breaks the type checking of overrideSelector in the wild:
Screen Shot 2019-05-09 at 5 02 25 PM
Should have a type error on the last line because false is not an applicable value for the selector.

this.overrideSelector(selector, mockSelector.value);
} else {
this.overrideSelector(selector, mockSelector.value);
}
});
}
}

setState(nextState: T): void {
Expand Down
5 changes: 5 additions & 0 deletions modules/store/testing/src/testing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,18 @@ import { MockState } from './mock_state';
import {
ActionsSubject,
INITIAL_STATE,
MOCK_SELECTORS,
ReducerManager,
StateObservable,
Store,
} from '@ngrx/store';
import { MockStore } from './mock_store';
import { MockReducerManager } from './mock_reducer_manager';
import { MockSelector } from './mock_selector';

export interface MockStoreConfig<T> {
initialState?: T;
selectors?: MockSelector[];
}

export function provideMockStore<T = any>(
Expand All @@ -21,6 +24,7 @@ export function provideMockStore<T = any>(
ActionsSubject,
MockState,
{ provide: INITIAL_STATE, useValue: config.initialState },
{ provide: MOCK_SELECTORS, useValue: config.selectors },
{ provide: StateObservable, useClass: MockState },
{ provide: ReducerManager, useClass: MockReducerManager },
{ provide: Store, useClass: MockStore },
Expand All @@ -30,3 +34,4 @@ export function provideMockStore<T = any>(
export { MockReducerManager } from './mock_reducer_manager';
export { MockState } from './mock_state';
export { MockStore } from './mock_store';
export { MockSelector } from './mock_selector';
7 changes: 5 additions & 2 deletions projects/example-app/src/app/auth/containers/login-page.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,16 @@ describe('Login Page', () => {
ReactiveFormsModule,
],
declarations: [LoginPageComponent, LoginFormComponent],
providers: [provideMockStore()],
providers: [
provideMockStore({
selectors: [{ selector: fromAuth.getLoginPagePending, value: false }],
}),
],
});

fixture = TestBed.createComponent(LoginPageComponent);
instance = fixture.componentInstance;
store = TestBed.get(Store);
store.overrideSelector(fromAuth.getLoginPagePending, false);

spyOn(store, 'dispatch');
});
Expand Down
8 changes: 5 additions & 3 deletions projects/example-app/src/app/books/containers/collection-page.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,11 @@ describe('Collection Page', () => {
AddCommasPipe,
EllipsisPipe,
],
providers: [provideMockStore()],
providers: [
provideMockStore({
selectors: [{ selector: fromBooks.getBookCollection, value: [] }],
}),
],
});

fixture = TestBed.createComponent(CollectionPageComponent);
Expand All @@ -45,8 +49,6 @@ describe('Collection Page', () => {
});

it('should compile', () => {
store.overrideSelector(fromBooks.getBookCollection, []);

fixture.detectChanges();

expect(fixture).toMatchSnapshot();
Expand Down
16 changes: 10 additions & 6 deletions projects/example-app/src/app/books/containers/find-book-page.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,19 +44,23 @@ describe('Find Book Page', () => {
AddCommasPipe,
EllipsisPipe,
],
providers: [provideMockStore()],
providers: [
provideMockStore({
selectors: [
{ selector: fromBooks.getSearchQuery, value: '' },
{ selector: fromBooks.getSearchResults, value: [] },
{ selector: fromBooks.getSearchLoading, value: false },
{ selector: fromBooks.getSearchError, value: '' },
],
}),
],
});

fixture = TestBed.createComponent(FindBookPageComponent);
instance = fixture.componentInstance;
store = TestBed.get(Store);

spyOn(store, 'dispatch');

store.overrideSelector(fromBooks.getSearchQuery, '');
store.overrideSelector(fromBooks.getSearchResults, []);
store.overrideSelector(fromBooks.getSearchLoading, false);
store.overrideSelector(fromBooks.getSearchError, '');
});

it('should compile', () => {
Expand Down