Slide 1
Slide 1 text
ABOUT TESTS
REACT-NATIVE MEETUP #3 JANUS_WEL
Slide 2
Slide 2 text
▸ tech lead@CureApp
▸ have developed on native
▸ Android/iOS
▸ janus_wel
▸ januswel
▸ shut up and play P5
SPEAKER
JANUS_WEL
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
MADE WITH
REACT NATIVE
FOR NASH PATIENT
now, not available for the public
Slide 6
Slide 6 text
ABOUT TEST
AUTOMATION
Slide 7
Slide 7 text
SUMMARY
Slide 8
Slide 8 text
AS YOU LIKE IT
Slide 9
Slide 9 text
SOME POINTS
TO SEE
to be continued…
Slide 10
Slide 10 text
5W1H
Slide 11
Slide 11 text
WHY?
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
WHO?
Slide 14
Slide 14 text
WHO DO WRITE/EXECUTE TESTS?
3 CATEGORIES
DEVELOPER TESTING CUSTOMER TESTING QA TESTING
DEVELOPER
CUSTOMER
DEVELOPER
QA
DEVELOPER
CI
Slide 15
Slide 15 text
WHAT?
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
WHERE?
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
WHEN?
Slide 20
Slide 20 text
WHEN DO YOU NEED TESTS?
ANYTIME YOU HAVE CHANGED
COMMITTED
CHANGED MERGED RELEASED
COMMIT
HOOK
CI
SERVICE
CD
SERVICE
FILE
CHANGE
DETECTION
Slide 21
Slide 21 text
HOW?
Slide 22
Slide 22 text
HOW DO YOU WRITE/EXECUTE TESTS?
TOOLS
▸ general test framework
▸ Jest
▸ mocha
▸ E2E test framework
▸ Appium
▸ support
▸ ESLint
▸ flow
* only React Native friendly
Slide 23
Slide 23 text
TOOLS
Slide 24
Slide 24 text
BY FACEBOOK
JEST
▸ “painless”
▸ jasmine base
▸ snapshot testing
▸ for
▸ presentation
▸ domain: universal JS
https://github.com/januswel/jest-sample
Slide 25
Slide 25 text
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(
).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 (
Hello, react-native meetup!!
)
}
for
Slide 26
Slide 26 text
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 (
Hello, react-native meetup!!
)
}
exports[`test renders correctly 1`] = `
Hello, react-native meetup!!
`;
generates
Slide 27
Slide 27 text
BY MOCHAJS
MOCHA
▸ “fun”
▸ high reliability
▸ backward compatibility
▸ for
▸ presentation: with enzyme
▸ domain: universal JS
https://github.com/januswel/mocha-sample
Slide 28
Slide 28 text
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 (
Hello, react-native meetup!!
)
}
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('', function () {
it('renders correctry', function () {
const wrapper = shallow()
assert(wrapper.contains(expected))
})
})
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
BY APPIUM
APPIUM
▸ time out
Slide 31
Slide 31 text
BY ESLINT
ESLINT
▸ decrease bugs by static analysis
▸ with standard/semistandard
▸ https://github.com/feross/standard
▸ https://github.com/Flet/semistandard
Slide 32
Slide 32 text
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
}
Slide 33
Slide 33 text
STRATEGY
Slide 34
Slide 34 text
STAGES
PRODUCT LIFECYCLE
CONCEIVE DESIGN REALIZE SERVICE
https://en.wikipedia.org/wiki/Product_lifecycle_management
PLAN DEVELOP DELIVER MAINTAIN
WORDS IN SOFTWARE
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
▸ 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
Slide 37
Slide 37 text
▸ 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…
Slide 38
Slide 38 text
CASE STUDIES
Slide 39
Slide 39 text
I’M JUST ABOUT TO GET STARTED ON MY PROJECT
▸ do it
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
SUMMARY
Slide 43
Slide 43 text
AS YOU LIKE IT
Slide 44
Slide 44 text
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