about tests

about tests for React Native
react-native meetup #3

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