mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
Add toggle for overlay mode
This commit is contained in:
Darren Burns
@@ -110,7 +110,7 @@ def pytest_sessionfinish(
|
||||
# is_windows_ci = sys.platform == "win32" and os.getenv("CI") is not None
|
||||
if diffs:
|
||||
diff_sort_key = attrgetter("file_similarity")
|
||||
diffs = list(reversed(sorted(diffs, key=diff_sort_key)))
|
||||
diffs = sorted(diffs, key=diff_sort_key)
|
||||
|
||||
conftest_path = Path(__file__)
|
||||
snapshot_template_path = (
|
||||
@@ -156,9 +156,8 @@ def pytest_terminal_summary(
|
||||
console = Console()
|
||||
if diffs:
|
||||
snapshot_report_location = config._textual_snapshot_html_report
|
||||
summary_panel = Panel(
|
||||
f"[b]Report available for {len(diffs)} snapshot test failures.[/]\n\nView the report at:\n\n[blue]{snapshot_report_location}[/]",
|
||||
title="[b red]Textual Snapshot Test Summary",
|
||||
padding=1,
|
||||
)
|
||||
console.print(summary_panel)
|
||||
console.rule("[b red]Textual Snapshot Report", style="red")
|
||||
console.print(f"\n[black on red]{len(diffs)} mismatched snapshots[/]\n"
|
||||
f"\n[b]View the [link=file://{snapshot_report_location}]failure report[/].\n")
|
||||
console.print(f"[dim]{snapshot_report_location}\n")
|
||||
console.rule(style="red")
|
||||
|
||||
@@ -6,10 +6,24 @@
|
||||
<title>Textual Snapshot Test Report</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
||||
<style>
|
||||
.overlay-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.diff-wrapper-snapshot {
|
||||
}
|
||||
|
||||
.diff-wrapper-actual {
|
||||
mix-blend-mode: difference;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-4" style="background-color:#F4F8F7;">
|
||||
<div class="col-8 p-4">
|
||||
@@ -47,14 +61,18 @@
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between">
|
||||
<div>
|
||||
<strong class="font-monospace">
|
||||
{{ diff.test_name }}
|
||||
</strong>
|
||||
<span class="text-muted">({{ "%.2f"|format(diff.file_similarity) }}% source similarity)</span>
|
||||
</div>
|
||||
<div class="text-muted">
|
||||
{{ diff.path }}:{{ diff.line_number }}
|
||||
<span class="font-monospace mt-1">
|
||||
<span class="fw-bold">{{ diff.test_name }}</span>
|
||||
<span class="text-muted px-2">
|
||||
{{ diff.path }}:{{ diff.line_number }}
|
||||
</span>
|
||||
</span>
|
||||
<div class="form-check form-switch mt-1">
|
||||
<input class="form-check-input" type="checkbox" role="switch"
|
||||
id="flexSwitchCheckDefault" onchange="toggleOverlayCheckbox(this, {{ loop.index0 }})">
|
||||
<label class="form-check-label text-muted" for="flexSwitchCheckDefault">
|
||||
Show difference
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -68,67 +86,77 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ diff.snapshot }}
|
||||
<div class="overlay-container">
|
||||
<div class="diff-wrapper-actual" id="diff-overlay-{{ loop.index0 }}" hidden>
|
||||
{{ diff.actual }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="diff-wrapper-snapshot">
|
||||
{{ diff.snapshot }}
|
||||
</div>
|
||||
<div class="w-100 d-flex justify-content-center mt-1">
|
||||
<span class="small">Historical snapshot</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal modal-lg fade" id="environmentModal" tabindex="-1"
|
||||
aria-labelledby="environmentModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="environmentModalLabel">More info for <span
|
||||
class="font-monospace">{{ diff.test_name }}</span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body overflow-auto">
|
||||
<h5>Textual App State</h5>
|
||||
<table class="table mb-4">
|
||||
<thead>
|
||||
</div>
|
||||
|
||||
|
||||
{# Modal with debug info: #}
|
||||
<div class="modal modal-lg fade" id="environmentModal" tabindex="-1"
|
||||
aria-labelledby="environmentModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="environmentModalLabel">More info for <span
|
||||
class="font-monospace">{{ diff.test_name }}</span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body overflow-auto">
|
||||
<h5>Textual App State</h5>
|
||||
<table class="table mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Variable</th>
|
||||
<th scope="col">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-monospace">app.console.legacy_windows</td>
|
||||
<td class="font-monospace">{{ diff.app.console.legacy_windows }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-monospace">app.console.size</td>
|
||||
<td class="font-monospace">{{ diff.app.console.size }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5>Environment (<span class="font-monospace">os.environ</span>)</h5>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Variable</th>
|
||||
<th scope="col">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, value in diff.environment.items() %}
|
||||
<tr>
|
||||
<th scope="col">Variable</th>
|
||||
<th scope="col">Value</th>
|
||||
<td class="font-monospace">{{ key }}</td>
|
||||
<td class="font-monospace">{{ value }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="font-monospace">app.console.legacy_windows</td>
|
||||
<td class="font-monospace">{{ diff.app.console.legacy_windows }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="font-monospace">app.console.size</td>
|
||||
<td class="font-monospace">{{ diff.app.console.size }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h5>Environment (<span class="font-monospace">os.environ</span>)</h5>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Variable</th>
|
||||
<th scope="col">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, value in diff.environment.items() %}
|
||||
<tr>
|
||||
<td class="font-monospace">{{ key }}</td>
|
||||
<td class="font-monospace">{{ value }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,5 +192,12 @@
|
||||
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script type="application/javascript">
|
||||
function toggleOverlayCheckbox(element, index) {
|
||||
const overlay = document.getElementById(`diff-overlay-${index}`)
|
||||
overlay.hidden = !overlay.hidden
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user