Ionic2-Boilerplate: Angular2 Unit test (still needs changes)

component-test.ts

import { DebugElement, Type } from "@angular/core";
import { Predicate } from "@angular/core/src/facade/collection";
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { App, MenuController, NavController, Platform, Config, Keyboard, GestureController, Form, IonicModule }  from 'ionic-angular';
import { mockNavController, mockPlatform } from 'ionic-angular/util/mock-providers';
import { ConfigMock, MenuControllerMock, KeyboardMock, GestureControllerMock, FormMock } from './mocks';

/**
 * @ngdoc object
 * @name ComponentTestHelper
 * @description
 *
 * Helper class for creating tests. It encapsulates the TestBed initialization,
 * allowing the test to be DRY. To use, one must declare a beforeEach function in the
 * test, and inside construct this object like:
 *
 * @example
 *  <pre>
 *    let helper = new ComponentTest<MyComponent>();
 *    beforeEach(helper.init(MyComponent));
 *
 *    //Add a spec
 *    it('this is my custom unity test', () => {
 *        expect(helper.component).toBeDefined();
 *    });
 *  </pre>
 */
export class ComponentTest<T extends any> {

    /**
     * The component class reference passed to init() method.
     *
     * @ngdoc property
     * @name mockComponent
     * @propertyOf ComponentTestHelper
     */
    componentClass: Type<T>;

    /**
     * The parsed component instance
     *
     * @ngdoc property
     * @name component
     * @propertyOf ComponentTestHelper
     */
    component: T;

    /**
     * The debugElement representing a HTML element attached to the component.
     *
     * @ngdoc property
     * @name debugElement
     * @propertyOf ComponentTestHelper
     */
    debugElement: DebugElement;

    /**
     * Fixture for debugging and testing a component.
     *
     * @ngdoc property
     * @name fixture
     * @propertyOf
     */
    fixture: ComponentFixture<T>;

    constructor() {

        TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

    }

    // TODO: Add 'config' property to pass a specific providers and others configs
    //      To TestBed class 
    // TODO: Verify if typescript allow get class reference from Component object
    /**
     * The initializer function. It is called inside the constructor
     *
     * @ngdoc method
     * @name init
     * @methodOf ComponentTestHelper
     */ 
    init (component: Type<T>): void {

     TestBed.configureTestingModule({
            declarations: [component],
            providers: [
                {provide: App, useClass: ConfigMock},
                {provide: NavController, useValue: mockNavController},
                {provide: Platform, useValue: mockPlatform},
                {provide: Config, useClass: ConfigMock},
                {provide: MenuController, useClass: MenuControllerMock},
                {provide: Keyboard, useClass: KeyboardMock},
                {provide: GestureController, useClass: GestureControllerMock},
                {provide: Form, useClass: FormMock},
                
            ],
            imports: [
                IonicModule,
            ],
        });

        this.fixture = TestBed.createComponent(component);
        this.component = this.fixture.componentInstance;
        this.componentClass = component;
        this.debugElement = this.fixture.debugElement;
    }

    /**
     *  Return all elements matching the given selector
     *
     * @ngdoc method
     * @name all
     * @methodOf ComponentTestHelper
     */
    all(selector: Predicate<DebugElement>): DebugElement[] {
        return this.debugElement.queryAll(selector);
    }

    /**
     *  Return the first element matching the given selector
     *
     * @ngdoc method
     * @name find
     * @methodOf ComponentTestHelper
     */
    find(selector: Predicate<DebugElement>): DebugElement {
        return this.debugElement.query(selector);
    }

    /**
     *  Return the first element of parent element that matches the given selector
     *
     * @ngdoc method
     * @name findChildren
     * @methodOf ComponentTestHelper
     */
    findChildren(parentSelector: Predicate<DebugElement>, childSelector: Predicate<DebugElement>): DebugElement {
        let parentComponent: DebugElement = this.find(parentSelector);
        return parentComponent.query(childSelector);
    }
}

home.spec.ts

