angular - 如何模拟传递给方法的 ElementRef

Question

我想为接收 ElementRef 的方法编写测试。我找不到模拟 ElementRef 的方法，有人可以帮忙吗？非常感谢!

示例服务.service.ts:

export class exampleService {
    exampleMethod(elRef: ElementRef): string {
      const elWidth = elRef.nativeElement.offsetWidth;
      return elWidth;
    }
}

测试文件.service.spec.ts:

describe('ExampleService', () => {
  let service: ExampleService;
  beforeEach(() => { 
    service = TestBed.inject(ExampleService);
  });

  it('How to mock the ELEMENTREF?', () => {
    expect(service.exampleMethod(ELEMENTREF)).toBe('100');
  });

});

Answer 1

您可以创建具有必要属性和方法的对象，您需要使用 ElementRef 对象:

const mockElementRef: any = {
  nativeElement: {
    offsetWidth: 100
  }
};


beforeEach(async(() => TestBed.configureTestingModule({
  imports: [ ... ],
  declarations: [ Component ],
  providers: [
    { provide: ElementRef, useValue: mockElementRef }
  ],
  schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents()));


.......


it('How to mock the ELEMENTREF?', () => {
  expect(service.exampleMethod(mockElementRef)).toBe('100');
});