fix test for aqua-ipfs-integration web

aqua-examples/aqua-ipfs-integration/web/src/App.scss

@@ -137,7 +137,7 @@ table {
   }
 }
 
-.input-ro {
+.input-readonly {
   display: inline;
   width: 500px;
   height: 26px;

aqua-examples/aqua-ipfs-integration/web/src/Components/ConnectionForm.tsx

@@ -11,7 +11,7 @@ export const ConnectionForm = () => {
         {relayNodes.map((x) => (
           <li key={x.peerId}>
             <span className="mono">{x.peerId}</span>
-            <button className="btn" onClick={() => connect(x.multiaddr)}>
+            <button className="btn btn-connect" onClick={() => connect(x.multiaddr)}>
               Connect
             </button>
           </li>

aqua-examples/aqua-ipfs-integration/web/src/Components/IpfsForm.tsx

@@ -31,7 +31,7 @@ export const IpfsForm = () => {
         setValue={setWasm}
       />
       <div className="row">
-        <button className="btn btn-right" onClick={deployService}>
+        <button id="deploy-service" className="btn btn-right" onClick={deployService}>
           deploy service
         </button>
       </div>

aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcForm.tsx

@@ -28,7 +28,7 @@ export const SizeCalcForm = () => {
       <TextInput text={"IPFS CID"} value={fileCID} setValue={setFileCID} />
 
       <div className="row">
-        <button className="btn btn-right" onClick={getFileSize}>
+        <button id="get-size" className="btn btn-right" onClick={getFileSize}>
           get size
         </button>
       </div>

aqua-examples/aqua-ipfs-integration/web/src/Components/SizeCalcResult.tsx

@@ -16,7 +16,7 @@ export const SizeCalcResult = () => {
           CID
         </p>
       </div>
-      <TextWithLabel text="File size:" value={fileSize} />
+      <TextWithLabel id="file-size" text="File size:" value={fileSize} />
       <TextWithLabel text="File size IPFS CID:" value={fileSizeCID} />
     </>
   );

aqua-examples/aqua-ipfs-integration/web/src/Components/TextInput.tsx

@@ -21,12 +21,15 @@ export const TextInput = (props: {
 
 export const TextWithLabel = (props: {
   text: string;
+  id?: string;
   value: string | null;
 }) => {
+  const idAttr = props.id ? { id: props.id } : {}
+  const attrs = { className: "input-readonly", ...idAttr };
   return (
     <div className="row">
       <label className="label bold">{props.text}</label>
-      <div className="input-ro">{props.value || ""}</div>
+      <div {...attrs}>{props.value || ""}</div>
     </div>
   );
 };

aqua-examples/aqua-ipfs-integration/web/src/__test__/test.spec.ts

@@ -0,0 +1,64 @@
+import handler from 'serve-handler';
+import http from 'http';
+import path from 'path';
+
+const port = 3001;
+const uri = `http://localhost:${port}/`
+const publicPath = path.join(__dirname, '../../build/');
+
+console.log(publicPath);
+
+const server = http.createServer((request, response) => {
+    return handler(request, response, {
+        public: publicPath
+  });
+})
+
+const startServer = async () => {
+    return new Promise((resolve: any) => {
+        server.listen(port, resolve);
+    })
+}
+
+const stopServer = async () => {
+    return new Promise((resolve: any) => {
+        server.close(resolve);
+    })
+}
+
+
+describe('smoke test', () => {
+    beforeAll(startServer);
+
+    afterAll(stopServer);
+
+    it('should work', async () => {
+        console.log('going to the page in browser...');
+        await page.goto(uri);
+
+        console.log('clicking connect button...');
+        await page.click('.btn-connect');
+    
+        console.log('waiting for fluence to connect...');
+        await page.waitForTimeout(1000);
+    
+        console.log('waiting for "deploy service" button to appear...');
+        await page.waitForSelector('#deploy-service');
+
+        console.log('clicking "deploy service" button...');
+        await page.click('#deploy-service');
+
+        console.log('waiting for "get size" button to appear...');
+        await page.waitForSelector('#get-size');
+
+        console.log('clicking "get size" button...');
+        await page.click('#get-size');
+
+        console.log('waiting for result to appear...');
+        const sizeEl = await page.waitForSelector('#file-size');
+        
+        const size = await sizeEl?.evaluate(x => x.textContent);
+
+        expect(size).toBe("144804");
+    }, 10000);
+});