Skip to content

Commit fc6851d

Browse files
ConorMacBrideConorMacBride
committed
To Jinja with equivalent HTML output
1 parent 3319032 commit fc6851d

File tree

8 files changed

+316
-337
lines changed

8 files changed

+316
-337
lines changed

‎pytest_mpl/summary/html.py‎

Lines changed: 211 additions & 204 deletions
Large diffs are not rendered by default.

‎pytest_mpl/summary/templates/base.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,22 @@
66
<link href="styles.css" rel="stylesheet">
77
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
88
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9-
<title>{title}</title>
9+
<title>{{ results.title }}</title>
1010
</head>
11-
<body class="{classes}" id="results">
12-
{navbar}
11+
<body class="{{ results.classes | join(' ') }}" id="results">
12+
{% include 'navbar.html' %}
1313
<div class="album bg-light">
1414
<div class="container-fluid">
1515
<div id="noResultsAlert"></div>
1616
<div class="row list">
17-
{cards}
17+
{% filter indent(width=12) -%}
18+
{% include 'result.html' %}
19+
{%- endfilter %}
1820
</div>
1921
</div>
2022
</div>
2123
<div class="offcanvas offcanvas-start" tabindex="-1"></div>
22-
{filter}
24+
{% include 'filter.html' %}
2325
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
2426
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
2527
crossorigin="anonymous"></script>

‎pytest_mpl/summary/templates/filter.html‎

Lines changed: 25 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,41 @@ <h6>Sort and filter results</h6>
66
<div class="offcanvas-body">
77
<h5>Sort tests by...</h5>
88
<div class="btn-group m-2 pb-2" role="group" aria-label="Select sorting">
9-
<input type="radio" class="btn-check sort" data-sort="status-sort" data-order="desc" name="sort"
10-
id="sortstatus"
11-
autocomplete="off" checked>
12-
<label class="btn btn-outline-secondary" for="sortstatus">status</label>
13-
<input type="radio" class="btn-check sort" data-sort="collected-sort" data-order="asc" name="sort"
14-
id="sortcollected" autocomplete="off">
15-
<label class="btn btn-outline-secondary" for="sortcollected">collected</label>
16-
<input type="radio" class="btn-check sort" data-sort="test-name" name="sort" id="sortname"
17-
autocomplete="off">
18-
<label class="btn btn-outline-secondary" for="sortname">name</label>
19-
<input type="radio" class="btn-check sort" data-sort="rms-sort" data-order="desc" name="sort" id="sortrms"
20-
autocomplete="off">
21-
<label class="btn btn-outline-secondary" for="sortrms">RMS</label>
9+
{% macro sort_option(id, name, order='', default=false) -%}
10+
<input type="radio" class="btn-check sort" data-sort="{{ id }}"
11+
{% if order | length %}data-order="{{ order }}"{% endif %}
12+
name="sort" id="sort{{ name | lower }}"
13+
autocomplete="off"{% if default %} checked{% endif %}>
14+
<label class="btn btn-outline-secondary" for="sort{{ name | lower }}">{{ name }}</label>
15+
{%- endmacro -%}
16+
{{ sort_option('status-sort', 'status', 'desc', default=true) }}
17+
{{ sort_option('collected-sort', 'collected', 'asc') }}
18+
{{ sort_option('test-name', 'name') }}
19+
{{ sort_option('rms-sort', 'RMS', 'desc') }}
2220
</div>
2321
<form id="filterForm" onsubmit="return false;">
2422
<h5>Show tests which have...</h5>
2523
<div class="list-group m-2">
26-
<label class="list-group-item list-group-item-success">
27-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-passed"
24+
{% macro filter_option(id, name) -%}
25+
<label class="list-group-item list-group-item-{{ id | status_class }}">
26+
<input class="form-check-input me-1 filter" type="checkbox" value="" id="{{ id }}"
2827
onclick="applyFilters()">
29-
passed <span class="badge bg-light text-dark">?</span>
30-
</label>
31-
<label class="list-group-item list-group-item-danger">
32-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-failed"
33-
onclick="applyFilters()">
34-
failed <span class="badge bg-light text-dark">?</span>
35-
</label>
36-
<label class="list-group-item list-group-item-warning">
37-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="overall-skipped"
38-
onclick="applyFilters()">
39-
skipped <span class="badge bg-light text-dark">?</span>
28+
{{ name }} <span class="badge bg-light text-dark">?</span>
4029
</label>
30+
{%- endmacro -%}
31+
{{ filter_option('overall-passed', 'passed') }}
32+
{{ filter_option('overall-failed', 'failed') }}
33+
{{ filter_option('overall-skipped', 'skipped') }}
4134
</div>
4235
<div class="list-group m-2">
43-
<label class="list-group-item list-group-item-success">
44-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="image-match"
45-
onclick="applyFilters()">
46-
matching images <span class="badge bg-light text-dark">?</span>
47-
</label>
48-
<label class="list-group-item list-group-item-danger">
49-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="image-diff"
50-
onclick="applyFilters()">
51-
differing images <span class="badge bg-light text-dark">?</span>
52-
</label>
53-
<label class="list-group-item list-group-item-warning">
54-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="image-missing"
55-
onclick="applyFilters()">
56-
no baseline image <span class="badge bg-light text-dark">?</span>
57-
</label>
36+
{{ filter_option('image-match', 'matching images') }}
37+
{{ filter_option('image-diff', 'differing images') }}
38+
{{ filter_option('image-missing', 'no baseline image') }}
5839
</div>
5940
<div class="list-group m-2 mpl-hash">
60-
<label class="list-group-item list-group-item-success">
61-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-match"
62-
onclick="applyFilters()">
63-
matching hashes <span class="badge bg-light text-dark">?</span>
64-
</label>
65-
<label class="list-group-item list-group-item-danger">
66-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-diff"
67-
onclick="applyFilters()">
68-
differing hashes <span class="badge bg-light text-dark">?</span>
69-
</label>
70-
<label class="list-group-item list-group-item-warning">
71-
<input class="form-check-input me-1 filter" type="checkbox" value="" id="hash-missing"
72-
onclick="applyFilters()">
73-
no baseline hash <span class="badge bg-light text-dark">?</span>
74-
</label>
41+
{{ filter_option('hash-match', 'matching hashes') }}
42+
{{ filter_option('hash-diff', 'differing hashes') }}
43+
{{ filter_option('hash-missing', 'no baseline hash') }}
7544
</div>
7645
<div class="d-flex">
7746
<button type="submit" class="btn btn-primary m-2" data-bs-dismiss="offcanvas">Apply</button>

