[解決済み】Angular CLIが生成する「spec.ts」ファイルは何のためにあるのか?
2022-04-06 11:57:56
質問
私はAngular 2(とAngular全般)初心者ですが、非常に魅力的だと感じています。私は アンギュラーCLI を使用してプロジェクトを生成し、提供しています。私の小さな学習用プロジェクトでは、必要以上のものが生成されますが、それは予想されることです。
を生成していることに気がつきました。
spec.ts
プロジェクト内の各Angular要素(Component、Service、Pipeなど)に対して。いろいろ検索してみましたが、これらのファイルが何のためにあるのかの説明は見つかりませんでした。
を使用する場合、通常は隠されているビルドファイルなのでしょうか?
tsc
? と不思議に思ったのは、貧弱な名前の
Component
作成したところ、その名前は、これらの
spec.ts
のファイルです。
import {
beforeEach,
beforeEachProviders,
describe,
expect,
it,
inject,
} from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { PovLevelComponent } from './pov-level.component';
describe('Component: PovLevel', () => {
let builder: TestComponentBuilder;
beforeEachProviders(() => [PovLevelComponent]);
beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
builder = tcb;
}));
it('should inject the component', inject([PovLevelComponent],
(component: PovLevelComponent) => {
expect(component).toBeTruthy();
}));
it('should create the component', inject([], () => {
return builder.createAsync(PovLevelComponentTestController)
.then((fixture: ComponentFixture<any>) => {
let query = fixture.debugElement.query(By.directive(PovLevelComponent));
expect(query).toBeTruthy();
expect(query.componentInstance).toBeTruthy();
});
}));
});
@Component({
selector: 'test',
template: `
<app-pov-level></app-pov-level>
`,
directives: [PovLevelComponent]
})
class PovLevelComponentTestController {
}
解決方法は?
specファイルは、ソースファイルに対するユニットテストです。 Angularアプリケーションの規約では、各.tsファイルに対して.spec.tsファイルを用意することになっています。 これらは、Karmaテストランナーを通して、Jasmine javascriptテストフレームワークを使用して実行されます (
https://karma-runner.github.io/
を使用した場合)
ng test
コマンドを使用します。
続きを読むに使うことができます。
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] ブレークポイントの解除 - VS Code | Chrome | Angular
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。
-
[解決済み] Angular2において、テンプレートを必要としないコンポーネントがありますが、テンプレートエラーが発生します。
-
[解決済み] ローカルホストが私のアンギュラーアプリに対して無効な応答を送信しました。
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み] AngularでNameServiceのプロバイダがない
-
[解決済み] Angular CLI SASSオプション
-
[解決済み】PromiseとObservablesの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】angular 4アプリにReactiveFormsModuleを追加すると、NgControl用のプロバイダがないエラーが発生する。
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] Angular material Angular Material コアテーマが見つかりませんでした。
-
[解決済み] Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'.
-
[解決済み] AngularのmatSortがソートされない
-
[解決済み] パーサエラーです。式が期待される場所で補間({{}})を得た
-
[解決済み] Error.を修正する方法 No value accessor for form control with name' in Angular Unit Test?
-
[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。
-
[解決済み] Angular2の素材ダイアログに問題あり - @NgModule.entryComponentsに追加しましたか?