add context support

src/components/test/code-snippet.jsx

@@ -14,12 +14,15 @@ class CodeSnippet extends Component {
     className: PropTypes.string,
     code: PropTypes.string,
     lang: PropTypes.string,
-    highlight: PropTypes.bool
+    highlight: PropTypes.bool,
+    label: PropTypes.string,
+    showLabel: PropTypes.bool
   };
 
   static defaultProps = {
     lang: 'javascript',
-    highlight: true
+    highlight: true,
+    showLabel: false
   };
 
   componentDidMount() {
@@ -39,7 +42,7 @@ class CodeSnippet extends Component {
   }
 
   render() {
-    const { className, code, lang, highlight } = this.props;
+    const { className, code, lang, highlight, label, showLabel } = this.props;
     let codeHtml = code;
 
     // Add - expected + actual to top of diffs
@@ -54,6 +57,7 @@ class CodeSnippet extends Component {
     return !!code && (
       <pre className={ cxName } ref={ node => (this.node = node) }>
         <code dangerouslySetInnerHTML={ { __html: codeHtml } } />
+        { !!label && showLabel && <span className={ cx('code-label') }>{ label }</span> }
       </pre>
     );
   }

src/components/test/context.jsx

@@ -0,0 +1,92 @@
+import React, { Component, PropTypes } from 'react';
+import { CodeSnippet } from 'components/test';
+import isString from 'lodash/isString';
+import classNames from 'classnames/bind';
+import styles from './test.css';
+
+const cx = classNames.bind(styles);
+
+const imgRegEx = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
+
+class TestContext extends Component {
+  static displayName = 'TestContext';
+
+  static propTypes = {
+    className: PropTypes.string,
+    context: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+      PropTypes.array
+    ])
+  };
+
+  renderImage = (url, title) => (
+    <a
+      href={ url }
+      className={ cx('image-link') }
+      rel='noopener noreferrer'
+      target='_blank'
+      alt={ title } >
+      <img src={ url } className={ cx('image') } role='presentation' />
+    </a>
+  );
+
+  renderContext = (ctx, i) => {
+    const containerProps = {
+      className: cx('context-item')
+    };
+    if (i !== undefined) {
+      containerProps.key = i;
+    }
+
+    // Context is a simple string
+    if (isString(ctx)) {
+      return (
+        <div { ...containerProps } >
+          { imgRegEx.test(ctx)
+            ? this.renderImage(ctx)
+            : <CodeSnippet className={ cx('code-snippet') } code={ ctx } highlight={ false } />
+          }
+        </div>
+      );
+    }
+
+    // Context is an object with title and value
+    const { title, value } = ctx;
+    /* istanbul ignore else */
+    if (value) {
+      const val = isString(value) ? value : JSON.stringify(value, null, 2);
+      return (
+        <div { ...containerProps } >
+          <h4 className={ cx('context-item-title') }>{ title }:</h4>
+          { imgRegEx.test(val)
+            ? this.renderImage(val, title)
+            : <CodeSnippet className={ cx('code-snippet') } code={ val } />
+          }
+        </div>
+      );
+    }
+
+    return false;
+  }
+
+  render() {
+    const { className, context } = this.props;
+
+    // All context comes in stringified initially so we parse it here
+    const ctx = JSON.parse(context);
+    const isContextArray = Array.isArray(ctx);
+    return (
+      <div className={ cx(className, 'context') }>
+        <h4 className={ cx('context-title') }>Additional Test Context</h4>
+        { isContextArray
+          ? ctx.map(this.renderContext)
+          : this.renderContext(ctx)
+        }
+      </div>
+    );
+  }
+}
+
+export default TestContext;
+

src/components/test/index.js

@@ -1,3 +1,4 @@
 export { default as Test } from './test';
 export { default as CodeSnippet } from './code-snippet';
 export { default as TestList } from './list';
+export { default as TestContext } from './context';

src/components/test/test.css

@@ -97,9 +97,11 @@
 .body {
   display: none;
   background-color: var(--grey50);
+  border: 1px solid var(--grey50);
   border-radius: 4px;
   @nest .expanded & {
     display: block;
+    margin-top: 10px;
   }
 }
 
@@ -110,12 +112,10 @@
 }
 
 .code-snippet {
+  position: relative;
   font-size: 11px;
   margin: 0;
   border-radius: 0;
-  &:first-child {
-    margin-top: 10px;
-  }
   & + .code-snippet {
     border-top: 1px solid #fff;
   }
@@ -131,3 +131,48 @@
 .code-diff-actual span {
   color: #859900;
 }
+
+.code-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.2em 0.6em;
+  background-color: var(--grey500);
+  color: #fff;
+  @apply --font-regular;
+}
+
+.context {
+  background-color: #fff;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.context-title {
+  @apply --font-regular;
+  @apply --text-overflow;
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--black54);
+  margin: 0;
+  padding: 1em 1em 0 1em;
+}
+
+.context-item-title {
+  @apply --font-medium;
+  @apply --text-overflow;
+  font-size: 13px;
+  margin: 0;
+  padding: 1em 1em 0 1em;
+}
+
+.image-link {
+  display: block;
+  padding: 1em 1em 0 1em;
+}
+
+.image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}

src/components/test/test.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React, { PropTypes } from 'react';
 import { Duration, Icon } from 'components';
-import { CodeSnippet } from 'components/test';
+import { CodeSnippet, TestContext } from 'components/test';
 import classNames from 'classnames/bind';
 import styles from './test.css';
 
@@ -35,7 +35,7 @@ class Test extends React.Component {
 
   render() {
     const { test, enableCode } = this.props;
-    const { uuid, title, speed, duration, pass, fail, pending, skipped, err, code } = test;
+    const { uuid, title, speed, duration, pass, fail, pending, skipped, err, code, context } = test;
 
     const testIcon = () => {
       let iconName;
@@ -84,9 +84,10 @@ class Test extends React.Component {
           <p className={ cx('error-message') }>{ `${err.name}: ${err.message}` }</p>
         ) }
         <div className={ cx('body') }>
-          { <CodeSnippet className={ cx('code-snippet') } code={ err.estack } highlight={ false } /> }
-          { <CodeSnippet className={ cx('code-snippet') } code={ err.diff } lang='diff' /> }
-          { enableCode && <CodeSnippet className={ cx('code-snippet') } code={ code } /> }
+          { <CodeSnippet className={ cx('code-snippet') } code={ err.estack } highlight={ false } label='Stack Trace' /> }
+          { <CodeSnippet className={ cx('code-snippet') } code={ err.diff } lang='diff' label='Diff' /> }
+          { enableCode && <CodeSnippet className={ cx('code-snippet') } code={ code } label='Test Code' /> }
+          { !!context && <TestContext context={ context } /> }
         </div>
       </section>
     );