Upgrade to Pro — share decks privately, control downloads, hide ads and more …

about tests

E86b46be0f4e61db6b28becc5493bbab?s=47 januswel
October 28, 2016

about tests

about tests for React Native
react-native meetup #3

E86b46be0f4e61db6b28becc5493bbab?s=128

januswel

October 28, 2016
Tweet

Transcript

  1. ABOUT TESTS REACT-NATIVE MEETUP #3 JANUS_WEL

  2. ▸ tech lead@CureApp ▸ have developed on native ▸ Android/iOS

    ▸ janus_wel ▸ januswel ▸ shut up and play P5 SPEAKER JANUS_WEL
  3. None
  4. None
  5. MADE WITH REACT NATIVE FOR NASH PATIENT now, not available

    for the public
  6. ABOUT TEST AUTOMATION

  7. SUMMARY

  8. AS YOU LIKE IT

  9. SOME POINTS TO SEE to be continued…

  10. 5W1H

  11. WHY?

  12. WHY DO YOU NEED TESTS? 3 CATEGORIES DEVELOPER TESTING CUSTOMER

    TESTING QA TESTING http://gihyo.jp/dev/serial/01/tdd/0003 FOR BETTER DESIGN FOR VELOCITY FOR SCHEDULE MANAGEMENT FOR SLA ONE OF GOALS FOR QUALITY ASSURANCE
  13. WHO?

  14. WHO DO WRITE/EXECUTE TESTS? 3 CATEGORIES DEVELOPER TESTING CUSTOMER TESTING

    QA TESTING DEVELOPER CUSTOMER DEVELOPER QA DEVELOPER CI
  15. WHAT?

  16. WHAT DO YOU NEED TESTS FOR? LAYERED ARCHITECTURE ▸ UI

    layer ▸ complexity… ▸ domain layer ▸ unit test, integration test ▸ infrastructure layer ? ▸ not need for mobile app ▸ trust vendors UI PRESENTATION DOMAIN LOGIC INFRASTRUCTURE DATA https://speakerdeck.com/januswel/marutipuratutohuomushi-dai-false-javascript-x-react-zhan-lue
  17. WHERE?

  18. WHERE DO YOU NEED TESTS? COST AND BENEFIT ON DEVELOPER

    MACHINE ON CI MACHINE ON DEVICE distance to goal cost ▸ on device ▸ one of goals ▸ on developer machine ▸ universal ▸ simulator / emulator ▸ on CI machine ▸ all test
  19. WHEN?

  20. WHEN DO YOU NEED TESTS? ANYTIME YOU HAVE CHANGED COMMITTED

    CHANGED MERGED RELEASED COMMIT HOOK CI SERVICE CD SERVICE FILE CHANGE DETECTION
  21. HOW?

  22. HOW DO YOU WRITE/EXECUTE TESTS? TOOLS ▸ general test framework

    ▸ Jest ▸ mocha ▸ E2E test framework ▸ Appium ▸ support ▸ ESLint ▸ flow * only React Native friendly
  23. TOOLS

  24. BY FACEBOOK JEST ▸ “painless” ▸ jasmine base ▸ snapshot

    testing ▸ for ▸ presentation ▸ domain: universal JS https://github.com/januswel/jest-sample
  25. TEST import 'react-native' import React from 'react' import Intro from

    './intro' import renderer from 'react-test-renderer' it('renders correctly', () => { const tree = renderer.create( <Intro /> ).toJSON() expect(tree).toMatchSnapshot() }) import React from 'react' import { StyleSheet, Text, View, } from 'react-native' const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5fcff', }, text: { fontSize: 20, textAlign: 'center', margin: 10, }, }) export default function Intro() { return ( <View style={styles.container}> <Text style={styles.text}> Hello, react-native meetup!! </Text> </View> ) } for
  26. SNAPSHOT import React from 'react' import { StyleSheet, Text, View,

    } from 'react-native' const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5fcff', }, text: { fontSize: 20, textAlign: 'center', margin: 10, }, }) export default function Intro() { return ( <View style={styles.container}> <Text style={styles.text}> Hello, react-native meetup!! </Text> </View> ) } exports[`test renders correctly 1`] = ` <View style={ Object { "alignItems": "center", "backgroundColor": "#f5fcff", "flex": 1, "justifyContent": "center", } }> <Text accessible={true} allowFontScaling={true} ellipsizeMode="tail" style={ Object { "fontSize": 20, "margin": 10, "textAlign": "center", } }> Hello, react-native meetup!! </Text> </View> `; generates
  27. BY MOCHAJS MOCHA ▸ “fun” ▸ high reliability ▸ backward

    compatibility ▸ for ▸ presentation: with enzyme ▸ domain: universal JS https://github.com/januswel/mocha-sample
  28. TEST import React from 'react' import { StyleSheet, Text, View,

    } from 'react-native' const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5fcff', }, text: { fontSize: 20, textAlign: 'center', margin: 10, }, }) export default function Intro() { return ( <View style={styles.container}> <Text style={styles.text}> Hello, react-native meetup!! </Text> </View> ) } for import assert from 'assert' import React from 'react' import { shallow } from 'enzyme' import Intro from '../../../src/components/intro' const expected = 'Hello, react-native meetup!!' describe('<Intro />', function () { it('renders correctry', function () { const wrapper = shallow(<Intro />) assert(wrapper.contains(expected)) }) })
  29. WHICH SHOULD YOU USE? JEST VS MOCHA ▸ Use “easier”

    one ▸ “easy” is a distance from you ▸ You know, mocha is easier with Japanese ▸ Jest may be easier on whole new project ▸ “simple” vs “easy” ▸ http://eed3si9n.com/ja/simplicity-matters ▸ via http://t-wada.hatenablog.jp/entry/active-oss-development-vs- simplicity YOU
  30. BY APPIUM APPIUM ▸ time out

  31. BY ESLINT ESLINT ▸ decrease bugs by static analysis ▸

    with standard/semistandard ▸ https://github.com/feross/standard ▸ https://github.com/Flet/semistandard
  32. BY FACEBOOK FLOW ▸ decrease a number of test cases

    by type ▸ can remove guard clause by assertion to be continued… function abs(n) { assert(typeof abc === 'number') return (n < 0) ? -n : n } function abs(number: number): number { return (n < 0) ? -n : n }
  33. STRATEGY

  34. STAGES PRODUCT LIFECYCLE CONCEIVE DESIGN REALIZE SERVICE https://en.wikipedia.org/wiki/Product_lifecycle_management PLAN DEVELOP

    DELIVER MAINTAIN WORDS IN SOFTWARE
  35. PLAN & DEVELOP V MODEL https://en.wikipedia.org/wiki/V-Model_(software_development) REQUIRE MENTS DESIGNS IMPLE

    MENTS UNIT, INTEGRATION TESTS E2E TESTS ESLINT, FLOW JEST, MOCHA APPIUM developer testing customer testing
  36. ▸ bugs from difference between … ▸ most users use

    only one set of device and version ▸ a bug on specific version
 = the app has a bug ▸ consider to use automated
 mobile testing services ▸ Sauce Labs etc DELIVER TEST ON MANY DEVICES & VERSIONS
  37. ▸ bugs ▸ bugs indicate other bugs hide
 at the

    same point ▸ write tests for regression test ▸ changes ▸ enhancement ▸ new features ▸ welcome to new cycle!! MAINTAIN ISSUES PLAN DEVELOP DELIVER MAINTAIN to be continued…
  38. CASE STUDIES

  39. I’M JUST ABOUT TO GET STARTED ON MY PROJECT ▸

    do it
  40. REQUIREMENTS OF MY PRODUCT ARE STILL FLEXIBLE ▸ or, with

    iterative methods ▸ ex) RUNNING LEAN ▸ https://www.amazon.co.jp/dp/4873115914 ▸ consider E2E testing by manual ▸ E2E test is fragile ▸ wait for fixing requirements
  41. WE HAVE NO TESTS!! ▸ introduce ESLint, and adapt to

    it with patience ▸ write tests from “easiest” part ▸ codes by you ▸ utility functions ▸ feel “painless” and “fun”!! ▸ this is a truth
  42. SUMMARY

  43. AS YOU LIKE IT

  44. URLS REFERENCE ▸ http://gihyo.jp/dev/serial/01/tdd/0003 ▸ https://speakerdeck.com/januswel/marutipuratutohuomushi-dai-false-javascript-x-react-zhan-lue ▸ https://github.com/januswel/jest-sample ▸ https://github.com/januswel/mocha-sample

    ▸ http://eed3si9n.com/ja/simplicity-matters ▸ http://t-wada.hatenablog.jp/entry/active-oss-development-vs-simplicity ▸ https://github.com/feross/standard ▸ https://en.wikipedia.org/wiki/Product_lifecycle_management ▸ https://en.wikipedia.org/wiki/V-Model_(software_development) ▸ https://www.amazon.co.jp/dp/4873115914