feat(store): use provideMockStore outside of the TestBed #2759

markostanimirovic · 2020-10-22T16:57:29Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https:/ngrx/platform/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

provideMockStore can only be used with TestBed.configureTestingModule.

Closes #2745

What is the new behavior?

provideMockStore can be used with TestBed.configureTestingModule and Injector.create.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

ngrxbot · 2020-10-22T17:04:25Z

Preview docs changes for 93d567a at https://previews.ngrx.io/pr2759-93d567a0/

alex-okrushko · 2020-10-27T01:40:12Z

🤔
I like the idea @markostanimirovic 👍
Let me think about it a bit to see if it can be further iterated.

alex-okrushko

I really like where this is going!

alex-okrushko · 2020-11-07T15:35:40Z

modules/store/testing/src/testing.ts

+ * });
+ * });
+ * ```
+ */
 export function provideMockStore<T = any>(


How about the following?

This is close to what you had, but I want to make sure that useExisting is used, and it's a bit more compacted.

Suggested change

export function provideMockStore<T = any>(

export function provideMockStore<T = any>(

config: MockStoreConfig<T> = {}

): Provider[] {

setNgrxMockEnvironment(true);

return [

{ provide: ActionsSubject, useFactory: () => new ActionsSubject(), deps: []},

{ provide: MockState, useFactory: () => new MockState<T>(), deps: []},

{ provide: MockReducerManager, useFactory: () => new MockReducerManager(), deps: []},

{ provide: INITIAL_STATE, useValue: config.initialState || {} },

{ provide: MOCK_SELECTORS, useValue: config.selectors },

{ provide: StateObservable, useExisting: MockState },

{ provide: ReducerManager, useExisting: MockReducerManager },

{

provide: MockStore,

useFactory: mockStoreFactory,

deps: [

MockState,

ActionsSubject,

ReducerManager,

INITIAL_STATE,

MOCK_SELECTORS,

],

},

{ provide: Store, useExisting: MockStore },

];

}

@alex-okrushko
Done. I assumed that StateObservable needs useExisting: MockState, but I added useFactory: () => new MockState() in order to keep the same behavior as previous { provide: StateObservable, useClass: MockState }.

About return type, I kept (ValueProvider | ExistingProvider | FactoryProvider)[], because if Provider[] is used, following code will not compile:

injector = Injector.create({ providers: provideMockStore(...) });

because Provider is not compatible with StaticProvider and (ValueProvider | ExistingProvider | FactoryProvider) is compatible with both Provider and StaticProvider.

alex-okrushko · 2020-11-07T15:37:40Z

modules/store/testing/src/testing.ts

+ mockSelectors
+ );
+}
+


Instead of going through the Injector every time, maybe let's create the getMockStore or createMockStore function:

Suggested change

export function getMockStore<T>(

config: MockStoreConfig<T> = {}

): MockStore<T> {

return Injector.create({ providers: [ provideMockStore(config) ]}).get(MockStore);

}

modules/store/testing/spec/mock_store.spec.ts

brandonroberts · 2020-11-14T02:46:38Z

modules/store/testing/src/testing.ts

- MockStore,
+ {
+ provide: ActionsSubject,
+ useFactory: () => new ActionsSubject(),


Why not use useClass here?

Suggested change

useFactory: () => new ActionsSubject(),

useClass: ActionsSubject,

@brandonroberts Because class providers are different for TestBed.configureTestingModule and Injector.create. TestBed.configureTestingModule expects ClassProvider. On the other hand, Injector.create expects StaticClassProvider. However, they both accept FactoryProvider.

Ok, what about just { provide: ActionsSubject, deps: [] }? I know it's compatible with the Injector, and should be compatible with the TestBed also

For some reason the ActionsSubject is undefined in this case.

brandonroberts · 2020-11-14T02:49:46Z

modules/store/testing/src/testing.ts

+ useFactory: () => new ActionsSubject(),
+ deps: [],
+ },
+ { provide: MockState, useFactory: () => new MockState<T>(), deps: [] },


Same here with useClass

brandonroberts · 2020-11-14T02:49:57Z

modules/store/testing/src/testing.ts

+ { provide: MockState, useFactory: () => new MockState<T>(), deps: [] },
+ {
+ provide: MockReducerManager,
+ useFactory: () => new MockReducerManager(),


Same with useClass

brandonroberts · 2020-11-14T02:54:33Z

This would be a separate effort, but what about creating a factory function for creating a Store also? I did this as a POC for using NgRx Store in React a while back.

https:/brandonroberts/react-ngrx-poc/blob/master/src/store.tsx

cc: @alex-okrushko

alex-okrushko

Thanks a lot @markostanimirovic 👍

…2759) Closes #2745

markostanimirovic force-pushed the provide-mock-store branch from 42d8238 to 232ba9c Compare October 23, 2020 22:37

markostanimirovic changed the title ~~feat(store): create Store/MockStore outside of the TestBed~~ feat(store): use provideMockStore outside of the TestBed Oct 23, 2020

markostanimirovic force-pushed the provide-mock-store branch 2 times, most recently from ce217ec to d63fc80 Compare October 26, 2020 18:40

markostanimirovic marked this pull request as ready for review October 26, 2020 18:59

markostanimirovic mentioned this pull request Oct 26, 2020

feat(effects): use provideMockActions outside of the TestBed #2762

Merged

3 tasks

brandonroberts assigned alex-okrushko Oct 28, 2020

alex-okrushko requested changes Nov 7, 2020

View reviewed changes

alex-okrushko mentioned this pull request Nov 8, 2020

Store: add ability to create the Store/MockStore outside of the TestBed #2745

Closed

feat(store): use provideMockStore outside of the TestBed

7270966

markostanimirovic force-pushed the provide-mock-store branch from d63fc80 to ad4ae11 Compare November 9, 2020 18:42

add getMockStore; improve provideMockStore

93d567a

markostanimirovic force-pushed the provide-mock-store branch from ad4ae11 to 93d567a Compare November 9, 2020 18:49

markostanimirovic requested a review from alex-okrushko November 9, 2020 20:43

brandonroberts requested changes Nov 14, 2020

View reviewed changes

markostanimirovic requested a review from brandonroberts November 14, 2020 15:08

alex-okrushko approved these changes Nov 15, 2020

View reviewed changes

brandonroberts approved these changes Nov 15, 2020

View reviewed changes

brandonroberts merged commit 1650582 into ngrx:master Nov 15, 2020

brandonroberts pushed a commit that referenced this pull request Nov 25, 2020

feat(store): add support for provideMockStore outside of the TestBed (#…

8447ffc

…2759) Closes #2745

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(store): use provideMockStore outside of the TestBed #2759

feat(store): use provideMockStore outside of the TestBed #2759

markostanimirovic commented Oct 22, 2020 •

edited

Loading

ngrxbot commented Oct 22, 2020 •

edited

Loading

alex-okrushko commented Oct 27, 2020

alex-okrushko left a comment

alex-okrushko Nov 7, 2020

markostanimirovic Nov 9, 2020

alex-okrushko Nov 7, 2020

markostanimirovic Nov 9, 2020

brandonroberts Nov 14, 2020

markostanimirovic Nov 14, 2020

brandonroberts Nov 14, 2020

alex-okrushko Nov 15, 2020

brandonroberts Nov 14, 2020

brandonroberts Nov 14, 2020

brandonroberts commented Nov 14, 2020

alex-okrushko left a comment

-export function provideMockStore<T = any>(
+export function provideMockStore<T = any>(
+ config: MockStoreConfig<T> = {}
+): Provider[] {
+ setNgrxMockEnvironment(true);
+ return [
+ { provide: ActionsSubject, useFactory: () => new ActionsSubject(), deps: []},
+ { provide: MockState, useFactory: () => new MockState<T>(), deps: []},
+ { provide: MockReducerManager, useFactory: () => new MockReducerManager(), deps: []},
+ { provide: INITIAL_STATE, useValue: config.initialState || {} },
+ { provide: MOCK_SELECTORS, useValue: config.selectors },
+ { provide: StateObservable, useExisting: MockState },
+ { provide: ReducerManager, useExisting: MockReducerManager },
+ {
+ provide: MockStore,
+ useFactory: mockStoreFactory,
+ deps: [
+ MockState,
+ ActionsSubject,
+ ReducerManager,
+ INITIAL_STATE,
+ MOCK_SELECTORS,
+ ],
+ },
+ { provide: Store, useExisting: MockStore },
+ ];
+}

+export function getMockStore<T>(
+ config: MockStoreConfig<T> = {}
+): MockStore<T> {
+ return Injector.create({ providers: [ provideMockStore(config) ]}).get(MockStore);
+}

	useFactory: () => new ActionsSubject(),
	useClass: ActionsSubject,

feat(store): use provideMockStore outside of the TestBed #2759

feat(store): use provideMockStore outside of the TestBed #2759

Conversation

markostanimirovic commented Oct 22, 2020 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

ngrxbot commented Oct 22, 2020 • edited Loading

alex-okrushko commented Oct 27, 2020

alex-okrushko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandonroberts commented Nov 14, 2020

alex-okrushko left a comment

Choose a reason for hiding this comment

markostanimirovic commented Oct 22, 2020 •

edited

Loading

ngrxbot commented Oct 22, 2020 •

edited

Loading