Testing in Frontend World at Frontend fwdays'17 Conference

Testing in Frontend World at Frontend fwdays'17 Conference

A2443b68836f2d166eae52b940e99bf6?s=128

Nikita Galkin

November 26, 2017
Tweet

Transcript

  1. 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
  2. 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. ...
  3. 12.

    12

  4. 16.
  5. 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
  6. 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)); }); }); });
  7. 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); }); }); });
  8. 22.
  9. 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
  10. 24.

    Independent No order-of-run dependency. They should pass or fail the

    same way in suite or when run individually. 24
  11. 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
  12. 27.

    Repeatable 27 it('should write to log',(done)=> { // @todo Fix

    on travis file writing if (process.env.TRAVIS) { return this.skip() } // main logic ... }
  13. 31.

    Linting 31 ▰ Code style documentation ▰ Review code, not

    code style ▰ Autochecking best practises
  14. 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
  15. 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.
  16. 35.
  17. 40.

    Storybook 40 ▰ storybook.js.org ▰ Documentation as a code ▰

    Addons! ▰ React and Vue support ▰ CLI integrated
  18. 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> ));
  19. 43.

    Interaction Testing 43 ▰ Enzyme ▻ Karma ▻ Mocha ▻

    Jest ▰ There is addon called specs ▰ Don’t use for rendering testing!
  20. 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); }); });
  21. 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 }); });
  22. 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
  23. 52.

    52

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