Make all tests use a consistenting testing module

karma.conf.js

@@ -16,7 +16,8 @@ module.exports = function (config) {
       require('karma-sauce-launcher'),
     ],
     files: [
-      { pattern: './src/test.ts', watched: false }
+      {pattern: './src/test.ts', watched: false},
+      {pattern: 'node_modules/hammerjs/hammer.js', included: true, watched: false},
     ],
     preprocessors: {
       './src/test.ts': ['@angular/cli']

package.json

@@ -36,6 +36,7 @@
     "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
+    "hammerjs": "^2.0.8",
     "highlight.js": "^9.9.0",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",

src/app/app-module.ts

@@ -1,92 +1,69 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
-import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
+import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
-import {
-  MdButtonModule,
-  MdCardModule,
-  MdGridListModule,
-  MdIconModule,
-  MdListModule,
-  MdMenuModule,
-  MdNativeDateModule,
-  MdSidenavModule, MdTabsModule,
-  MdToolbarModule,
-  MdTooltipModule, PortalModule,
-} from '@angular/material';
+import {RouterModule} from '@angular/router';
+import {MdNativeDateModule} from '@angular/material';
 import {ExampleModule} from '@angular/material-examples';
 
 import {MaterialDocsApp} from './material-docs-app';
-import {Homepage} from './pages/homepage/homepage';
-import {routing} from './routes';
-import {ComponentList} from './pages/component-list/component-list';
-import {ComponentViewer} from './pages/component-viewer/component-viewer';
-import {GuideList} from './pages/guide-list';
-import {GuideViewer} from './pages/guide-viewer';
-import {SharedModule} from './shared/shared-module';
-import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
-import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
-import {Footer} from './shared/footer/footer';
+import {HomepageModule} from './pages/homepage/homepage';
+import {MATERIAL_DOCS_ROUTES} from './routes';
+import {ComponentListModule} from './pages/component-list/component-list';
+import {ComponentViewerModule} from './pages/component-viewer/component-viewer';
+import {ComponentCategoryListModule} from './pages/component-category-list/component-category-list';
+import {ComponentSidenavModule} from './pages/component-sidenav/component-sidenav';
+import {FooterModule} from './shared/footer/footer';
 import {ComponentPageTitle} from './pages/page-title/page-title';
-import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
+import {ComponentHeaderModule} from './pages/component-page-header/component-page-header';
 import {StyleManager} from './shared/style-manager/style-manager';
-
-
-export const MATERIAL_COMPONENTS_USED = [
-  MdButtonModule,
-  MdCardModule,
-  MdGridListModule,
-  MdIconModule,
-  MdListModule,
-  MdMenuModule,
-  MdSidenavModule,
-  MdTabsModule,
-  MdToolbarModule,
-  MdTooltipModule,
-  PortalModule,
-];
+import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
+import {ThemePickerModule} from './shared/theme-picker/theme-picker';
+import {PlunkerButtonModule} from './shared/plunker/plunker-button';
+import {NavBarModule} from './shared/navbar/navbar';
+import {ExampleViewer} from './shared/example-viewer/example-viewer';
+import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
+import {GuideItems} from './shared/guide-items/guide-items';
+import {DocumentationItems} from './shared/documentation-items/documentation-items';
+import {GuideListModule} from './pages/guide-list/guide-list';
+import {GuideViewerModule} from './pages/guide-viewer/guide-viewer';
+import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
 
 @NgModule({
-  imports: MATERIAL_COMPONENTS_USED,
-  exports: MATERIAL_COMPONENTS_USED,
-})
-export class DocsMaterialModule {}
-
-
-@NgModule({
-  declarations: [
-    MaterialDocsApp,
-    ComponentCategoryList,
-    ComponentList,
-    ComponentSidenav,
-    ComponentViewer,
-    ComponentPageHeader,
-    GuideList,
-    GuideViewer,
-    Homepage,
-    Footer,
-  ],
-  exports: [
-    MaterialDocsApp,
-    Homepage,
-  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     ExampleModule,
-    SharedModule,
     FormsModule,
     HttpModule,
-    DocsMaterialModule,
     MdNativeDateModule,
-    routing,
+    RouterModule.forRoot(MATERIAL_DOCS_ROUTES),
+
+    ComponentCategoryListModule,
+    ComponentHeaderModule,
+    ComponentListModule,
+    ComponentSidenavModule,
+    ComponentViewerModule,
+    DocViewerModule,
+    FooterModule,
+    GuideListModule,
+    GuideListModule,
+    GuideViewerModule,
+    HomepageModule,
+    NavBarModule,
+    PlunkerButtonModule,
+    SvgViewerModule,
+    ThemePickerModule,
   ],
+  declarations: [MaterialDocsApp],
   providers: [
-    Location,
     ComponentPageTitle,
+    DocumentationItems,
+    GuideItems,
     StyleManager,
+    ThemeStorage,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -1,29 +1,21 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MaterialModule} from '@angular/material';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentCategoryList} from './component-category-list';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ComponentCategoryList', () => {
   let fixture: ComponentFixture<ComponentCategoryList>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentCategoryList],
-      providers: [
-        DocumentationItems,
-        ComponentPageTitle
-      ]
-    });
-
-    fixture = TestBed.createComponent(ComponentCategoryList)
+      imports: [ComponentCategoryListModule, DocsAppTestingModule],
+    }).compileComponents();
   }));
 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ComponentCategoryList);
