Could it be used in a Nativescript-Angular2 App?

[magar91]

Like the title says could this be used for a Project in NativeScript - Angular2?

[erikbarke]

Hey @magar91, thanks for this suggestion, I've added a ton of new features and bug fixes thanks to this issue! However, I haven't been able to actually run any unit tests with Nativescript and karma-typescript and I've tried two going down two paths:

• Running with the Nativescript custom launcher which ends with error messages and stacktraces from inside native code.
• Running with Chrome which ends with, for example, Uncaught ReferenceError: android is not defined, because of statements like new android.view.View.OnTouchListener(...)

I'm really out of my comfort zone here (not having done any Android development, ever) so I'm guessing the Android javascript environment needs to be included somehow...

So far I've cloned https://github.com/NativeScript/nativescript-angular, installed jasmine-core, karma-chrome-launcher, karma-jasmine, karma-typescript and changed the karma conf in the tests directory to this:

module.exports = function(config) {
  config.set({

    frameworks: ['jasmine', 'mocha', 'chai', 'karma-typescript'],

    files: [
      'base.spec.ts',
      'app/**/*.ts',
    ],

    preprocessors: {
      '**/*.ts': ['karma-typescript']
    },

    karmaTypescriptConfig: {
      tsconfig: './tsconfig.json',
      bundlerOptions: {
        addNodeGlobals: false,
        coverageOptions: {
          exclude: /\.(d|tests)\.ts/
        },
        resolve: {
          extensions: [
            '.aot.ts',
            '.ts',
            '.js',
            '.css',
            '.ios.ts',
            '.android.js',
            '.android.css'
          ],
          directories: ['node_modules', 'node_modules/tns-core-modules']
        }
      },
      reports: {
        'html': 'coverage',
        'text-summary': ''
      }
    },

    reporters: ['mocha', 'karma-typescript'],

    browsers: ['Chrome']
  })
}

Contents of the base.spec.ts file:

import "tns-core-modules/globals";
import "nativescript-angular/zone-js/dist/zone-nativescript";
import "core-js";
import "application";

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

Now I'm stuck at Uncaught ReferenceError: android is not defined and I'm out of ideas... I'm guessing you're a bit more well versed in Android development, any suggestions?

[magar91]

@erikbarke I've been working with nativescript and angular2 for a couple of months and I am kinda new with android development too. I also encountered some issues while trying to do any unit test with Nativescript-Angular2, mainly with the import of zone-js there is an open issue in the nativescrpit-angular2 github for this. with the nativescript cli you can initialize your testing enviroment with the command tns test init and it will ask for a testing framework (only one can be used at a time, I picked jasmine for my project) and it will create a karma.conf file like these one

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/**/*.js'
    ],

    // list of files to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [],

    customLaunchers: {
      android: {
        base: 'NS',
        platform: 'android'
      },
      ios: {
        base: 'NS',
        platform: 'ios'
      },
      ios_simulator: {
        base: 'NS',
        platform: 'ios',
        arguments: ['--emulator']
      }
    },

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  })
}

and my spec file is like this:

import 'reflect-metadata';
import { Http, Headers, HttpModule, XHRBackend, 
        BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { LoginService } from '../../shared/login-service/login-service.service';
import { User } from '../../shared/user/user.model';
import { Config } from '../../shared/config';
import { inject, async, ComponentFixture, TestBed, fakeAsync, getTestBed } from '@angular/core/testing';

/*spec file continues here*/

I hope this can be of any help to you, and I'm very sorry I can't be more useful to you

[erikbarke]

Hey, no worries 😃 I think we've taken this issue as far as we can for now, but I would definitely like to revisit it if more people show interest in it!

[mcrvaz]

Any news on this? I've tried quite a lot to make it work but seems to be out of my reach. There were a lot of issues with the bundling, is there any way to disable it entirely?

[erikbarke]

Hey @mcrvaz, the bundling step will be disabled automatically if the modulekind is set to anything else than CommonJS or if no export/importstatements are found in the project code, but there's no option to disable it manually as of now.

I really tried making karma-typescript work with Nativescript but all my efforts amounted to zero... What have you tried so far? What does your environment look like, could you post your configs here please?

[mcrvaz]

Hi @erikbarke, my test stack is Karma, Mocha, Chai and Sinon. I'm writing my test files with TypeScript(including type definitions for Mocha, Chai and Sinon), and running the compiled code with Karma. There is also a file setting up the test environment that exposes some variables. test_setup.ts

Here is my karma.conf.js and tsconfig.json

Also, seems that TestBed is not officially supported, so I'm not using it. I'm just instanciating the objects needed for testing manually. My main reason for trying to using this plugin is for generating coverage for my .spec.ts files, which currently is not possible. Anyway, thanks for reopening the issue.

[francisrod01]

Please I need to do that with NativeScript + Angular2 (TypeScript) and Jasmine. I don't need to use webpack at this moment.

I'm following something like this:

https://github.com/monounity/karma-typescript#configuration https://github.com/monounity/karma-typescript/blob/master/examples/angular2/karma.conf.js

And @erikbarke explanation here: https://stackoverflow.com/a/39306795/3332734

The problem also was posted on StackOverflow: https://stackoverflow.com/q/50592311/3332734

I resumed that:

• Error: Can't find entrypoint .../example.ts
• /base/base.spect.ts? FAILED SyntaxError: Unexpected token import