Javascript 以按钮为中心的角度单元测试

我正在尝试单元测试我的按钮是否已被锁定，但我似乎无法让间谍正常工作

我看了[这篇文章][1]，但没有完全起到作用

我错过了什么明显的东西吗

组件。ts

ngOnInit() {
    // autofocus on the cancel button to guard against mistakes
    document.getElementById('cancel').focus();
  }

正如@trichietrichie所指出的，在您的规范中创建了

spy

之后，请回忆一下

ngOnInit（）

另外，利用

fixture

而不是依赖

document

获取html元素

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfirmationComponent ],
      providers: [ MessageService]
    });

    fixture = TestBed.createComponent(ConfirmationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();    
    component.ngOnInit();
  });

  it('should autofocus on cancel button on init', () => {
    const cancelButton = fixture.debugElement.query(By.css('#cancel'));
    spyOn(cancelButton.nativeElement, 'focus'); // create spy here   
    component.ngOnInit();
    expect(cancelButton.focus).toHaveBeenCalled();
  });

正如@trichietrichie所指出的，在您的规范中创建了

spy

之后，请回忆一下

ngOnInit（）

另外，利用

fixture

而不是依赖

document

获取html元素

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfirmationComponent ],
      providers: [ MessageService]
    });

    fixture = TestBed.createComponent(ConfirmationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();    
    component.ngOnInit();
  });

  it('should autofocus on cancel button on init', () => {
    const cancelButton = fixture.debugElement.query(By.css('#cancel'));
    spyOn(cancelButton.nativeElement, 'focus'); // create spy here   
    component.ngOnInit();
    expect(cancelButton.focus).toHaveBeenCalled();
  });

---

重点从一开始就是有缺陷的

使用Angular时，不应使用

文档

获取元素

改为使用viewChild

@ViewChild('cancel') cancelButton: ElementRef<HtmlButtonElement>;
ngAfterViewInit() {
  this.cancelButton.nativeElement.focus();
}

< > > >编辑< /强>如果您仍然想使用您的方式，请考虑使用：

---

重点从一开始就是有缺陷的

使用Angular时，不应使用

文档

获取元素

改为使用viewChild

@ViewChild('cancel') cancelButton: ElementRef<HtmlButtonElement>;
ngAfterViewInit() {
  this.cancelButton.nativeElement.focus();
}

< > > >编辑< /强>如果您仍然想使用您的方式，请考虑使用：

---

---

或者回忆一下

ngOnInit

这样你就不会创建

[it.count]

一个你用过一次的间谍了？嗯，我看到了问题，所以他不得不推迟

ngOnInit（）

调用。是和否：

ngOnInit

将在每个组件实例调用（这是在每个

it

，因为我们在每个

之前的
中创建了它）：但是
ngOnInit
作为一个特定命名的函数，您可以再次调用它，这一次使用spy，这样您就可以监视它。因此，不是真正推迟，而是重新调用。同样，不！生命周期挂钩在这里是为了确保您可以访问特定元素（例如，您不会在
ngOnInit
中获得
ViewContainerRef
，但会在
ngAfterViewInit
中获得）。钩子只是Angular调用的函数。例如，我实现了类似于decorator的功能，即通过事件触发。运行的函数被称为
ngOnCustomEvent（事件类型：string）
：没有什么可以阻止我在需要时运行它们，但我知道一个事实，它们将在自定义事件发生时运行，而无需我手动调用它们。甚至比删除下一票更好！完全有效的答案值得上一票：）或召回
ngOnInit
，这样你就不会创建
[it.count]
乘以您使用过一次的间谍？嗯，我看到了这个问题，所以他必须推迟
ngOnInit（）
调用。是和否：
ngOnInit
将在每个组件实例中被调用（每个
it
，因为我们在
之前创建它）：但是
ngOnInit
作为一个特定命名的函数，您可以再次调用它，这一次使用spy，这样您就可以监视它。因此，不是真正推迟，而是重新调用。同样，不！生命周期挂钩在这里是为了确保您可以访问特定元素（例如，您不会在
ngOnInit
中获得
ViewContainerRef
，但会在
ngAfterViewInit
中获得）。钩子只是Angular调用的函数。例如，我实现了类似于decorator的功能，即通过事件触发。运行的函数被称为
ngOnCustomEvent（事件类型：string）
：没有什么可以阻止我在需要时运行它们，但我知道，它们将在自定义事件发生时运行，而无需我手动调用它们。甚至比删除下一票更好！完全有效的答案值得上一票：）是的，利用
fixture
而不是依赖
document
来获取html元素。@trichetriche-我实现了
@ViewChild
，但是它说它找不到名称“cancelButton”？你的按钮是否类似于
Cancel
？你需要给它一个模板变量引用
\Cancel
>是的，我只是在谷歌搜索后注意到了。你似乎不需要第一个冒号“：”在
（“取消”）：
？而且在
HtmlButtonElement
：-）@physicsboy-woops中它应该是HTML而不是HTML！另外，
ElementRef
用于键入元素：当您编写
this.cancelButton.nativeElement
时，如果您附加一个点，您将拥有HTML按钮元素的intellisense。不是强制性的，但很实用！是的，利用
fixture
而不是依赖
document
来获取html元素。@trichetriche-我实现了
@ViewChild
，但是它说它找不到名称“cancelButton”？您的按钮类似于
Cancel
？你需要给它一个模板变量引用
#cancel
是的，我在谷歌搜索后注意到了这一点。您似乎不需要在
（'cancel'）：
之后使用第一个冒号“：”？在
HtmlButtonElement
：-）@physicsboy-woops中，它应该是HTML而不是HTML，因为输入错误！另外，
ElementRef
用于键入元素：当您编写
this.cancelButton.nativeElement
时，如果您附加一个点，您将拥有HTML按钮元素的intellisense。不是强制性的，但很实用！