+  });
+
   it('should set page title on init', () => {
     const component = fixture.componentInstance;
     spyOn(component, 'ngOnInit').and.callThrough();

src/app/pages/component-category-list/component-category-list.ts

@@ -1,6 +1,10 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+import {MdCardModule} from '@angular/material';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 
 
 @Component({
@@ -16,3 +20,11 @@ export class ComponentCategoryList {
     this._componentPageTitle.title = 'Component Library';
   }
 }
+
+@NgModule({
+  imports: [SvgViewerModule, MdCardModule, CommonModule, RouterModule],
+  exports: [ComponentCategoryList],
+  declarations: [ComponentCategoryList],
+  providers: [DocumentationItems, ComponentPageTitle],
+})
+export class ComponentCategoryListModule { }

src/app/pages/component-list/component-list.spec.ts

@@ -1,13 +1,8 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {MaterialModule} from '@angular/material';
-import {ActivatedRoute, Router} from '@angular/router';
-import {RouterTestingModule} from '@angular/router/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ActivatedRoute} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
-
-import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentList} from './component-list';
+import {ComponentList, ComponentListModule} from './component-list';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 const CATEGORY_ID = 'forms';
 const mockActivatedRoute = {
@@ -22,18 +17,16 @@ describe('ComponentList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule, RouterTestingModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentList],
+      imports: [ComponentListModule, DocsAppTestingModule],
       providers: [
-        {provide: ActivatedRoute, useValue: mockActivatedRoute},
-        ComponentPageTitle,
-        DocumentationItems,
+        {provide: ActivatedRoute, useValue: mockActivatedRoute}
       ]
-    });
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentList);
-  }));
+  });
 
   it('should set the category from router params', done => {
     const component = fixture.componentInstance;

src/app/pages/component-list/component-list.ts

@@ -1,10 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {
   DocumentationItems,
   DocCategory
 } from '../../shared/documentation-items/documentation-items';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'app-components',
@@ -23,3 +25,11 @@ export class ComponentList {
     });
   }
 }
+
+@NgModule({
+  imports: [SvgViewerModule, RouterModule, CommonModule],
+  exports: [ComponentList],
+  declarations: [ComponentList],
+  providers: [DocumentationItems, ComponentPageTitle],
+})
+export class ComponentListModule { }

src/app/pages/component-page-header/component-page-header.spec.ts

@@ -1,24 +1,20 @@
-import {async, TestBed, ComponentFixture} from '@angular/core/testing';
-import {MaterialModule} from '@angular/material';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
-import {ComponentPageTitle} from '../page-title/page-title';
-import {ComponentPageHeader} from './component-page-header';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentHeaderModule, ComponentPageHeader} from './component-page-header';
+import {DocsAppTestingModule} from '../../testing/testing-module';
 
 
 describe('ComponentPageHeader', () => {
   let fixture: ComponentFixture<ComponentPageHeader>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      declarations: [ComponentPageHeader],
-      providers: [ComponentPageTitle],
-    });
+      imports: [ComponentHeaderModule, DocsAppTestingModule],
+    }).compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(ComponentPageHeader);
-  }));
+  });
 
   it('should return the title', () => {
     const component = fixture.componentInstance;

src/app/pages/component-page-header/component-page-header.ts

@@ -1,6 +1,7 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, EventEmitter, NgModule, Output} from '@angular/core';
 import 'rxjs/add/operator/first';
 import {ComponentPageTitle} from '../page-title/page-title';
+import {MdButtonModule, MdIconModule} from '@angular/material';
 
 @Component({
   selector: 'component-page-header',
@@ -16,3 +17,11 @@ export class ComponentPageHeader {
     return this._componentPageTitle.title;
   }
 }
+
+@NgModule({
+  imports: [MdButtonModule, MdIconModule],
+  exports: [ComponentPageHeader],
+  declarations: [ComponentPageHeader],
+  providers: [ComponentPageTitle],
+})
+export class ComponentHeaderModule { }