1

次のインターフェイスを使用して loginform コンポーネントを作成しています。

<login-form onlogin="submit()"></login-form>

そして、それがテストコードです:

  it("Should send credentials out of the component", async(() => {
    TestBed.compileComponents().then(() => {
      const fixture = TestBed.createComponent(LoginFormComponent);
      let component = fixture.componentInstance;
      spyOn(component.onlogin, "emit");

      let domRef = fixture.nativeElement;
      domRef.querySelector("input[name='username']").value = "test@test.com";
      domRef.querySelector("input[name='password']").value = '1234';
      domRef.querySelector("form").dispatchEvent(new Event('submit'));

      fixture.detectChanges();

      let expectedSubmitData:UserCredentials = {
        username: "test@test.com",
        password: "1234"
      };
      expect(component.onlogin.emit).toHaveBeenCalledWith(expectedSubmitData);
    });
  }));

次のメッセージが表示されます。

Expected spy emit to have been called with [ Object({ username: 'test@test.com', password: '1234' }) ] but actual calls were [ Object({ username: '', password: '' }) ]

では、入力値を入力し、モデルがそれらの変更を検出する方法は何ですか?

4

1 に答える 1