$30 off During Our Annual Pro Sale. View Details »

Testing in Frontend World at Frontend fwdays'17 Conference

Testing in Frontend World at Frontend fwdays'17 Conference

Nikita Galkin

November 26, 2017
Tweet

More Decks by Nikita Galkin

Other Decks in Programming

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