feat (UI): Add charts for summary

.babelrc

@@ -1,9 +1,4 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@babel/plugin-proposal-class-properties"
-    ]
-}
+    "presets": [["@babel/preset-env"], "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

package.json

@@ -59,6 +59,8 @@
         "ansi-to-html": "^0.6.14",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.1.0",
+        "babel-polyfill": "^6.26.0",
+        "chart.js": "^2.9.3",
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^4.0.0",
         "eslint": "^7.4.0",
@@ -73,6 +75,7 @@
         "jest": "^26.1.0",
         "prettier": "^2.0.5",
         "react": "^16.13.1",
+        "react-chartjs-2": "^2.10.0",
         "react-dev-utils": "^10.2.1",
         "react-dom": "^16.13.1",
         "semantic-release": "^17.1.1",

src/App.js

@@ -29,9 +29,16 @@ class App extends Component {
             title: 'All',
             numPassedTests: testResultData.numPassedTests,
             numFailedTests: testResultData.numFailedTests,
-            numTotalTests: testResultData.numTotalTests,
             numPendingTests: testResultData.numPendingTests,
             numTodoTests: testResultData.numTodoTests,
+            numFailedTestSuites: testResultData.numFailedTestSuites,
+            numPassedTestSuites: testResultData.numPassedTestSuites,
+            numPendingTestSuites: testResultData.numPendingTestSuites,
+            numRuntimeErrorTestSuites: testResultData.numRuntimeErrorTestSuites,
+            numMatchedSnapshot: testResultData.snapshot?.matched,
+            numAddedSnapshot: testResultData.snapshot?.added,
+            numUnmatchedSnapshot: testResultData.snapshot?.unmatched,
+            numUpdatedSnapshot: testResultData.snapshot?.updated,
             id: `id${1}`,
         };
         id++;
@@ -63,6 +70,16 @@ class App extends Component {
                 nodeValue.numPendingTests = element.numPendingTests;
                 nodeValue.numTodoTests = element.numTodoTests;
                 nodeValue.failureMessages = element.failureMessage;
+                nodeValue.numFailedTestSuites = element.numFailedTestSuites;
+                nodeValue.numFailnumPassedTestSuitesedTests =
+                    element.numPassedTestSuites;
+                nodeValue.numPendingTestSuites = element.numPendingTestSuites;
+                nodeValue.numRuntimeErrorTestSuites =
+                    element.numRuntimeErrorTestSuites;
+                nodeValue.numMatchedSnapshot = element.snapshot?.matched;
+                nodeValue.numAddedSnapshot = element.snapshot?.added;
+                nodeValue.numUnmatchedSnapshot = element.snapshot?.unmatched;
+                nodeValue.numUpdatedSnapshot = element.snapshot?.updated;
                 nodeValue.id = `id${id}`;
                 id++;
                 if (element.testResults) {
@@ -105,6 +122,10 @@ class App extends Component {
                 nodeValue.numPendingTests =
                     testCase.status === 'pending' ? 1 : 0;
                 nodeValue.numTodoTests = testCase.status === 'todo' ? 1 : 0;
+                nodeValue.numFailedTestSuites = 0;
+                nodeValue.numFailnumPassedTestSuitesedTests = 0;
+                nodeValue.numPendingTestSuites = 0;
+                nodeValue.numRuntimeErrorTestSuites = 0;
                 nodeValue.id = `id${id}`;
                 id++;
                 ancestorCopy.shift();
@@ -219,6 +240,7 @@ class App extends Component {
                         this.state.testResults?.reporterOptions?.expandResults
                     }
                     information={this.state.information}
+                    menuState={this.state.menuState}
                 />
             </div>
         );

src/Components/Grid/GridHeader.css

@@ -1,44 +1,43 @@
 .column {
-  box-sizing: border-box;
+    box-sizing: border-box;
     float: left;
     padding: 10px;
-    height: 40px;
-  }
+    height: 50px;
+}
 
-  .testcase{
+.testcase {
     width: 40%;
 }
 
-.result{
-  width: 20%;
+.result {
+    width: 20%;
 }
 
-.time{
-  width: 20%;
+.time {
+    width: 15%;
 }
 
-.information{
-  width: 20%;
+.information {
+    width: 25%;
 }
 
-  .tableheader{
-    border-top-right-radius:8px;
+.tableheader {
+    border-top-right-radius: 8px;
     text-align: left;
     background: #333334;
     color: #fff;
     font-weight: bold;
     border-collapse: collapse;
     border-spacing: 0;
     overflow-wrap: break-word;
-    /* padding: 1rem; */
 }
-  
-  /* Clear floats after the columns */
-  .row:after {
-    content: "";
+
+/* Clear floats after the columns */
+.row:after {
+    content: '';
     display: table;
     clear: both;
-  }
-  .row{
-  box-sizing: border-box;
-  }
+}
+.row {
+    box-sizing: border-box;
+}

src/Components/Main/Main.css

@@ -1,10 +1,35 @@
-
 .main {
     padding: 11vh 1vw 1vh 1vw;
-  }
+    position: absolute;
+    align-content: space-around;
+    transition: margin-left 0.5s;
+}
 
-  @media screen and (max-width: 700px) {
+@media screen and (max-width: 700px) {
     div.main {
         padding: 14vh 1vw 1vh 1vw;
     }
-  }
+}
+
+.menuopen {
+    left: 32%;
+    width: 66%;
+    padding: 20px;
+    top: 50px;
+}
+
+.menuclose {
+    left: 0px;
+}
+
+@media screen and (min-width: 1024px) {
+    .menuclose {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .menuclose {
+        width: 98%;
+    }
+}

src/Components/Main/Main.js

@@ -10,16 +10,7 @@ import Information from '../Information/Information';
 class Main extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            resultSummary: {
-                numFailedTests: this.props.testResults.numFailedTests ?? 0,
-                numPassedTests: this.props.testResults.numPassedTests ?? 0,
-                numTotalTests: this.props.testResults.numTotalTests ?? 0,
-                numPendingTests: this.props.testResults.numPendingTests ?? 0,
-                numTodoTests: this.props.testResults.numTodoTests ?? 0,
-            },
-            showModel: false,
-        };
+        this.state = { showModel: false };
         this.onShowModel = this.onShowModel.bind(this);
         this.onModelClose = this.onModelClose.bind(this);
     }
@@ -35,21 +26,42 @@ class Main extends Component {
             prevProps.testResults.numPendingTests !==
                 this.props.testResults.numPendingTests ||
             prevProps.testResults.numTodoTests !==
-                this.props.testResults.numTodoTests
+                this.props.testResults.numTodoTests ||
+            prevProps.testResults.numFailedTestSuites !==
+                this.props.testResults.numFailedTestSuites ||
+            prevProps.testResults.numPendingTestSuites !==
+                this.props.testResults.numPendingTestSuites ||
+            prevProps.testResults.numPassedTestSuites !==
+                this.props.testResults.numPassedTestSuites ||
+            prevProps.testResults.numRuntimeErrorTestSuites !==
+                this.props.testResults.numRuntimeErrorTestSuites
         ) {
-            this.setState({
-                resultSummary: {
-                    numFailedTests: this.props.testResults.numFailedTests ?? 0,
-                    numPassedTests: this.props.testResults.numPassedTests ?? 0,
-                    numTotalTests: this.props.testResults.numTotalTests ?? 0,
-                    numPendingTests:
-                        this.props.testResults.numPendingTests ?? 0,
-                    numTodoTests: this.props.testResults.numTodoTests ?? 0,
-                },
-            });
+            return;
         }
     }
 
+    getSummary() {
+        return {
+            numFailedTests: this.props.testResults.numFailedTests ?? 0,
+            numPassedTests: this.props.testResults.numPassedTests ?? 0,
+            numPendingTests: this.props.testResults.numPendingTests ?? 0,
+            numTodoTests: this.props.testResults.numTodoTests ?? 0,
+            numFailedTestSuites:
+                this.props.testResults.numFailedTestSuites ?? 0,
+            numPassedTestSuites:
+                this.props.testResults.numPassedTestSuites ?? 0,
+            numPendingTestSuites:
+                this.props.testResults.numPendingTestSuites ?? 0,
+            numRuntimeErrorTestSuites:
+                this.props.testResults.numRuntimeErrorTestSuites ?? 0,
+            numAddedSnapshot: this.props.testResults.numAddedSnapshot ?? 0,
+            numMatchedSnapshot: this.props.testResults.numMatchedSnapshot ?? 0,
+            numUnmatchedSnapshot:
+                this.props.testResults.numUnmatchedSnapshot ?? 0,
+            numUpdatedSnapshot: this.props.testResults.numUpdatedSnapshot ?? 0,
+        };
+    }
+
     onModelClose() {
         this.setState({ showModel: false });
     }
@@ -60,8 +72,12 @@ class Main extends Component {
     }
     render() {
         return (
-            <div className="main">
-                <Summary resultSummary={this.state.resultSummary} />
+            <div className={`main menu${this.props.menuState}`}>
+                <Summary
+                    key={this.props.testResults.id}
+                    id={this.props.testResults.id}
+                    resultSummary={this.getSummary()}
+                />
                 <Information info={this.props.information}></Information>
                 <GridHeader />
                 <GridTabView
@@ -82,5 +98,6 @@ Main.propTypes = {
     testResults: PropTypes.any.isRequired,
     expandResults: PropTypes.any,
     information: PropTypes.array,
+    menuState: PropTypes.string.isRequired,
 };
 export default Main;

src/Components/Sidebar/Sidebar.css

@@ -11,14 +11,9 @@
 
 @media screen and (max-width: 700px) {
     .sidenav {
-        top: 0;
         padding-top: 15px;
     }
 }
-.main {
-    transition: margin-left 0.5s;
-    padding: 20px;
-}
 
 .close {
     width: 0px;

src/Components/Summary/Summary.css

@@ -1,3 +1,40 @@
-.summary{
-    text-align: center;
-}
+.cards {
+    margin: 0 auto;
+    display: grid;
+    grid-gap: 1rem;
+    max-width: 92%;
+}
+
+/* Screen larger than 600px? 2 column */
+@media (min-width: 600px) {
+    .menuclose > .cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* Screen larger than 1360px? 3 columns */
+@media (min-width: 1360px) {
+    .menuclose > .cards {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    .menuopen > .cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.green {
+    background-color: green;
+}
+
+.orange {
+    background-color: orange;
+}
+.red {
+    background-color: red;
+}
+.blue {
+    background-color: blue;
+}
+.gray {
+    background-color: gray;
+}