about tests

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