chore: improve the store manager ui (#518)

* chore: improve the store manager ui

* improve the extension type selection

* add more unit tests of ts

---------

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -22,17 +22,17 @@ import setAsDarkTheme from './theme'
 
 const asDarkMode = ref(Cache.GetPreference().darkTheme)
 setAsDarkTheme(asDarkMode.value)
-watch(asDarkMode, Cache.WatchDarkTheme)
+watch(asDarkMode, Cache.WithDarkTheme)
 watch(asDarkMode, () => {
   setAsDarkTheme(asDarkMode.value)
 })
 
 const appVersion = ref('')
 const appVersionLink = ref('https://github.com/LinuxSuRen/api-testing')
 API.GetVersion((d) => {
-  appVersion.value = d.message
-  const version = d.message.match('^v\\d*.\\d*.\\d*')
-  const dirtyVersion = d.message.match('^v\\d*.\\d*.\\d*-\\d*-g')
+  appVersion.value = d.version
+  const version = d.version.match('^v\\d*.\\d*.\\d*')
+  const dirtyVersion = d.version.match('^v\\d*.\\d*.\\d*-\\d*-g')
 
   if (!version && !dirtyVersion) {
     return
@@ -65,8 +65,8 @@ const handleSelect = (key: string) => {
 const locale = ref(Cache.GetPreference().language)
 i18nLocale.value = locale.value
 
-watch(locale, (value) =>{
-  Cache.WatchLocale(value)
+watch(locale, (e) =>{
+  Cache.WithLocale(e.value)
   i18nLocale.value = locale.value
 })
 

console/atest-ui/src/views/StoreManager.vue

@@ -6,7 +6,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import type { Pair } from './types'
 import { API } from './net'
 import { UIAPI } from './net-vue'
-import { SupportedExtensions } from './store'
+import { SupportedExtensions, SupportedExtension } from './store'
 import { useI18n } from 'vue-i18n'
 import { Magic } from './magicKeys'
 
@@ -99,10 +99,6 @@ function setStoreForm(store: Store) {
     storeForm.disabled = store.disabled
     storeForm.readonly = store.readonly
     storeForm.properties = store.properties
-    storeForm.properties.push({
-        key: '',
-        value: ''
-      })
 }
 
 function addStore() {
@@ -130,6 +126,40 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   })
 }
 
+watch(() => storeForm.kind.name, (name) => {
+  const ext = SupportedExtension(name)
+  if (ext) {
+    let pro = storeForm.properties.slice()
+
+    for (var i = 0; i < pro.length;) {
+      // remove it if the value or key is empty
+      if (pro[i].key === '' || pro[i].value === '') {
+        pro.splice(i, 1)
+      } else {
+        i++
+      }
+    }
+
+    // add extension related params
+    ext.params.forEach(p => {
+      const index = pro.findIndex(e => e.key === p.key)
+      if (index === -1) {
+        pro.push({
+          key: p.key,
+          value: '',
+          defaultValue: p.defaultValue
+        } as Pair)
+      }
+    })
+
+    // make sure there is always a empty pair for letting users input
+    pro.push({
+      key: '',
+      value: ''
+    } as Pair)
+    storeForm.properties = pro
+  }
+})
 watch(storeForm, (e) => {
   if (e.kind.name === '') {
     if (e.url.startsWith('https://github.com') || e.url.startsWith('https://gitee.com')) {
@@ -157,12 +187,11 @@ function storeVerify(formEl: FormInstance | undefined) {
 
 function updateKeys() {
   const props = storeForm.properties
-  let lastItem = props[props.length - 1]
-  if (lastItem.key !== '') {
+  if (props.findIndex(p => p.key === '') === -1) {
     storeForm.properties.push({
       key: '',
       value: ''
-    })
+    } as Pair)
   }
 }
 </script>
@@ -246,13 +275,12 @@ function updateKeys() {
               v-model="storeForm.kind.name"
               test-id="store-form-plugin-name"
               class="m-2"
-              size="middle"
             >
               <el-option
                 v-for="item in SupportedExtensions()"
-                :key="item.value"
-                :label="item.key"
-                :value="item.value"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
               />
             </el-select>
           </el-form-item>
@@ -272,7 +300,7 @@ function updateKeys() {
                 <el-table-column label="Value">
                     <template #default="scope">
                     <div style="display: flex; align-items: center">
-                        <el-input v-model="scope.row.value" placeholder="Value" />
+                        <el-input v-model="scope.row.value" :placeholder="scope.row.defaultValue" />
                     </div>
                     </template>
                 </el-table-column>

console/atest-ui/src/views/TestCase.vue

@@ -26,7 +26,7 @@ const emit = defineEmits(['updated'])
 
 let querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.suite!)
 const testResultActiveTab = ref(Cache.GetPreference().responseActiveTab)
-watch(testResultActiveTab, Cache.WatchResponseActiveTab)
+watch(testResultActiveTab, Cache.WithResponseActiveTab)
 Magic.Keys(() => {
   testResultActiveTab.value = 'output'
 }, ['Alt+KeyO'])

console/atest-ui/src/views/__test__/cache.spec.ts

@@ -0,0 +1,158 @@
+/*
+Copyright 2024 API Testing Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe } from 'node:test'
+import {Cache, SetPreference, TestCaseResponse, Store, Stores} from '../cache'
+
+const localStorageMock = (() => {
+    let store = {};
+
+    return {
+        getItem(key) {
+            return store[key] || null;
+        },
+        setItem(key, value) {
+            store[key] = value.toString();
+        },
+        removeItem(key) {
+            delete store[key];
+        },
+        clear() {
+            store = {};
+        }
+    };
+})();
+
+Object.defineProperty(global, 'sessionStorage', {
+    value: localStorageMock
+});
+Object.defineProperty(global, 'localStorage', {
+    value: localStorageMock
+});
+Object.defineProperty(global, 'navigator', {
+    value: {
+        language: 'en'
+    }
+});
+
+describe('TestCaseResponseCache', () => {
+    test('should set and get test case response cache', () => {
+        const id = 'test-case-id'
+        const resp = {
+            output: 'test-body',
+            body: {},
+            statusCode: 200,
+        } as TestCaseResponse
+        Cache.SetTestCaseResponseCache(id, resp)
+        const result = Cache.GetTestCaseResponseCache(id)
+        expect(result).toEqual(resp)
+    })
+
+    test('get a non-existent test case response cache', () => {
+        expect(Cache.GetTestCaseResponseCache('non-existent-id')).toEqual({})
+    })
+})
+
+describe('LastTestCaseLocation', () => {
+    test('should get empty object when no last test case location', () => {
+        expect(Cache.GetLastTestCaseLocation()).toEqual({})
+    })
+
+    test('should set and get last test case location', () => {
+        const suite = 'test-suite'
+        const testcase = 'test-case'
+        Cache.SetLastTestCaseLocation(suite, testcase)
+        const result = Cache.GetLastTestCaseLocation()
+        expect(result).toEqual({ suite, testcase })
+    })
+})
+
+describe('Preference', () => {
+    test('get the default preference', () => {
+        expect(Cache.GetPreference()).toEqual({
+            darkTheme: false,
+            requestActiveTab: 'body',
+            responseActiveTab: 'body',
+            language: 'en',
+        })
+    })
+
+    test('set and get preference', () => {
+        const preference = {
+            darkTheme: true,
+            requestActiveTab: 'header',
+            responseActiveTab: 'header',
+            language: 'zh-cn',
+        }
+        SetPreference(preference)
+        expect(Cache.GetPreference()).toEqual(preference)
+    })
+
+    test('set and get dark theme', () => {
+        Cache.WithDarkTheme(true)
+        expect(Cache.GetPreference().darkTheme).toEqual(true)
+    })
+
+    test('set and get request active tab', () => {
+        Cache.WithRequestActiveTab('request')
+        expect(Cache.GetPreference().requestActiveTab).toEqual('request')
+    })
+
+    test('set and get response active tab', () => {
+        Cache.WithResponseActiveTab('response')
+        expect(Cache.GetPreference().responseActiveTab).toEqual('response')
+    })
+
+    it('set and get language', () => {
+        Cache.WithLocale('zh-cn')
+        expect(Cache.GetPreference().language).toEqual('zh-cn')
+    })
+})
+
+describe('stores', () => {
+    test('should get empty object when no stores', () => {
+        expect(Cache.GetCurrentStore()).toEqual({})
+    })
+
+    test('should set and get stores', () => {
+        const stores = {
+            current: 'test-store',
+            items: [
+                {
+                    name: 'test-store',
+                    readOnly: false,
+                } as Store,
+                {
+                    name: 'read-only-store',
+                    readOnly: true,
+                } as Store,
+            ],
+        }
+        Cache.SetStores(stores)
+        expect(Cache.GetCurrentStore()).toEqual({
+            name: 'test-store',
+            readOnly: false,
+        })
+
+        Cache.SetCurrentStore('read-only-store')
+        expect(Cache.GetCurrentStore()).toEqual({
+            name: 'read-only-store',
+            readOnly: true,
+        })
+
+        Cache.SetStores({} as Stores)
+    })
+})

console/atest-ui/src/views/__test__/store.spec.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2024 API Testing Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe } from "node:test";
+import {SupportedExtension, SupportedExtensions} from "../store";
+
+describe("SupportedExtensions", () => {
+    test('length check', () => {
+        const extensions = SupportedExtensions()
+        expect(extensions.length).toBe(5)
+    })
+
+    for (const extension of SupportedExtensions()) {
+        test(`${extension.name} check`, () => {
+            expect(SupportedExtension(extension.name)).not.toBeUndefined()
+        })
+    }
+})

console/atest-ui/src/views/__test__/types.spec.ts

@@ -1,11 +1,24 @@
+/*
+Copyright 2023-2024 API Testing Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { describe } from 'node:test'
 import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from '../types'
 import type { Pair } from '../types'
 
 const fakeFetch: { [key:string]:string; } = {};
-function matchFake(url: string, data: string) {
-  fakeFetch[url] = data
-}
 
 global.fetch = jest.fn((key: string) =>
   Promise.resolve({