‎pytest_mpl/summary/templates/result.html‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,51 @@
1-
<div class="py-2 col-sm-6 col-lg-4 col-xxl-3 result {classes}">
2-
<span class="collected-sort" style="display:none">{id}</span>
3-
<span class="test-name" style="display:none">{module}.{test_name}</span>
4-
<span class="status-sort" style="display:none">{status_sort}</span>
5-
<span class="rms-sort" style="display:none">{rms_sort}</span>
6-
<span class="filter-classes" style="display:none">{classes}</span>
1+
{% for r in results.cards -%}
2+
<div class="py-2 col-sm-6 col-lg-4 col-xxl-3 result {{ r.classes | join(' ') }}">
3+
<span class="collected-sort" style="display:none">{{ r.id }}</span>
4+
<span class="test-name" style="display:none">{{ r.full_name }}</span>
5+
<span class="status-sort" style="display:none">{{ r.indexes['status'] }}</span>
6+
<span class="rms-sort" style="display:none">{{ r.indexes['rms'] }}</span>
7+
<span class="filter-classes" style="display:none">{{ r.classes | join(' ') }}</span>
78
<div class="card">
8-
<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{id}" role="button" aria-controls="offcanvas{id}">{image}</a>
9-
{offcanvas}
9+
<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ r.id }}" role="button"
10+
aria-controls="offcanvas{{ r.id }}">
11+
{% if r.diff_image -%}
12+
<div class="hover-image">
13+
<div class="diff-image">
14+
<img src="{{ r.diff_image }}" class="card-img-top" alt="diff image">
15+
</div>
16+
<div class="result-image">
17+
<img src="{{ r.result_image }}" class="card-img-top" alt="result image">
18+
</div>
19+
</div>
20+
{%- else -%}
21+
<img src="{{ r.result_image }}" class="card-img-top" alt="result image">
22+
{%- endif %}
23+
</a>
24+
{% filter indent(width=8) -%}
25+
{% include 'result_images.html' %}
26+
{%- endfilter %}
1027
<div class="card-body">
11-
<h6><small class="text-muted">{module}</small></h6>
12-
<h5 class="card-title">{test_name}</h5>
28+
<h6><small class="text-muted">{{ r.module }}</small></h6>
29+
<h5 class="card-title">{{ r.name }}</h5>
1330
<div class="d-flex justify-content-between align-items-center">
14-
{badge}
31+
<div class="btn-group status-badge" role="group" aria-label="status">
32+
<button class="btn btn-sm btn-{{ r.status | status_class }}" type="button"
33+
data-bs-toggle="offcanvas" data-bs-target="#offcanvas{{ r.id }}"
34+
aria-controls="offcanvas{{ r.id }}">
35+
{{ r.status | upper }}
36+
</button>
37+
{% for badge in r.badges -%}
38+
<button class="btn btn-sm btn-{{ badge['status'] | status_class }}" type="button"
39+
data-bs-toggle="offcanvas" data-bs-target="#offcanvas{{ r.id }}"
40+
aria-controls="offcanvas{{ r.id }}">
41+
<a data-bs-toggle="tooltip" data-bs-placement="top" title="{{ badge['tooltip'] }}">
42+
<img src="{{ badge['svg']}}.svg">
43+
</a>
44+
</button>
45+
{% endfor %}
46+
</div>
1547
</div>
1648
</div>
1749
</div>
1850
</div>
51+
{%- endfor %}

