SUT component UI

apps/remix-ide/src/app/tabs/test-tab.js

@@ -811,7 +811,7 @@ module.exports = class TestTab extends ViewPlugin {
   renderComponent () {
     console.log('renderComponent-start-->')
     ReactDOM.render(
-      <SolidityUnitTesting api={this}/>
+      <SolidityUnitTesting testTab={this}/>
       , this.element)
     console.log('renderComponent-end-->')
   }

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

@@ -6,9 +6,38 @@ export interface SolidityUnitTestingProps {}
 export const SolidityUnitTesting = (props: SolidityUnitTestingProps) => {
   console.log('props---->', props)
   return (
-    <div>
-      <h1>Welcome to remix-ui-solidity-unit-testing!</h1>
-    </div>
+    <div className="${css.testTabView} px-2" id="testView">
+        <div className="${css.infoBox}">
+          <p className="text-lg"> Test your smart contract in Solidity.</p>
+          <p> Select directory to load and generate test files.</p>
+          <label>Test directory:</label>
+          {/* <div>
+            <div className="d-flex p-2">
+              ${this.inputPath}
+              ${this.createTestFolder}
+              ${this.uiPathList}
+            </div>
+          </div> */}
+        </div>
+        {/* <div className="${css.tests}">          
+          <div className="d-flex p-2">
+           ${this.updateGenerateFileAction()}
+           ${this.infoButton()}
+          </div>
+          <div className="d-flex p-2">
+            ${this.updateRunAction()}
+            ${this.updateStopAction()}
+          </div>
+          ${this.selectAll()}
+          ${this.updateTestFileList()}
+          <div className="align-items-start flex-column mt-2 mx-3 mb-0">
+            ${this.resultStatistics}
+            ${this.testsExecutionStopped}
+            ${this.testsExecutionStoppedError}
+          </div>
+          ${this.testsOutput}
+        </div> */}
+      </div>
   )
 }