试着从由Angular CLI生成的模板中创建一个非常基础的测试(
  • ) – Angular8

    • 2 年 ago
    清, 宇
    2 minutes

    总结

    以下是从Angular CLI生成的模板中创建了一个非常基本的测试的备注。

    功能

      • 配列をリスト化して表示するだけのページ

     

      ng test (Jasmin + Karma)で、配列の内容が表示されるかを確認

    重点:
    测试代码本身有以下要点。

      • コンポーネントを追加した場合に *.spec.ts を修正する

      • ～

    を取ってくるとき、HTMLCollection の型となるので、それを踏まえた書き方にする

    填補

      Git Bash を使っているので、cmd.exe や PowerShell 派の人は読み替えが必要な箇所があるかもしれません

    图示样例

    list-view-static-chrome.png

    环境

    OSwin32 x64Angular8.2.12Angular CLI8.3.14Node11.13.0

    步骤

    筹备工作

    1.1 安装 Angular CLI （可选）

    安装Angular CLI。如果已经安装过或者只想更新到最新版本的话，可以不需要执行该步骤。

    npm uninstall -g @angular/cli
npm install -g @angular/cli

    如果在Angular CLI中指定旧版本，package.json也会生成相应版本的Angular CLI。Angular本身更新的周期很快，同时也会产生许多不兼容性，导致在Web搜索的示例代码无法直接运行。因此，特别是在使用Angular CLI的ng new等命令时，意识到版本意味着可以节省时间。

    创建应用程序的模板文件

    您可以通过以下方式确认模板项目的操作。

    cd angular_workspace ※ 適当なアプリ置き場を指定
ng new lists-view-static --skipGit=true
cd lists-view-static
ng serve --open

    3. 搞

    创建一个仅用于显示数组列表的组件。

    cd src/app
ng generate component list-view

    弥补

      • app.module.ts など、追加したモジュールの import がちゃんと追加されるようです

     

      なお、テスト周りのファイルは、コンポーネント追加に追従できていないようなので、一通り修正が終わった後に更新します。

    3.1. src/app/app.component.html

    3.1. 源代码/应用/应用主组件.html

    将整个代码替换为以下代码，以简化冗长的模板代码。

    <app-list-view></app-list-view>

    填补

      • src/index.html に上のコードが埋め込まれる

     

      src/app/list-view/list-view.component.ts の selector にあわせた名前を入れる

    3.2. src/app/list-view/list-view.component.ts 的内容。

    添加listItems的行。

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list-view',
  templateUrl: './list-view.component.html',
  styleUrls: ['./list-view.component.css']
})
export class ListViewComponent implements OnInit {
  listItems = [ 'foo', 'bar', 'baz'];
  constructor() { }

  ngOnInit() {
  }

}

    3.3. src/app/list-view/list-view.component.html 的内容进行释义。

    列出数组。

    <h2>List items</h2>

<ul>
  <li *ngFor="let item of listItems">{{item}}</li>
</ul>

    4. 檢查動作是否正常

    执行以下的 `ng serve` 命令。会打开浏览器并显示页面。

    ng serve --open

    5. 为了进行测试，修改代码

    在修改代码之前尝试使其失败。修改了测试代码后，确认测试通过。

    ng test

    另外，一旦完成修正，Karma 的执行结果将会如下所示。

    angluar_list_items_test_ok.png

    5.1. 源码/app/app.component.spec.ts

    由于对HTML等进行大量修改，所以需要全面替换组件的测试代码。通过添加ListViewComponent部分，可以消除找不到组件的错误。

    示例代码import { TestBed, async } from ‘@angular/core/testing’;
    import { AppComponent } from ‘./app.component’;
    import { ListViewComponent } from ‘./list-view/list-view.component’;

    describe(‘AppComponent’, () => {
    beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [
    AppComponent, ListViewComponent ← 这里
    ],
    }).compileComponents();
    }));

    it(‘应该创建应用’, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
    });
    })。

    angluar_list_items_test_ng01.png

    5.2 源代码/应用/列表视图/列表视图组件.spec.ts

    请将整个代码作为参考。

    对于初学者而言，可能觉得行数有点多，可能会丧失兴趣。

    因为是根据模板进行修改的，所以实际上应该列出创建的部分是主要的附加代码。

    重点在于以下几个方面

    should list created のブロックは
    list-view.component.ts の listItems の変数を覗いている

    chack native elements のブロックは
    ブラウザの向けに生成された HTMLコードの内容を確認している

    样例代码import { async, ComponentFixture, TestBed } from ‘@angular/core/testing’;

    import { ListViewComponent } from ‘./list-view.component’;

    describe(‘ListViewComponent’, () => {
    let component: ListViewComponent;
    let fixture: ComponentFixture;

    beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ ListViewComponent ]
    })
    .compileComponents();
    }));

    beforeEach(() => {
    fixture = TestBed.createComponent(ListViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    });

    it(‘应该创建’, () => {
    expect(component).toBeDefined();
    });

    it(‘应该列出已创建的内容’, () => {
    expect(component.listItems[0]).toEqual(‘foo’);
    });

    it(‘检查原生元素’, () => {
    const listElements: HTMLCollection = fixture.nativeElement.getElementsByTagName(‘li’);
    expect(listElements[0].textContent).toEqual(‘foo’);
    expect(listElements[1].textContent).toEqual(‘bar’);
    expect(listElements[2].textContent).toEqual(‘baz’);
    });
    }

    请在坚固的桌子上找到支撑参考资料。

    Angular – ng serve
    –open は Opens the url in default browser. という意味。
    Angular – テスト
    要素の取得方法まとめ – Qiita
    【Angular6】Jasmine + Karma で単体テストを書いてみた ｜ DevelopersIO

    作者在本书的结尾给出了以下的补充。

      • nativeElement は、debugElement経由で取得したほうがよいのですが、今回はそうしなくても動くので敢えてそうしていない

     

      • 次なるステップとしては、Angular のテストのページを見てください

     

      テスト周りのチュートリアルは、(応用面を重視してか)やや重量級なものが多いので、この記事ではチュートリアル的なレベルで作成してみました (需要があるかは不明)
    bannerAds