‎pytest_mpl/summary/templates/result_badge.html‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎pytest_mpl/summary/templates/result_badge_icon.html‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎pytest_mpl/summary/templates/result_diffimage.html‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎pytest_mpl/summary/templates/result_images.html‎

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,54 @@
1-
<div class="offcanvas offcanvas-bottom mpl-images" tabindex="-1" id="offcanvas{id}"
2-
aria-labelledby="offcanvas{id}Label">
1+
<div class="offcanvas offcanvas-bottom mpl-images" tabindex="-1" id="offcanvas{{ r.id }}"
2+
aria-labelledby="offcanvas{{ r.id }}Label">
33
<div class="offcanvas-header">
4-
<h6><small class="text-muted">{module}</small></h6>
4+
<h6><small class="text-muted">{{ r.module }}</small></h6>
55
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
66
</div>
77
<div class="offcanvas-body">
8-
<h5 class="card-title">{test_name}</h5>
8+
<h5 class="card-title">{{ r.name }}</h5>
99
<div class="row row-cols-1 row-cols-md-3 g-4 mt-3">
10+
{% macro image_card(file, name) -%}
1011
<div class="col py-3 m-0">
1112
<div class="card h-100">
12-
<div class="card-header">Baseline</div>
13-
{baseline_image}
14-
</div>
15-
</div>
16-
<div class="col py-3 m-0">
17-
<div class="card h-100">
18-
<div class="card-header">Diff</div>
19-
{diff_image}
20-
</div>
21-
</div>
22-
<div class="col py-3 m-0">
23-
<div class="card h-100">
24-
<div class="card-header">Result</div>
25-
{result_image}
13+
<div class="card-header">{{ name }}</div>
14+
{% if file -%}
15+
<img src="{{ file }}" class="card-img-top" alt="">
16+
{%- endif %}
2617
</div>
2718
</div>
19+
{%- endmacro -%}
20+
{{ image_card(r.baseline_image, 'Baseline') }}
21+
{{ image_card(r.diff_image, 'Diff') }}
22+
{{ image_card(r.result_image, 'Result') }}
2823
</div>
2924
<div class="row row-cols-1 row-cols-md-2 g-4">
3025
<div class="col">
31-
<div class="card text-white bg-{btn_class}">
32-
<div class="card-header">{status}</div>
26+
<div class="card text-white bg-{{ r.status | status_class }}">
27+
<div class="card-header">{{ r.status | upper }}</div>
3328
<div class="card-body">
34-
<pre class="card-text">{status_msg}</pre>
29+
<pre class="card-text">{{ r.status_msg }}</pre>
3530
</div>
3631
</div>
3732
</div>
3833
<div class="col">
39-
<div class="card text-white bg-{image_btn_class} mb-3 mpl-image">
40-
<div class="card-header">{image_status}</div>
34+
<div class="card text-white bg-{{ r.image_status | status_class }} mb-3 mpl-image">
35+
<div class="card-header">{{ r.image_status | image_status_msg }}</div>
4136
<div class="card-body">
42-
<div class="mb-3 rms">
43-
<label for="rms" class="form-label">RMS</label>
44-
<pre class="form-control rms-value" id="rms">{rms}</pre>
45-
</div>
46-
<div class="mb-3 tolerance">
47-
<label for="tolerance" class="form-label">Tolerance</label>
48-
<pre class="form-control tolerance-value" id="tolerance">{tolerance}</pre>
37+
{% macro pre_data(id, value, name) -%}
38+
<div class="mb-3 {{ id | replace('_', '-') }}">
39+
<label for="{{ id }}" class="form-label">{{ name }}</label>
40+
<pre class="form-control {{ id | replace('_', '-') }}-value" id="{{ id }}">{{ value }}</pre>
4941
</div>
42+
{%- endmacro -%}
43+
{{ pre_data('rms', r.rms_str, 'RMS') }}
44+
{{ pre_data('tolerance', r.tolerance, 'Tolerance') }}
5045
</div>
5146
</div>
52-
<div class="card text-white bg-{hash_btn_class} mb-3 mpl-hash">
53-
<div class="card-header">{hash_status}</div>
47+
<div class="card text-white bg-{{ r.hash_status | status_class }} mb-3 mpl-hash">
48+
<div class="card-header">{{ r.hash_status | hash_status_msg }}</div>
5449
<div class="card-body">
55-
<div class="mb-3 baseline-hash">
56-
<label for="baseline_hash" class="form-label">Baseline</label>
57-
<pre class="form-control baseline-hash-value" id="baseline_hash">{baseline_hash}</pre>
58-
</div>
59-
<div class="mb-3 result-hash">
60-
<label for="result_hash" class="form-label">Result</label>
61-
<pre class="form-control result-hash-value" id="result_hash">{result_hash}</pre>
62-
</div>
50+
{{ pre_data('baseline_hash', r.baseline_hash, 'Baseline') }}
51+
{{ pre_data('result_hash', r.result_hash, 'Result') }}
6352
</div>
6453
</div>
6554
</div>

0 commit comments

Comments
 (0)