Testing in Frontend World at Frontend fwdays'17 Conference

Transcript

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