web-dev-qa-db-ja.com

TestBedとJasmineを使用してNativeScriptでユニットテストを実装する方法

NativeScript-Angularプロジェクトを設定しています。コンポーネントをテストするためにJasmine-Karmaを使用して単体テストを実装したいと思いますcssセレクターを使用して。簡単なコンポーネントの簡単な単体テスト（公式リポジトリで提供されているサンプルテスト以外）を設定するにはどうすればよいですか？

これは、Android APIレベル28でNativeScript CLI 6.0を使用する新しいプロジェクト用です。

私は通常のAngularこのブログ投稿でサポートされていると主張されているTestBedを使用してみました： https://www.nativescript.org/blog/announcing-the-nativescript- 4.1-release

私はまた、公式のnativescript-angularリポジトリでの動作テストを試しました： https://github.com/NativeScript/nativescript-angular/tree/master/tests

どちらの方法でも、次のエラーが発生するため、独自の実装を行おうとすると、何か間違っているように見えます。
Uncaught Error: Zone already loaded
TypeError: Cannot read property 'injector' of null
TypeError: Cannot read property 'getComponentFromError' of null
TypeError: Cannot read property 'currentPage' of undefined

Jasmine-Karmaを使用してNativeScriptでTestBedユニットテストを機能させることができた人はいますか？

test-main.ts

import "nativescript-angular/zone-js/testing.jasmine";
import { nsTestBedInit } from "nativescript-angular/testing";
nsTestBedInit();

example.ts

import { ItemsComponent } from '~/app/item/items.component';
import { By } from '@angular/platform-browser';
import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender } from 'nativescript-angular/testing';

describe('item-detail-component', () => {
  beforeEach(nsTestBedBeforeEach(
    [ItemsComponent]
  ));
  afterEach(nsTestBedAfterEach());

  it(`should contain items`, () => {
    return nsTestBedRender(ItemsComponent).then((fixture) => {
      fixture.detectChanges();
      const list = fixture.debugElement.query(By.css('.list-group'));

      expect(list).toBeDefined();
    });
  })
});

エラーが発生することなくテストを実行できることを期待しています。

各テスト実装に2つのリポジトリを含めました。
再現する手順：
1。リポジトリをダウンロード
2。 yarn install
3。 tns test Android

https://github.com/gsavchenko/nativescript-ns-testbed

更新

エンドツーエンドのテストを使用してフロントエンドをさらにテストする方法を疑問に思っている他の人にとっては、appiumは https://docs.nativescript.org/plugins/ui-tests に行くようです

angularnativescriptkarma-jasminetestbed
9
George S

TestBedを使用するには、karma.conf.jsを次のように変更する必要があります。

    // list of files / patterns to load in the browser
    files: [
      'src/tests/setup.ts',
      'src/tests/**/*.spec.ts'
    ],

ファイルsrc/tests/setup.tsは、ジャスミンでは次のようになります。

import "nativescript-angular/zone-js/testing.jasmine";
import {nsTestBedInit} from "nativescript-angular/testing";
nsTestBedInit();

またはモカを使用している場合：

import "nativescript-angular/zone-js/testing.mocha";
import {nsTestBedInit} from "nativescript-angular/testing";
nsTestBedInit();

ここにサンプルがあります： https://github.com/hypery2k/tns_testbed_sample

3
hypery2k

私はあなたと同じ問題に直面していました。 Nativescript-Angularでユニットテストを作成する方法をようやく見つけました。

私の問題を修正するには、beforeAll(() => nsTestBedInit());とafterAll(() => { });を追加します。また、TestBedからnsTestBed...に変更します https：// github.com/NativeScript/nativescript-angular/blob/master/tests/app/tests/detached-loader-tests.ts

次の行もtsconfig.tns.jsonファイルに追加します："include": ["src/tests/*.spec.ts"],

私の問題は、すべてのテストを複数のファイルに分割することです。テストファイルのappComponentと2番目のテストファイルのhomeCompenentのように。アプリが成長すると単体テストも成長し、コードを整理する必要があります。

ここに私のコード（ファイル名：src/tests/test.spec.ts）：

    import "reflect-metadata";
    import { AppComponent } from "../app/app.component";
    import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender, nsTestBedInit }     from "nativescript-angular/testing";
    import { HomeComponent } from "@src/app/home/home.component";
    describe("AppComponent", () => {
        beforeAll(() => nsTestBedInit());
        afterAll(() => { });
        beforeEach(nsTestBedBeforeEach([AppComponent, HomeComponent]));
        afterEach(nsTestBedAfterEach());
        it("should be: app works!", () => {
            return nsTestBedRender(AppComponent).then((fixture) => {
                fixture.detectChanges();
                const app = fixture.componentInstance;
                expect(app.title).toBe("app works!");
            });
        });
        describe("HomeComponent", () => { 
            it("should contain: Home works!", () => {
              return nsTestBedRender(HomeComponent).then((fixture) => {
                  fixture.detectChanges();
                  const app = fixture.componentInstance;
                  expect(app.title).toBe("Home works!");
              });
            });
        });
    });

そしてここに結果：

JS: NSUTR: downloading http://192.168.10.169:9876/context.json
JS: NSUTR: eval script /base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?be3ff9a5e2d6d748de5b900ac3c6d9603e2942a7
JS: NSUTR: eval script /base/node_modules/karma-jasmine/lib/boot.js?945a38bf4e45ad2770eb94868231905a04a0bd3e
JS: NSUTR: eval script /base/node_modules/karma-jasmine/lib/adapter.js?3098011cfe00faa2a869a8cffce13f3befc1a035
JS: NSUTR: eval script /base/src/tests/test.spec.bundle.js?6e0098824123f3edc2bb093fa874b3fdf268841e
JS: NSUTR: beginning test run
NativeScript / 28 (9; Android SDK built for x86): Executed 1 of 2 SUCCESS (0 secs / 0.545 secs)
NativeScript / 28 (9; Android SDK built for x86): Executed 2 of 2 SUCCESS (0.829 secs / 0.735 secs)
TOTAL: 2 SUCCESS
JS: NSUTR: completeAck
NativeScript / 28 (9; Android SDK built for x86) ERROR
  DisconnectedClient disconnected from CONNECTED state (transport error)
NativeScript / 28 (9; Android SDK built for x86): Executed 2 of 2 SUCCESS (0.829 secs / 0.735 secs)
0
Flavio Sampaio

これらの行が原因で問題が発生しています。

beforeAll(() => nsTestBedInit()); afterAll(() => { });

各テストファイルはテストベッドの初期化を試みます。エントリコンポーネントで必ず初期化してください。

エントリファイルを参照してください test-main.tskarma.config.js で指定

0
Krunal Thakur