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

about tests

januswel
October 28, 2016

about tests

about tests for React Native
react-native meetup #3

januswel

October 28, 2016
Tweet

More Decks by januswel

Other Decks in Programming

Transcript

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

    ▸ janus_wel ▸ januswel ▸ shut up and play P5 SPEAKER JANUS_WEL
  2. 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
  3. WHO DO WRITE/EXECUTE TESTS? 3 CATEGORIES DEVELOPER TESTING CUSTOMER TESTING

    QA TESTING DEVELOPER CUSTOMER DEVELOPER QA DEVELOPER CI
  4. 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
  5. 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
  6. WHEN DO YOU NEED TESTS? ANYTIME YOU HAVE CHANGED COMMITTED

    CHANGED MERGED RELEASED COMMIT HOOK CI SERVICE CD SERVICE FILE CHANGE DETECTION
  7. HOW DO YOU WRITE/EXECUTE TESTS? TOOLS ▸ general test framework

    ▸ Jest ▸ mocha ▸ E2E test framework ▸ Appium ▸ support ▸ ESLint ▸ flow * only React Native friendly
  8. BY FACEBOOK JEST ▸ “painless” ▸ jasmine base ▸ snapshot

    testing ▸ for ▸ presentation ▸ domain: universal JS https://github.com/januswel/jest-sample
  9. 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
  10. 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
  11. BY MOCHAJS MOCHA ▸ “fun” ▸ high reliability ▸ backward

    compatibility ▸ for ▸ presentation: with enzyme ▸ domain: universal JS https://github.com/januswel/mocha-sample
  12. 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)) }) })
  13. 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
  14. BY ESLINT ESLINT ▸ decrease bugs by static analysis ▸

    with standard/semistandard ▸ https://github.com/feross/standard ▸ https://github.com/Flet/semistandard
  15. 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 }
  16. 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
  17. ▸ 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
  18. ▸ 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…
  19. 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
  20. 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
  21. 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