Add Test Suite

client/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
+    "axios": "^1.7.3",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",

client/src/api/axios.ts

@@ -1,17 +1,52 @@
-import axios, { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios'
 
 const AuthClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT, 
+  baseURL: import.meta.env.VITE_APP_ENDPOINT,
   timeout: 1000,
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer ' + localStorage.getItem("token"),
+    Authorization: 'Bearer ' + localStorage.getItem('token'),
   },
-});
+})
 
 const BaseClient: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_ENDPOINT,
   timeout: 1000,
-});
+})
+
+async function GetPlans (projectId:any) {
+  try {
+    await AuthClient.get(`/test_plan/${projectId}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function CreateNewTestSuite (testSuiteDetails: any, projectId:any) {
+  try {
+    await AuthClient.post(`/test_suites/${projectId}/`, testSuiteDetails)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+async function GetTestSuites (projectId:any) {
+  try {
+    return await AuthClient.get(`/test_suites/${projectId}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function SearchSuite (projectId:any, keyWord:any) {
+  try {
+    await AuthClient.get(`/test_suites/${projectId}/search/${keyWord}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
 
-export { AuthClient, BaseClient };
+export default { AuthClient, BaseClient, GetPlans, CreateNewTestSuite, GetTestSuites, SearchSuite }

client/src/components.d.ts

@@ -7,8 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    NewTestSuite: typeof import('./components/NewTestSuite.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/test.vue')['default']

client/src/components/NewTestSuite.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="text-center pa-4">
+    <!-- this is just to be replaced later on with the + button on click , it opens the dialog.. -->
+    <v-btn @click="dialog = true">
+      Open Dialog
+    </v-btn>
+
+    <v-dialog v-model="dialog" max-width="600px">
+      <v-card>
+        <v-card-title>New Test Suite</v-card-title>
+        <v-divider />
+        <br>
+        <v-card-subtitle>
+          <div>
+            <strong>Title</strong>
+            <v-text-field v-model="details.title" placeholder="Enter title " />
+          </div>
+          <div>
+            <strong>Test Plan</strong>
+            <v-select v-model="details.test_plan" :items="plans" label="Select Plan" />
+          </div>
+        </v-card-subtitle>
+        <v-divider />
+        <v-card-actions>
+          <v-btn color="info" @click="dialog = false">Close</v-btn>
+          <v-btn color="success" @click="createTestSuite">Create</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import axios from '@/api/axios'
+  import { onMounted } from 'vue'
+
+  export default {
+    setup () {
+      const dialog = ref(false)
+      const details = ref({
+        title: '',
+        test_plan: null,
+      })
+
+      const plans = ref([])
+
+      // from where to get the project id???
+      const fetchPlans = async () => {
+        try {
+          plans.value = await axios.GetPlans(projectId)
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      const createTestSuite = async () => {
+        try {
+          await axios.CreateNewTestSuite(details, projectId)
+          notifier.notify({
+            title: 'success',
+            description: 'test suite created successfully',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'success',
+          })
+        } catch (error) {
+          console.error(error)
+          notifier.notify({
+            title: 'Fail',
+            description: 'Failed to create test suite',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'error',
+          })
+        }
+      }
+
+      onMounted(() => {
+        fetchPlans()
+      })
+
+      return {
+        dialog,
+        details,
+        plans,
+        createTestSuite,
+        fetchPlans,
+      }
+    },
+  }
+</script>