Testing DOM interactions - Pragmatists/ng-test-runner GitHub Wiki

click[.in(cssSelector)]

Click html element.

import {click} from "ng-test-runner";

Example

it('click test', () => {
    const comp = app.run(ComponentToTest);
    
    comp.perform(
        click.in('.my-element')
    );
    
    comp.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

click method will throw Error

type(text)[.in(cssSelector)]

Type some text into input field.

import {type} from "ng-test-runner";

Example

it('type test', () => {
    const comp = app.run(ComponentWithInputToTest);
    
    comp.perform(
        type('Some text').in('.my-input')
    );
    
    comp.verify(
        // assertions    
    )
});

check[.in(cssSelector)]

Check checkbox.

import {check} from "ng-test-runner";

Example

it('check test', () => {
    const comp = app.run(ComponentWithCheckbox);
    
    comp.perform(
        check.in('.my-element')
    );
    
    comp.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

check method will throw Error

blur[.from(cssSelector)]

Blur from input element.

import {blur} from "ng-test-runner";

Example

it('blur test', () => {
    const comp = app.run(ComponentWithInputToTest);
    
    comp.perform(
        blur.from('.my-element')
    );
    
    comp.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

blur method will throw Error

keydown(key)[.in(cssSelector)]

Press key.

import {keydown} from "ng-test-runner";

Example

it('keydown test', () => {
    const comp = app.run(ComponentToTest);
    
    comp.perform(
        keydown(13).in('.my-element')
    );
    
    comp.verify(
        // assertions    
    )
});

submit[.form(cssSelector)]

Submit form.

import {submit} from "ng-test-runner";

Example

it('submit test', () => {
    const comp = app.run(ComponentWithForm);
    
    comp.perform(
        submit.form('.my-form')
    );
    
    comp.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

submit method will throw Error

select(value: string)[.in(cssSelector)]

Select value.

import {select} from "ng-test-runner";

Example

it('select test', () => {
    const comp = app.run(ComponentWithSelect);
    
    comp.perform(
        select('Value').in('.my-select')
    );
    
    comp.verify(
        // assertions    
    )
});

Throws

In case of css selector belongs to

  • multiple elements
  • no element

select method will throw Error

navigateTo(url, params)

Navigate to url with params.

import {navigateTo} from "ng-test-runner";

Example

it('navigateTo action test', () => {
    const comp = app.run(MyComponent);
    
    comp.perform(
        navigateTo('users', {userId : 5})
    );
    
    comp.verify(
        // assertions    
    )
});

navigateToUrl(url)

Navigate to url.

import {navigateToUrl} from "ng-test-runner";

Example

it('navigateTo action test', () => {
    const comp = app.run(MyComponent);
    
    comp.perform(
        navigateToUrl('/user/13/address')
    );
    
    comp.verify(
        // assertions    
    )
});

wait(miliseconds)

Wait for some delay.

import {wait} from "ng-test-runner";

Example

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

it('async click test with wait', done => {
    const comp = app.run(ComponentToTest);
    
    comp.perform(
        click.in('.my-element'),
        wait(200)
    );
    
    comp.verify(
        // assertions    
        done
    )
});

waitUntil(assertion: (query: Query) => void)

Wait for resolve assertion.

import {waitUntil} from "ng-test-runner";

Example

it('waitUntil test', () => {
    const comp = app.run(MyComponent);
    
    comp.perform(
        waitUntil(/*TODO*/)
    );
    
    comp.verify(
        // assertions    
    )
});

Assertions

expectThat.valueOf(cssSelector)

Assert value of element.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.valueOf test', () => {
    const comp = app.run(MyComponent);
    
    comp.verify(
        expectThat.valueOf('.my-element').isEqualTo('Some value'),    
        expectThat.valueOf('.my-element').isNotEqualTo('Wrong value'),    
        expectThat.valueOf('.my-element').contains('Some value')    
    )
});

expectThat.valuesOf(cssSelector)

Assert values of elements.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.valuesOf test', () => {
    const comp = app.run(MyComponent);

    comp.verify(
        expectThat.valuesOf('.my-element').areEqualTo(['First value', 'Second value']),
        expectThat.valuesOf('.my-element').doNotContain('Wrong value'),
        expectThat.valuesOf('.my-element').contain('Some value')
    )
});

expectThat.textOf(cssSelector)

Assert text of element.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.textOf test', () => {
    const comp = app.run(MyComponent);
    
    comp.verify(
        expectThat.textOf('.my-element').isEqualTo('Some text'),    
        expectThat.textOf('.my-element').isNotEqualTo('Wrong text'),    
        expectThat.textOf('.my-element').contains('Some text')    
    )
});

expectThat.textsOf(cssSelector)

Assert texts of elements.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.textsOf test', () => {
    const comp = app.run(MyComponent);

    comp.verify(
        expectThat.textsOf('.my-element').areEqualTo(['First text', 'Second text']),
        expectThat.textsOf('.my-element').doNotContain('Wrong text'),
        expectThat.textsOf('.my-element').contain('Some text')
    )
});

expectThat.location

Assert location.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.location test', () => {
    const comp = app.run(MyComponent);
    
    comp.verify(
        expectThat.location.isEqualTo('/users'),    
        expectThat.location.isNotEqualTo('/basket')    
    )
});

expectThat.element(cssSelector)

Assert elements.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.element test', () => {
    const comp = app.run(MyComponent);

    comp.verify(
        expectThat.elements('[my-attribute]').isEqualTo(['First', 'Second']),
        expectThat.elements('[my-attribute]').hasSize(2),
        expectThat.element('[my-attribute]').exists(),
        expectThat.element('[not-existing-attribute]').doesNotExist()
    )
});

expectThat.cssClassesOf(cssSelector)

Assert CSS classes of element.

import {expectThat} from "ng-test-runner";

Example

it('expectThat.cssClassesOf test', () => {
    const comp = app.run(MyComponent);

    comp.verify(
        expectThat.cssClassesOf('[my-attribute]').areEqualTo(['one', 'two']),
        expectThat.cssClassesOf('[my-attribute]').haveSize(2),
        expectThat.cssClassesOf('[my-attribute]').contain('one'),
        expectThat.cssClassesOf('[my-attribute]').doNotContain('three')
    )
});

Operators

in(cssSelector)

Select element to perform action on.

from(cssSelector)

Select element to perform action on.