Testing DOM interactions - Pragmatists/ng-test-runner GitHub Wiki
in(cssSelector)]
click[.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
in(cssSelector)]
type(text)[.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
)
});
in(cssSelector)]
check[.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
from(cssSelector)]
blur[.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
in(cssSelector)]
keydown(key)[.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
)
});
form(cssSelector)]
submit[.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
in(cssSelector)]
select(value: string)[.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.