Enhanced Suite & Test pages; (#65)

gojuno · Jun 12, 2017 · 8ee2a30 · 8ee2a30
1 parent dcaa1fa
commit 8ee2a30
Show file tree

Hide file tree

Showing 16 changed files with 1,595 additions and 1,358 deletions.
diff --git a/html-report/package.json b/html-report/package.json
@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "webpack --env=dev --progress --watch",
     "build": "npm run postcss-build && webpack --env=prod --progress",
-    "postcss-dev": "postcss ./styles/app.scss -o=./styles/app.css -w",
-    "postcss-build": "postcss ./styles/app.css -o=./build/app.min.css"
+    "postcss-dev": "postcss ./styles/index.scss -o=./build/app.min.css -w",
+    "postcss-build": "postcss ./styles/index.scss -o=./build/app.min.css"
   },
   "author": "",
   "license": "ISC",
@@ -30,6 +30,7 @@
     "postcss-sass-mixins": "^0.3.0",
     "postcss-scss": "^0.1.7",
     "precss": "^1.4.0",
+    "randomcolor": "^0.5.3",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-router-dom": "^4.1.1",

diff --git a/html-report/src/components/Suite.js b/html-report/src/components/Suite.js
@@ -1,9 +1,31 @@
 import React, { Component } from 'react';
 import cx from 'classnames';
+import randomColor from 'randomcolor';
 import convertTime from './../utils/convertTime'
