В ходе доклада мы обсудим такие виды тестирования как: - юнит тестирование, - тестирование верстки, - e2e-тестирование, - тестирование производительности для FE Также мы коснемся таких фундаментальных вещей, как: - Что такое F.I.R.S.T - Где заканчивается ответственность разработчика и начинает - ответственность QA инженера - Как договариваться с бэкенд разработчиками - И конечно, почему тесты нужны.

1. Testing in Frontend World
Nikita Galkin

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

3. Why Test?
Motivation
3

4. 4© turnoff.us

5. Portrait of Ukrainian Node.js developer
5

6. What is testing?
Several points of view
6

7. 7
Bugs:
elimination,
taming,
controll,
...

8. 8
Verification of
requirements
implementation

9. 9
Understanding
review

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

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

12. 12

13. 13
Linting
Unit testing
Component testing
Visual testing
End to end testing

14. 14
Who are you?
Frontend or Full
Stack?
What is your
artifact?

15. 15
Your project
should have
automated tests
running in CI

16. AAA
16

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

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

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

20. FIRST
DRY, YAGNI, KISS, SOLID, etc
20

21. 21
Fast
Independent
Repeatable
Self-Validating
Thorough&Timely

22. Fast
22

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

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

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

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

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

28. Self-Validating
28
No manual
inspection required
to check whether the
test has passed or
failed.

29. Timely
29
Write tests!

30. LINTING
CHEAP and SIMPLE
30

31. Linting
31
▰ Code style documentation
▰ Review code,
not code style
▰ Autochecking best
practises

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

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

34. UNIT TESTING
In Node.js we trust
34

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

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

37. 37
or create NPM package!

38. COMPONENT TESTING
First there was a component
38

39. 39
© Mikki Kobvel

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

41. 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>
));

42. Structural Testing
42
▰ String
сomparison
▰ There is addon
Storyshots

43. Interaction Testing
43
▰ Enzyme
▻ Karma
▻ Mocha
▻ Jest
▰ There is addon called specs
▰ Don’t use for rendering testing!

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

45. Interaction Testing
45

46. Visual testing
Browsers are required
46

47. Visual Testing
47

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

49. e2e testing
QA Engineer job
49

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

51. Conclusions
Let’s repeat
51

52. 52

53. 53
Linting
Unit testing
Component testing
Visual testing
End to end testing

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