Download - Никита Галкин "Testing in Frontend World"
![Page 1: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/1.jpg)
Testing in Frontend WorldNikita Galkin
![Page 2: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/2.jpg)
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
![Page 3: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/3.jpg)
Why Test?Motivation
3
![Page 5: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/5.jpg)
Portrait of Ukrainian Node.js developer
5
![Page 6: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/6.jpg)
What is testing?Several points of view
6
![Page 7: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/7.jpg)
7
Bugs:elimination,
taming,controll,
...
![Page 8: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/8.jpg)
8
Verification of requirements implementation
![Page 9: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/9.jpg)
9
Understanding review
![Page 10: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/10.jpg)
Types of testing More work, more time, more money
10
![Page 11: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/11.jpg)
11
1. Usability testing2. Performance testing3. Load testing4. Stress testing5. Security testing6. Configuration testing7. Compatibility testing8. Installability testing9. Recovery testing10. Availability testing11. Volume testing12. ...
![Page 12: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/12.jpg)
12
![Page 13: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/13.jpg)
13
LintingUnit testingComponent testingVisual testingEnd to end testing
![Page 14: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/14.jpg)
14
Who are you? Frontend or Full
Stack?What is your
artifact?
![Page 15: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/15.jpg)
15
Your project should have
automated tests running in CI
![Page 16: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/16.jpg)
AAA
16
![Page 17: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/17.jpg)
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
![Page 18: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/18.jpg)
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)); }); });});
![Page 19: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/19.jpg)
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); }); });});
![Page 20: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/20.jpg)
FIRSTDRY, YAGNI, KISS, SOLID, etc
20
![Page 21: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/21.jpg)
21
FastIndependentRepeatableSelf-ValidatingThorough&Timely
![Page 22: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/22.jpg)
Fast
22
![Page 23: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/23.jpg)
▰ 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
![Page 24: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/24.jpg)
Independent
No order-of-run dependency.They should pass or fail the same way in suite or when run individually.
24
![Page 25: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/25.jpg)
Independent
25
beforeEach(function() { return db.clear() .then(function() { return db.save([tobi, loki, jane]); });});
![Page 26: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/26.jpg)
▰ 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
![Page 27: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/27.jpg)
Repeatable
27
it('should write to log',(done)=> {// @todo Fix on travis file writing if (process.env.TRAVIS) { return this.skip() }// main logic ...}
![Page 28: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/28.jpg)
Self-Validating
28
No manual inspection required to check whether the test has passed or failed.
![Page 29: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/29.jpg)
Timely
29
Write tests!
![Page 30: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/30.jpg)
LINTINGCHEAP and SIMPLE
30
![Page 31: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/31.jpg)
Linting
31
▰ Code style documentation▰ Review code,
not code style▰ Autochecking best
practises
![Page 32: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/32.jpg)
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
![Page 33: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/33.jpg)
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.
![Page 34: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/34.jpg)
UNIT TESTINGIn Node.js we trust
34
![Page 35: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/35.jpg)
“Code that is perfect for unit-testing is codethat has no I/O or UIdependencies.
![Page 36: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/36.jpg)
36
BE is the best place
for business logic and
unit tests...
![Page 37: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/37.jpg)
37
or create NPM package!
![Page 38: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/38.jpg)
COMPONENT TESTING
First there was a component
38
![Page 40: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/40.jpg)
Storybook
40
▰ storybook.js.org▰ Documentation as a code▰ Addons!▰ React and Vue support▰ CLI integrated
![Page 41: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/41.jpg)
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> ));
![Page 42: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/42.jpg)
Structural Testing
42
▰ Stringсomparison
▰ There is addonStoryshots
![Page 43: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/43.jpg)
Interaction Testing
43
▰ Enzyme▻ Karma▻ Mocha▻ Jest
▰ There is addon called specs▰ Don’t use for rendering testing!
![Page 44: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/44.jpg)
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); });});
![Page 45: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/45.jpg)
Interaction Testing
45
![Page 46: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/46.jpg)
Visual testingBrowsers are required
46
![Page 47: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/47.jpg)
Visual Testing
47
![Page 48: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/48.jpg)
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 });});
![Page 49: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/49.jpg)
e2e testingQA Engineer job
49
![Page 50: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/50.jpg)
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
![Page 51: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/51.jpg)
ConclusionsLet’s repeat
51
![Page 52: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/52.jpg)
52
![Page 53: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/53.jpg)
53
LintingUnit testingComponent testingVisual testingEnd to end testing
![Page 54: Никита Галкин "Testing in Frontend World"](https://reader031.vdocument.in/reader031/viewer/2022030317/5a64fdee7f8b9a2e118b4731/html5/thumbnails/54.jpg)
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