Fix display bugs

src/components/navbar/index.jsx

@@ -17,6 +17,8 @@ const Navbar = ({ reportTitle, stats, qsNodeRef, qsWidth, mobileBreakpoint }) =>
   const titleCntStyle = (!mobileBreakpoint && qsWidth) ? { paddingRight: qsWidth } : null;
   const allPending = pendingPercent === 100;
 
+  const showPctBar = passPercent !== null && pendingPercent !== null;
+
   const pctBar = (prop, cname, title) => (
     <span
       className={ cx('pct-bar-segment', cname) }
@@ -37,11 +39,11 @@ const Navbar = ({ reportTitle, stats, qsNodeRef, qsWidth, mobileBreakpoint }) =>
       <div className={ cx('stats') } ref={ qsNodeRef }>
         <QuickSummary stats={ stats } />
       </div>
-      <div className={ cx('pct-bar') }>
+      { showPctBar && <div className={ cx('pct-bar') }>
         { allPending && pctBar(pendingPercent, 'pend', 'Pending') }
         { !allPending && pctBar(passPercent, 'pass', 'Passing') }
         { !allPending && pctBar(failPercent, 'fail', 'Failing') }
-      </div>
+      </div> }
     </div>
   );
 };

src/components/suite/suite.jsx

@@ -13,6 +13,9 @@ const Suite = ({ className, suite, enableChart, enableCode }) => {
     hasPasses, duration, totalTests, totalPasses, totalFailures,
     totalPending, totalSkipped } = suite;
 
