test summary visibility

libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react' // eslint-disable-line
+import React, { useState, useRef, useEffect, CSSProperties } from 'react' // eslint-disable-line
 // import { TestTabLogic } from './logic/testTabLogic'
 var async = require('async')
 import { canUseWorker, urlFromVersion } from '@remix-project/remix-solidity'
@@ -38,7 +38,7 @@ export const SolidityUnitTesting = (props: any) => {
   const [checkSelectAll, setCheckSelectAll] = useState(true)
   const [testsOutput, setTestsOutput] = useState<Element[]>([])
   let [testsSummary, setTestsSummary] = useState<TestSummary>()
-  const [testsSummaryHidden, setTestsSummaryHidden] = useState(true)
+  const [testsSummaryHidden, setTestsSummaryHidden] = useState('hidden')
   
   const [testsExecutionStoppedHidden, setTestsExecutionStoppedHidden] = useState(true)
   const [testsExecutionStoppedErrorHidden, setTestsExecutionStoppedErrorHidden] = useState(true)
@@ -345,7 +345,7 @@ export const SolidityUnitTesting = (props: any) => {
   const updateFinalResult = (_errors: any, result: any, filename: any) => {
     console.log('result---in updateFinalResult->', result, filename)
     ++readyTestsNumber
-    setTestsSummaryHidden(false)
+    setTestsSummaryHidden('visible')
     // if (!result && (_errors && (_errors.errors || (Array.isArray(_errors) && (_errors[0].message || _errors[0].formattedMessage))))) {
     //   this.testCallback({ type: 'contract', filename })
     //   this.currentErrors = _errors.errors
@@ -364,32 +364,6 @@ export const SolidityUnitTesting = (props: any) => {
       const totalTime = parseFloat(result.totalTime).toFixed(2)
       testsSummary = { filename, passed: result.totalPassing, failed: result.totalFailing, timeTaken: totalTime }
       setTestsSummary(testsSummary)
-
-      // if (result.totalPassing > 0 && result.totalFailing > 0) {
-      //   this.testsOutput.appendChild(yo`
-      //     <div class="d-flex alert-secondary mb-3 p-3 flex-column">
-      //       <span class="font-weight-bold">Result for ${filename}</span>
-      //       <span class="text-success">Passing: ${result.totalPassing}</span>
-      //       <span class="text-danger">Failing: ${result.totalFailing}</span>
-      //       <span>Total time: ${totalTime}s</span>
-      //     </div>
-      //   `)
-      // } else if (result.totalPassing > 0 && result.totalFailing <= 0) {
-      //   this.testsOutput.appendChild(yo`
-      //     <div class="d-flex alert-secondary mb-3 p-3 flex-column">
-      //       <span class="font-weight-bold">Result for ${filename}</span>
-      //       <span class="text-success">Passing: ${result.totalPassing}</span>
-      //       <span>Total time: ${totalTime}s</span>
-      //     </div>
-      //   `)
-      // } else if (result.totalPassing <= 0 && result.totalFailing > 0) {
-      //   this.testsOutput.appendChild(yo`
-      //     <div class="d-flex alert-secondary mb-3 p-3 flex-column">
-      //       <span class="font-weight-bold">Result for ${filename}</span>
-      //       <span class="text-danger">Failing: ${result.totalFailing}</span>
-      //       <span>Total time: ${totalTime}s</span>
-      //     </div>
-      //   `)
       }
       // fix for displaying right label for multiple tests (testsuites) in a single file
       // this.testSuites.forEach(testSuite => {
@@ -667,7 +641,7 @@ export const SolidityUnitTesting = (props: any) => {
             <label className="text-danger h6" data-id="testTabTestsExecutionStoppedError" hidden={testsExecutionStoppedErrorHidden}>The test execution has been stopped because of error(s) in your test file</label>
           </div>
           <div>{testsOutput}</div>
-          <div className="d-flex alert-secondary mb-3 p-3 flex-column" hidden={testsSummaryHidden}>
+          <div className="d-flex alert-secondary mb-3 p-3 flex-column" style= {{visibility: testsSummaryHidden} as CSSProperties }>
             <span className="font-weight-bold">{testsSummary && testsSummary.filename ? `Result for ${testsSummary.filename}` : ''}</span>
             <span className="text-success">{testsSummary && testsSummary.passed >= 0 ? `Passed: ${testsSummary.passed}` : ''}</span>
             <span className="text-danger">{testsSummary && testsSummary.failed >= 0 ? `Failed: ${testsSummary.failed}` : ''}</span>