import { HomePage } from './home';
import { TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { NavController, Platform, Config, IonicModule }  from 'ionic-angular';
import { mockNavController, mockPlatform } from 'ionic-angular/util/mock-providers';
import { ConfigMock } from '../../../config/mocks';

describe('Sales Service', () => {
    let fixture: any;
    let component: HomePage;
    
    //Initialize the test: prevent 'platform' undefined error
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

    beforeEach(() => {

        TestBed.configureTestingModule({
            declarations: [HomePage],
            schemas: [NO_ERRORS_SCHEMA] ,
            providers: [
                {provide: NavController, useValue: mockNavController},
                {provide: Platform, useValue: mockPlatform},
                {provide: Config, useClass: ConfigMock},
            ],
            imports: [
                IonicModule,
            ],
        });

        fixture = TestBed.createComponent(HomePage);
        component = fixture.componentInstance;
    });

    xit('A simple test', (done) => {
        expect(true).toBe(true);
        done();
    });

    it('should load component', () => {
        expect(fixture).toBeDefined();
    });
});

home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

}

karma.conf.js

'use strict';

const path = require('path');
const ts = require('rollup-plugin-typescript');
const buble = require('rollup-plugin-buble');
const nodeResolve = require('rollup-plugin-node-resolve');
const angular = require('rollup-plugin-angular');
const commonjs = require('rollup-plugin-commonjs');
const alias = require('rollup-plugin-alias');
const ngTemplate = require('@ionic/app-scripts/dist/plugins/ng-template').ngTemplate;

module.exports = function karmaConfig(config) {
    var configuration = {
        // base path that will be used to resolve all patterns (e.g. files, exclude)
        basePath: '../',
        frameworks: ['jasmine'],
        reporters: [
            // Reference: https://github.com/mlex/karma-spec-reporter
            // Set reporter to print detailed results to console
            'spec',
            // Reference: https://github.com/karma-runner/karma-coverage
            // Output code coverage files
            'coverage'
        ],
        // list of files / patterns to load in the browser we are building
        // the config environment in ./karma-shim.js
        files: [
            'node_modules/core-js/client/shim.js',
            'node_modules/reflect-metadata/Reflect.js',
            'node_modules/zone.js/dist/zone.js',     // Zone.js dependencies (Zone undefined)
            'node_modules/zone.js/dist/sync-test.js',
            'node_modules/zone.js/dist/proxy.js',
            'node_modules/zone.js/dist/jasmine-patch.js',
            'node_modules/zone.js/dist/async-test.js',
            'node_modules/zone.js/dist/fake-async-test.js',
            'src/**/*.spec.ts',
            { pattern: 'node_modules/reflect-metadata/Reflect.js.map', included: false, served: true }, // 404 on the same
        ],
        // list of files to exclude
        exclude: [
        ],
        preprocessors: {
            'src/**/*.spec.ts': ['rollup']
        },
        rollupPreprocessor: {
            context: 'this',
            plugins: [
                ngTemplate(),
                angular({
                    exclude: 'node_modules/**'
                }),
                ts({
                    typescript: require('../node_modules/typescript')
                }),
                alias({
                    rxjs: path.resolve(__dirname, '../node_modules/rxjs-es'),
                    '@angular/core/testing': path.resolve(__dirname, '../node_modules/@angular/core/testing/index'),
                    '@angular/platform-browser-dynamic/testing': path.resolve(__dirname, '../node_modules/@angular/platform-browser-dynamic/testing/index'),
                    '@angular/compiler/testing': path.resolve(__dirname, '../node_modules/@angular/compiler/testing/index'),
                    '@angular/platform-browser/testing': path.resolve(__dirname, '../node_modules/@angular/platform-browser/testing/index')
                }),
                commonjs(),
                nodeResolve({ jsnext: true, main: true, browser: true }),
                buble()
            ]
        },
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [
            'Chrome'
        ],
        browserNoActivityTimeout: 30000,
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
        // Configure code coverage reporter
        coverageReporter: {
            dir: 'coverage/',
            type: 'html'
        },
        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },
        colors: true,
         // Continuous Integration mode if true, Karma captures browsers, runs the tests and exits
        singleRun: false
    };

    // if(process.env.GITLAB_CI){
    //     //configuration.browsers = ['Chrome_travis_ci'];
    // }

    config.set(configuration);
};

mocks.ts

export class ConfigMock {

  public get(): any {
    return '';
  }

  public getBoolean(): boolean {
    return true;
  }

  public getNumber(): number {
    return 1;
  }
}

I'm getting a Can not load "rollup", it is not registered! warning, followed by failed tests