feat(store): use provideMockStore outside of the TestBed by markostanimirovic · Pull Request #2759 · ngrx/platform

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

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/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://github.com/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

-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,

Uh oh!

Conversation

markostanimirovic commented Oct 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

ngrxbot commented Oct 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alex-okrushko commented Oct 27, 2020

Uh oh!

alex-okrushko left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandonroberts commented Nov 14, 2020

Uh oh!

alex-okrushko left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

markostanimirovic commented Oct 22, 2020 •

edited

Loading

ngrxbot commented Oct 22, 2020 •

edited

Loading