Question

我正在尝试对使用来自 GSAP 的 TweenMax 的功能进行单元测试，但是我不确定如何最好地实现它...

@ViewChild('dropdown') dropdown: ElementRef;
expanded = false;

toggleDropdown() {
    const dropdown = this.dropdown.nativeElement;

    TweenMax.to(dropdown, 0.5, {
      css: {
        height: this.expanded ? '34px' : '376px'
      },
      ease: Power2.easeInOut,
    });

    this.expanded = !this.expanded;
  }

我当时正在考虑可能在嘲笑TweenMax，但是我进行的尝试收到了错误：

期望有一名间谍，但得到了Object（{to：spy on unknown.to}）。

beforeEach(async(() => {
    mockTween = createSpyObj(['to']);

    TestBed.configureTestingModule({
      imports: [...],
      declarations: [...],
      providers: [... ,
        {provide: TweenMax, useValue: mockTween}
      ]
    });

    ...
  }));

it('should set dropdown height to 376px if not currently expanded', () => {
    component.expanded = false;

    component.toggleDropdown();

    expect(mockTween).toHaveBeenCalled();
  });

Answer 1

对不起，我删除了以前的答案，因为答案太长了。

在您提供的堆栈闪电之后，我还创建了一个我自己：

https://stackblitz.com/edit/angular-6-jasmine-tween-j5wsz9?file=app/tween/tween.component.spec.ts

如您所见，它就像一个护身符。

fdescribe('TweenComponent', () => {
  let fixture: ComponentFixture<TweenComponent>, component: TweenComponent;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TweenComponent]
    }).compileComponents();

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

  it('should call Tween.to', () => {
    spyOn(TweenMax, 'to');
    component.toggleDropdown();
    expect(TweenMax.to).toHaveBeenCalled();
  });
});

如何对TweenMax进行单元测试？潜在的嘲笑？

1 个答案: