$NaN — Writing JS that Moves Money

Presented at MelbJS.

Transcript

1. $NaN WRITING JS THAT MOVES MONEY #MelbJS — Nov 12th 1
2. Hi there I’m @plasticine Frontend / UI dev at Ferocia • pixelbloom.com • ferocia.com.au #MelbJS — Nov 12th 2
3. SHIPPING We built and shipped a responsive, mobile-first personal banking application, with native hybrid wrappers for iOS and Android. It’s pretty cool, you should check it out!* * demo.bendigobank.com.au #MelbJS — Nov 12th 3
4. CONTEXT #MelbJS — Nov 12th 4
5. WHERE ARE WE NOW “We’re all our own worst critics and so hard on ourselves...” — Khloe Kardashian ...such wisdom — then again, beating yourself up can be good for you! :D #MelbJS — Nov 12th 5
6. WHERE ARE WE NOW • Big, dumb Rails app • Asset pipeline “ball of mud” JS bundle • Lots of (soaking) *.ERB views • Business logic sometimes in views (via helpers) • Views/JS hard to work on, lots of integration points. Working on the UI is frustrating! #MelbJS — Nov 12th 6
7. WHERE ARE WE NOW Such template code... find ./app -name '*.erb' | xargs wc -l 10772 total find ./app -name '*helper.rb' | xargs wc -l 3175 total #MelbJS — Nov 12th 7
8. WHERE ARE WE NOW Very javascript... find ./app/assets/javascripts -name '*.*' | xargs wc -l 7244 total find ./spec/javascripts -name '*_spec.*' | xargs wc -l 9980 total #MelbJS — Nov 12th 8
9. WHERE WE WANT TO BE Generally; • More adaptive to device / on device • UI is faster & easier to work on • More performant for end-users #MelbJS — Nov 12th 9
10. WHERE WE WANT TO BE • Many small, decoupled SPAs • React UI, Rails API. UI code should be “dumb” • No more “ball of mud” — serve precisely what’s needed • explicit dependency tree, Webpack lazy bundles • Harder/better/faster UI testing • Serverside JS rendering (future) #MelbJS — Nov 12th 10
11. #MelbJS — Nov 12th 11
12. THE FEAR OF CHANGE IS REAL (AND KINDA UNDERSTANDABLE) #MelbJS — Nov 12th 12
13. FEAR MEANS... • Dedicated (external) test team (kinda cool) • Code lockdowns (bad) • Lonnnnnnggggg test cycle (very bad) • Manual (functional & visual) regression testing (super bad) • Multi platform / version / browser #MelbJS — Nov 12th 13
14. #MelbJS — Nov 12th 14
15. #MelbJS — Nov 12th 15
16. DECREASING FEAR THROUGH AUTOMATION! MORE TESTING! #MelbJS — Nov 12th 16
17. Unit testing React components is AWESOME; • Each React component is an idempotent function (unit) • UI behaviour and structure live in the one place now • UI tests are now FAST(er)! • Closing huge holes in test coverage • Enforce UI rules with code! • Unifies where UI tests should live #MelbJS — Nov 12th 17
18. #MelbJS — Nov 12th 18
19. describe 'PanelComponent', -> beforeEach -> header = <div /> @panel = ReactTestUtils.renderIntoDocument( <PanelComponent header={ header }> <div key="content" /> </PanelComponent> ) @$node = $(@panel.getDOMNode()) # because laziness #MelbJS — Nov 12th 19
20. describe 'classes', -> it 'has a ".panel" class', -> expect(@node.hasClass('panel')).to.equal(true) describe '.is-expanded', -> it 'does not have an ".is-expanded" class unless expanded', -> expect(@node.hasClass('is-expanded')).to.equal(false) @panel.setState(isExpanded: true) expect(@node.hasClass('is-expanded')).to.equal(true) describe '.is-href', -> it 'has an ".is-href" class when the panel acts as an anchor', -> expect(@node.hasClass('is-href')).to.equal(false) @panel.setProps(onTouchTap: sinon.spy) expect(@node.hasClass('is-href')).to.equal(true) #MelbJS — Nov 12th 20
21. describe 'expanding the panel', -> beforeEach -> @panel.setProps(children: [ <div disclosure /> ]) it 'toggles the isExpanded state when the disclosure is tapped', -> expect(@panel.state.isExpanded).to.equal(false) ReactTestUtils.Simulate.touchTap(@panel.refs.disclosureLink.getDOMNode()) expect(@panel.state.isExpanded).to.equal(true) ReactTestUtils.Simulate.touchTap(@panel.refs.disclosureLink.getDOMNode()) expect(@panel.state.isExpanded).to.equal(false) #MelbJS — Nov 12th 21
22. #MelbJS — Nov 12th 22
23. #MelbJS — Nov 12th 23
24. #MelbJS — Nov 12th 24
25. Run the test suite in remote browsers from anywhere; # in ./vendor/ui SAUCE=1 ./script/test --browsers IE8 # run the tests in IE8 SAUCE=1 ./script/test --browsers IE9,IE10,IE11 # run the tests in IE 9, 10 & 11 SAUCE=1 ./script/test --browsers LG_Nexus4 # ...etc, etc #MelbJS — Nov 12th 25
26. [local] running headless client JS tests (coverage) [local] running browser client JS tests [remote] running client JS tests #MelbJS — Nov 12th 26
27. (NOT JS) BUT TESTING JS • No knowledge, black-box acceptance testing • Can be run against internal staging, & Bank environments #MelbJS — Nov 12th 27
28. THINGS THAT CAN’T BE AUTOMATED ARE PRETTY MUCH THE WORST THING EVER #MelbJS — Nov 12th 28
29. #MelbJS — Nov 12th 29
30. “Is…is there a pony, dancing on the screen on that page?” #MelbJS — Nov 12th 30
31. #MelbJS — Nov 12th 31
32. “Ahh, yeah — didn’t test that. Didn’t think of that one” #MelbJS — Nov 12th 32
33. #MelbJS — Nov 12th 33
34. #MelbJS — Nov 12th 34
35. #MelbJS — Nov 12th 35
36. 1) My Button should look the same Failure/Error: it { is_expected.to look_the_same } RuntimeError: The pixel change percentage (0.16761948417776718%) exceeded the maximum threshold of 0%. Reference: spec/ui/references/my_button/default/reference.png Candidate: spec/ui/references/my_button/default/candidate.png Diff: spec/ui/references/my_button/default/diff.png #MelbJS — Nov 12th 36
37. QUESTIONS? FEEDBACK? WHATEVER? #MelbJS — Nov 12th 37