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

SPRING 2020 CS 498RK

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."

https://en.wikipedia.org/wiki/Software_testing

i.e. checking that our code meets some expectations

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

• utputs 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

Launch test suites using a configuration file

module.exports = function(config) { config.set({ basePath: '../..', frameworks: ['jasmine'], autoWatch: true, browsers: ['Firefox', 'Chrome'], files: ['test/unit/*.spec.js'], //... }) }

STRUCTURE

describe('calculator', () => { describe('add', () => { test('should add 2 numbers', () => { ... }) describe('divide', () => { test('should throw an error when the divisor is zero', () => { ... }) ... })

Usually follow a BDD structure (Behavior-Driven Development)

ASSERTIONS

expect(bestLaCroixFlavor()).toBe('grapefruit') expect(0.2 + 0.1).toBeCloseTo(0.3, 5); expect(ouncesPerCan()).toBeGreaterThan(10); expect(() => { }).toBeInstanceOf(Function); expect(getAllFlavors()).toContain('lime');

Used to make sure tested values contain the expected value

SPIES

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); }); });

Provide extra information about functions and side-effects

STUBS

Replace selected functions of existing modules to ensure consistent test behavior

// Jest user.isValid = jest.fn(() => true) // Sinon sinon.stub(user, 'isValid').returns(true) // 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" }]']); getComments("/some/article").then((res) => { expect(res.toJSON()).toBe([ { id: 1, name: 'Gwen' }, { id: 2, name: 'John' } ]); expect(server.requests.length).toBeGreaterThan(1); }) server.respond(); server.restore(); }); });

Fake certain modules and behaviors to test a different part of a process

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'; import Link from '../Link.react'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create(<Link page="http://www.facebook.com">Facebook</Link>) .toJSON(); expect(tree).toMatchSnapshot(); });

exports[`renders correctly 1`] = ` <a className="normal" href="http://www.facebook.com"

• nMouseEnter={[Function]}
• nMouseLeave={[Function]}

> Facebook </a> `;

demo

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/ Karma - https://karma-runner.github.io/ Jasmine - https://jasmine.github.io/ Sinon - https://sinonjs.org/ Istanbul - https://istanbul.js.org/ Nightwatch - https://nightwatchjs.org/ PhantomJS - https://phantomjs.org/

MORE RESOURCES

An Overview of JavaScript Testing in 2020 https://medium.com/welldone-software/an-

• verview-of-javascript-testing-7ce7298b9870


Snapshot Testing with Jest https://jestjs.io/docs/en/snapshot-testing