TIP게시판

제목 테스트 결과를 보다 깔끔하게 보는 방법
글쓴이 홍구2 작성시각 2019/01/10 21:02:12
댓글 : 1 추천 : 0 스크랩 : 0 조회수 : 9963   RSS

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

깔끔하고 정제된듯한 느낌..

잘 쓰겠습니다. ^^