Add debug_message display to self-test results (PP-3841)

src/components/SelfTestResult.tsx

@@ -9,7 +9,7 @@ export interface SelfTestResultProps {
 
 export default class SelfTestResult extends React.Component<
   SelfTestResultProps,
-  {}
+  Record<string, never>
 > {
   constructor(props) {
     super(props);
@@ -41,9 +41,16 @@ export default class SelfTestResult extends React.Component<
           success: {`${this.props.result.success}`}
         </p>
         {!this.props.result.success && this.props.result.exception && (
-          <p className="exception-description">
-            exception: {this.props.result.exception.message}
-          </p>
+          <>
+            <p className="exception-description">
+              exception: {this.props.result.exception.message}
+            </p>
+            {this.props.result.exception.debug_message && (
+              <p className="debug-description">
+                debug: {this.props.result.exception.debug_message}
+              </p>
+            )}
+          </>
         )}
       </li>
     );

src/components/__tests__/SelfTestResult-test.tsx

@@ -1,8 +1,7 @@
 import { expect } from "chai";
-import { stub } from "sinon";
 
 import * as React from "react";
-import { shallow, mount } from "enzyme";
+import { mount } from "enzyme";
 
 import SelfTestResult from "../SelfTestResult";
 
@@ -89,7 +88,6 @@ describe("SelfTestResult", () => {
   it("displays a result with an exception", () => {
     const exception = {
       class: "IntegrationException",
-      debug_message: "debug message...",
       message: "Problem!",
     };
     const exceptionResult = {
@@ -106,4 +104,52 @@ describe("SelfTestResult", () => {
     expect(testException.length).to.equal(1);
     expect(testException.text()).to.equal("exception: Problem!");
   });
+
+  it("displays debug_message when present", () => {
+    const exception = {
+      class: "IntegrationException",
+      debug_message: "debug message...",
+      message: "Problem!",
+    };
+    const exceptionResult = {
+      ...stringResult,
+      ...{ success: false, exception: exception },
+    };
+    wrapper.setProps({ result: exceptionResult });
+
+    const debugMessage = wrapper.find(".debug-description");
+    expect(debugMessage.length).to.equal(1);
+    expect(debugMessage.text()).to.equal("debug: debug message...");
+  });
+
+  it("does not display debug_message when it is empty", () => {
+    const exception = {
+      class: "IntegrationException",
+      debug_message: "",
+      message: "Problem!",
+    };
+    const exceptionResult = {
+      ...stringResult,
+      ...{ success: false, exception: exception },
+    };
+    wrapper.setProps({ result: exceptionResult });
+
+    expect(wrapper.find(".exception-description").length).to.equal(1);
+    expect(wrapper.find(".debug-description").length).to.equal(0);
+  });
+
+  it("does not display debug_message when it is absent", () => {
+    const exception = {
+      class: "IntegrationException",
+      message: "Problem!",
+    };
+    const exceptionResult = {
+      ...stringResult,
+      ...{ success: false, exception: exception },
+    };
+    wrapper.setProps({ result: exceptionResult });
+
+    expect(wrapper.find(".exception-description").length).to.equal(1);
+    expect(wrapper.find(".debug-description").length).to.equal(0);
+  });
 });

src/interfaces.ts

@@ -337,7 +337,7 @@ export interface ProtocolData {
 
 export interface SelfTestsException {
   class: string;
-  debug_message: string;
+  debug_message?: string;
   message: string;
 }
 

src/stylesheets/self_tests.scss

@@ -123,6 +123,15 @@
       border: 0.0625rem $red-dark solid;
       color: #000;
     }
+
+    .debug-description {
+      white-space: pre-line;
+      margin-top: 5px;
+      padding: 8px 10px;
+      background: $gray-tint;
+      border: 0.0625rem solid $gray-border;
+      border-radius: 3px;
+    }
   }
 
   .warning {