Feature/context nocode (#9)

* enable context when enableCode is false; add context icon

* update docs

* update dist files

CHANGELOG.md

@@ -1,5 +1,9 @@
 #Changelog
 
+###1.0.7
+- Fix an issue where test context could not be viewed if `enableCode` option was `false`. [mochawesome #132](https://github.com/adamgruber/mochawesome/issues/132)
+- Add an icon to indicate when a test has context
+
 ###1.0.6
 - Layout and style fixes [mochawesome #118](https://github.com/adamgruber/mochawesome/issues/118)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mochawesome-report-generator",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Generates gorgeous HTML reports from mochawesome reporter.",
   "scripts": {
     "lint": "eslint bin lib src/js src/components/**/*.js src/components/**/*.jsx test/**/*.js test/**/*.jsx",

src/components/test/test.css

@@ -32,7 +32,10 @@
   font-size: 13px;
   line-height: 24px;
   margin: 0;
-  padding: 0 60px 0 40px;
+  padding: 0 80px 0 40px;
+  @nest .with-context & {
+    padding-right: 106px;
+  }
 }
 
 .icon {
@@ -94,6 +97,15 @@
   }
 }
 
+.context-icon {
+  float: left;
+  line-height: 24px !important;
+  color: var(--black38);
+  margin-right: 8px;
+  position: relative;
+  top: 1px;
+}
+
 .body {
   display: none;
   background-color: var(--grey50);

src/components/test/test.jsx

@@ -28,7 +28,7 @@ class Test extends React.Component {
 
   toggleExpandedState() {
     const { test, enableCode } = this.props;
-    if ((enableCode && test.pass) || test.fail) {
+    if ((enableCode && test.pass) || !!test.context || test.fail) {
       this.setState({ expanded: !this.state.expanded });
     }
   }
@@ -65,7 +65,8 @@ class Test extends React.Component {
       failed: fail,
       pending,
       skipped,
-      inactive: pending || skipped || (!enableCode && pass)
+      inactive: pending || skipped || (pass && !enableCode && !context),
+      'with-context': !!context
     });
 
     return (
@@ -76,6 +77,7 @@ class Test extends React.Component {
             <h4 className={ cx('title') }>{ title }</h4>
           </div>
           <div className={ cx('info') }>
+            { !!context && <Icon name='chat_bubble_outline' className={ cx('context-icon') } size={ 18 } /> }
             <Duration className={ cx('duration') } timer={ duration } />
             <Icon name='timer' className={ cx('duration-icon', speed) } size={ 18 } />
           </div>

test/spec/components/test/test.test.jsx

@@ -156,6 +156,15 @@ describe('<Test />', () => {
     expect(setStateSpy.calledOnce).to.equal(false);
   });
 
+  it('renders passing test with context, enableCode: false', () => {
+    const { wrapper, snippets, errorMsg } = getInstance({ test: passingTestWithContext, enableCode: false });
+    expect(snippets).to.have.lengthOf(2);
+    expect(errorMsg).to.have.lengthOf(0);
+    wrapper.simulate('click');
+    expect(toggleSpy.calledOnce).to.equal(true);
+    expect(setStateSpy.calledOnce).to.equal(true);
+  });
+
   it('renders failing test', () => {
     const { wrapper, snippets, errorMsg } = getInstance({ test: failingTest });
     expect(snippets).to.have.lengthOf(3);