Testing in JavaScript
Brian Douglas
Links
Overview
- Types of Testing
- Testing Tools
- Write a test
Expectation
- You should have a basic understanding of JavaScript
- Please particpate by answering my questions 😺
How confident are you with testing?
Test confidence comes from simplicity
- Tests should be reliable.
- Tests should be easy to write.
- Tests should be easy to understand.
Types of testing
- Unit testing - small focus (on/off)
- Integration testing - putting the pieces together (end to end)
- Acceptance testing - code agnostic automation
Tools for testing
Testing Setup
// test is checking if the value is equal to the expectedValue
test('test description', function() {
expect(value).toBe(expectedValue);
});
Unit Test Example
// jest example
it('two plus two is four', () => {
expect(2 + 2).toBe(4);
});
// mocha example
it('two plus two is four', () => {
value = 2 + 2
assertEquals(value, 4, "This is an additional message you can write");
});
Integration
Integration Test Example
it('users can add items to the shopping list simultaneously', async () => {
// create mock data using a local mockApi server:
mockApi.mockGetItems([{id: 12, name: 'bananas'}, {id: 13, name: 'dill'}]);
// more test setup (ceremony)
clickAddNewItemButton();
fillInItemName('carrots');
clickSaveNewItemButton();
expect(getItems()).toEqual(['bananas', 'dill', 'carrots']);
});
clickAddNewItemButton() {
const button = screen.find(`[data-qa="${'add-new-item'}"]`)
click(button);
}
fillInItemName(name) {
const input = screen.find(`[data-qa="${'new-item-name'}"]`)
setValue(input, name);
}
Why Mocks?
import {LocalStorageMock, data, match} from "./mocks";
// set up local storage mock usage in component
global.localStorage = new LocalStorageMock
localStorage.setItem("currentOpenSaucedUser", JSON.stringify({...data}));
Acceptance Test Example
module.exports = {
'Test input works' : function (browser) {
browser
.url('http://www.your-site.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'carrots')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#main', 'carrots')
.end();
}
};
Headless web browser
A headless browser is a web browser without a graphical user interface. Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication.
Questions?
Write a test
Test Custom FizzBuzz
fizzBuzzCustom()[15] // returns 16
fizzBuzzCustom()[44] // returns "FizzBuzz" (45 is divisible by 3 and 5)
fizzBuzzCustom('Hey', 'There')[25] // returns 26
fizzBuzzCustom('Hey', 'There')[11] // returns "Hey" (12 is divisible by 3)
fizzBuzzCustom("What's ", "up?", 3, 7)[80] // returns "What's " (81 is divisible by 3)
