Никита Галкин "Testing in Frontend World"

Testing in Frontend World
Nikita Galkin

Nikita
Galkin
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

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

Types of testing
More work, more time, more money
10

11
1. Usability testing
2. Performance testing
3. Load testing
4. Stress testing
5. Security testing
6. Configuration testing
7. Compatibility testing
8. Installability testing
9. Recovery testing
10. Availability testing
11. Volume testing
12. ...

13
Linting
Unit testing
Component testing
Visual testing
End 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

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

FIRST
DRY, YAGNI, KISS, SOLID, etc
20

21
Fast
Independent
Repeatable
Self-Validating
Thorough&Timely

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

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 TESTING
In Node.js we trust
34

“Code that is perfect for
unit-testing is code
that has no I/O or UI
dependencies.

36
BE is the
best place
for
business
logic and
unit tests...

COMPONENT TESTING
First there was a component
38

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 addon
Storyshots

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

Visual testing
Browsers are required
46

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 testing
QA 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

53
Linting
Unit testing
Component testing
Visual testing
End 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

Никита Галкин "Testing in Frontend World"

More Related Content

What's hot

Similar to Никита Галкин "Testing in Frontend World"

More from Fwdays

Recently uploaded

Никита Галкин "Testing in Frontend World"