Testbed + nativescript-angular 1.5.1

[Rachnerd]

Hi friends,

Since I upgraded to Angular 4 + nativescript-angular 1.5.1 all unit tests involving Testbed broke.

NativeScript / 24 (N; Android SDK built for x86) TestService should exist FAILED
        Error: Not implemented!
            at NativeScriptDomAdapter.setGlobalVar (file:///data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/dom-adapter.js:147:86) [ProxyZone]
            at _createNgProbe (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2370:14) [ProxyZone]
            at DynamicTestModuleInjector.createInternal (ng:///DynamicTestModule/module.ngfactory.js:120:5) [ProxyZone]
            at DynamicTestModuleInjector.NgModuleInjector.create (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js:3564:76) [ProxyZone]
            at NgModuleFactory.create (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js:3537:18) [ProxyZone]
            at TestBed._initIfNeeded (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core-testing.umd.js:728:78) [ProxyZone]
            at TestBed.execute (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core-testing.umd.js:775:14) [ProxyZone]
            at Object.<anonymous> (file:///data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core-testing.umd.js:866:45) [ProxyZone]
            at ProxyZoneSpec.onInvoke (file:///data/data/org.nativescript.groceries/files/app/tns_modules/zone.js/dist/proxy.js:79:39) [ProxyZone]
            at Object.<anonymous> (file:///data/data/org.nativescript.groceries/files/app/tns_modules/zone.js/dist/jasmine-patch.js:104:34) [<root>]
            at attemptSync (eval at <anonymous> (file:///data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-unit-test-runner/main-view-model.js:203:21), <anonymous>:1950:24) [<root>]
NativeScript / 24 (N; Android SDK built for x86): Executed 1 of 1 (1 FAILED) ERROR (0.097 secs / 0.066 secs)

I managed to reproduce this error quite easily in the sample-groceries app (release branch).

Files:

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

@Injectable()
export class TestService {}

declare var describe: any;
declare var expect: any;
declare var it: any;
declare var beforeEach: any;

import 'reflect-metadata';
import 'nativescript-angular/zone-js/dist/zone-nativescript';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/proxy';
import 'zone.js/dist/jasmine-patch';

import { TestBed, inject } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { NS_COMPILER_PROVIDERS } from 'nativescript-angular/platform';
import { TestService } from './test';

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS));

describe('TestService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TestService
      ]
    });
  });
  it('should exist', inject([TestService], (service: TestService) => {
    expect(service !== undefined).toBeTruthy();
  }));
});

//karma.conf.js
    files: [
      'node_modules/reflect-metadata/Reflect.js',
      'app/**/*.js',
    ],

I managed to get it working again by overriding the function that throws the error.

import { NativeScriptDomAdapter } from 'nativescript-angular/dom-adapter';
NativeScriptDomAdapter.prototype.setGlobalVar = function (_name, _value) { console.log('Please don\'t break my unit tests!') };

Other info

node: v6.10.1 
tns: 2.5.3
nativescript-angular: 1.5.1
tns-core-modules: ~2.5.0

I assume this is unwanted behavior? :)

[hdeshev]

Supporting TestBed tests has been on our todo list for some time, but we haven't gotten to actually spending any effort on it yet. I can say if it's worked before it was purely by accident. :-)

That said, we will probably accept a PR that fixes the issue at hand.

[Rachnerd]

@hdeshev
Wow! I'm aware that TestBed's component-template testing isn't supported by {N}, but didn't know that TestBed isn't supported at all. I can confirm that providing/injecting services using TestBed works like a charm.

[kamok]

@Rachnerd's idea to replace setGlobalVar made it work for me. I can use TestBed.

[Rachnerd]

app/tests/config.ts

import 'nativescript-angular/zone-js/dist/zone-nativescript';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/proxy';

global.window = global;
import 'zone.js/dist/mocha-patch';

import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { NS_COMPILER_PROVIDERS } from 'nativescript-angular/platform';
import { TestBed } from '@angular/core/testing';

import * as chai from 'chai';
import * as sinonChai from 'sinon-chai';

/**
 * 1.5.1 Workaround 
 */
import { NativeScriptDomAdapter } from 'nativescript-angular/dom-adapter';
NativeScriptDomAdapter.prototype.setGlobalVar = (_name: any, _value: any): void => {
    return;
};

chai.use(sinonChai);
chai.config.truncateThreshold = 0;

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(NS_COMPILER_PROVIDERS));

karma.conf.js

module.exports = function ( config ) {
    config.set( {
        ...
        frameworks: [ 'mocha', 'chai', 'sinon' ],


        // list of files / patterns to load in the browser
        files: [
            'app/tests/config.js', // <- Config first
            'app/tests/**/*.spec.js' // <- Spec files
        ],
        ...
}

[kamok]

@Rachnerd Thank you for your quick response. I too, got it to work. However, I'm not sure if using TestBed is the correct approach with NativeScript Angular if they're not going to support it.

I have asked the devs on here. Hopefully they respond soon before I decide if I'll continue using TestBed.

[Rachnerd]

@kamok I know what you mean. We simply use TestBed as a dependency injector for service tests. If a component contains some logic that needs testing, then we manually instantiate the component using the injected dependencies. No template testing though...