TESTING SOFTWARE TESTING "Software testing is an investigation - PowerPoint PPT Presentation

CS 498RK SPRING 2020 TESTING

SOFTWARE TESTING "Software testing is an investigation conducted to provide stakeholders with information about the quality of the software product or service under test." i . e . checkin g tha t ou r cod e meet s som e expectation s https://en.wikipedia.org/wiki/Software_testing

TESTING LEVELS Unit Tests: For individual units like functions, classes, etc. Integration Tests: Across several units to ensure they "play well" together. End-to-end Tests: Using the complete product to perform certain scenarios.

UNIT TESTS Cover small , pure units of an app - utils, services and helpers Provide inputs and expect outputs for general , edge and error cases Check code coverage

INTEGRATION TESTS Cover cross-module processes - across several classes, FE-BE interactions Use spies to check side effects Component snapshot tests

END-TO-END TESTS AKA e2e or functional tests Browser automation Simulate clicks , scrolls , typing Treat the app as a black box Ensure correct end user experience Visual Regression

RUNNING TESTS Running in the browser — Create an HTML page with the test libraries and files Using a "headless" browser — Launch browsers without actually rendering them on the screen Executing in Node.js — import test files and dependencies and simulate the browser behavior (jsdom)

TEST LAUNCHERS module.exports = function(config) { config.set({ basePath: '../..', frameworks: ['jasmine'], autoWatch: true, browsers: ['Firefox', 'Chrome'], files: ['test/unit/*.spec.js'], //... }) } Launch test suites using a configuration file

STRUCTURE Usually follow a BDD structure (Behavior-Driven Development) describe('calculator', () => { describe('add', () => { test('should add 2 numbers', () => { ... }) describe('divide', () => { test('should throw an error when the divisor is zero', () => { ... }) ... })

ASSERTIONS Used to make sure tested values contain the expected value expect(bestLaCroixFlavor()).toBe('grapefruit') expect(0.2 + 0.1).toBeCloseTo(0.3, 5); expect(ouncesPerCan()).toBeGreaterThan(10); expect(() => { }).toBeInstanceOf(Function); expect(getAllFlavors()).toContain('lime');

SPIES Provide extra information about functions and side-effects describe('drink functions', () => { test('drinkAll drinks something lemon-flavoured', () => { const drink = jest.fn(); drinkAll(drink, 'lemon'); expect(drink).toHaveBeenCalled(); }); test('drinkEach drinks each drink', () => { const drink = jest.fn(); drinkEach(drink, ['lemon', 'octopus']); expect(drink).toHaveBeenCalledTimes(2); }); });

STUBS // Jest user.isValid = jest.fn(() => true) Replace selected functions of existing // Sinon modules to ensure sinon.stub(user, 'isValid').returns(true) consistent test behavior // Jasmine spyOn(user, 'isValid').andReturns(true)

MOCKS describe('getComments', () => { test('fetches comments from the server', done => { const server = sinon.createFakeServer() server.respondWith("GET", "/some/article/comments.json", [200, { "Content-Type": "application/json" }, '[{ "id": 12, "comment": "Hey there" }]']); Fake certain modules and getComments("/some/article").then((res) => { behaviors to test a expect(res.toJSON()).toBe([ { id: 1, name: 'Gwen' }, different part of a { id: 2, name: 'John' } process ]); expect(server.requests.length).toBeGreaterThan(1); }) server.respond(); server.restore(); }); });

SNAPSHOT TESTING Allows you to compare a data structure to what it was in older releases. No rendering required. Save internal data in a separate file and compare when a test is executed.

SNAPSHOT TESTING import React from 'react'; exports[`renders correctly 1`] = ` import Link from '../Link.react'; <a import renderer from 'react-test-renderer'; className="normal" href="http://www.facebook.com" it('renders correctly', () => { onMouseEnter={[Function]} const tree = renderer onMouseLeave={[Function]} .create(<Link page="http://www.facebook.com">Facebook</Link>) > .toJSON(); Facebook expect(tree).toMatchSnapshot(); </a> }); `;

dem o https://gitlab.com/uiuc-web- programming/testing-demo

"Program testing can be used to show the presence of bugs, but never to show their absence!" — Edsger W. Dijkstra

RESOURCES Jest - https://jestjs.io/ Istanbul - https://istanbul.js.org/ Jasmine - https://jasmine.github.io/ PhantomJS - https://phantomjs.org/ Sinon - https://sinonjs.org/ Nightwatch - https://nightwatchjs.org/ Karma - https://karma-runner.github.io/

MORE RESOURCES An Overview of JavaScript Testing in 2020 https://medium.com/welldone-software/an- overview-of-javascript-testing-7ce7298b9870 
 Snapshot Testing with Jest https://jestjs.io/docs/en/snapshot-testing