mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
bbd811d671
* Support multiple CSS paths * Update a type to match docstring * Ensure the demo app still works * Use absolute paths in tests to (hopefully) appease Windows * Notes about CSS changes in guide/docstrings, small grammar/typos fixes * Move snapshot apps into snapshot_tests dir, improve messaging in snapshot output, add test for multiple css files interacting with classvar CSS * Ensure consistent snapshot naming cross-platform * Use rpartition instead of partition in import_app * Fix handling of import_app when colon in arg * Support paths containing Windows drive names in import_app * Add note on new relative paths in snap_compare * Update docs/guide/CSS.md Co-authored-by: Will McGugan <willmcgugan@gmail.com> * Fix formatting * Update CHANGELOG to mention CSS_PATH supporting a list Co-authored-by: Will McGugan <willmcgugan@gmail.com>
221 lines
11 KiB
Django/Jinja
221 lines
11 KiB
Django/Jinja
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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-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">
|
|
<h4>
|
|
<strong>Textual</strong> Snapshot Tests
|
|
</h4>
|
|
<span class="text-muted">Showing diffs for {{ fails }} mismatched snapshot(s)</span>
|
|
</div>
|
|
<div class="col p-4">
|
|
<div class="w-100 d-flex justify-content-end mb-1 mt-2">
|
|
<span class="text-danger">
|
|
<strong>{{ diffs | length }}</strong> snapshots changed
|
|
</span>
|
|
<span class="text-muted mx-2">·</span>
|
|
<span class="text-success">
|
|
<strong>{{ passes }}</strong> snapshots matched
|
|
</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" aria-label="Segment one"
|
|
style="width: {{ fail_percentage }}%"
|
|
aria-valuenow="{{ fails }}" aria-valuemin="0" aria-valuemax="{{ num_snapshot_tests }}"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" aria-label="Segment two"
|
|
style="width: {{ pass_percentage }}%"
|
|
aria-valuenow="{{ num_snapshot_tests }}" aria-valuemin="0"
|
|
aria-valuemax="{{ num_snapshot_tests }}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% for diff in diffs %}
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between">
|
|
<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>
|
|
{% if diff.snapshot != "" %}
|
|
<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>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
{{ diff.actual }}
|
|
<div class="w-100 d-flex justify-content-center mt-1">
|
|
<span class="small">Output from test (<a href="#" class="link-primary mb-0"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#environmentModal">More info</a>)</span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="overlay-container">
|
|
<div class="diff-wrapper-actual" id="diff-overlay-{{ loop.index0 }}" hidden>
|
|
{{ diff.actual }}
|
|
</div>
|
|
</div>
|
|
<div class="diff-wrapper-snapshot">
|
|
{% if diff.snapshot != "" %}
|
|
{{ diff.snapshot }}
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4>No history for this test</h4>
|
|
<p class="lead">If you're happy with the content on the left,
|
|
save it to disk by running pytest with the <code>--snapshot-update</code> flag.</p>
|
|
<h5>Unexpected?</h5>
|
|
<p class="lead">
|
|
Snapshots are named after the name of the test you call <code>snap_compare</code> in by default.
|
|
<br>
|
|
If you've renamed a test, the association between the snapshot and the test is lost,
|
|
and you'll need to run with <code>--snapshot-update</code> to associate the snapshot
|
|
with the new test name.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if diff.snapshot != "" %}
|
|
<div class="w-100 d-flex justify-content-center mt-1">
|
|
<span class="small">
|
|
Historical snapshot
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="row" style="background-color:#F4F8F7;">
|
|
<div class="col">
|
|
<div class="card bg-light">
|
|
<div class="card-body">
|
|
<p class="card-text">If you're happy with the test output, run <span class="font-monospace text-primary">pytest</span> with the <span
|
|
class="font-monospace text-primary">--snapshot-update</span> flag to update the snapshot.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="w-100 d-flex p-4 justify-content-center">
|
|
<p class="text-muted">Report generated at UTC {{ now }}.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
|
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>
|