CODEWITHSUNDEEP
javascriptangulartypescriptunit-testingtesting
physicsboy
physicsboy

Reputation: 6328

How to unit test TweenMax? Potential mock?

I am attempting to unit test my function that uses TweenMax from GSAP, but I am unsure of how best to go about it...

@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;
  }

I was thinking of potentially mocking TweenMax, but the attempt I have made received the error:

Expected a spy, but got 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();
  });

Upvotes: 1

Views: 315

Answers (1)

user4676340
user4676340

Reputation:

Sorry, I deleted my previous answer because it was getting long.

Following the stackblitz you provided, I have also created one myself :

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

As you can see, it works like a charm. 

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

Upvotes: 1

Related Questions