[TestSuite] Add stack traces to failed tests

tests/lib/TestRun.js

@@ -286,8 +286,7 @@ class TestRun {
         suiteId: this.testSuite.id,
         status: RunStatus.ERR,
         time: Date.now() - this.runStartTime,
-        message: `Test suite failed: ${error.message}`,
+        message: `Test suite failed: ${error.message}`
-        stackTrace: error.stack,
       });
     });
   }

tests/src/actions/TestActions.js

@@ -14,13 +14,14 @@ export function setSuiteStatus({ suiteId, status, time, message, progress }) {
   };
 }
 
-export function setTestStatus({ testId, status, time = 0, message = null }) {
+export function setTestStatus({ testId, status, stackTrace, time = 0, message = null }) {
   return {
     type: TEST_SET_STATUS,
     testId,
 
     status,
     message,
+    stackTrace,
     time,
   };
 }

tests/src/reducers/testsReducers.js

@@ -12,6 +12,7 @@ function testsReducers(state = initState.tests, action: Object): State {
     flattened[`${action.testId}.status`] = action.status;
     flattened[`${action.testId}.message`] = action.message;
     flattened[`${action.testId}.time`] = action.time;
+    flattened[`${action.testId}.stackTrace`] = action.stackTrace;
 
     return unflatten(flattened);
   }

tests/src/screens/Test.js

@@ -52,25 +52,26 @@ class Test extends React.Component {
   }
 
   render() {
-    const { test: { message, description, func, status, time }, testContextName } = this.props;
+    const { test: { stackTrace, description, func, status, time }, testContextName } = this.props;
 
     return (
       <View style={styles.container}>
         {Test.renderBanner({ status, time })}
         <View >
-          <ScrollView>
+          <ScrollView style={styles.sectionContainer}>
-            <Text style={styles.testLabel}>{testContextName}:</Text><Text style={styles.description}>{description}</Text>
+            <Text style={styles.heading}>{testContextName}</Text>
+            <Text style={styles.description}>{description}</Text>
           </ScrollView>
-          <ScrollView>
+          <ScrollView style={styles.sectionContainer}>
-            <Text style={styles.testLabel}>Test Error</Text>
+            <Text style={styles.heading}>Test Error</Text>
             <Text style={styles.description}>
-              <Text>{message || 'None'}</Text>
+              <Text>{stackTrace || 'None.'}</Text>
             </Text>
           </ScrollView>
-          <Text style={styles.testLabel}>
+          <Text style={styles.heading}>
             Test Code Preview
           </Text>
-          <ScrollView>
+          <ScrollView style={styles.sectionContainer}>
             <Text style={styles.description}>
               {beautify(removeLastLine(removeFirstLine(func.toString())), { indent_size: 4, break_chained_methods: true })}
             </Text>
@@ -85,8 +86,8 @@ Test.propTypes = {
   test: PropTypes.shape({
     status: PropTypes.string,
     time: PropTypes.number,
-    message: PropTypes.string,
     func: PropTypes.function,
+    stackTrace: PropTypes.function,
     description: PropTypes.string,
   }).isRequired,
 
@@ -102,12 +103,15 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#ffffff',
   },
-  testLabel: {
+  sectionContainer: {
+    minHeight: 100,
+  },
+  heading: {
     padding: 5,
     backgroundColor: '#0288d1',
     fontWeight: '600',
     color: '#ffffff',
-    fontSize: 16
+    fontSize: 16,
   },
   description: {
     padding: 5,