kraken-mobile 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +8 -0
  3. data/README.md +169 -0
  4. data/bin/kraken-mobile +91 -0
  5. data/bin/kraken-mobile-calabash-android.rb +85 -0
  6. data/bin/kraken-mobile-generate.rb +19 -0
  7. data/bin/kraken-mobile-helpers.rb +48 -0
  8. data/bin/kraken-mobile-setup.rb +50 -0
  9. data/calabash-android-features-skeleton/my_first.feature +11 -0
  10. data/calabash-android-features-skeleton/step_definitions/kraken_steps.rb +1 -0
  11. data/calabash-android-features-skeleton/support/app_installation_hooks.rb +25 -0
  12. data/calabash-android-features-skeleton/support/app_life_cycle_hooks.rb +10 -0
  13. data/calabash-android-features-skeleton/support/env.rb +1 -0
  14. data/lib/kraken-mobile.rb +29 -0
  15. data/lib/kraken-mobile/constants.rb +25 -0
  16. data/lib/kraken-mobile/helpers/command_helper.rb +38 -0
  17. data/lib/kraken-mobile/helpers/devices_helper/adb_helper.rb +157 -0
  18. data/lib/kraken-mobile/helpers/devices_helper/manager.rb +43 -0
  19. data/lib/kraken-mobile/helpers/feature_analyzer.rb +28 -0
  20. data/lib/kraken-mobile/helpers/feature_grouper.rb +48 -0
  21. data/lib/kraken-mobile/helpers/reporter.rb +381 -0
  22. data/lib/kraken-mobile/models/device.rb +32 -0
  23. data/lib/kraken-mobile/protocols/file_protocol.rb +126 -0
  24. data/lib/kraken-mobile/runners/calabash/android/android_runner.rb +130 -0
  25. data/lib/kraken-mobile/runners/calabash/android/apk_signer.rb +14 -0
  26. data/lib/kraken-mobile/runners/calabash/android/cucumber.rb +27 -0
  27. data/lib/kraken-mobile/runners/calabash/android/kraken_hooks.rb +15 -0
  28. data/lib/kraken-mobile/runners/calabash/android/kraken_steps.rb +3 -0
  29. data/lib/kraken-mobile/runners/calabash/android/monkey_helper.rb +139 -0
  30. data/lib/kraken-mobile/runners/calabash/android/operations.rb +44 -0
  31. data/lib/kraken-mobile/runners/calabash/android/steps/communication_steps.rb +57 -0
  32. data/lib/kraken-mobile/runners/calabash/monkey/monkey_runner.rb +113 -0
  33. data/lib/kraken-mobile/runners/runner.rb +18 -0
  34. data/lib/kraken-mobile/version.rb +5 -0
  35. data/reporter/assets/css/bootstrap.min.css +6 -0
  36. data/reporter/assets/css/dataTables.bootstrap.min.css +1 -0
  37. data/reporter/assets/css/feature_index.css +449 -0
  38. data/reporter/assets/css/font-awesome.min.css +4 -0
  39. data/reporter/assets/css/responsive.dataTables.min.css +1 -0
  40. data/reporter/assets/css/scenario_index.css +461 -0
  41. data/reporter/assets/fonts/FontAwesome.otf +0 -0
  42. data/reporter/assets/fonts/fontawesome-webfont.eot +0 -0
  43. data/reporter/assets/fonts/fontawesome-webfont.svg +2671 -0
  44. data/reporter/assets/fonts/fontawesome-webfont.ttf +0 -0
  45. data/reporter/assets/fonts/fontawesome-webfont.woff +0 -0
  46. data/reporter/assets/fonts/fontawesome-webfont.woff2 +0 -0
  47. data/reporter/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  48. data/reporter/assets/fonts/glyphicons-halflings-regular.svg +288 -0
  49. data/reporter/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  50. data/reporter/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  51. data/reporter/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
  52. data/reporter/assets/images/kraken.png +0 -0
  53. data/reporter/assets/js/Chart.min.js +14 -0
  54. data/reporter/assets/js/bootstrap.min.js +7 -0
  55. data/reporter/assets/js/d3.chart.min.js +7 -0
  56. data/reporter/assets/js/d3.v3.min.js +5 -0
  57. data/reporter/assets/js/dataTables.bootstrap.min.js +8 -0
  58. data/reporter/assets/js/dataTables.responsive.min.js +26 -0
  59. data/reporter/assets/js/first-sankey.js +292 -0
  60. data/reporter/assets/js/gitgraph.min.js +10 -0
  61. data/reporter/assets/js/html5shiv.min.js +4 -0
  62. data/reporter/assets/js/jquery-3.2.1.min.js +4 -0
  63. data/reporter/assets/js/jquery.dataTables.min.js +167 -0
  64. data/reporter/assets/js/respond.min.js +5 -0
  65. data/reporter/assets/js/sankey.js +512 -0
  66. data/reporter/feature_report.html.erb +274 -0
  67. data/reporter/index.html.erb +711 -0
  68. data/reporter/scenario_report.html.erb +174 -0
  69. metadata +169 -0
