如何测试角度应用程序中的可重用组件元素？

问题描述

我想制作一个可重用的，经过自我测试的组件。我的代码看起来如何： HTML：

<div class="horizontal-menu-bar">
    <div id="#logotype" class="logotype">
        {{appName}}
    </div>
    <div  class="menu">
        <button 
            *ngFor="let menuElement of menuElements"
            id={{menuElement.id}}
            >
            {{menuElement.name}}
        </button>
    </div>
</div>

测试：

describe('HorizontalMenuComponent',() => {
  let component: HorizontalMenuComponent;
  let fixture: ComponentFixture<HorizontalMenuComponent>;

  beforeEach(async () => {
    await Testbed.configureTestingModule({
      declarations: [ HorizontalMenuComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = Testbed.createComponent(HorizontalMenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
...
  it('should render appName',() => {
    component.appName = 'Test appName';
    const expected = 'Test appName';
    fixture.detectChanges();
    const element = fixture.debugElement.nativeElement.querySelector('#logotype');
    expect(element.innerHTML).toBe(expected);
  });
...
});

Ts：

@Component({
  selector: 'demo-horizontal-menu',templateUrl: './horizontal-menu.component.html',styleUrls: ['./horizontal-menu.component.scss']
})
export class HorizontalMenuComponent implements OnInit {

  @input() appName: string;
  @input() menuElements: MenuElements[];

  constructor() { }

  ngOnInit(): void {
  }

}

我的输出：

Horizo​​ntalMenuComponent›应该呈现appName TypeError：无法读取 属性“ innerHTML”为空

我知道问题出在哪里，但目前我不知道如何解决。我应该以某种方式模拟将值测试到组件中，但是如何？

解决方法

您将元素设置为<div id="#logotype" class="logotype">，这是错误的。您应该删除#：

<div id="logotype" class="logotype">

然后它应该可以工作。

但是，强烈建议不要在组件中使用id。特别是在创建可重用组件时。这将导致您的DOM具有相同ID的元素。最好只使用一个类