Skip to content

Testing DOM interactions

Jump to bottom
Marcin Armatys edited this page Oct 27, 2017 · 4 revisions

click[.in(cssSelector)][.after(timeout)]

Click html element.

var click = testRunner.actions.click;

Example

it('click test', () => {
    var html = app.runHtml('<button class="my-element"></button>');
    
    html.perform(
        click.in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

click method will throw Error

wait(miliseconds)

Wait for some delay.

var wait = testRunner.actions.wait;

Example

We have to use done parameter to tell runner that still there are some async operations.

it('async click test with wait', done => {
    var html = app.runHtml('<button class="my-element"></button>');
    
    html.perform(
        click.in('.my-element'),
        wait(200)
    );
    
    html.verify(
        // assertions    
        done
    )
});

type(text)[.in(cssSelector)][.after(timeout)]

Type some text into input field.

var type = testRunner.actions.type;

Example

it('type test', () => {
    var html = app.runHtml('<input class="my-element"></input>');
    
    html.perform(
        type('Some text').in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

keypress(key)[.in(cssSelector)][.after(timeout)]

Press key.

var keypress = testRunner.actions.keypress;

Example

it('keypress test', () => {
    var html = app.runHtml('<div class="my-element"></div>');
    
    html.perform(
        keypress(13).in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

keyup(key)[.in(cssSelector)][.after(timeout)]

Press key.

var keyup = testRunner.actions.keyup;

Example

it('keyup test', () => {
    var html = app.runHtml('<div class="my-element"></div>');
    
    html.perform(
        keyup(13).in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

keydown(key)[.in(cssSelector)][.after(timeout)]

Press key.

var keydown = testRunner.actions.keydown;

Example

it('keydown test', () => {
    var html = app.runHtml('<div class="my-element"></div>');
    
    html.perform(
        keydown(13).in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

mouseover[.in(cssSelector)][.after(timeout)]

Put mouse over element.

var mouseover = testRunner.actions.mouseover;

Example

it('mouseover test', () => {
    var html = app.runHtml('<div class="my-element"></div>');
    
    html.perform(
        mouseover.in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

mouseover method will throw Error

mouseleave[.in(cssSelector)][.after(timeout)]

Leave mouse from element.

var mouseleave = testRunner.actions.mouseleave;

Example

it('mouseleave test', () => {
    var html = app.runHtml('<div class="my-element"></div>');
    
    html.perform(
        mouseleave.in('.my-element')
    );
    
    html.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

mouseleave method will throw Error

blur[.from(cssSelector)][.after(timeout)]

Fires blur event for an element.

var blur = testRunner.actions.blur;

Example

it('blur test', () => {
    var html = app.runHtml('<input class="my-element">');

    html.perform(
        blur.from('.my-element')
    );

    html.verify(
        // assertions
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

blur method will throw Error

navigateTo(url)[.after(timeout)]

Navigate to url.

var navigateTo = testRunner.actions.navigateTo;

Example

it('navigateTo action test', () => {
    var html = app.runHtml('<div></div>');
    
    html.perform(
        navigateTo('/user/13/address')
    );
    
    html.verify(
        // assertions    
    )
});

apply(element)

Scope apply on element.

var apply = testRunner.actions.apply;

Example

it('apply action test', () => {
    var html = app.runHtml('<div></div>');
    
    html.perform(
        apply(/*co tu trzeba wpisać*/)
    );
    
    html.verify(
        // assertions    
    )
});

expectElement(element)

Expect html element to have met some conditions.

var expectElement = testRunner.actions.expectElement;

Example

it('expectElement action test', () => {
    var html = app.runHtml('<div class="my-element">Some text</div>');
    
    html.perform(
        expectElement('.my-element').toContainText('Some text')
    );
    
    html.verify(
        // assertions    
    )
});

listenTo(event, [handler])

Listen to Angular event.

var listenTo = testRunner.actions.listenTo;

Example

it('listenTo action test', () => {
    var dataFromEvent;
    var html = app.runHtml('<div></div>');
    
    html.perform(
        listenTo('someEvent', function (data) {
                dataFromEvent = data;
        }),
    );
    
    $rootScope.$emit('someEvent', 'Event data!');
    
    expect(dataFromEvent).toEqual('Event data!');
});

publishEvent(event, data)

Publish Angular event.

var publishEvent = testRunner.actions.publishEvent;

Example

it('publishEvent test', () => {
    var dataFromEvent;
    var html = app.runHtml('<div></div>');
    html.perform(
        listenTo('someEvent', function (data) {
            dataFromEvent = data;
        }),
    );
    
    html.perform(
          publishEvent('externalGreeting', 'Event data!')
    );
    
    expect(dataFromEvent).toEqual('Event data!');
});

Operators

in(cssSelector)

Select element to perform action on.

from(cssSelector)

Select element to perform action on.

after(timeout)

Perform action after delay.

Clone this wiki locally