Testing in JavaScript - August 2018 - WebElement Bardejov

Testing in JavaScript
Marian Rusnak
WebElement Bardejov
31st August 2018
...or how to sleep well at night

console.log('About me');
● Developing web apps 7+ years
● JavaScript, PHP, Java, ASP.NET
● Oath, London (AOL+Yahoo)
● Alf Software, Presov
● Masaryk University, Brno
rusnak.marian1@gmail.com
@MarianRusnak

Are you confident
to deploy to production
on Friday at 5pm?

● Types of tests
● Tests for UI projects @ Oath
● Tests for ad delivery @ Oath
● Tests for web APIs @ Oath
● CI/CD
● Tools for testing in JavaScript
Agenda

Types of tests
● Manual
● Smoke
● Unit
● Functional/end-to-end
● Integration
● Performance
● Usability
● Acceptance Testing
● …

Unit
// math.js
class Math {
static add(a, b) {
return a + b;
}
}
// mathTest.js
test('2 + 2 should equal 4', () => {
expect(Math.add(2, 2)).to.equal(4);
});

Unit tests
● Controllers
● Business logic
describe('controllers/mraid', () => {
it('should render view with context passed', done => {
const request = {};
const response = {
render: (view, templateContext) => {
expect(templateContext.placementyType).to.equal('inline');
done();
}
};
mraidController.handle(request, response);
});
});

Functional/end-to-end tests
● Simulate user interaction
module.exports = {
'should be able to skip video': browser => {
browser
.url(`http://localhost:8001/myapp`)
.waitForElementVisible('#videoPlayer')
.click('#videoPlayBtn')
.click('#videoSkipBtn')
.assert.elementPresent('#videoReplayBtn')
.end();
}
};

Ad delivery
JSON ad config
+
JavaScript libraries

Unit tests
describe('render()', () => {
it('should render the ad', () => {
var advert = new Advert(adConfig);
advert.render();
expect(advert.rendered).to.be.true;
});
});

Functional/end-to-end tests

<html>
<body>
<script src="AdAPI.js"></script>
<button onclick="$AD.click()">Buy me!</button>
</body>
</html> // test.js
module.exports = {
'Test click': browser => {
browser
.url(ad.html')
.waitForElementPresent('button')
.click('button')
.url(url => {
browser.assertEquals(url, 'http://advertiser.com');
})
.end();
}
};

Testing client-side code
// test.js
module.exports = {
'Test click': browser => {
browser
.url(ad.html')
.waitForElementPresent('button')
.click('button')
.url(url => {
browser.assertEquals(url, 'http://advertiser.com');
})
.end();
}
};
describe('render()', () => {
it('should render the ad', () => {
var advert = new Advert(adConfig);
advert.render();
expect(advert.rendered).to.be.true;
});
});

Testing web APIs
SuperTest - https://www.npmjs.com/package/supertest
describe('GET /ads/{id}/events', () => {
it('should respond with events as JSON', done => {
request(server)
.get('/ads/123/events')
.expect(200)
.end((err, response) => {
expect(response.body).to.be.an('object').with.all.keys('render', 'view');
done(err);
});
});
});

Testing web APIs
nock - https://www.npmjs.com/package/nock
describe('3rd party integration', () => {
it('should make a request to 3rd party, done => {
const requestScope = nock('http://thirdparty.com')
.get(`/ads/abc123`)
.reply(200, '3rd party request successful');
thirdPartyAdapter.fetchAd({id: 'abc123'})
.then(() => {
expect(requestScope.isDone()).to.be.true;
done();
})
.catch(done);
});
});

Automated testing
1. Commit
2. Push
3. Tests are triggered
4. Tests are successful
5. Sweet dreams

Continuous Integration
● Develop, integrate, build, test
Continuous Delivery
● Develop, integrate, build, test, release

Tools for testing in JavaScript

Unit tests - test frameworks
describe('setName()', () => {
it('should set name property',() => {
...
});
});
test('adds 1 + 2 to equal 3', () => {
...
});

Unit tests - tools
var callback = sinon.stub();
callback.withArgs(42).returns(1);
callback.withArgs(1).throws("TypeError");
var callback = sinon.stub();
callback.onCall(0).returns(1);
callback.onCall(1).returns(2);
callback.returns(3);
foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.lengthOf(3);
tea.should.have.property('flavors')
.with.lengthOf(3);
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavors')
.with.lengthOf(3);

Summary
● Tests @ Oath
● Unit & functional tests in JavaScript
● Test in real browsers!
● Test!!!
rusnak.marian1@gmail.com
@MarianRusnak

References
● http://stackoverflow.com/a/680713
● https://mochajs.org/
● https://jasmine.github.io/
● https://facebook.github.io/jest/
● https://github.com/avajs/ava
● http://sinonjs.org/
● http://chaijs.com/
● https://karma-runner.github.io
● http://nightwatchjs.org/
● http://www.protractortest.org/
● http://www.seleniumhq.org/
● https://www.browserstack.com/
● https://saucelabs.com/
● http://screwdriver.cd/

Testing in JavaScript - August 2018 - WebElement Bardejov

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Testing in JavaScript - August 2018 - WebElement Bardejov

Similar to Testing in JavaScript - August 2018 - WebElement Bardejov (20)

Recently uploaded

Recently uploaded (20)

Testing in JavaScript - August 2018 - WebElement Bardejov