protractor-e2e-coverage
Version:
Protractor plugin for E2E coverage
358 lines (329 loc) • 10.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="assets/semantic.css">
<link rel="stylesheet" href="assets/icon.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main container">
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<h1>Protractor E2E Coverage</h1>
</div>
<div class="four wide column">
<div class="ui two item menu">
<a href="https://www.npmjs.com/package/protractor-e2e-coverage" class="item">
Npm
</a>
<a href="https://github.com/markuswaltre/protractor-e2e-coverage" class="item">
Github
</a>
</div>
</div>
</div>
<div id="statistics" class="row"></div>
<h3>Coverage by element type</h3>
<div id="statistics_types" class="row"></div>
<h3>States</h3>
<div id="states" class="row"></div>
</div>
</div>
<script type="text/template" id="template_statistics">
<div class="eight wide column">
<div class="ui stacked center aligned segment">
<div class="ui statistic">
<div class="value">
<%- input.tested %> / <%- input.count %>
</div>
<div class="label">
Tested / Total elements
</div>
</div>
</div>
</div>
<div class="eight wide column">
<div class="ui stacked center aligned segment">
<div class="ui statistic
<% if(input.percentage <= 25) print('red') %>
<% if(input.percentage > 25 && input.percentage <= 75) print('orange') %>
<% if(input.percentage > 75) print('green') %>">
<div class="value">
<%- input.percentage %>%
</div>
<div class="label">
Coverage
</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="template_statistics_types">
<div class="sixteen wide column">
<% _.each(input, function(type, index) { %>
<div class="ui <% if(index == 0) print('top') %><% if(index == input.length - 1) print ('bottom') %> attached segment">
<div class="ui three column grid">
<div class="column">
<div class="ui horizontal segment">
<div class="ui mini horizontal statistic">
<div class="value">
<%- type.count %>
</div>
<div class="label">
<span class="ui label"><%- type.type %></span>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui horizontal segment">
<div class="ui mini horizontal statistic">
<div class="value">
<%- type.tested %>
</div>
<div class="label">
Tested
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui horizontal segment">
<div class="ui mini horizontal statistic">
<div class="value">
<%- type.percentage %>%
</div>
<div class="label">
Coverage
</div>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>
</script>
<script type="text/template" id="template_states">
<div class="sixteen wide column">
<div class="ui styled fluid accordion">
<% _.each(input, function(state) { %>
<div class="title">
<h1>
<i class="dropdown icon"></i>
<%- state.url %><br>
</h1>
<div class="ui two column grid">
<div class="column">
<div class="ui horizontal segment">
<div class="ui horizontal statistic">
<div class="value">
<%- state.count.seen %>
</div>
<div class="label">
Elements
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui horizontal segment">
<div class="ui horizontal statistic">
<div class="value">
<%- state.percentage.here %>%
</div>
<div class="label">
Coverage
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="ui hidden divider"></div>
<h3>Coverage</h3>
<div class="ui two column grid">
<div class="column">
<div class="ui stacked segment">
<div class="ui top attached label">Here</div>
<div class="ui two column grid">
<div class="column">
<div class="ui basic horizontal segment">
<div class="ui statistic">
<div class="value">
<%- state.count.tested %>
</div>
<div class="label">
Elements tested
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui basic horizontal segment">
<div class="ui statistic">
<div class="value">
<%- state.percentage.here %>%
</div>
<div class="label">
Percentage
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui stacked segment">
<div class="ui top attached label">Global</div>
<div class="ui two column grid">
<div class="column">
<div class="ui basic horizontal segment">
<div class="ui statistic">
<div class="value">
<%- state.count.tested_global %>
</div>
<div class="label">
Elements tested
</div>
</div>
</div>
</div>
<div class="column">
<div class="ui basic horizontal segment">
<div class="ui statistic
<% if(state.percentage.global <= 25) print('red') %>
<% if(state.percentage.global > 25 && state.percentage.global <= 75) print('orange') %>
<% if(state.percentage.global > 75) print('green') %>
">
<div class="value">
<%- state.percentage.global %>%
</div>
<div class="label">
Percentage
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<h3>Coverage per type</h3>
<table class="ui table">
<thead>
<tr>
<th>Type</th>
<th>Count</th>
<th>Tested here</th>
<th>Coverage here</th>
<th>Tested global</th>
<th>Coverage global</th>
</tr>
</thead>
<tbody>
<% _.each(state.types, function(type) { %>
<tr class="
<% if(type.percentage_global <= 25) print('error') %>
<% if(type.percentage_global > 25 && type.percentage_global <= 75) print('warning') %>
<% if(type.percentage_global > 75) print('positive') %>
">
<td><%- type.type %></td>
<td><%- type.seen %></td>
<td><%- type.here %></td>
<td><%- type.percentage_here %>%</td>
<td><%- type.global %></td>
<td><%- type.percentage_global %>%</td>
</tr>
<% }); %>
</tbody>
</table>
<div class="ui hidden divider"></div>
<h3>Elements</h3>
<div class="ui divided very relaxed list">
<% _.each(state.elements, function(elem) { %>
<div class="item">
<% if(elem.tested) { %>
<i class="icon green checkmark"></i>
<% } else { %>
<i class="icon red remove"></i>
<% } %>
<div class="content element-header" onClick="toggleElement(this, '.segment')">
<div class="header">
<span class="ui small label"><%- elem.type %></span>
</div>
<div class="ui very relaxed horizontal list">
<div class="item">
Tested: <%- elem.tested %>
</div>
<div class="item">
Coverage here <strong><%- elem.percentage.here %></strong>%
</div>
<div class="item">
Coverage global <strong><%- elem.percentage.global %></strong>%
</div>
</div>
</div>
<div class="ui segment tertiary" style="display: none;">
<div class="ui top attached segment">
<h4>Element</h4>
<a class="ui label pointing right">Hash</a>
<%- elem.hash %>
<div class="ui secondary segment">
<%= elem.visualElement %>
</div>
</div>
<div class="ui bottom attached secondary segment">
<code><%- elem.element %></code>
</div>
<h4>Events here</h4>
<div class="ui two column stackable grid segment">
<div class="column">
<div class="ui top left attached label">Tested</div>
<% _.each(elem.events, function(event) { %>
<div class="ui green horizontal label"><%- event %></div>
<% }); %>
</div>
<div class="column">
<div class="ui top left attached label">Not tested</div>
<% _.each(elem.eventsStats.unseen, function(event) { %>
<div class="ui red horizontal label"><%- event %></div>
<% }); %>
</div>
</div>
<h4>Events global</h4>
<div class="ui two column stackable grid segment">
<div class="column">
<div class="ui top left attached label">Tested</div>
<% _.each(elem.eventsStats.seen_global, function(event) { %>
<div class="ui green horizontal label"><%- event %></div>
<% }); %>
</div>
<div class="column">
<div class="ui top left attached label">Not tested</div>
<% _.each(elem.eventsStats.unseen_global, function(event) { %>
<div class="ui red horizontal label"><%- event %></div>
<% }); %>
</div>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<% }); %>
</div>
</div>
</script>
<script type="text/template" id="config"></script>
<script src="assets/jquery.js"></script>
<script src="assets/underscore.js"></script>
<script src="assets/accordion.js"></script>
<script src="script.js"></script>
</body>
</html>