Testing in Frontend WorldNikita Galkin

NikitaGalkin

Love and Know:▰ how to make developers and business happy▰ technical and process debt elimination

Believe that:▰ Any problem must be solved at the right level▰ Software is easy. People are hard▰ A problem should be highlighted,

an idea should be "sold",a solution should be demonstrated

Links:Site GitHub Twitter Facebook

2

Why Test?Motivation

3

4© turnoff.us

Portrait of Ukrainian Node.js developer

5

What is testing?Several points of view

6

7

Bugs:elimination,

taming,controll,

...

8

Verification of requirements implementation

9

Understanding review

Types of testing More work, more time, more money

10

11

1. Usability testing2. Performance testing3. Load testing4. Stress testing5. Security testing6. Configuration testing7. Compatibility testing8. Installability testing9. Recovery testing10. Availability testing11. Volume testing12. ...

12

13

LintingUnit testingComponent testingVisual testingEnd to end testing

14

Who are you? Frontend or Full

Stack?What is your

artifact?

15

Your project should have

automated tests running in CI

AAA

16

Test structure

Arrange/Given – setup data and dependency.Act/When – run the code.Assert/Then – check expectation.Cleanup – remove side effects and clean data.

17

Without structure

18

describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { assert.equal(-1, [1,2,3].indexOf(4)); }); });});

With structure

19

describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() { // arrange const arr = [1,2,3]; const el = 4; // act const index = arr.indexOf(el); // assert assert.equal(-1, index); }); });});

FIRSTDRY, YAGNI, KISS, SOLID, etc

20

21

FastIndependentRepeatableSelf-ValidatingThorough&Timely

Fast

22

▰ A developer should not hesitate to run the tests as they are slow.

▰ All of these including setup, the actual test and tear down should execute really fast (milliseconds) as you may have thousands of tests in your entire project.

run tests in parallel with ava or jest using mock and stabs

Fast

23

Independent

No order-of-run dependency.They should pass or fail the same way in suite or when run individually.

24

Independent

25

beforeEach(function() { return db.clear() .then(function() { return db.save([tobi, loki, jane]); });});

▰ A test method should NOT depend on any data in the environment/instance in which it is running.

▰ Deterministic results - should yield the same results every time and at every location where they run.

▰ No dependency on date/time or random functions output.

▰ Each test should setup or arrange it's own data.

Repeatable

26

Repeatable

27

it('should write to log',(done)=> {// @todo Fix on travis file writing if (process.env.TRAVIS) { return this.skip() }// main logic ...}

Self-Validating

28

No manual inspection required to check whether the test has passed or failed.

Timely

29

Write tests!

LINTINGCHEAP and SIMPLE

30

Linting

31

▰ Code style documentation▰ Review code,

not code style▰ Autochecking best

practises

Eslint

32

▶ eslint --init? How would you like to configure ESLint? Use a popular style guide? Which style guide do you want to follow? (Use arrow keys)❯ Google Airbnb Standard

ESLint v4.12.0 released

33

New Rules▰ implicit-arrow-linebreak. This rule aims to

enforce a consistent location for an arrow function containing an implicit return.

Autofixable Rules▰ sort-vars. At present, it will only sort

variables with no initial value or a literal initial value, in order to avoid potentially changing the order of function calls.

UNIT TESTINGIn Node.js we trust

34

“Code that is perfect for unit-testing is codethat has no I/O or UIdependencies.

36

BE is the best place

for business logic and

unit tests...

37

or create NPM package!

COMPONENT TESTING

First there was a component

38

39© Mikki Kobvel

Storybook

40

▰ storybook.js.org▰ Documentation as a code▰ Addons!▰ React and Vue support▰ CLI integrated

Storybook code

41

import React from 'react';import { storiesOf } from '@storybook/react';import { action } from '@storybook/addon-actions';import Button from '../components/Button';

storiesOf('Button', module) .add('with text', () => ( <Button onClick={action('clicked')}>Hello Button</Button> )) .add('with some emoji', () => ( <Button onClick={action('clicked')}>� � </Button> ));

Structural Testing

42

▰ Stringсomparison

▰ There is addonStoryshots

Interaction Testing

43

▰ Enzyme▻ Karma▻ Mocha▻ Jest

▰ There is addon called specs▰ Don’t use for rendering testing!

Interaction Testing

44

import React from 'react';import { expect } from 'chai';import { shallow } from 'enzyme';import sinon from 'sinon';import MyComponent from './MyComponent';import Foo from './Foo';

describe('<MyComponent />', () => { it('simulates click events', () => { const onButtonClick = sinon.spy(); const wrapper = shallow(<Foo onButtonClick={onButtonClick} />); wrapper.find('button').simulate('click'); expect(onButtonClick).to.have.property('callCount', 1); });});

Interaction Testing

45

Visual testingBrowsers are required

46

Visual Testing

47

Visual Testing

48

gemini.suite('yandex-search', function(suite) { suite.setUrl('/') .setCaptureElements('.main-table') .capture('plain') .capture('with text', function(actions, find) { actions.sendKeys(find('.input__control'), 'hello gemini'); //… check ScreenShot });});

e2e testingQA Engineer job

49

e2e testing

50

▰ As visual testing use real backend▰ Focus on UX, not on UI▰ Mark your elements for better tests

▻ We use data-e2e attribute for that.▰ Angular has e2e ready framework

protractortest.org

ConclusionsLet’s repeat

51

52

53

LintingUnit testingComponent testingVisual testingEnd to end testing

54

THANKS!WRITE TESTS!

BE AWESOME!!!

You can find me on Twitter as @galk_in

Slides are available at speakerdeck.com/galkin

or at my site galk.in