Question

在我的组件中，我有一个看起来像这样的子组件：

<child-component #childComponent></childComponent>

在我的父组件中，然后使用@ViewChild和read参数访问此子组件以获取ElementRef，而不是组件引用。我需要ElementRef以确保我可以从nativeElement获得我需要的一些属性。所以它是这样的：

export class ParentComponent {
  @ViewChild('childComponent', { read: ElementRef }) public childComponent: ElementRef;
  public position: string;

  // some way down the code
  private someMethod() {
    if (this.childComponent.nativeElement.offsetLeft > 500) {
      this.position = 'left';
    } else {
      this.position = 'right';
    }
  }
}

所以这适用于应用程序，但是我正在编写测试并模拟子组件，如下所示：

@Component({
  selector: 'child-component',
  template: ''
})
class ChildComponentMockComponent {
  private nativeElement = {
    get offsetLeft() {
      return 600
    }
  };
}

beforeEach(async(() => TestBed.configureTestingModule({
  imports: [ ... ],
  declarations: [ ParentComponent, ChildComponentMockComponent ],
  providers: [ ... ],
  schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents()));

it('should have the correct position, based on position of child-component', () => {
  spyOn(component, 'someMethod');
  expect(component.someMethod).toHaveBeenCalled();
  expect(component.position).toBe('left');
});

因此测试将编译组件，并使用模拟的子组件值作为正确的值并计算this.position的值，然后在测试中断言。

但是，当设置{ read: ElementRef }参数时，TestBed会完全忽略模拟，即使它被添加到声明数组中。如果我删除{ read: ElementRef }，则模拟将在测试中使用并通过。但是我的应用程序不起作用，因为它现在正在获取组件引用，其中nativeElement属性不存在，而不是元素引用。

那么如何在我的应用程序中获取ElementRef然后在我的测试中使用模拟组件？

Answer 1

我已经通过更改应用程序的体系结构来解决这个问题。子组件现在找到它自己的offsetLeft属性，然后将它放入一个输出EventEmitter中以获取父组件。

export class ChildComponent implements AfterViewInit {
  @Output() offsetPosition: EventEmitter<number> = new EventEmitter<number>();

  constructor(private el: ElementRef) {}

  public ngAfterViewInit() {
    this.offsetPosition.emit(this.el.nativeElement.offsetLeft);
  }
}

export class ParentComponent implements AfterViewInit {
  public childComponentOffset: number;

  public ngAfterViewInit() {
    setTimeout(() => {
      // this.childComponentOffset is available
      // needs to be in setTimeout to prevent ExpressionChangedAfterItHasBeenCheckedError
      // more info: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
    }
  }

  public getChildComponentOffset(position: number): void {
    this.childComponentOffset = position;
  }
}

然后在HTML中，您只需使用输出变量和方法定义子组件：

<child-component (offsetPosition)="getChildComponentOffset($event)"></child-component>

在测试中，我然后为子组件模拟ElementRef并将其用作提供者。

const mockElementRef: any = {
  get offsetLeft() {
    return position;
  }
};

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

it('should have the correct position, based on position of child-component', (done) => {
  component.getChildComponentOffset(600);
  setTimeout(() => expect(component.position).toBe('left'));
  done();
});

使用组件的@ViewChild {read：ElementRef}会导致单元测试失败

1 个答案: