feat(schematics): add option to use MockStore in container tests (#2029)

Closes #2028

Author: John Crowson

modules/schematics/BUILD

@@ -33,6 +33,7 @@ npm_package(
         "**/src/*/files/**/*",
         "**/src/*/common-files/**/*",
         "**/src/*/creator-files/**/*",
+        "**/src/*/integration-files/**/*",
         "**/schema.json",
         "**/migration.json",
     ]),
@@ -56,6 +57,7 @@ ts_test_library(
         "**/src/*/files/**/*",
         "**/src/*/common-files/**/*",
         "**/src/*/creator-files/**/*",
+        "**/src/*/integration-files/**/*",
         "**/*.json",
     ]),
     deps = [

modules/schematics/src/container/files/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
-import { Store, StoreModule } from '@ngrx/store';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
 describe('<%= classify(name) %>Component', () => {
   let component: <%= classify(name) %>Component;
   let fixture: ComponentFixture<<%= classify(name) %>Component>;
-  let store: Store<any>;
+  let store: MockStore<any>;
 
   beforeEach(async() => {
     TestBed.configureTestingModule({
-      imports: [ StoreModule.forRoot({}) ],
+      providers: [ provideMockStore() ],
       declarations: [ <%= classify(name) %>Component ]
     });
 
@@ -22,7 +22,6 @@ describe('<%= classify(name) %>Component', () => {
     component = fixture.componentInstance;
     store = TestBed.get<Store>(Store);
 
-    spyOn(store, 'dispatch').and.callThrough();
     fixture.detectChanges();
   });
 

modules/schematics/src/container/index.spec.ts

@@ -110,18 +110,29 @@ describe('Container Schematic', () => {
   });
 
   it('should update the component spec', async () => {
-    const options = { ...defaultOptions, spec: true };
+    const options = { ...defaultOptions, spec: true, testDepth: 'unit' };
     const tree = await schematicRunner
       .runSchematicAsync('container', options, appTree)
       .toPromise();
     const content = tree.readContent(
       `${projectPath}/src/app/foo/foo.component.spec.ts`
     );
     expect(content).toMatch(
-      /import { Store, StoreModule } from '@ngrx\/store';/
+      /import { provideMockStore, MockStore } from '@ngrx\/store\/testing';/
     );
   });
 
+  it('should use the provideMockStore helper if unit', async () => {
+    const options = { ...defaultOptions, spec: true, testDepth: 'unit' };
+    const tree = await schematicRunner
+      .runSchematicAsync('container', options, appTree)
+      .toPromise();
+    const content = tree.readContent(
+      `${projectPath}/src/app/foo/foo.component.spec.ts`
+    );
+    expect(content).toMatch(/providers: \[ provideMockStore\(\) \]/);
+  });
+
   it('should inject Store correctly', async () => {
     const options = { ...defaultOptions, spec: true };
     const tree = await schematicRunner
@@ -132,4 +143,17 @@ describe('Container Schematic', () => {
     );
     expect(content).toMatch(/store = TestBed\.get<Store>\(Store\);/);
   });
+
+  it('should use StoreModule if integration test', async () => {
+    const options = { ...defaultOptions, spec: true };
+    const tree = await schematicRunner
+      .runSchematicAsync('container', options, appTree)
+      .toPromise();
+    const content = tree.readContent(
+      `${projectPath}/src/app/foo/foo.component.spec.ts`
+    );
+    expect(content).toMatch(
+      /import { Store, StoreModule } from '@ngrx\/store';/
+    );
+  });
 });

modules/schematics/src/container/index.ts

@@ -136,17 +136,20 @@ export default function(options: ContainerOptions): Rule {
       options
     );
 
-    const templateSource = apply(url('./files'), [
-      options.spec
-        ? noop()
-        : filter(path => !path.endsWith('.spec.ts.template')),
-      applyTemplates({
-        'if-flat': (s: string) => (options.flat ? '' : s),
-        ...stringUtils,
-        ...(options as object),
-      } as any),
-      move(parsedPath.path),
-    ]);
+    const templateSource = apply(
+      url(options.testDepth === 'unit' ? './files' : './integration-files'),
+      [
+        options.spec
+          ? noop()
+          : filter(path => !path.endsWith('.spec.ts.template')),
+        applyTemplates({
+          'if-flat': (s: string) => (options.flat ? '' : s),
+          ...stringUtils,
+          ...(options as object),
+        } as any),
+        move(parsedPath.path),
+      ]
+    );
 
     return chain([
       externalSchematic('@schematics/angular', 'component', {

modules/schematics/src/container/integration-files/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
+import { Store, StoreModule } from '@ngrx/store';
+
+describe('<%= classify(name) %>Component', () => {
+  let component: <%= classify(name) %>Component;
+  let fixture: ComponentFixture<<%= classify(name) %>Component>;
+  let store: Store<any>;
+
+  beforeEach(async() => {
+    TestBed.configureTestingModule({
+      imports: [ StoreModule.forRoot({}) ],
+      declarations: [ <%= classify(name) %>Component ]
+    });
+
+    await TestBed.compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%= classify(name) %>Component);
+    component = fixture.componentInstance;
+    store = TestBed.get<Store>(Store);
+
+    spyOn(store, 'dispatch').and.callThrough();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

modules/schematics/src/container/schema.json

@@ -97,6 +97,13 @@
       "type": "string",
       "default": "State",
       "description": "Specifies the interface for the state."
+    },
+    "testDepth": {
+      "description":
+        "Specifies whether to create a unit test or an integration test.",
+      "enum": ["unit", "integration"],
+      "type": "string",
+      "default": "integration"
     }
   },
   "required": []

modules/schematics/src/container/schema.ts

@@ -68,4 +68,9 @@ export interface Schema {
    * Specifies the interface for the state
    */
   stateInterface?: string;
+
+  /**
+   * Specifies whether to create a unit test or an integration test.
+   */
+  testDepth?: string;
 }

projects/ngrx.io/content/guide/schematics/container.md

@@ -35,6 +35,13 @@ Provide the name of the interface exported for your state interface
   - Type: `string`
   - Default: `State`
 
+Specifies whether to create a unit test or an integration test
+
+- `--testDepth`
+  - Type: `string`
+  - Values: `unit|integration`
+  - Default: `integration`
+
 ## Examples
 
 Generate a `UsersPage` container component with your reducers imported and the `Store` typed a custom interface named `MyState`.