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