TesBed - Error to run unit test

[mfdeveloper]

Hello @marcoturi !! I tried use this repo structure. The jasmine Simple test works fine, but, if I create another spec that use the TestBed angular2 class to load a component, I got the error below:

Do you know what does mean "symbol" error ? I think that needs include zone.js library on karma.conf.js. What dou think?

See my snippet code, after change home.spec.ts file

import { HomePage } from './home';
import { TestBed } from '@angular/core/testing';

describe('Sales Service', () => {
    let fixture: any;
    let component: HomePage;

    beforeEach((done) => {

        TestBed.configureTestingModule({
            declarations: [HomePage],
        });

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

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

OBS: Needs perform npm install --save rxjs-es to store in package.json file. Your karma.conf.js require this :)

[marcoturi]

I'm giving a look into this. Thank you!

[NelsonBrandao]

@marcoturi @mfdeveloper
The zone lib needs to be added, like this:

        files: [
          'node_modules/core-js/client/shim.js',
          'node_modules/reflect-metadata/Reflect.js',
          'node_modules/zone.js/dist/zone.js',
          'node_modules/zone.js/dist/long-stack-trace-zone.js',
          'node_modules/zone.js/dist/proxy.js',
          'node_modules/zone.js/dist/sync-test.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'
        ],

I'm now getting TypeError: Cannot read property 'injector' of null because initTestEnvironment isn't being called, for this to work we need to do something like this on a karma-test-shim.js file

[marcoturi]

This project as same good ideas https://github.com/jkuri/angular2-rollup-starter/blob/master/config/karma.conf.js
Actually is not working, but could be a start point.

[marcoturi]

ionic-team/ionic-app-scripts#51
Looks like ionic team is implementing e2e and unit tests by default (over angular cli).

[mfdeveloper]

Hello guys!! @marcoturi and @NelsonBrandao, I was did these changes on files karma param, and the 'Zone undefined error is gone'. However, I got a lot of many errors haha. But, I've added the minors files like your snippet @NelsonBrandao!

files: [
       '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
    ]

So, I created this gist today: https://gist.github.com/mfdeveloper/d9349dea78ba34a36adc7ada56ffd0c0

There, you will find the implementations:

1 - Fix the injector of null error and platform error with this line:

//Initialize the test: prevent 'platform' undefined error
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

PS: Can be moved to a karma-shim file

2 - Remove console.log(process...) from home.ts file, to avoid process undefined error.

Now, I got the error: Uncaught SyntaxError: Unexpected token export

I think that this happens because Ionic2 has so many components/services dependencies on their flow. But, I don't know which the dependency token is. I tried use the NO_ERRORS_SCHEMA on TestBed.configureTestingModule method (like official angular doc link: https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test) , but the same error is displayed for me :(

OBS: I created this gist instead a pull request because this isn't working by now.

[mfdeveloper]

Hey there, finally I did the test works on Ionic2 lol

However, it works only on sidemenu ionic2 scaffold. The example on this repo based on Tabs scaffold have more dependencies that I couldn't find until here :(

Anyway, I've created a class called ComponentTest to encapsulate all details about TestBed usage.

See: https://gist.github.com/mfdeveloper/d9349dea78ba34a36adc7ada56ffd0c0

Usage:

describe('Component: MyComponent', () => {

    let helper = new ComponentTest<MyComponent>();

    beforeEach(() => {
       // TODO: pass custom providers and reuse "MyComponent" passed by generics
       helper.init(MyComponent);
     });

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

[marcoturi]

fixed with last commit, feel free to re-open if needed.