CODEWITHSUNDEEP
unit-testingaurelia
Kamil Rostkowski
Kamil Rostkowski

Reputation: 211

Unit testing an aurelia custom element

I'm testing a simple collapse custom element with view:

<template> <button click.delegate="toggle()"></button> <div show.bind="collapsed"> <slot></slot> </div> </template>

and view model:

export class Collapse { collapsed: boolean; toggle() { this.collapsed = !this.collapsed; } }

My test looks like that:

it('should show content on flag change', done => { component.create(bootstrap).then(() => { const div = <Element> document.getElementsByTagName('div')[1]; const style = window.getComputedStyle(div);
expect(style.display).toBe('none');
component.viewModel.toggle();
setTimeout(() => { expect(style.display).toBe('block'); done(); }, 0); }); });

Can I get rid of the setTimeout in some way?

Upvotes: 0

Views: 388

Answers (1)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

  it('should show content on flag change', done => {
    let div: HTMLDivElement;
    component.create(bootstrap)
      .then(() => {
        div = <HTMLDivElement>document.querySelector('div');
        const style = window.getComputedStyle(div);
        expect(style.display).toBe('none');
        component.viewModel.toggle();
      })
      .then(() => {
        const style = window.getComputedStyle(div);
        expect(style.display).toBe('block');
      })
      .then(done);
    });
  });

Upvotes: 3

Related Questions