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

Question

我想制作一个可重用的、经过自我测试的组件。 我的代码看起来如何：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 {
  }

}

还有我的 output：

HorizontalMenuComponent › 应该呈现 appName 类型错误：无法读取 null 的属性“innerHTML”

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

Answer 1

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

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

然后它应该工作。

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