TIP게시판
| 제목 | 테스트 결과를 보다 깔끔하게 보는 방법 | ||
|---|---|---|---|
| 글쓴이 | 홍구2 | 작성시각 | 2019/01/10 21:02:12 |
|
|
|||
|
CI3에 있는 기본 report() 페이지가 디자인이 별로라서, 조금 더 직관적이고 보기 편하기 위해 만들어 보았습니다.
모든 테스트가 성공했을 때는 아래와 같이 보이도록 했습니다.
테스트 중 하나라도 실패한 경우 아래와 같이 표시됩니다.
##### 사용방법 ######
/* in test controller */
// 아래와 같이 테스트 결과를 result 배열을 프론트에 보내주세요.
$this->load->view('test_view', [
'result' => $this->unit->result()
]);
/* file: test_view.php */
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>TestView</title>
<style>
#app {
padding: 50px;
width: 100vw;
height: 100vh;
}
#app.some-failed {
background: #bf360c;
color:#fff;
}
#app.some-failed .label-passed {
background:rgba(0,0,0,0.3);
}
#app small {
font-weight: 400;
opacity: 0.6;
}
#app table th {
vertical-align: middle;
}
#app table td {
font-weight:bold;
}
#app table th,
#app table td {
border-top-color: rgba(0,0,0,0.1);
}
#app .label {
font-size: 15px;
display: inline-block;
width: 75px;
padding: 6px 0;
}
#app .label-passed {
background:#5cb85c;
}
#app .label-failed {
background: white;
color: #d9534f;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app" :class="{'some-failed': failed > 0}">
<div id="dashboard">
</div>
<table class="table">
<tbody>
<tr v-for="(row, index) in rows">
<th>
<span :class="{label:true, 'label-passed': row['Result']==='Passed', 'label-failed': row['Result']!=='Passed'}">
{{row['Result']}}
</span>
</th>
<td>
{{row['Test Name']}}
<div>
<small>{{row['File Name']}}:{{row['Line Number']}}</small>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
rows: <?php echo json_encode($result); ?>,
},
mounted: function() {
document.title = this.failed > 0 ? this.failed + ' Tests Failed' : 'All Passed';
},
computed: {
failed: function() {
var failed = this.rows.filter(function(row){
return row.Result !== 'Passed'
}).length;
return failed;
},
}
})
</script>
</html>
|
|||
| 다음글 | CI3에서 CSRF 와 AJAX 사용시 팁.. (2) | ||
| 이전글 | now() 와 sysdate()의 차이 (4) | ||
댓글
|
한대승(불의회상)
/
2019/01/11 09:02:49 /
추천
0
|
깔끔하고 정제된듯한 느낌..
잘 쓰겠습니다. ^^