Skip to content

Commit

Permalink
fixes html line wrapping on long log lines and test descriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Holt Smith committed May 16, 2024
1 parent 1c9e188 commit 4fafb6a
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 8 deletions.
12 changes: 9 additions & 3 deletions packages/aft-reporting-html/src/templates/html-template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,8 +198,8 @@ function addResult(result) {
<div class="card card-info" name="\${result.description}-ps-results">
<div class="card-header p-0 bg-secondary d-flex justify-content-between flex-row text-light" onclick="toggleCard('\${result.description}-ps-results');">
<div class="p-1"><i class="bi bi-dash" aria-hidden="true"></i></div>
<div class="p-1 flex-grow-1"><span class="badge badge-default">Description:</span> \${result.description}</div>
<div class="p-1"><span class="badge rounded-pill bg-primary totalTests">\${passing + failing + notRun}</span> <span class="badge bg-success totalTestsPassing">\${passing}</span> <span class="badge bg-danger totalTestsFailing">\${failing}</span> <span class="badge bg-warning totalTestsNotRun">\${notRun}</span></div>
<div class="p-1 flex-grow-1 breakWrap"><span class="badge badge-default">Description:</span> \${result.description}</div>
<div class="p-1 noWrap"><span class="badge rounded-pill bg-primary totalTests">\${passing + failing + notRun}</span> <span class="badge bg-success totalTestsPassing">\${passing}</span> <span class="badge bg-danger totalTestsFailing">\${failing}</span> <span class="badge bg-warning totalTestsNotRun">\${notRun}</span></div>
</div>
<div class="card-body p-0" name="body-\${result.description}-ps-results"></div>
</div>
Expand Down Expand Up @@ -262,7 +262,7 @@ function addTests(container, tests) {
<td class="status">
<span class="badge badge-\${statusClass}">\${result.status}</span>
</td>
<td class="logs">
<td class="logs breakWrap">
\${result.logs.join('<br />')}
</td>
</tr>
Expand Down Expand Up @@ -308,6 +308,8 @@ div.vertical-align {
height:50px;
}
.breakWrap {
max-width: 100dvw;
overflow-wrap: break-word;
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
Expand All @@ -318,6 +320,10 @@ div.vertical-align {
-moz-hyphens: auto;
hyphens: auto;
}
.noWrap {
max-width: 100dvw;
white-space: nowrap;
}
</style>
</head>
<body class="w-100">
Expand Down
16 changes: 11 additions & 5 deletions packages/aft-reporting-html/src/templates/tmp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,8 @@
<div class="card card-info" name="${result.description}-ps-results">
<div class="card-header p-0 bg-secondary d-flex justify-content-between flex-row text-light" onclick="toggleCard('${result.description}-ps-results');">
<div class="p-1"><i class="bi bi-dash" aria-hidden="true"></i></div>
<div class="p-1 flex-grow-1"><span class="badge badge-default">Description:</span> ${result.description}</div>
<div class="p-1"><span class="badge rounded-pill bg-primary totalTests">${passing + failing + notRun}</span> <span class="badge bg-success totalTestsPassing">${passing}</span> <span class="badge bg-danger totalTestsFailing">${failing}</span> <span class="badge bg-warning totalTestsNotRun">${notRun}</span></div>
<div class="p-1 flex-grow-1 breakWrap"><span class="badge badge-default">Description:</span> ${result.description}</div>
<div class="p-1 noWrap"><span class="badge rounded-pill bg-primary totalTests">${passing + failing + notRun}</span> <span class="badge bg-success totalTestsPassing">${passing}</span> <span class="badge bg-danger totalTestsFailing">${failing}</span> <span class="badge bg-warning totalTestsNotRun">${notRun}</span></div>
</div>
<div class="card-body p-0" name="body-${result.description}-ps-results"></div>
</div>
Expand Down Expand Up @@ -258,7 +258,7 @@
<td class="status">
<span class="badge badge-${statusClass}">${result.status}</span>
</td>
<td class="logs">
<td class="logs breakWrap">
${result.logs.join('<br />')}
</td>
</tr>
Expand Down Expand Up @@ -304,6 +304,8 @@
height:50px;
}
.breakWrap {
max-width: 100dvw;
overflow-wrap: break-word;
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
Expand All @@ -314,6 +316,10 @@
-moz-hyphens: auto;
hyphens: auto;
}
.noWrap {
max-width: 100dvw;
white-space: nowrap;
}
</style>
</head>
<body class="w-100">
Expand Down Expand Up @@ -354,8 +360,8 @@
google.setOnLoadCallback(drawChart);
initialise([
{description: 'foo_is_my_name', tests: [{created: Date.now(), testId: 'C1234', status: 'passed', logs: ['this is log line 1', 'this is log line 2']}]},
{description: 'bar_is_my_name', tests: [{created: Date.now(), testId: 'C2345', status: 'failed', logs: ['this is log line 1']}]},
{description: 'baz_is_my_name', tests: [{created: Date.now(), status: 'untested', logs: []}, {created: Date.now(), testId: 'C3456', status: 'passed', logs: ['this is log line 1']}]}
{description: 'bar_is_my_name', tests: [{created: Date.now(), testId: 'C2345', status: 'failed', logs: ['_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1_this_is_log_line_1']}]},
{description: '_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name_baz_is_my_name', tests: [{created: Date.now(), status: 'untested', logs: []}, {created: Date.now(), testId: 'C3456', status: 'passed', logs: ['this is log line 1']}]}
]);
</script>
</html>

0 comments on commit 4fafb6a

Please sign in to comment.