feat: api test support execute in different tab

package.json

@@ -1,7 +1,7 @@
 {
   "name": "eoapi",
   "souceLocale": "zh-Hans",
-  "version": "1.4.0-beta",
+  "version": "1.5.0",
   "main": "out/app/electron-main/main.js",
   "description": "A lightweight, extensible API tool",
   "homepage": "https://github.com/eolinker/eoapi.git",

src/workbench/browser/src/app/pages/api/api-tab.service.ts

@@ -174,6 +174,10 @@ export class ApiTabService {
       if (replaceTab.hasChanged) {
         replaceTab.isFixed = true;
       }
+      //Has tested set fixed
+      if(currentTab.pathname === '/home/api/test'&&model.testStartTime!==undefined){
+        replaceTab.isFixed = true;
+      }
 
       // Set storage
       //Set baseContent
@@ -186,7 +190,7 @@ export class ApiTabService {
       replaceTab.content = inData.when === 'saved' ? {} : currentTab.content || {};
       replaceTab.content[contentID] = model && !isEmptyObj(model) ? model : null;
     }
-    // console.log('updatePartialTab', currentTab.uuid, replaceTab);
+    console.log('updatePartialTab', currentTab.uuid, replaceTab);
     this.apiTabComponent.updatePartialTab(inData.url, replaceTab);
   }
   /**
@@ -195,7 +199,7 @@ export class ApiTabService {
    *
    * @param inData.url get component fit tab data
    */
-  afterContentChanged(inData: { when: 'init' | 'editing' | 'saved'; url: string; model: any }) {
+  afterContentChanged(inData: { when: 'init' | 'editing' |'saved'; url: string; model: any }) {
     if (!this.apiTabComponent) {
       console.warn(`EO_WARNING:apiTabComponent hasn't init yet!`);
       return;

src/workbench/browser/src/app/pages/api/api.component.html

@@ -68,7 +68,7 @@
         </div>
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
           <!-- Manually pick pageID,Because pageID always change -->
-          <nz-tabset  class="inside_page_tab" *ngIf="this.id" nzLinkRouter>
+          <nz-tabset  class="inside_page_tabset" *ngIf="this.id" nzLinkRouter>
             <nz-tab *ngFor="let tab of TABS">
               <a
                 *nzTabLink

src/workbench/browser/src/app/pages/api/tab/api-tab-operate.service.ts

@@ -145,28 +145,15 @@ export class ApiTabOperateService {
    * @param tab
    * @returns
    */
-  getTabIndex(type, tab: TabItem): number {
+   getSameContentTabIndex(tab: TabItem): number {
     let result = -1;
-    //If exist tab，return exist TabIndex
-    if (this.tabStorage.tabsByID.get(tab.uuid)) {
-      return this.tabStorage.tabOrder.findIndex((uuid) => uuid === tab.uuid);
-    }
-
     const mapObj = Object.fromEntries(this.tabStorage.tabsByID);
     for (const key in mapObj) {
       if (Object.prototype.hasOwnProperty.call(mapObj, key)) {
         const tabInfo = mapObj[key];
-        if (tabInfo.params.uuid && tabInfo.params.uuid === tab.params.uuid) {
-          if (type === 'sameContent') {
-            if (tabInfo.pathname === tab.pathname) {
-              result = this.tabStorage.tabOrder.findIndex((uuid) => uuid === tabInfo.uuid);
-              break;
-            }
-          } else {
-            result = this.tabStorage.tabOrder.findIndex((uuid) => uuid === tabInfo.uuid);
-          }
+        if (tabInfo.params.uuid && tabInfo.params.uuid === tab.params.uuid && tabInfo.pathname === tab.pathname) {
+          result = this.tabStorage.tabOrder.findIndex((uuid) => uuid === tabInfo.uuid);
           break;
-          //TODO how to replace current exist tab but editing
         }
       }
     }
@@ -207,26 +194,6 @@ export class ApiTabOperateService {
     });
     return result as TabItem;
   }
-  formatUrl(url) {
-    const urlArr = url.split('?');
-    // Parse query params
-    const params = {};
-    new URLSearchParams(urlArr[1]).forEach((value, key) => {
-      if (key === 'pageID') {
-        params[key] = Number(value);
-        return;
-      }
-      params[key] = value;
-    });
-    return (
-      urlArr[0] +
-      '?' +
-      Object.keys(params)
-        .sort()
-        .map((keyName) => `${keyName}=${params[keyName]}`)
-        .join('&')
-    );
-  }
   /**
    * Operate tab after router change,router triggle tab change
    * Such as new tab,pick tab,close tab...
@@ -235,19 +202,14 @@ export class ApiTabOperateService {
    */
   operateTabAfterRouteChange(res: { url: string }) {
     const tmpTabItem = this.getBaiscTabFromUrl(res.url);
-    const sameContentIndex = this.getTabIndex('sameContent', tmpTabItem);
+    const sameContentIndex = this.getSameContentTabIndex(tmpTabItem);
     const existTab = this.getTabByIndex(sameContentIndex);
-    const samePageID = this.tabStorage.tabsByID.has(tmpTabItem.uuid);
     console.log('operateTabAfterRouteChange', existTab, tmpTabItem);
-    //If page repeat or final url is different(lack of id/additional params)
-    //jump to exist tab item to keep same  pageID and so on
+    //If page lack pageID
+    //Jump to exist tab item to keep same  pageID and so on
     if (!res.url.includes('pageID')) {
       if (existTab) {
-        if (existTab.pathname !== tmpTabItem.pathname) {
-          tmpTabItem.uuid = tmpTabItem.params.pageID = Date.now();
-        } else {
-          tmpTabItem.uuid = tmpTabItem.params.pageID = existTab.uuid;
-        }
+        tmpTabItem.uuid = tmpTabItem.params.pageID = existTab.uuid;
       }
       this.navigateTabRoute(tmpTabItem);
       return;
@@ -260,7 +222,7 @@ export class ApiTabOperateService {
     }
 
     //same tab content,selected it
-    if (existTab && this.getUrlByTab(existTab) === this.formatUrl(res.url)) {
+    if (existTab) {
       this.selectedIndex = sameContentIndex;
       this.updateChildView();
       return;
@@ -282,8 +244,8 @@ export class ApiTabOperateService {
         }
       }
     }
-
     //If has same  tab (same uuid),replace it
+    const samePageID = this.tabStorage.tabsByID.has(tmpTabItem.uuid);
     if (samePageID) {
       this.selectedIndex = this.tabStorage.tabOrder.findIndex((uuid) => uuid === tmpTabItem.uuid);
       this.tabStorage.updateTab(this.selectedIndex, tmpTabItem);

src/workbench/browser/src/app/pages/api/tab/api-tab.component.html

@@ -1,4 +1,4 @@
-{{getConsoleTabs()|json}}
+<!-- {{getConsoleTabs()|json}} -->
 <nz-tabset
   [(nzSelectedIndex)]="tabOperate.selectedIndex"
   nzType="editable-card"

src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts

@@ -116,7 +116,7 @@ export class ApiTabComponent implements OnInit, OnDestroy {
    */
   getTabByUrl(url: string): TabItem | null {
     const tabItem = this.tabOperate.getBaiscTabFromUrl(url);
-    const existTabIndex = this.tabOperate.getTabIndex('sameTab', tabItem);
+    const existTabIndex = this.tabOperate.getSameContentTabIndex(tabItem);
     if (existTabIndex === -1) {
       return null;
     }

src/workbench/browser/src/app/pages/api/test/api-test.component.ts

@@ -13,7 +13,7 @@ import {
 import { MessageService } from '../../../shared/services/message';
 
 import { interval, Subscription, Observable, Subject } from 'rxjs';
-import { take, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
 
 import { TestServerService } from '../../../shared/services/api-test/test-server.service';
 import { ApiTestUtilService } from './api-test-util.service';
@@ -39,6 +39,7 @@ import { AnyRecord } from 'dns';
 const API_TEST_DRAG_TOP_HEIGHT_KEY = 'API_TEST_DRAG_TOP_HEIGHT';
 interface testViewModel {
   request: ApiTestData;
+  testStartTime?: number;
   testResult: {
     request: any;
     response: any;
@@ -77,14 +78,15 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   status: 'start' | 'testing' | 'tested' = 'start';
   waitSeconds = 0;
   responseTabIndexRes = 0;
-  initTimes = 0;
 
   isRequestBodyLoaded = false;
   initHeight = localStorage.getItem(API_TEST_DRAG_TOP_HEIGHT_KEY) || '45%';
   testServer: TestServerLocalNodeService | TestServerServerlessService | TestServerRemoteService;
   REQUEST_METHOD = objectToArray(RequestMethod);
   REQUEST_PROTOCOL = objectToArray(RequestProtocol);
+  MAX_TEST_SECONDS = 60;
 
+  private initTimes = 0;
   private status$: Subject<string> = new Subject<string>();
   private timer$: Subscription;
   private destroy$: Subject<void> = new Subject<void>();
@@ -145,10 +147,20 @@ export class ApiTestComponent implements OnInit, OnDestroy {
       //!Prevent await async ,replace current  api data
       if (initTimes >= this.initTimes) {
         this.model.request = requestInfo;
-      }else{
+      } else {
         return;
       }
       this.initContentType();
+      this.waitSeconds = 0;
+      this.status = 'start';
+    } else {
+      if (this.timer$ && this.model.testStartTime) {
+        this.waitSeconds = Math.round((Date.now() - this.model.testStartTime) / 1000);
+        this.status$.next('testing');
+      } else {
+        this.waitSeconds = 0;
+        this.status$.next('start');
+      }
     }
     this.initBasicForm();
     //! Set this two function to reset form
@@ -236,12 +248,12 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     if (!this.initialModel.request || !this.model.request) {
       return false;
     }
-    console.log(
-      'api test origin:',
-      this.apiTestUtil.formatEditingApiData(this.initialModel.request),
-      'after:',
-      this.apiTestUtil.formatEditingApiData(this.model.request)
-    );
+    // console.log(
+    //   'api test origin:',
+    //   this.apiTestUtil.formatEditingApiData(this.initialModel.request),
+    //   'after:',
+    //   this.apiTestUtil.formatEditingApiData(this.model.request)
+    // );
     const originText = JSON.stringify(this.apiTestUtil.formatEditingApiData(this.initialModel.request));
     const afterText = JSON.stringify(this.apiTestUtil.formatEditingApiData(this.model.request));
     if (originText !== afterText) {
@@ -298,7 +310,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   }
   private test() {
     this.testServer.send('unitTest', {
-      // id: this.apiTab.tabID,
+      id: this.route.snapshot.queryParams.pageID,
       action: 'ajax',
       data: this.testServer.formatRequestData(this.model.request, {
         env: this.env,
@@ -308,11 +320,12 @@ export class ApiTestComponent implements OnInit, OnDestroy {
         lang: this.lang.systemLanguage === 'zh-Hans' ? 'cn' : 'en',
       }),
     });
+    this.model.testStartTime = Date.now();
     this.status$.next('testing');
   }
   private abort() {
     this.testServer.send('unitTest', {
-      // id: this.apiTab.tabID,
+      id: this.route.snapshot.queryParams.pageID,
       action: 'abort',
     });
     this.status$.next('tested');
@@ -332,7 +345,6 @@ export class ApiTestComponent implements OnInit, OnDestroy {
       response: message.response,
     };
     this.model.testResult = tmpHistory;
-    this.modelChange.emit(this.model);
     this.status$.next('tested');
     if (message.status === 'error') {
       return;
@@ -349,30 +361,40 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     // TODO Other tab test finish,support multiple tab test same time
     this.addHistory(message.history, this.model.request.uuid);
   }
+  setTestSecondsTimmer() {
+    if (this.timer$) {
+      this.timer$.unsubscribe();
+    }
+    const that = this;
+    this.timer$ = interval(1000)
+      .subscribe({
+        next(val) {
+          that.waitSeconds++;
+          if (that.waitSeconds >= that.MAX_TEST_SECONDS) {
+            this.complete();
+          }
+        },
+        complete() {
+          that.changeStatus('tested');
+        },
+      });
+  }
   /**
    * Change test status
    *
    * @param status - 'start'|'testing'|'tested'
    */
   private changeStatus(status) {
     this.status = status;
-    const that = this;
+    console.log('changeStatus',status);
     switch (status) {
       case 'testing': {
-        this.timer$ = interval(1000)
-          .pipe(take(60))
-          .subscribe({
-            next(val) {
-              console.log('next');
-              that.waitSeconds = val + 1;
-            },
-            complete() {
-              that.changeStatus('tested');
-            },
-          });
+        this.setTestSecondsTimmer();
         break;
       }
       case 'tested': {
+        this.model.testStartTime = 0;
+        this.modelChange.emit(this.model);
         this.timer$.unsubscribe();
         this.waitSeconds = 0;
         this.responseTabIndexRes = 0;

src/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service.ts

@@ -18,7 +18,7 @@ export class TestServerRemoteService implements TestServer {
         break;
       }
       default: {
-        this.xhrByTabID[message.id].abort();
+        this.xhrByTabID[message.id]?.abort();
       }
     }
     if (message.action !== 'ajax') {return;}

src/workbench/browser/src/app/shared/services/api-test/serverless-node/test-connect.service.ts

@@ -20,7 +20,7 @@ export class TestServerServerlessService implements TestServer {
         break;
       }
       default: {
-        this.xhrByTabID[message.id].abort();
+        this.xhrByTabID[message.id]?.abort();
       }
     }
     if (message.action !== 'ajax') {return;}