narainsagar
narainsagar
narainsagar.com
Testing is an integral part of any successful software project.
test cases are executed manually (by a human) without any support from tools or scripts.
test cases are executed with the assistance of tools, scripts, and software.
END TO END TESTING
UNIT TESTING
https://github.com/jasmine/jasmine
Use Protractor to write and run end-to-end (e2e) tests. End-to-end tests explore the application as users experience it. In e2e testing, one process runs the real application and a second process runs protractor tests that simulate user behavior and assert that the application responds in the browser as expected.
https://github.com/angular/protractor
// file: app.test.e2e-spec.ts
// import required utilities.
import { browser, element, by } from 'protractor';
// Describe Test Suite
describe('App: Write some test suite title', () => {
beforeEach(() => {
// do some stuff on start of each test.
});
afterEach(() => {
// do some stuff after finish of each test.
});
// a test
it('write some test description', () => {
// do your stuffs.
// assertions & expectations
});
});
// file: app.1st.e2e-spec.ts
describe('1st tests', () => {
it('true is true', () => {
expect(true).toBe(true));
}
// basic calculator test.
it('should add two numbers and show correct result', () => {
var firstInput = element(by.css('#first-input'));
var secondInput = element(by.css('#second-input'));
firstInput.sendKeys(2);
secondInput.sendKeys(7);
element(by.css('#add-button')).click();
var resultValue = element(by.css('#result')).getAttribute('value');
expect(resultValue).toEqual(9));
}
});
# browser methods:
browser.get('/login'); // it will navigate / redirect to login route.
browser.wait(cb, timeout) // wait the browser until the cb function returns true.
browser.getTitle() // returns title string.
# element selector methods:
element(by.css('.some-class'))
element(by.id('some-id'))
element.all(by.css(elementSelector)).get(index)
# element properties/attributes methods:
.getText() // get element text
.getAttribute('value') // get the value of attribute named value on element.
.isPresent() // element is present in the DOM?
.click() // performs click
.clear() // clear's the element value
.sendKeys(value) // set the value to the element.
# my re-usable methods:
getElement(cssSelector: string) {
return element(by.css(cssSelector));
}
waitForPageToLoad() {
browser.wait(() => {
return element(by.css('app-root')).getText().then((text) => {
return text !== 'Loading...';
});
},5000);
}
hasClass(elementSelector: string, className: string): boolean {
return this.getElement(elementSelector).getAttribute('class')
.then((classes) => {
return classes.split(' ').indexOf(className) !== -1;
});
}
setElementValue(elementSelector: string, value: any) {
var elem = this.getElement(elementSelector);
elem.clear().then(() => {
elem.sendKeys(value);
});
}
checkout the demo:
https://recurship.github.io/angular2-multicomponent-form/
and it's e2e test cases:
https://github.com/recurship/angular2-multicomponent-form/tree/master/e2e/e2e