暫無描述

reporter.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import React, {Component} from 'react';
  2. import {
  3. AppRegistry,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Platform,
  8. ScrollView,
  9. ListView,
  10. Image,
  11. TouchableOpacity,
  12. RecyclerViewBackedScrollView,
  13. } from 'react-native';
  14. import Assert from './assert.js'
  15. import RNTEST from '../index.js'
  16. export default class Reporter extends Component {
  17. constructor(props:any) {
  18. super(props)
  19. this.tests = {
  20. common : []
  21. }
  22. this.testGroups = ['common']
  23. this.ds = null
  24. this.updateDataSource()
  25. }
  26. componentWillUpdate(nextProps, nextState) {
  27. this.updateDataSource()
  28. }
  29. render() {
  30. return (
  31. <ListView
  32. style={styles.container}
  33. dataSource={this.ds}
  34. renderRow={this.renderTest.bind(this)}
  35. renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
  36. renderSectionHeader={(data, id) => {
  37. return (
  38. <View style={styles.sectionHeader}>
  39. <Text style={styles.sectionText}>{id}</Text>
  40. </View>
  41. )
  42. }}
  43. />)
  44. }
  45. renderTest(t) {
  46. let pass = true
  47. let foundActions = false
  48. let tests = RNTEST.TestContext.getTests()
  49. if(Array.isArray(t.result) && !t.expired) {
  50. t.result = t.result.map((r) => {
  51. if(r.type.name === 'Assert' || r.type.name === 'Info') {
  52. foundActions = true
  53. let comp = r.props.comparer ? r.props.comparer(r.props.expect, r.props.actual) : (r.props.actual === r.props.expect)
  54. pass = pass && comp
  55. }
  56. return React.cloneElement(r, {desc : r.key})
  57. })
  58. }
  59. if(tests[t.sn].running)
  60. t.status = 'running'
  61. else if(tests[t.sn].executed) {
  62. t.status = foundActions ? (pass ? 'pass' : 'fail') : 'skipped'
  63. t.status = t.expired ? 'timeout' : t.status
  64. }
  65. else
  66. t.status = 'waiting'
  67. return (
  68. <TouchableOpacity onPress={()=>{
  69. t.start(t.sn)
  70. }}>
  71. <View key={'rn-test-' + t.desc} style={{
  72. borderBottomWidth : 1.5,
  73. borderColor : '#DDD',
  74. }}>
  75. <View key={t.desc} style={{
  76. alignItems : 'center',
  77. flexDirection : 'row'
  78. }}>
  79. <Text style={[styles.badge, {flex : 1, borderWidth : 0, textAlign : 'left'}]}>{t.desc}</Text>
  80. <Text style={[styles.badge, this.getBadge(t.status)]}>{t.status}</Text>
  81. </View>
  82. <View key={t.desc + '-result'} style={{backgroundColor : '#F4F4F4'}}>
  83. {t.expand ? t.result : (t.status === 'pass' ? null : t.result)}
  84. </View>
  85. </View>
  86. </TouchableOpacity>)
  87. }
  88. updateDataSource() {
  89. this.tests = {
  90. common : []
  91. }
  92. this.testGroups = ['common']
  93. RNTEST.TestContext.getTests().forEach((t) => {
  94. if(t.group) {
  95. if(!this.tests[t.group]) {
  96. this.testGroups.push(t.group)
  97. this.tests[t.group] = []
  98. }
  99. this.tests[t.group].push(t)
  100. }
  101. else
  102. this.tests.common.push(t)
  103. })
  104. let listDataSource = new ListView.DataSource({
  105. rowHasChanged : (r1, r2) => r1 !== r2,
  106. sectionHeaderHasChanged: (s1, s2) => s1 !== s2
  107. })
  108. this.ds = listDataSource.cloneWithRowsAndSections(this.tests, this.testGroups)
  109. }
  110. getBadge(status: 'waiting' | 'running' | 'pass' | 'fail' | 'timeout') {
  111. return styles[status]
  112. }
  113. }
  114. const styles = StyleSheet.create({
  115. container: {
  116. flex: 1,
  117. },
  118. badge : {
  119. margin : 16,
  120. padding : 4,
  121. borderRadius : 4,
  122. borderWidth : 2,
  123. textAlign : 'center'
  124. },
  125. skipped: {
  126. borderColor : '#AAAAAA',
  127. color : '#AAAAAA'
  128. },
  129. sectionHeader : {
  130. padding : 16,
  131. backgroundColor : '#F4F4F4',
  132. },
  133. waiting: {
  134. borderColor : '#AAAAAA',
  135. color : '#AAAAAA'
  136. },
  137. pass: {
  138. borderColor : '#00a825',
  139. color : '#00a825'
  140. },
  141. running: {
  142. borderColor : '#e3c423',
  143. color : '#e3c423'
  144. },
  145. fail: {
  146. borderColor : '#ff0d0d',
  147. color : '#ff0d0d'
  148. },
  149. timeout: {
  150. borderColor : '#ff0d0d',
  151. color : '#ff0d0d'
  152. }
  153. });