web-dev-qa-db-ja.com

Angularテスト未定義のプロパティ 'name'を読み取れません

@Inputを介して親からいくつかのプロパティを受け入れるModalComponentを持っています。

テストで問題が発生します

TypeError：未定義のプロパティ 'name'を読み取れません

名前はngOnInitで使用されており、_@Input displayeddata_から取得する必要があります。

単体テストでどのように合格しますか？

現在、私のテストはそうです

_beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ModalComponent, FilterComponent],
            imports: [ReactiveFormsModule, TranslateModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        componentName: 'TextareaComponent'
    };
    fixture.detectChanges();
});

it('should create', async () => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});
_

これが私のコンポーネントの1つのテストであり、失敗します。

アップデート＃1

これが私が得るものですconsole.log(this.displayeddata);

_Object
caption: "Caption"
component: "TextareaComponent"
name: "One component"
_

また、コードを少し変更し（更新されたコード）、新しいエラー_TypeError: Cannot read property 'caption' of undefined_が発生しました

アップデート＃2

modal.component.ts

_export class ModalComponent implements OnInit {
@Input() showenpunctsnow;
@Input() displayeddata;
@Output() ComponentParametrsInputs: FormGroup = this.fb.group({
        name: ['', Validators.required],
        caption: ['', Validators.required],
        component: ['']
    });
constructor(private fb: FormBuilder) {}
ngOnInit() {

        console.log(this.displayeddata);

        this.ComponentParametrsInputs = this.fb.group({
            name: [this.displayeddata.name, Validators.required],
            caption: [this.displayeddata.caption, Validators.required],
            component: [this.displayeddata.componentName]
        });
    }
_
angularunit-testingkarma-runner
6
Sergey

コメントに収まらないので、この更新を「回答」として掲載します。 :)

コンポーネントロジックを投稿していただきありがとうございます。この情報を使用して、ここに簡単なstackblitzテスト環境をまとめるのに十分でした： https://stackblitz.com/edit/stackoverflow-q-53086352?file=app%2Fmy.component.spec.ts

次のように、上記のコードから少し逸脱する必要がありました。

  • FilterComponentとTranslateModuleの両方はコメントアウトされています。私はそのコードにアクセスできず、現時点ではそれらをテストしていないためです。
  • 2番目の「beforeEach」関数と「it」仕様で「async」を誤って使用していた-矢印関数を非同期でラップせず、非同期の予約語を使用して関数を非同期として定義していた-一部非同期/待機の完全に異なるものです。 javascriptで予約されたWordではなく、Word非同期の後に角括弧/コア/テスト関数として呼び出すには、別のブラケットセットが必要です。 :)
  • Displaydata変数の1つを表示する単純なテンプレートを追加しました

しかし、驚いたことに、私があなたのコードをstackblitzに置いたとき、すべてうまくいきました！明らかに、あなたが直面している問題は、これまでに提示したものの外にあるいくつかのコードによって引き起こされています。

次のステップに対する私の提案：

  • 私がまとめた既存のstackblitzを編集するか、自分のアカウントにフォークして遊んでください。
  • 問題が再発するまで、コード/データを追加します。これは、実際のエラーがどこにあるかを示します。

幸運を！

1
dmcgrandle

あなたのアプローチは良いです、私はそれが非同期のために失敗していると思います。これを試して ：

it('should create', () => {
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        component: 'TextareaComponent'
    };
    fixture.detectChanges();
    expect(component).toBeTruthy();
});
0
Enima