-import SearchBar from './SearchBar';
+// import SearchBar from './SearchBar';
 
 export default class Suite extends Component {
+  state = {
+    colors: null
+  };
+
+  componentWillMount() {
+    this.setDevicesLabelColors();
+    document.title = `Suite ${window.suite.id}`;
+  }
+
+  setDevicesLabelColors() {
+    const generatedColors = randomColor({
+      count: window.suite.devices.length,
+      luminosity: 'bright'
+    });
+    let colors = {};
+    window.suite.devices.map((item, i) => {
+      colors[item.id] = generatedColors[i];
+    });
+    this.setState({ colors });
+  }
+
   render() {
     const data = window.suite;
     return (
@@ -12,19 +34,15 @@ export default class Suite extends Component {
         <div className="row justify-between">
           <div className="card card-info">
             <div className="text-sub-title-light">Passed</div>
-            <div className="card-info__content">{ data.passed_count }</div>
+            <div className="card-info__content status-passed">{ data.passed_count }</div>
           </div>
           <div className="card card-info">
             <div className="text-sub-title-light">Failed</div>
-            <div className="card-info__content">
-              <div className="text-important">{ data.failed_count }</div>
-            </div>
+            <div className="card-info__content status-failed">{ data.failed_count }</div>
           </div>
           <div className="card card-info">
             <div className="text-sub-title-light">Ignored</div>
-            <div className="card-info__content">
-              <div className="text-grey">{ data.ignored_count }</div>
-            </div>
+            <div className="card-info__content status-ignored">{ data.ignored_count }</div>
           </div>
           <div className="card card-info">
             <div className="text-sub-title-light">Duration</div>
@@ -38,18 +56,20 @@ export default class Suite extends Component {
           <div className="title-common">Tests <span className="label">{ data.tests.length }</span></div>
           <div className="container-expanded list">
             { data.tests.map((test, i) => {
-              return ( <a key={ i } href={`${data.id}/${test.deviceId}/${test.id}.html`} className={ cx('list__item', 'row full justify-between', test.status) }>
+              return (<a key={ i } href={`${data.id}/${test.deviceId}/${test.id}.html`}
+                         className={ cx('list__item', 'row full justify-between', test.status) }>
                 <div>
                   <div className="margin-bottom-5 text-sub-title">{ test.name }</div>
                   <div className="title-l text-sub-title margin-bottom-5 margin-right-10">{ test.class_name }</div>
                   <div className="margin-bottom-5">{ test.package_name }</div>
                 </div>
                 <div className="labels-list">
                   <div className="margin-bottom-5">
-                    <span className="label info">{ test.deviceId }</span>
+                    <span className="label info"
+                          style={ { background: this.state.colors[test.deviceId] } }>{ test.deviceId }</span>
                   </div>
                   <div className="margin-bottom-5">
-                    <span className="label">{ convertTime(test.duration_millis) }</span>
+                    <span className="label big">{ convertTime(test.duration_millis) }</span>
                   </div>
                 </div>
               </a> )

diff --git a/html-report/src/components/TestItem.js b/html-report/src/components/TestItem.js
@@ -3,35 +3,43 @@ import cx from 'classnames';
 import convertTime from './../utils/convertTime'
 
 export default class TestItem extends Component {
+  componentWillMount() {
+    document.title = `Test ${window.test.name}`;
+  }
+
   render() {
     const data = window.test;
     let statusLabelClass = cx('label', 'margin-right-10', {
       alert: data.status === 'failed',
       success: data.status === 'passed'
     });
-    let statusTextClass = cx({
+    let statusTextClass = cx('test-page__title', {
       'status-failed': data.status === 'failed',
       'status-ignored': data.status === 'ignored',
       'status-passed': data.status === 'passed'
     });
+    let blockClass = cx('card row full justify-between test-page', {
+      'failed': data.status === 'failed',
+      'ignored': data.status === 'ignored',
+      'passed': data.status === 'passed'
+    });
     return (
       <div className="content margin-top-20">
-        <div className="title-common"><a href="../../../index.html">Suits list</a> / <a href={ `../../${data.suite_id}.html` }>
-          Suite { data.suite_id }</a> /
-          <div className="label info">{ data.deviceId }</div>
+        <div className="title-common vertical-aligned-content">
+          <a href="../../../index.html">Suits list</a> /
+          <a href={ `../../${data.suite_id}.html` }>Suite { data.suite_id }</a> /
+          { data.deviceId }
         </div>
-        <div className="margin-top-20">
-          <div className="card row full justify-between">
+        <div className='margin-top-20'>
+          <div className={ blockClass }>
             <div className="margin-right-20">
-              <div className="text-sub-title margin-bottom-10">
+              <div className="margin-bottom-10 vertical-aligned-content">
                 <div className={ statusLabelClass }>{ data.status }</div>
                 <span className={ statusTextClass }>{ data.name }</span></div>
               <div className="title-l text-sub-title margin-bottom-5">{ data.class_name }</div>
               <div className="margin-bottom-5">{ data.package_name }</div>
             </div>
-            <div className="labels-list">
-              <div className="label">{ convertTime(data.duration_millis) }</div>
-            </div>
+            <div className="card-info__content">{ convertTime(data.duration_millis) }</div>
           </div>
 
           { !!Object.keys(data.properties).length && <div className="card">

diff --git a/html-report/styles/_base.scss b/html-report/styles/_base.scss
@@ -0,0 +1,62 @@
+/* Reset */
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
+acronym,address,big,cite,code,del,dfn,em,
+font,img,ins,kbd,q,s,samp,small,strike,
+strong,sub,sup,tt,var,dl,dt,dd,ol,ul,
+li,fieldset,form,label,legend,table,
+caption,tbody,tfoot,thead,tr,th,td,hr {
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  font-family: inherit;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Global styles */
+
+html {
+  font: $font-normal/$line-height-normal $helvetica;
+}
+
+html, body {
+  text-size-adjust: 100%;
+  box-sizing: border-box;
+}
+
+html, body, .page-content {
+  height: 100%;
+}
+
+body {
+  background: $background;
+  color: $primary-blue;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: $electric;
+  text-decoration: none;
+  line-height: inherit;
+  cursor: pointer;
+  transition: color $short-transition;
+
+  &:hover, &:active {
+    color: $electric;
+  }
+}