test-scheduler/ui/src/components/testcase.vue

   1 <template>
   2   <div class="wrapper wrapper-content animated fadeIn">
   3     <div class="row" style="margin-bottom: 20px;">
   4       <div class="col-md-8">
   5         <ol class="breadcrumb" style="padding-left: 20px; font-size: 17px;">
   6           <li>
   7             <router-link to="/" >root</router-link>
   8           </li>
   9           <li>
  10             <router-link :to="{ path: '/testcase', query: { name: sname }}"><b>{{this.$route.query.name}}</b></router-link>
  11           </li>
  12         </ol>
  13       </div>
  14     </div>
  15     <div id="page-content" style="" class="row">
  16         <div class="col-lg-8">
  17             <div class="ibox">
  18                 <div class="ibox-title">
  19                     <h5 style="font-size:26px;margin-top: -3px;">Test Case</h5>
  20                     <div class="ibox-tools">
  21                     <button class="btn btn-info btn-sm my-button-sm" type="button" v-on:click="runMultiTestcase()">Run</button>
  22                     <button class="btn btn-success btn-sm my-button-sm" type="button" v-on:click="create()">Create</button>
  23                     <button class="btn btn-danger btn-sm my-button-sm" v-on:click="deleteCases()" type="button">Delete</button>
  24                     <a class="collapse-link">
  25                         <i class="fa fa-chevron-up"></i>
  26                     </a>
  27                     <a class="fullscreen-link">
  28                         <i class="fa fa-expand"></i>
  29                     </a>
  30                     </div>
  31                 </div>
  32                 <div class="ibox-content" style="text-align:center;">
  33                 <table class="my-table table table-bordered" cellspacing="0" cellpadding="0" style="text-align: center;">
  34                     <thead>
  35                         <tr>
  36                               <td class="checkbox1" style="width:20px"><input type="checkbox" v-model="selectAll"> All</td>
  37                               <td class="smallbox" style="with:250px;">TestCase Name</td>
  38                         </tr>
  39                     </thead>
  40                     <tbody>
  41                         <tr v-for="testcase in testcases">
  42                           <td><input class="checkbox1" style="width:20px" type="checkbox" v-model="selected" :value="testcase.testcase"> </td>
  43                           <td class="smallbox" style="with:250px;"><router-link :to="{ path: '/content', query: { suiteName: sname, caseName: testcase.testcase } }">{{testcase.testcase}}</router-link></td>
  44                         </tr>
  45                     </tbody>
  46                     <tfoot id="create-box" style="display: none">
  47                         <tr>
  48                             <td class="checkbox1" style="width:20px"><input type="checkbox"> </td>
  49                             <td class="smallbox" style="with:250px;"><input type="text" v-model="newCase" @keydown.enter="additem" ></td>
  50                         </tr>
  51                     </tfoot>
  52                   </table>
  53                 </div>
  54             </div>
  55         </div>
  56     </div>
  57     <hr />
  58     <div class="row">
  59       <div class="col-lg-12">
  60           <div class="ibox">
  61               <div class="ibox-title">
  62                   <h5 style="font-size:26px;margin-top: -3px;">Workflow</h5>
  63                   <div class="ibox-tools">
  64                       <a class="collapse-link">
  65                           <i class="fa fa-chevron-up"></i>
  66                       </a>
  67                       <a class="fullscreen-link">
  68                           <i class="fa fa-expand"></i>
  69                       </a>
  70                   </div>
  71               </div>
  72               <div class="ibox-content" style="padding-top: 30px;">
  73                 <div id="executing" class="row" style="padding: 0 30px 60px;">
  74                     <div class="col-md-offset-2 col-md-8">
  75                       <div class="table-responsive">
  76                         <table class="table text-center" style="margin-top: 30px;">
  77                           <thead>
  78                             <tr>
  79                               <th class="text-center">#</th>
  80                               <th class="text-center">testcase</th>
  81                               <th class="text-center">status</th>
  82                               <th class="text-center">operation</th>
  83                             </tr>
  84                           </thead>
  85                           <tbody>
  86                             <tr v-for="testcase in runTestcases">
  87                               <td>{{ testcase.id }}</td>
  88                               <td>{{ testcase.testcase }}</td>
  89                               <td><span class="badge" v-bind:class="'badge-' + statusClass(testcase.status)">{{ testcase.status }}</span></td>
  90                               <td>
  91                                 <div style="display: inline-block;min-width: 130px;">
  92                                   <button class="btn btn-primary btn-outline btn-xs fadeIn" v-on:click="runTestcase()" v-show="testcase.status == 'failed'">rerun</button>
  93                                   <button class="btn btn-primary btn-outline btn-xs fadeIn" v-on:click="runNextCase($event.target)" v-show="testcase.status == 'failed'">run next one</button>
  94                                 </div>
  95                               </td>
  96                             </tr>
  97                           </tbody>
  98                         </table>
  99                       </div>
 100                     </div>
 101                 </div>
 102                 <hr class="hr-line-solid">
 103                 <div class="row" style="margin-top: 60px;">
 104                   <wfresult v-bind:workflowId="workflowId" v-bind:wfloading='wfloading' v-bind:wfJson='wfJson' v-on:wfComplete="wfComplete = $event"></wfresult>
 105                 </div>
 106               </div>
 107           </div>
 108       </div>
 109     </div>
 110   </div>
 111 </template>
 112 <script>
 113 import wfresult from './workflow_graph/wfresult.vue'
 114 import showMessage from './message/showMessage.js'
 115 export default {
 116   name: 'testcase',
 117   data () {
 118     return {
 119       testcases: [],
 120       sname: this.$route.query.name,
 121       newCase:'',
 122       addstory:'',
 123       workflowId: '',
 124       wfloading: false,
 125       wfJson: '',
 126       selected: [],
 127       curRunningId: 0,
 128       runTestcases: [],
 129       wfComplete: false
 130     }
 131   },
 132   created: function() {
 133     var self = this;
 134     var msgTitle = "GET -- TESTCASES";
 135     var errorInfo = "Failed to get testcase list.";
 136     $.ajax({
 137       url: this.global.SERVER_ADDR + "testsuite/content",
 138       method:"GET",
 139       data:{
 140         suiteName:  this.$route.query.name
 141       },
 142       success:function (data) {
 143         if(data['code'] == 200) {
 144           self.testcases = data['result'];
 145         } else {
 146           showMessage(data['code'], msgTitle, errorInfo, data['error']);
 147         }
 148       },
 149       error: function(obj, status, msg) {
 150         showMessage(status, msgTitle, errorInfo, msg);
 151       }
 152     });
 153   },
 154   computed: {
 155     selectAll: {
 156       get: function () {
 157         return this.testcases ? this.selected.length == this.testcases.length : false;
 158       },
 159       set: function (value) {
 160         var selected = [];
 161         if (value) {
 162           this.testcases.forEach(function (testcase) {
 163             selected.push(testcase.testcase);
 164           });
 165         }
 166         this.selected = selected;
 167       }
 168     }
 169   },
 170   methods:{
 171     create: function () {
 172       var cbox = document.getElementById("create-box");
 173       cbox.style.display = "table-footer-group";
 174     },
 175     additem: function () {
 176       var self = this;
 177       var msgTitle = "CREATE -- TESTCASE";
 178       const caseName = self.newCase.trim();
 179       if(caseName)
 180       {
 181         $.ajax({
 182           url: this.global.SERVER_ADDR + "testcase/new",
 183           method:"POST",
 184           data:{
 185             suiteName: self.sname,
 186             caseName: caseName
 187           },
 188           success:function (data) {
 189             if(data['code'] == 200){
 190               self.testcases.push({
 191                 id: self.testcases.length + 1 ,
 192                 testcase: caseName,
 193               });
 194               showMessage(data['code'], msgTitle, "Create <strong>" + caseName + "</strong> succesfully!");
 195             } else {
 196               showMessage(data['code'], msgTitle, "Failed to create <strong>" + caseName + "</strong>!", data['error']);
 197             }
 198           },
 199           error: function(obj, status, msg) {
 200             showMessage(status, msgTitle, "Failed to create <strong>" + caseName + "</strong>!", msg);
 201           }
 202         });
 203       }
 204       var cbox = document.getElementById("create-box");
 205       cbox.style.display = "none";
 206       this.newCase = '';
 207     },
 208     deleteCases:function () {
 209       var self = this;
 210       var msgTitle = "DELETE -- TESTCASE";
 211       var deleteArr = self.selected.slice(0);
 212       self.testcases = self.testcases.filter(item => {
 213           for(var i in deleteArr) {
 214             if(item.testcase == deleteArr[i]) {
 215               return false;
 216             }
 217           }
 218           return true;
 219       });
 220       self.selected = [];
 221       for(var i in deleteArr)
 222       {
 223         $.ajax({
 224           url: this.global.SERVER_ADDR + "testcase/delete",
 225           method: "POST",
 226           data: {
 227             suiteName: self.sname,
 228             caseName: deleteArr[i]
 229           },
 230           success: function(data) {
 231             if(data['code'] == 200){
 232               showMessage(data['code'], msgTitle, "Delete <strong>" + deleteArr[i] + "</strong> succesfully!");
 233             } else {
 234               showMessage(data['code'], msgTitle, "Failed to delete <strong>" + deleteArr[i] + "</strong>!", data['error']);
 235             }
 236           },
 237           error: function(obj, status, msg) {
 238             showMessage(status, msgTitle, "Failed to delete <strong>" + deleteArr[i] + "</strong>!", msg);
 239           }
 240         });
 241       }
 242     },
 243     runMultiTestcase: function() {
 244       var self = this;
 245       var msgTitle = "RUN -- TESTCASES";
 246       self.runTestcases = [];
 247       if(self.selected.length == 0) {
 248         showMessage("warning", msgTitle, "please select one!");
 249         return;
 250       }
 251       for(var i=0; i < self.selected.length; i++) {
 252         var testcaseItem = {'id': i, 'testcase': '', 'status': "waiting"};
 253         testcaseItem['testcase'] = self.selected[i];
 254         self.runTestcases.push(testcaseItem);
 255       }
 256       self.curRunningId = 0;
 257       showMessage("info", msgTitle, "start to run <strong>testcases</strong>");
 258       self.runOneTestcase();
 259     },
 260     runOneTestcase: function() {
 261       var self = this;
 262       var msgTitle = "RUN -- TESTCASE";
 263       if (self.curRunningId == self.runTestcases.length) {
 264         self.curRunningId = 0;
 265         return;
 266       }
 267       self.wfComplete = false;
 268       var i = self.curRunningId;
 269       self.runTestcases[i]['status'] = "running";
 270       $.ajax({
 271           url: self.global.SERVER_ADDR + "execute/testcase",
 272           method: "POST",
 273           data: {
 274               "suiteName": self.sname,
 275               "caseName": self.runTestcases[self.curRunningId]['testcase']
 276           },
 277           beforeSend: function(XHR) {
 278               self.wfloading = true;
 279           },
 280           success: function(data) {
 281               if(data['code'] == 200) {
 282                   self.workflowId = data['result']['workflowId'];
 283                   $.ajax({
 284                       url: self.global.SERVER_ADDR + "story-content",
 285                       method: "GET",
 286                       data: {
 287                           "service":  self.sname,
 288                           "story": self.runTestcases[self.curRunningId]['testcase']
 289                       },
 290                       success: function(data) {
 291                           if(data['code'] == 200) {
 292                               self.wfJson = data['result']['content'];
 293                           } else {
 294                             showMessage(data['code'], msgTitle, "workflow.json get failed!");
 295                           }
 296                       },
 297                       error: function(obj, status, msg) {
 298                         showMessage(status, msgTitle, msg);
 299                       }
 300                   });
 301               } else {
 302                 var i = self.curRunningId;
 303                 self.runTestcases[i]['status'] = "failed";
 304                 self.wfloading = false;
 305                 showMessage(data['code'], msgTitle, "Failed to run <strong>" + self.runTestcases[i]['testcase'] + "</strong>", data['error']);
 306               }
 307           },
 308           error: function(obj, status, msg) {
 309             var i = self.curRunningId;
 310             self.runTestcases[i]['status'] = "failed";
 311             self.wfloading = false;
 312             showMessage(status, msgTitle, "Failed to run <strong>" + self.runTestcases[i]['testcase'] + "</strong>", msg);
 313           }
 314       });
 315     },
 316     statusClass: function(status) {
 317       if(status == "waiting") {
 318         return "success";
 319       }
 320       if(status == "running") {
 321         return "warning";
 322       }
 323       if(status == "pass") {
 324         return "primary";
 325       }
 326       if(status == "failed") {
 327         return "danger";
 328       }
 329     },
 330     runNextCase: function(obj) {
 331       $(obj).parent().css({"display": "none"});
 332       var i = this.curRunningId++;
 333       this.runOneTestcase();
 334     }
 335   },
 336   watch: {
 337     wfComplete: function(val) {
 338       if(val == false) return;
 339       this.wfloading = false;
 340       var i = this.curRunningId++;
 341       this.runTestcases[i]['status'] = "pass";
 342       this.runOneTestcase();
 343     }
 344   },
 345   components: {
 346     wfresult
 347   }
 348 }
 349 </script>