Unit test in an Angular/NativeScript application

Tags:

I want to build an Application with one code for Mobile and Web. So I've decide to build an Angular/NativeScript Application following Angular Blog

Now, I'm trying to run Unit test. But from here, I'm lost. I don't know if I have to run test with NG or TNS cli. By the way, I've tried both, unsuccessfully...

With tns cli (after a tns test init), I've an error:

Searching for devices...
05 02 2019 14:54:40.501:WARN [karma]: No captured browser, open http://localhost:9876/
05 02 2019 14:54:40.739:INFO [karma-server]: Karma v4.0.0 server started at http://0.0.0.0:9876/
05 02 2019 14:54:40.740:INFO [launcher]: Launching browsers android with concurrency unlimited
05 02 2019 14:54:40.752:INFO [launcher]: Starting browser NativeScript Unit Test Runner
Executing before-shouldPrepare hook from C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\hooks\before-shouldPrepare\nativescript-dev-webpack.js
Executing before-prepare hook from C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\hooks\before-prepare\nativescript-dev-typescript.js
Found peer TypeScript 3.1.6
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(203,13): error TS2322: Type 'ZoneAwarePromise<any>' is not assignable to type 'Promise<any>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<any>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(275,9): error TS2420: Class 'ZoneAwarePromise<R>' incorrectly implements interface 'Promise<R>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<R>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(281,7): error TS2322: Type 'ZoneAwarePromise<any>' is not assignable to type 'Promise<R>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<any>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(285,7): error TS2322: Type 'ZoneAwarePromise<any>' is not assignable to type 'Promise<U>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<any>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(349,7): error TS2322: Type 'ZoneAwarePromise<R>' is not assignable to type 'Promise<R>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<R>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(372,13): error TS2322: Type 'ZoneAwarePromise<TResult1 | TResult2>' is not assignable to type 'Promise<TResult1 | TResult2>'.
  Property '[Symbol.toStringTag]' is missing in type 'ZoneAwarePromise<TResult1 | TResult2>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/common/promise.ts(389,13): error TS2322: Type 'ZoneAwarePromise<R>' is not assignable to type 'Promise<R>'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/async-test.ts(8,7): error TS2451: Cannot redeclare block-scoped variable '_global'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/async-test.ts(10,7): error TS2300: Duplicate identifier 'AsyncTestZoneSpec'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(13,1): error TS6200: Definitions of the following identifiers conflict with those in another file: NEWLINE, IGNORE_FRAMES, creationTrace, ERROR_TAG, SEP_TAG, sepTemplate, LongStackTrace, error, caughtError, getStacktrace
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(25,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(29,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(45,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(49,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(60,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(138,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/long-stack-trace.ts(145,10): error TS2393: Duplicate function implementation.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/proxy.ts(8,7): error TS2300: Duplicate identifier 'ProxyZoneSpec'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/sync-test.ts(9,7): error TS2300: Duplicate identifier 'SyncTestZoneSpec'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone-spec/task-tracking.ts(15,7): error TS2300: Duplicate identifier 'TaskTrackingZoneSpec'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone.ts(136,11): error TS2451: Cannot redeclare block-scoped variable 'Zone'.
platforms/android/app/build/intermediates/merged_assets/debug/mergeDebugAssets/out/app/tns_modules/zone.js/lib/zone.ts(313,6): error TS2300: Duplicate identifier '_PatchFn'.
...
...

And after tns cli said it's a success:

Project successfully built.
Installing on device emulator-5554...
Successfully installed on device with identifier 'emulator-5554'.
Refreshing application on device emulator-5554...
Successfully synced application org.nativescript.docdoc on device emulator-5554.
JS: NSUTR: fetching http://172.17.62.129:9876/context.json
JS: NSUTR: fetching http://10.0.75.1:9876/context.json
JS: NSUTR: fetching http://192.168.56.1:9876/context.json
JS: NSUTR: fetching http://192.168.99.1:9876/context.json
JS: NSUTR: fetching http://10.1.22.187:9876/context.json
JS: NSUTR: fetching http://127.0.0.1:9876/context.json

Now, If I'm trying to run test with ng cli (ng test), I've some error also:

ERROR in ./node_modules/tns-core-modules/ui/builder/component-builder/component-builder.js
Module not found: Error: Can't resolve '../../../platform' in 'C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\ui\builder\component-builder'
resolve '../../../platform' in 'C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\ui\builder\component-builder'
  using description file: C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\ui\builder\component-builder\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\ui\builder\component-builder\package.json (relative path: .)
      Field 'browser' doesn't contain a valid alias configuration
      using description file: C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform\package.json (relative path: .)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform is not a file
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform.tsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          C:\Users\Adrien Neau\outils\sandbox\docdoc\frontend\node_modules\tns-core-modules\platform.js doesn't exist
...
...

Below some config files when I'm using ng cli package.json:

{
  "name": "docdoc",
  "nativescript": {
    "id": "org.nativescript.docdoc",
    "tns-android": {
      "version": "5.1.0"
    },
    "tns-ios": {
      "version": "5.1.0"
    }
  },
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "android": "tns run android --bundle",
    "ios": "tns run ios --bundle"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "nativescript-angular": "~7.1.0",
    "nativescript-localstorage": "^2.0.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~6.3.3",
    "tns-core-modules": "~5.1.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.4",
    "@angular/cli": "^7.1.0",
    "@angular/compiler-cli": "~7.1.0",
    "@nativescript/schematics": "~0.4.0",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.39",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.18.5",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~3.1.1"
  }
}

karma.conf.js:

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

ts.config.spec.ts:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ],
  "exclude": [
    "**/*.tns.ts",
    "**/*.android.ts",
    "**/*.ios.ts"
  ]
}

Have I to test with ng cli or tns cli? What is these errors ?