From 3fe0ba6e31901e091f5ec2771bb57c5af03cbec8 Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Wed, 11 Dec 2019 20:10:25 +0800
Subject: [PATCH] feat: show failure message in electron web page

---
 package.json                   |  2 +-
 src/electron/main/index.css    | 43 ++++++++++++++++++++++++++++++----
 src/electron/renderer/dom.ts   | 30 +++++++++++++++++++++---
 src/electron/renderer/index.ts |  4 +++-
 4 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index e83b241..d7b0178 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-electron",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Easiest way to run jest unit test cases in electron.",
   "main": "index.js",
   "files": [
diff --git a/src/electron/main/index.css b/src/electron/main/index.css
index a1b020a..efb762b 100644
--- a/src/electron/main/index.css
+++ b/src/electron/main/index.css
@@ -57,22 +57,30 @@
     margin-left: 16px;
 }
 
-#__jest-electron-test-results-list__ .test-result-info {
+#__jest-electron-test-results-list__ .test-result-block {
+
+}
+
+#__jest-electron-test-results-list__ .test-result-block .test-result-info {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
 }
 
-#__jest-electron-test-results-list__ .test-result-info .test-result-title {
+#__jest-electron-test-results-list__ .test-result-block .test-result-info .test-result-title {
     margin-right: 16px;
 }
 
-#__jest-electron-test-results-list__ .test-result-info .test-result-time {
+#__jest-electron-test-results-list__ .test-result-block .test-result-info .test-result-time {
     color: #AAA;
 }
 
-#__jest-electron-test-results-list__ .test-result-info.failed::before {
+#__jest-electron-test-results-list__ .test-result-block .test-result-info.failed {
+    cursor: pointer;
+}
+
+#__jest-electron-test-results-list__ .test-result-block .test-result-info.failed::before {
     content: '✖';
     font-size: 12px;
     display: block;
@@ -81,7 +89,7 @@
     color: #c00;
 }
 
-#__jest-electron-test-results-list__ .test-result-info.passed::before {
+#__jest-electron-test-results-list__ .test-result-block .test-result-info.passed::before {
     content: '✓';
     font-size: 12px;
     display: block;
@@ -89,3 +97,28 @@
     margin-right: 5px;
     color: #00d6b2;
 }
+
+
+/*failure message*/
+#__jest-electron-test-results-list__ .test-result-block .test-result-code {
+    display: none;
+}
+
+#__jest-electron-test-results-list__ .test-result-block .test-result-code.show {
+    display: block;
+}
+
+#__jest-electron-test-results-list__ .test-result-block .test-result-code pre {
+    padding: 8px;
+    border: 1px solid #eee;
+    word-wrap: break-word;
+    border-bottom-color: #ddd;
+    box-shadow: 0 1px 3px #eee;
+    border-radius: 3px;
+    overflow-x: auto;
+    margin-right: 8px;
+}
+
+#__jest-electron-test-results-list__ .test-result-block .test-result-code code {
+    font-family: monospace!important;
+}
diff --git a/src/electron/renderer/dom.ts b/src/electron/renderer/dom.ts
index 111dda9..5c1af0b 100644
--- a/src/electron/renderer/dom.ts
+++ b/src/electron/renderer/dom.ts
@@ -98,12 +98,18 @@ function appendTestResultDOM(r) {
   if (!title) return;
 
   const ts = r.testResults.map((tr) => {
-    const { title, status, duration } = tr;
+    const { title, status, duration, failureMessages } = tr;
+    const code = Array.isArray(failureMessages) ? failureMessages[0] : '';
 
-    return `<div class="test-result-info ${status}">
+    return `<div class="test-result-block">
+      <div class="test-result-info ${status}">
         <div class="test-result-title">${title}</div>
         <div class="test-result-time">${duration}ms</div>
-      </div>`;
+      </div>
+      <div class="test-result-code">
+        <pre><code>${code}</code></pre>
+      </div>
+    </div>`;
   });
 
   const html = `<div class="test-result-suit">
@@ -115,3 +121,21 @@ function appendTestResultDOM(r) {
 
   $testResults.innerHTML = $testResults.innerHTML + html;
 }
+
+export function bindFailureMessageClickEvent() {
+  document.addEventListener('click', (e) => {
+    try {
+      // @ts-ignore
+      const node = e.target.parentNode;
+      if (node.matches('.test-result-info.failed')) {
+        // failure
+        const codeClassList = node.parentNode.querySelector('.test-result-code').classList;
+
+        // toggle
+        codeClassList.contains('show') ? codeClassList.remove('show') : codeClassList.add('show');
+      }
+    } catch (e) {
+      console.warn(e)
+    }
+  });
+}
diff --git a/src/electron/renderer/index.ts b/src/electron/renderer/index.ts
index 1b72edb..668f45c 100644
--- a/src/electron/renderer/index.ts
+++ b/src/electron/renderer/index.ts
@@ -1,7 +1,7 @@
 import { ipcRenderer, remote } from 'electron';
 import { EventsEnum } from '../../utils/constant';
 import { fail, run } from './uitl';
-import { addResult, clearResult } from './dom';
+import { addResult, bindFailureMessageClickEvent, clearResult } from './dom';
 
 export type Args = {
   readonly debugMode?: boolean;
@@ -53,4 +53,6 @@ ipcRenderer.on(EventsEnum.ClearTestResults, async (event) => {
 });
 
 // web contents ready
+bindFailureMessageClickEvent(); // bind event
 ipcRenderer.send(EventsEnum.WebContentsReady);
+