如何对 TweenMax 进行单元测试？潜在的模拟？

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

对不起，我删除了我之前的答案，因为它越来越长。

根据您提供的 stackblitz，我自己也创建了一个：

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();
  });
});