@@ -0,0 +1,274 @@
1
+ <html lang="en">
2
+ <head>
3
+ <meta charset="UTF-8">
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
6
+ <title>Report</title>
7
+
8
+ <!-- Dependencies -->
9
+ <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
10
+ <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
11
+ <link href="../assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
12
+ <link href="../assets/css/responsive.dataTables.min.css" rel="stylesheet">
13
+ <link href="../assets/css/feature_index.css" rel="stylesheet">
14
+ </head>
15
+ <body>
16
+ <nav class="navbar">
17
+ <div class="container-fluid">
18
+ <p class="navbar-text">Report</p>
19
+ </div>
20
+ </nav>
21
+
22
+ <div class="main_conainer">
23
+ <div class="row">
24
+ <div class="col-md-6 col-lg-6 col-xs-12">
25
+ <div class="x_panel fixed_height_320">
26
+ <div class="x_title">
27
+ <h2>Features</h2>
28
+ <div class="clearfix"></div>
29
+ </div>
30
+ <div class="x_content">
31
+ <table class="chart">
32
+ <tr>
33
+ <th>
34
+ <p>Chart</p>
35
+ </th>
36
+ <th>
37
+ <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
38
+ <p class="">Status</p>
39
+ </div>
40
+ <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
41
+ <p class="">Progress</p>
42
+ </div>
43
+ </th>
44
+ </tr> <!-- Row Names -->
45
+ <tr>
46
+ <td class="chart">
47
+ <canvas id="feature-chart"></canvas>
48
+ <div class="total"><%= @features.count %></div>
49
+ </td>
50
+ <td>
51
+ <table class="tile_info">
52
+ <tr>
53
+ <td>
54
+ <p data-toggle="tooltip" data-placement="left" title="Features passed">
55
+ <i class="fa fa-check-circle passed-color"></i>
56
+ Passed
57
+ </p>
58
+ </td>
59
+ <td class="percentage"><%= @total_passed_features_percentage %> %</td>
60
+ </tr>
61
+ <tr>
62
+ <td>
63
+ <p data-toggle="tooltip" data-placement="left" title="Features failed">
64
+ <i class="fa fa-exclamation-circle failed-color"></i>
65
+ Failed
66
+ </p>
67
+ </td>
68
+ <td class="percentage"><%= @total_failed_features_percentage %> %</td>
69
+ </tr>
70
+ </table>
71
+ </td>
72
+ </tr> <!-- Row values -->
73
+ </table>
74
+ </div>
75
+ </div>
76
+ </div> <!-- Left data -->
77
+ <div class="col-md-6 col-lg-6 col-xs-12">
78
+ <div class="x_panel fixed_height_320">
79
+ <div class="x_title">
80
+ <h2>Scenarios</h2>
81
+ <div class="clearfix"></div>
82
+ </div>
83
+ <div class="x_content">
84
+ <table class="chart">
85
+ <tr>
86
+ <th>
87
+ <p>Chart</p>
88
+ </th>
89
+ <th>
90
+ <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
91
+ <p class="">Status</p>
92
+ </div>
93
+ <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
94
+ <p class="">Progress</p>
95
+ </div> <!-- Row Names -->
96
+ </th>
97
+ </tr>
98
+ <tr>
99
+ <td class="chart">
100
+ <canvas id="scenario-chart"></canvas>
101
+ <div class="total"><%= @total_scenarios %></div>
102
+ </td>
103
+ <td>
104
+ <table class="tile_info">
105
+ <tr>
106
+ <td>
107
+ <p data-toggle="tooltip" data-placement="left" title="Scenario passed">
108
+ <i class="fa fa-check-circle passed-color"></i>
109
+ Passed
110
+ </p>
111
+ </td>
112
+ <td class="percentage"><%= @total_passed_scenarios_percentage %> %</td>
113
+ </tr>
114
+ <tr>
115
+ <td>
116
+ <p data-toggle="tooltip" data-placement="left" title="Scenario failed">
117
+ <i class="fa fa-exclamation-circle failed-color"></i>
118
+ Failed
119
+ </p>
120
+ </td>
121
+ <td class="percentage"><%= @total_failed_scenarios_percentage %> %</td>
122
+ </tr> <!-- Row values -->
123
+ </table>
124
+ </td>
125
+ </tr>
126
+ </table>
127
+ </div>
128
+ </div>
129
+ </div> <!-- Right data -->
130
+
131
+ <div class="row">
132
+ <div class="col-md-12 col-sm-12 col-xs-12">
133
+ <div class="x_panel">
134
+ <div class="x_title">
135
+ <h2>Features overview</h2>
136
+ <div class="clearfix"></div>
137
+ </div>
138
+ <div class="x_content">
139
+ <div class="table-responsive">
140
+ <table id="features-table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
141
+ width="100%">
142
+ <thead>
143
+ <tr>
144
+ <th>Feature name</th>
145
+ <th>Status</th>
146
+ <th>Device</th>
147
+ <th>OS</th>
148
+ <th>App</th>
149
+ <th>Duration</th>
150
+ <th>Total</th>
151
+ <th>Passed</th>
152
+ <th>Failed</th>
153
+ </tr>
154
+ </thead> <!-- Table Header -->
155
+ <tbody>
156
+ <% @features.each do |f| %>
157
+ <tr>
158
+ <td>
159
+ <a href='<%= "./features_report/#{feature_id(f)}.html" %>'>
160
+ <%= f["name"] %>
161
+ </a>
162
+ </td>
163
+ <td class="text-center">
164
+ <% if feature_passed?(f) %>
165
+ <i class="fa fa-check-circle passed-color fa-lg" data-toggle="tooltip" data-placement="top" title="Passed">
166
+ <span>check-circle passed-color</span>
167
+ </i>
168
+ <% else %>
169
+ <i class="fa fa-exclamation-circle failed-color fa-lg" data-toggle="tooltip" data-placement="top" title="Failed">
170
+ <span>exclamation-circle failed-color</span>
171
+ </i>
172
+ <% end %>
173
+ </td>
174
+ <td>
175
+ <%= device.model %> - <%= device.id %>
176
+ </td>
177
+ <td>
178
+ <i class="fa fa-android fa-lg"><span>android</span></i>
179
+ </td>
180
+ <td>
181
+ <%= @apk_path %>
182
+ </td>
183
+ <td><%= format_duration(feature_duration(f)) %></td>
184
+ <td class="text-right "><%= f["elements"].count %></td>
185
+ <td class="text-right none"><%= passed_scenarios(f).count %></td>
186
+ <td class="text-right none"><%= failed_scenarios(f).count %></td>
187
+ </tr> <!-- Feature Row -->
188
+ <% end %>
189
+ </tbody>
190
+ </table>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <script src="../assets/js/jquery-3.2.1.min.js" ></script>
199
+ <script src="../assets/js/bootstrap.min.js"></script>
200
+ <script src="../assets/js/jquery.dataTables.min.js"></script>
201
+ <script src="../assets/js/dataTables.bootstrap.min.js"></script>
202
+ <script src="../assets/js/dataTables.responsive.min.js"></script>
203
+ <script src="../assets/js/Chart.min.js"></script>
204
+ <script>
205
+ $(document).ready(function () {
206
+ total_passed_features = parseInt("<%= total_passed_features(@features) %>");
207
+ total_failed_features = parseInt("<%= total_failed_features(@features) %>");
208
+ total_passed_scenarios = parseInt("<%= total_passed_scenarios(@features) %>");
209
+ total_failed_scenarios = parseInt("<%= total_failed_scenarios(@features) %>");
210
+
211
+ feature_data = [total_passed_features,total_failed_features];
212
+ scenario_data = [total_passed_scenarios,total_failed_scenarios]
213
+
214
+ $('#features-table').dataTable({
215
+ "order": [[0, "asc"]],
216
+ "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
217
+ "stateSave": true
218
+ });
219
+
220
+ var featureOptions = {
221
+ legend: false,
222
+ responsive: false
223
+ };
224
+
225
+ new Chart(document.getElementById("feature-chart"), {
226
+ type: 'doughnut',
227
+ tooltipFillColor: "rgba(51, 51, 51, 0.55)",
228
+ data: {
229
+ labels: [
230
+ "Passed",
231
+ "Failed"
232
+ ],
233
+ datasets: [{
234
+ data: feature_data,
235
+ backgroundColor: [
236
+ "#26B99A",
237
+ "#E74C3C"
238
+ ]
239
+ }]
240
+ },
241
+ options: featureOptions
242
+ });
243
+
244
+ var scenarioOptions = {
245
+ legend: false,
246
+ responsive: false
247
+ };
248
+
249
+ new Chart(document.getElementById("scenario-chart"), {
250
+ type: 'doughnut',
251
+ tooltipFillColor: "rgba(51, 51, 51, 0.55)",
252
+ data: {
253
+ labels: [
254
+ "Passed",
255
+ "Failed"
256
+ ],
257
+ datasets: [{
258
+ data: scenario_data,
259
+ backgroundColor: [
260
+ "#26B99A",
261
+ "#E74C3C"
262
+ ]
263
+ }]
264
+ },
265
+ options: scenarioOptions
266
+ });
267
+
268
+ $('body').tooltip({
269
+ selector: '[data-toggle="tooltip"]'
270
+ });
271
+ });
272
+ </script>
273
+ </body>
274
+ </html>
@@ -0,0 +1,711 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Report</title>
6
+
7
+ <!-- Dependencies -->
8
+ <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
9
+ <link href="./assets/css/font-awesome.min.css" rel="stylesheet">
10
+ <link href="./assets/css/dataTables.bootstrap.min.css" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ color: #73879C;
14
+ background: #F7F7F7;
15
+ font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
16
+ font-size: 13px;
17
+ font-weight: 400;
18
+ line-height: 1.471;
19
+ }
20
+
21
+ .main_conainer {
22
+ padding: 10px 20px 0;
23
+ }
24
+
25
+ i span {
26
+ display: none;
27
+ }
28
+
29
+ /* Navigation */
30
+ nav.navbar {
31
+ background: #EDEDED;
32
+ border-bottom: 1px solid #D9DEE4;
33
+ margin-bottom: 10px;
34
+ }
35
+
36
+ nav .navbar-brand {
37
+ border-right: 1px solid #D9DEE4;
38
+ color: #5A738E;
39
+ }
40
+
41
+ nav .navbar-text {
42
+ font-size: 18px;
43
+ height: 50px;
44
+ margin-bottom: 0;
45
+ margin-top: 0;
46
+ padding: 15px 0;
47
+ }
48
+
49
+ /* Table */
50
+ table {
51
+ width: 100%;
52
+ }
53
+
54
+ table.chart tr th:first-of-type {
55
+ width: 33.333%;
56
+ }
57
+
58
+ .table > thead > tr > th {
59
+ background: #F5F7FA;
60
+ }
61
+
62
+ table.tile h3, table.tile h4, table.tile span {
63
+ font-weight: bold;
64
+ vertical-align: middle !important;
65
+ }
66
+
67
+ table.tile th, table.tile td {
68
+ text-align: center;
69
+ }
70
+
71
+ table.tile th {
72
+ border-bottom: 1px solid #E6ECEE;
73
+ }
74
+
75
+ table.tile td {
76
+ padding: 5px 0;
77
+ }
78
+
79
+ table.tile td ul {
80
+ text-align: left;
81
+ padding-left: 0;
82
+ }
83
+
84
+ table.tile td ul li {
85
+ list-style: none;
86
+ width: 100%;
87
+ }
88
+
89
+ table.tile td ul li a {
90
+ width: 100%;
91
+ }
92
+
93
+ table.tile td ul li a big {
94
+ right: 0;
95
+ float: right;
96
+ margin-right: 13px;
97
+ }
98
+
99
+ table.tile_info {
100
+ width: 100%;
101
+ }
102
+
103
+ table.tile_info td {
104
+ text-align: left;
105
+ padding: 1px;
106
+ font-size: 15px;
107
+ }
108
+
109
+ table.tile_info td p {
110
+ white-space: nowrap;
111
+ overflow: hidden;
112
+ text-overflow: ellipsis;
113
+ margin: 0;
114
+ line-height: 28px;
115
+ }
116
+
117
+ table.tile_info td i {
118
+ display: inline-block;
119
+ margin-right: 8px;
120
+ font-size: 17px;
121
+ float: left;
122
+ width: 18px;
123
+ line-height: 28px;
124
+ text-align: center;
125
+ }
126
+
127
+ table.tile_info td:first-child {
128
+ width: 65%;
129
+ }
130
+
131
+ td span {
132
+ line-height: 28px;
133
+ }
134
+
135
+ table.tile_info td.percentage {
136
+ text-align: right;
137
+
138
+ }
139
+
140
+ /* chart in table */
141
+ table td.chart {
142
+ display: inline-block;
143
+ position: relative;
144
+ }
145
+
146
+ table td.chart #feature-chart,
147
+ table td.chart #scenario-chart,
148
+ table td.chart .total {
149
+ height: 140px;
150
+ margin: 15px 10px 10px 0;
151
+ width: 140px;
152
+ }
153
+
154
+ table td.chart .total {
155
+ display: inline-block;
156
+ position: absolute;
157
+ font-size: 2em;
158
+ height: 50px;
159
+ line-height: 50px;
160
+ top: 45px;
161
+ left: 45px;
162
+ text-align: center;
163
+ vertical-align: middle;
164
+ width: 50px;
165
+ }
166
+
167
+ /* colors */
168
+ .ambiguous-color {
169
+ color: #E74C3C !important;
170
+ }
171
+
172
+ .failed-color {
173
+ color: #E74C3C !important;
174
+ }
175
+
176
+ .not-defined-color {
177
+ color: #F39C12 !important;
178
+ }
179
+
180
+ .passed-color {
181
+ color: #1ABB9C !important;
182
+ }
183
+
184
+ .pending-color {
185
+ color: #FFD119 !important;
186
+ }
187
+
188
+ .skipped-color {
189
+ color: #3498DB !important;
190
+ }
191
+
192
+ /* backgrounds */
193
+ .ambiguous-background {
194
+ background: #b73122 !important;
195
+ }
196
+
197
+ .failed-background {
198
+ background: #E74C3C !important;
199
+ }
200
+
201
+ .not-defined-background {
202
+ background: #F39C12 !important;
203
+ }
204
+
205
+ .passed-background {
206
+ background: #1ABB9C !important;
207
+ }
208
+
209
+ .pending-background {
210
+ background: #FFD119 !important;
211
+ }
212
+
213
+ .skipped-background {
214
+ background: #3498DB !important;
215
+ }
216
+
217
+ /* general */
218
+ .x_panel {
219
+ position: relative;
220
+ width: 100%;
221
+ margin-bottom: 10px;
222
+ padding: 10px 17px;
223
+ display: inline-block;
224
+ background: #fff;
225
+ border: 1px solid #E6E9ED;
226
+ -webkit-column-break-inside: avoid;
227
+ -moz-column-break-inside: avoid;
228
+ column-break-inside: avoid;
229
+ opacity: 1;
230
+ transition: all .2s ease;
231
+ }
232
+
233
+ .x_title {
234
+ border-bottom: 2px solid #E6E9ED;
235
+ padding: 1px 5px 6px;
236
+ margin-bottom: 10px;
237
+ }
238
+
239
+ .x_title .filter {
240
+ width: 40%;
241
+ float: right;
242
+ }
243
+
244
+ .x_title h2 {
245
+ margin: 5px 0 6px;
246
+ float: left;
247
+ font-size: 24px;
248
+ font-weight: 400;
249
+ display: block;
250
+ text-overflow: ellipsis;
251
+ overflow: hidden;
252
+ white-space: nowrap;
253
+ }
254
+
255
+ .fixed_height_320 {
256
+ height: 320px;
257
+ }
258
+
259
+ .x_title h2 small {
260
+ margin-left: 10px;
261
+ }
262
+
263
+ .x_title span {
264
+ color: #BDBDBD;
265
+ }
266
+
267
+ .x_content {
268
+ padding: 0 5px 6px;
269
+ position: relative;
270
+ width: 100%;
271
+ float: left;
272
+ clear: both;
273
+ margin-top: 5px;
274
+ overflow-x: scroll;
275
+ }
276
+
277
+ .x_content h4 {
278
+ font-size: 16px;
279
+ font-weight: 500;
280
+ }
281
+
282
+ .panel_toolbox {
283
+ float: right;
284
+ margin: 5px 0 0;
285
+ min-width: 70px;
286
+ }
287
+
288
+ .panel_toolbox > li {
289
+ float: right;
290
+ }
291
+
292
+ .panel_toolbox > li > a {
293
+ cursor: pointer;
294
+ }
295
+
296
+ .panel_toolbox > li > a {
297
+ padding: 5px;
298
+ color: #C5C7CB;
299
+ font-size: 14px;
300
+ }
301
+
302
+ .panel_toolbox > li > a:hover {
303
+ background: #F5F7FA;
304
+ }
305
+
306
+ .page-title {
307
+ width: 100%;
308
+ padding: 10px 0 30px 0;
309
+ }
310
+
311
+ .page-title {
312
+ display: block;
313
+ }
314
+
315
+ .page-title h1 {
316
+ margin: 9px 0;
317
+ }
318
+
319
+ .page-title .title_right {
320
+ width: 55%;
321
+ float: left;
322
+ display: block;
323
+ }
324
+
325
+ .page-title .title_right .pull-right {
326
+ margin: 10px 0;
327
+ }
328
+
329
+ .page-title p {
330
+ margin-left: 15px;
331
+ }
332
+
333
+ .dashboard-widget-content {
334
+ padding-top: 9px;
335
+ }
336
+
337
+ .dashboard-widget-content .sidebar-widget {
338
+ width: 50%;
339
+ display: inline-block;
340
+ vertical-align: top;
341
+ background: #fff;
342
+ border: 1px solid #abd9ea;
343
+ border-radius: 5px;
344
+ text-align: center;
345
+ float: right;
346
+ padding: 2px;
347
+ margin-top: 10px;
348
+ }
349
+
350
+ ul.quick-list {
351
+ padding-left: 0;
352
+ display: inline-block;
353
+ }
354
+
355
+ ul.quick-list li,
356
+ table.quick-list tr {
357
+ padding-left: 10px;
358
+ list-style: none;
359
+ margin: 0;
360
+ padding-bottom: 6px;
361
+ padding-top: 4px;
362
+ white-space: nowrap;
363
+ text-overflow: ellipsis;
364
+ overflow: hidden;
365
+ }
366
+
367
+ ul.quick-list li .meta-data-title,
368
+ table.quick-list td.meta-data-title {
369
+ display: inline-block;
370
+ min-width: 75px;
371
+ font-weight: bold;
372
+ }
373
+
374
+ ul.quick-list li span,
375
+ table.quick-list td {
376
+ line-height: 28px;
377
+ }
378
+
379
+ ul.quick-list li,
380
+ table.quick-list tr {
381
+ border-bottom: 1px solid #efefef;
382
+ padding: 0.5em 0;
383
+ }
384
+
385
+ ul.quick-list li:last-child,
386
+ table.quick-list tr:last-child {
387
+ border-bottom: none;
388
+ }
389
+
390
+ ul.quick-list li i {
391
+ padding-right: 10px;
392
+ color: #757679;
393
+ }
394
+
395
+ .screenshot{
396
+ max-height: 100%;
397
+ max-width: 100%;
398
+ }
399
+
400
+ /* Features / Scenarios */
401
+ ul.panel_toolbox li .step {
402
+ border-radius: 50%;
403
+ color: #ffffff;
404
+ display: block;
405
+ font-size: 14px;
406
+ height: 30px;
407
+ margin-right: 5px;
408
+ padding: 5px;
409
+ text-align: center;
410
+ width: 30px;
411
+ }
412
+
413
+ .scenario-step-container {
414
+ margin-bottom: 10px;
415
+ }
416
+
417
+ .scenario-step-container .label {
418
+ display: inline-block;
419
+ text-align: center;
420
+ width: 30px;
421
+ }
422
+
423
+ .scenario-step-container .text {
424
+ display: inline;
425
+ }
426
+
427
+ .scenario-step-container .duration {
428
+ position: relative;
429
+ float: right;
430
+ }
431
+
432
+ .scenario-step-container .text .keyword.highlight {
433
+ font-size: 1.2em;
434
+ font-weight: 700;
435
+ }
436
+
437
+ .scenario-scroll-bar {
438
+ overflow-x: scroll;
439
+ }
440
+
441
+ .scenario-step-collapse,
442
+ .scenario-scroll-bar .arguments {
443
+ margin-left: 30px;
444
+ width: auto;
445
+ }
446
+
447
+ /* media */
448
+ @media (max-width: 1200px) {
449
+ .x_title h2 {
450
+ width: 70%;
451
+ }
452
+ }
453
+
454
+ @media (max-width: 640px) {
455
+ .x_title h2 {
456
+ width: 100%;
457
+ }
458
+ }
459
+
460
+ /* override */
461
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
462
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
463
+ background-color: #1ABB9C;
464
+ }
465
+
466
+ table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
467
+ background-color: #E74C3C;
468
+ }
469
+
470
+ .created-by {
471
+ padding: 50px 0;
472
+ text-align: center;
473
+ }
474
+
475
+ .x_title {
476
+ margin-top: 20px;
477
+ margin-bottom: 30px;
478
+ }
479
+
480
+ .feature-flow {
481
+ background-color: white;
482
+ margin-bottom: 30px;
483
+ -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
484
+ box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
485
+ }
486
+
487
+ .feature-flow-content {
488
+ overflow-x: scroll;
489
+ }
490
+
491
+ /* Device List */
492
+
493
+ .ui-card {
494
+ background: #fff;
495
+ border: 1px solid #dfe5ef;
496
+ border-radius: 8px;
497
+ margin: 0 20px 20px 20px;
498
+ padding: 70px 5px 50px 10px;
499
+ -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
500
+ box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
501
+ }
502
+
503
+ .ui-card:hover {
504
+ -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
505
+ box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
506
+ }
507
+
508
+ .device-container {
509
+ width: 100%;
510
+ }
511
+
512
+ .ui-card {
513
+ text-align: center;
514
+ }
515
+
516
+ .device-os-icon i {
517
+ color: #324057;
518
+ font-size: 28px;
519
+ }
520
+
521
+ .device-title {
522
+ word-wrap: break-word;
523
+ font-size: 28px;
524
+ font-weight: 300;
525
+ color: #324057;
526
+ margin-top: 25px;
527
+ margin-bottom: 50px;
528
+ }
529
+
530
+ .device-info {
531
+ font-size: 14px;
532
+ font-weight: 300;
533
+ color: #8492a6;
534
+ margin-bottom: 10px;
535
+ word-wrap: break-word;
536
+ }
537
+
538
+ a {
539
+ text-decoration: none !important;
540
+ }
541
+
542
+ .result-btn {
543
+ margin-top: 35px;
544
+ }
545
+
546
+ .phone_container {
547
+ padding-top: 30px;
548
+ padding-bottom: 30px;
549
+ -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
550
+ box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
551
+ }
552
+
553
+ .phone {
554
+ margin: 0 auto;
555
+ border: 15px solid #000000;
556
+ border-radius: 36px;
557
+ height: 270px;
558
+ width: 160px;
559
+ overflow: hidden;
560
+ }
561
+
562
+ .phone_image {
563
+ width: 100%;
564
+ height: 100%;
565
+ object-fit: scale-down;
566
+ }
567
+ </style>
568
+
569
+ <script src="./assets/js/d3.v3.min.js"></script>
570
+ <script src="./assets/js/first-sankey.js"></script>
571
+ <script src="./assets/js/d3.chart.min.js"></script>
572
+ <script src="./assets/js/sankey.js"></script>
573
+ <style>
574
+ #chart {
575
+ font: 13px sans-serif;
576
+ height: 500px;
577
+ }
578
+ .node rect {
579
+ fill-opacity: .9;
580
+ shape-rendering: crispEdges;
581
+ stroke-width: 0;
582
+ }
583
+ .link {
584
+ fill: none;
585
+ stroke: #000;
586
+ stroke-opacity: .2;
587
+ }
588
+ </style>
589
+ </head>
590
+ <body>
591
+ <div class="main_conainer">
592
+ <div class="container-fluid devices-list">
593
+ <div class="x_title">
594
+ <h2>Devices List</h2>
595
+ <div class="clearfix"></div>
596
+ </div>
597
+ <div class="row">
598
+ <% @devices.each do |device| %>
599
+ <div class="ui-card col-md-3">
600
+ <div class="container device-container">
601
+ <div class="row device-os-icon">
602
+ <i class="fa fa-android fa-lg"></i>
603
+ </div>
604
+ <div class="row device-title"><%= device['model'] %></div>
605
+ <div class="row device-info">ID - <%= device['id'] %></div>
606
+ <div class="row device-info">SDK Version - <%= device['sdk'] %></div>
607
+ <div class="row device-info">Screen Size - <%= "#{device['screen_height']}x#{device['screen_width']}" %></div>
608
+ <div class="row device-info result-btn">
609
+ <a href='<%= "./#{device['id']}/feature_report.html" %>'>See Results</a>
610
+ </div>
611
+ </div>
612
+ </div>
613
+ <% end %>
614
+ </div>
615
+ </div>
616
+ <% @features_report.values.each_with_index do |element, index| %>
617
+ <div class="container-fluid">
618
+ <div class="row">
619
+ <div class="x_title">
620
+ <h2 id="chart_row<%= index + 1 %>"></h2>
621
+ <div class="clearfix"></div>
622
+ </div>
623
+ </div>
624
+ <div class="row feature-flow">
625
+ <div id="chart<%= index + 1 %>"></div>
626
+ </div>
627
+ </div>
628
+ <% end %>
629
+ </div>
630
+
631
+ <script src="./assets/js/jquery-3.2.1.min.js" ></script>
632
+ <script src="./assets/js/bootstrap.min.js"></script>
633
+ <script>
634
+ d3.json("./assets/js/data.json", function(error, json) {
635
+ for(var i = 0; i < json.length; i++) {
636
+ let jsonObject = json[i];
637
+ let devicesSet = new Set([]);
638
+ let devicesHash = {};
639
+ for(var k = 0; k < jsonObject.links.length; k++) {
640
+ let link = jsonObject.links[k];
641
+ devicesSet.add(link.owner);
642
+ devicesHash[link.owner] = link.owner_model
643
+ }
644
+ devices = Array.from(devicesSet);
645
+ // GRAPH
646
+ var height = 150*(devices.length-1);
647
+ var c20c = d3.scale.category10();
648
+ d3.select("#chart_row" + (i+1))
649
+ .text(jsonObject["name"])
650
+
651
+ let chartId = "#chart" + (i+1);
652
+ var svg = d3.select(chartId)
653
+ .style("height", height + "px")
654
+ .append("svg");
655
+
656
+ var chart = svg.chart("Sankey.Path");
657
+
658
+ chart
659
+ .name(label)
660
+ .colorNodes(function(name, node) {
661
+ color = "#ff6961";
662
+ if(node.id == "empty") {
663
+ color = "#9f9fa3"
664
+ } else if(node.status === "passed") {
665
+ color = "#77dd77";
666
+ }
667
+ return color;
668
+ })
669
+ .colorLinks(function(link) {
670
+ return c20c(link.owner);
671
+ })
672
+ .nodeWidth(10)
673
+ .nodePadding(10)
674
+ .spread(true)
675
+ .draw(jsonObject);
676
+
677
+ // LEGEND
678
+ let legendRectSize = 10;
679
+ let legendSpacing = 10
680
+
681
+ var legend = svg
682
+ .append("g")
683
+ .selectAll("g")
684
+ .data(Object.keys(devicesHash))
685
+ .enter()
686
+ .append('g')
687
+ .attr('class', 'legend')
688
+ .attr('transform', function(d, i) {
689
+ var height = legendRectSize;
690
+ var x = 10;
691
+ var y = 10 + (i * height) + i*5;
692
+ return 'translate(' + x + ',' + y + ')';
693
+ });
694
+
695
+ legend.append('rect')
696
+ .attr('width', legendRectSize)
697
+ .attr('height', legendRectSize)
698
+ .style('fill', function(d) {
699
+ return c20c(d);
700
+ })
701
+ .style('opacity', .2)
702
+
703
+ legend.append('text')
704
+ .attr('x', legendRectSize + 5)
705
+ .attr('y', 10)
706
+ .text(function(d) { return devicesHash[d]; });
707
+ }
708
+ });
709
+ </script>
710
+ </body>
711
+ </html>