Test components (#42)

* initial testing samples

* added testing for Deployment | Provider | Energy | Memory&Throughput | PerfBarContainer

* completed testing for principal sections and utils

* changed unit test for app.js | changed UI design of local gpu

* changed app.test.js

skyline-vscode/react-ui/src/App.js

@@ -29,7 +29,6 @@ import MemThroughputContainer from './sections/MemThroughputContainer';
 function acquireApi() {
     // if (typeof this.acquireApi.api == 'undefined') {
     if (typeof acquireApi.api === 'undefined') {
-        console.log("Calling acquire function");
         if (typeof acquireVsCodeApi === "function") {
             let f = window['acquireVsCodeApi'];
             let a = f();
@@ -72,9 +71,11 @@ function App() {
     const connect = function() {
         resetApp();
         let vscode = App.vscodeApi;
-        vscode.postMessage({
-            command: "connect"
-        });
+        if(vscode){
+            vscode.postMessage({
+                command: "connect"
+            });
+        }
     }
 
     const processAnalysisState = function (state) {

skyline-vscode/react-ui/src/App.test.js

@@ -1,12 +1,11 @@
-import {act, create} from 'react-test-renderer';
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import App from './App';
 
-describe('App', () => {
-  it ('should render successfully', () => {
-    let root;
-    act(() => {
-      root = create(<App />);
-    });
-    expect(root).toBeTruthy();
-  });
-});
+// For testing there is no default socket connection. It will show the error screen
+test("Render App correctly, must show a connection error and button to reset it", async() => {
+  render(<App />);
+
+  expect(screen.getByText(/connection error/i)).toBeTruthy();
+  await userEvent.click(screen.getByText('Reconnect'));
+})