+  const hasBeforeHooks = beforeHooks && beforeHooks.length > 0;
+  const hasAfterHooks = afterHooks && afterHooks.length > 0;
+
   const subSuites = isMain => hasSuites && (
     <SuiteList
       suites={ suites }
@@ -21,7 +24,7 @@ const Suite = ({ className, suite, enableChart, enableCode }) => {
       main={ isMain } />
   );
 
-  const testListComp = () => hasTests && (
+  const testListComp = () => (hasTests || hasBeforeHooks || hasAfterHooks) && (
     <TestList
       uuid={ uuid }
       tests={ tests }
@@ -35,7 +38,7 @@ const Suite = ({ className, suite, enableChart, enableCode }) => {
     'has-suites': hasSuites,
     'no-suites': !hasSuites,
     'has-tests': hasTests,
-    'no-tests': !hasTests,
+    'no-tests': !hasTests && !hasBeforeHooks && !hasAfterHooks,
     'has-passed': hasPasses,
     'has-failed': hasFailures,
     'has-pending': hasPending,
@@ -54,18 +57,18 @@ const Suite = ({ className, suite, enableChart, enableCode }) => {
   };
   const chartProps = { totalPasses, totalFailures, totalPending, totalSkipped };
 
-  if (rootEmpty) {
+  if (rootEmpty && !hasBeforeHooks && !hasAfterHooks) {
     return subSuites(true);
   }
 
   return (
     <section className={ cxname } id={ uuid }>
-      <header className={ cx('header') }>
+      {!root && <header className={ cx('header') }>
         { title !== '' && <h3 className={ cx('title') }>{ title }</h3> }
         { file !== '' && <h6 className={ cx('filename') }>{ file }</h6> }
         { hasTests && enableChart && <SuiteChart { ...chartProps } /> }
         { hasTests && <SuiteSummary { ...summaryProps } /> }
-      </header>
+      </header> }
       <div className={ cx('body') }>
         { testListComp() }
         { subSuites() }

src/components/test/code-snippet.jsx

@@ -44,16 +44,13 @@ class CodeSnippet extends Component {
   render() {
     const { className, code, lang, highlight, label, showLabel } = this.props;
     const cxName = cx(className, lang, { hljs: !highlight });
+    const isDiff = lang === 'diff';
 
     return !!code && (
       <pre className={ cxName } ref={ node => (this.node = node) }>
         <code>
-          { lang === 'diff' &&
-            <div className={ cx('code-diff-legend') }>
-              <span className={ cx('code-diff-expected') }>+ expected</span>
-              <span className={ cx('code-diff-actual') }>- actual</span>
-            </div>
-          }
+          { isDiff && <span className={ cx('code-diff-expected') }>+ expected&nbsp;&nbsp;</span> }
+          { isDiff && <span className={ cx('code-diff-actual') }>{'- actual\n\n'}</span> }
           { code }
         </code>
         { !!label && showLabel && <span className={ cx('code-label') }>{ label }</span> }

src/components/test/test.css

@@ -178,14 +178,6 @@
   }
 }
 
-.code-diff-legend {
-  margin-bottom: 13px;
-}
-
-.code-diff-expected {
-  margin-right: 13px;
-}
-
 .code-diff-expected span {
   color: #859900;
 }

test/sample-data/hooks-only.json

@@ -0,0 +1,91 @@
+{
+  "stats": {
+    "suites": 0,
+    "tests": 0,
+    "passes": 0,
+    "pending": 0,
+    "failures": 0,
+    "start": "2017-06-26T19:30:43.924Z",
+    "end": "2017-06-26T19:30:43.926Z",
+    "duration": 2,
+    "testsRegistered": 0,
+    "passPercent": null,
+    "pendingPercent": null,
+    "other": 0,
+    "hasOther": false,
+    "skipped": 0,
+    "hasSkipped": false,
+    "passPercentClass": "success",
+    "pendingPercentClass": "success"
+  },
+  "suites": {
+    "title": "",
+    "suites": [],
+    "tests": [],
+    "pending": [],
+    "root": true,
+    "_timeout": 2000,
+    "uuid": "6a6184e8-645e-4a5e-b4db-dc0fa1763b26",
+    "beforeHooks": [
+      {
+        "title": "\"before all\" hook: before",
+        "fullTitle": " \"before all\" hook: before",
+        "timedOut": false,
+        "duration": 0,
+        "pass": false,
+        "fail": false,
+        "pending": false,
+        "code": "addContext(this, 'context before all');",
+        "err": {},
+        "isRoot": true,
+        "uuid": "a0bd2fd8-35b4-4ea7-903a-abaf0ec9f6f5",
+        "parentUUID": "6a6184e8-645e-4a5e-b4db-dc0fa1763b26",
+        "isHook": true,
+        "skipped": false
+      }
+    ],
+    "afterHooks": [
+      {
+        "title": "\"after all\" hook: after",
+        "fullTitle": " \"after all\" hook: after",
+        "timedOut": false,
+        "duration": 0,
+        "pass": false,
+        "fail": false,
+        "pending": false,
+        "code": "addContext(this, 'context after all');",
+        "err": {},
+        "isRoot": true,
+        "uuid": "9295705d-9315-41a1-9a24-1eecd482ef31",
+        "parentUUID": "6a6184e8-645e-4a5e-b4db-dc0fa1763b26",
+        "isHook": true,
+        "skipped": false
+      }
+    ],
+    "fullFile": "",
+    "file": "",
+    "passes": [],
+    "failures": [],
+    "skipped": [],
+    "hasBeforeHooks": true,
+    "hasAfterHooks": true,
+    "hasTests": false,
+    "hasSuites": false,
+    "totalTests": 0,
+    "totalPasses": 0,
+    "totalFailures": 0,
+    "totalPending": 0,
+    "totalSkipped": 0,
+    "hasPasses": false,
+    "hasFailures": false,
+    "hasPending": false,
+    "hasSkipped": false,
+    "duration": 0,
+    "rootEmpty": true
+  },
+  "allTests": [],
+  "allPending": [],
+  "allPasses": [],
+  "allFailures": [],
+  "copyrightYear": 2017
+}

test/spec/components/navbar.test.jsx

@@ -5,6 +5,7 @@ import chaiEnzyme from 'chai-enzyme';
 import sinon from 'sinon';
 import proxyquire from 'proxyquire';
 import QuickSummary from 'components/quick-summary';
+
 import testData from 'sample-data/test.json';
 
 proxyquire.noCallThru();
@@ -81,4 +82,21 @@ describe('<Navbar />', () => {
       expect(pctBar.find('.navbar-pend')).to.have.lengthOf(1);
     });
   });
+
+  describe('when passPercent and pendingPercent are null', () => {
+    beforeEach(() => {
+      props = {
+        qsNodeRef: () => {},
+        reportTitle: 'test',
+        stats: { passPercent: null, pendingPercent: null },
+        qsWidth: 500,
+        mobileBreakpoint: false
+      };
+    });
+
+    it('does not render percent bar', () => {
+      const { pctBar } = getInstance(props);
+      expect(pctBar).to.have.lengthOf(0);
+    });
+  });
 });

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

@@ -11,6 +11,7 @@ import TestList from 'components/test/list';
 
 import basicSuite from 'sample-data/suite.json';
 import nestedSuite from 'sample-data/test.json';
+import hooksSuite from 'sample-data/hooks-only.json';
 
 chai.use(chaiEnzyme());
 
@@ -68,6 +69,16 @@ describe('<Suite />', () => {
     expect(testList).to.have.lengthOf(1);
   });
 
+  it('renders a suite with only hooks', () => {
+    const instProps = Object.assign({}, props, {
+      suite: hooksSuite.suites
+    });
+    const { chart, summary, testList } = getInstance(instProps);
+    expect(chart).to.have.lengthOf(0);
+    expect(summary).to.have.lengthOf(0);
+    expect(testList).to.have.lengthOf(1);
+  });
+
   it('renders root suite', () => {
     const instProps = Object.assign({}, props, {
       suite: nestedSuite.suites