TestingHistoryPanel.vue

<script setup lang="ts">
import TestCase from './TestCase.vue'
import TemplateFunctions from './TemplateFunctions.vue'
import { ref, watch } from 'vue'
import { API } from './net'
import { ElTree, ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { Cache } from './cache'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

interface Tree {
  id: string
  label: string
  parent: string
  parentID: string
  store: string
  kind: string
  suiteLabel: string
  children?: Tree[]
}

const props = defineProps({
  ID: String,
})
const testCaseName = ref('')
const testSuite = ref('')
const testKind = ref('')
const historySuiteName = ref('')
const historyCaseID = ref('')

const handleNodeClick = (data: Tree) => {
  if (data.children) {
    Cache.SetCurrentStore(data.store)
    viewName.value = 'testsuite'
    historySuiteName.value = data.label
    Cache.SetCurrentStore(data.store)

    API.ListTestCase(data.label, data.store, (d) => {
      if (d.items && d.items.length > 0) {
        data.children = []
        d.items.forEach((item: any) => {
          data.children?.push({
            id: data.label,
            label: item.name,
            kind: data.kind,
            store: data.store,
            parent: data.label,
            parentID: data.id
          } as Tree)
        })
      }
    })
  } else {
    Cache.SetCurrentStore(data.store)
    Cache.SetLastTestCaseLocation(data.parentID, data.id)
    historySuiteName.value = data.parent
    testSuite.value = data.suiteLabel
    testCaseName.value = data.label
    historyCaseID.value = data.id
    testKind.value = data.kind
    viewName.value = 'testcase'
  }
}

const treeData = ref([] as Tree[])
const treeRef = ref<InstanceType<typeof ElTree>>()
const currentNodekey = ref('')

function loadHistoryTestSuites(storeName: string) {
  const requestOptions = {
    method: 'POST',
    headers: {
      'X-Store-Name': storeName,
      'X-Auth': API.getToken()
    },
  }
  return async () => {
    await fetch('/api/v1/historySuites', requestOptions)
      .then((response) => response.json())
      .then((d) => {
        if (!d.data) {
          return
        }
        const sortedKeys = Object.keys(d.data).sort((a, b) => new Date(a) - new Date(b));
        sortedKeys.map((k) => {
          let suite = {
            id: k,
            label: k,
            store: storeName,
            children: [] as Tree[]
          } as Tree

          d.data[k].data.forEach((item: any) => {
            suite.children?.push({
              id: item.ID,
              label: item.testcase,
              suiteLabel: item.suite,
              store: storeName,
              kind: item.kind,
              parent: k,
              parentID: suite.id
            } as Tree)
          })
          treeData.value.push(suite)
        })
      })
  }
}

function generateTestCaseID(suiteName: string, caseName: string) {
  return suiteName + caseName
}

interface Store {
  name: string,
  description: string,
}

const loginDialogVisible = ref(false)
const stores = ref([] as Store[])
const storesLoading = ref(false)
function loadStores(lastSuitName?: string, lastCaseName?: string) {
  if (lastSuitName && lastCaseName && lastSuitName !== '' && lastCaseName !== '') {
    // get data from emit event
    Cache.SetLastTestCaseLocation(lastSuitName, generateTestCaseID(lastSuitName, lastCaseName))
  }

  storesLoading.value = true
  const requestOptions = {
    headers: {
      'X-Auth': API.getToken()
    }
  }
  fetch('/api/v1/stores', requestOptions)
    .then(API.DefaultResponseProcess)
    .then(async (d) => {
      stores.value = d.data
      treeData.value = [] as Tree[]
      Cache.SetStores(d.data)

      for (const item of d.data) {
        if (item.ready && !item.disabled) {
          await loadHistoryTestSuites(item.name)()
        }
      }

      if (treeData.value.length > 0) {
        const key = Cache.GetLastTestCaseLocation()

        let targetSuite = {} as Tree
        let targetChild = {} as Tree

        const targetID = props.ID
        if (targetID && targetID !== '') {
          for (const suite of treeData.value) {
            if (suite.children) {
              const foundChild = suite.children.find(child => child.id === targetID)
              if (foundChild) {
                targetSuite = suite
                targetChild = foundChild
                handleNodeClick(targetChild)
                updateTreeSelection(targetSuite, targetChild)
                return
              }
            }
          }
        } else {
          if (key.suite !== '' && key.testcase !== '') {
            for (var i = 0; i < treeData.value.length; i++) {
              const item = treeData.value[i]
              if (item.id === key.suite && item.children) {
                for (var j = 0; j < item.children.length; j++) {
                  const child = item.children[j]
                  if (child.id === key.testcase) {
                    targetSuite = item
                    targetChild = child
                    break
                  }
                }
                break
              }
            }
          }
        }
        if (!targetChild.id || targetChild.id === '') {
          targetSuite = treeData.value[0]
          if (targetSuite.children && targetSuite.children.length > 0) {
            targetChild = targetSuite.children[0]
          }
        }

        viewName.value = 'testsuite'
        updateTreeSelection(targetSuite, targetChild)
      } else {
        viewName.value = ""
      }
    }).catch((e) => {
      if (e.message === "Unauthenticated") {
        loginDialogVisible.value = true
      } else {
        ElMessage.error('Oops, ' + e)
      }
    }).finally(() => {
      storesLoading.value = false
    })
}
loadStores()

function updateTreeSelection(targetSuite: Tree, targetChild: Tree) {
    currentNodekey.value = targetChild.id

    treeRef.value!.setCurrentKey(targetChild.id)
    treeRef.value!.setCheckedKeys([targetChild.id], false)

    testSuite.value = targetSuite.label
    Cache.SetCurrentStore(targetSuite.store)
    testKind.value = targetChild.kind
}

const filterText = ref('')
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const filterTestCases = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const viewName = ref('')
</script>

<template>
  <div class="h-full" data-title="Welcome!" data-intro="Welcome to use api-testing! 👋">
    <el-container class="h-[100%]">
      <el-main class="pt-[5px] pb-[5px]">
        <el-container class="h-[100%]">
          <el-aside>
            <el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
            <el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" class="p-[5px]" />
            <el-tree
              v-loading="storesLoading"
              :data=treeData
              highlight-current
              :check-on-click-node="true"
              :expand-on-click-node="false"
              :current-node-key="currentNodekey" 
              ref="treeRef"
              node-key="id"
              :filter-node-method="filterTestCases"
              @node-click="handleNodeClick"
              data-intro="This is the test history tree. You can click the history test to browse it."
            />
            <TemplateFunctions />
          </el-aside>

          <el-main class="pt-[0px] pr-[0px] pb-[0px]">
            <TestCase v-if="viewName === 'testcase'" :suite="testSuite" :kindName="testKind" :name="testCaseName"
              :historySuiteName="historySuiteName" :historyCaseID="historyCaseID" @updated="loadStores" class="h-[100%]"
              data-intro="This is the test case editor. You can edit the test case here." />
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>