Testing in Frontend World at Frontend fwdays'17 Conference

Transcript

1. Testing in Frontend World
   Nikita Galkin
   

   View Slide

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
   

   View Slide

3. Why Test?
   Motivation
   3
   

   View Slide

4. 4
   © turnoff.us
   

   View Slide

5. Portrait of Ukrainian Node.js developer
   5
   

   View Slide

6. What is testing?
   Several points of view
   6
   

   View Slide

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

   View Slide

8. 8
   Verification of
   requirements
   implementation
   

   View Slide

9. 9
   Understanding
   review
   

   View Slide

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

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. AAA
    16
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Fast
    22
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

29. Timely
    29
    Write tests!
    

    View Slide

30. LINTING
    CHEAP and SIMPLE
    30
    

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

34. UNIT TESTING
    In Node.js we trust
    34
    

    View Slide

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

    View Slide

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

    View Slide

37. 37
    or create NPM package!
    

    View Slide

38. COMPONENT TESTING
    First there was a component
    38
    

    View Slide

39. 39
    © Mikki Kobvel
    

    View Slide

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

    View Slide

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', () => (
    Hello Button
    ))
    .add('with some emoji', () => (
    
    ));
    

    View Slide

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

    View Slide

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

    View Slide

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('', () => {
    it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(/>);
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
    });
    });
    

    View Slide

45. Interaction Testing
    45
    

    View Slide

46. Visual testing
    Browsers are required
    46
    

    View Slide

47. Visual Testing
    47
    

    View Slide

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

    View Slide

49. e2e testing
    QA Engineer job
    49
    

    View Slide

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
    

    View Slide

51. Conclusions
    Let’s repeat
    51
    

    View Slide

52. View Slide

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

    View Slide

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
    

    View Slide