mirror of
https://github.com/1j01/textual-paint.git
synced 2024-09-11 15:56:03 +03:00
35a6845ab5
I had to fix the layout of a few dialogs where elements decided they
wanted to start expanding a lot more than before.
I'm guessing this has to do with the changelog entry:
"Fixed relative units not always expanding auto containers"
https://github.com/Textualize/textual/pull/3059
The snapshot changes are basically bogus. The before and after are
visually identical, with the difference view showing all black.
Since there were a lot of switches to toggle and I had to wait for the
snapshot tests to run (slow!), I wrote a little automation to toggle
"Show difference" for all the results:
document.querySelectorAll("#flexSwitchCheckDefault").forEach((element)=> element.click())
It would be good to have this ability in the snapshot report UI itself,
maybe even replacing the individual toggles, although I'm not sure about
that, especially since it might be laggy toggling the blend modes with
a lot of test results. (I suppose if that was really an issue, it could
toggle all the visible test results and then toggle others as they come
into view, though that's a bit more complex.)
As for understanding the structural changes to the snapshots, I tried
making a visualization using hue, coloring according to the position
of a rect within the list of rects:
const richTerminals = document.querySelectorAll(".rich-terminal");
richTerminals.forEach(function(terminal) {
const rectElements = terminal.querySelectorAll("rect");
rectElements.forEach(function(rect, index) {
const fraction = index / (rectElements.length - 1);
const cycles = 40;
const hue = fraction * cycles * 360;
rect.style.fill = `hsl(${hue}, 100%, 50%)`;
});
});
This shows some difference, but it isn't very elucidating, since the
structural changes only show as gradual shifts in the hue, and affect
other rects even if said rects are identical, so it's subtle and messy.
Coloring based on a hash proves to actually highlight differences:
const richTerminals = document.querySelectorAll(".rich-terminal");
richTerminals.forEach(function(terminal) {
const rectElements = terminal.querySelectorAll("rect");
rectElements.forEach(function(rect, index) {
const hash = hash(rect.outerHTML);
const hue = (hash % 360 + 360) % 360;
rect.style.fill = `hsl(${hue}, 100%, 50%)`;
});
});
function hash(s) {
let hash = 0;
for (let i = 0; i < s.length; i++) {
const char = s.charCodeAt(i);
hash = (hash << 5) - hash + char;
}
return hash;
}
As for analyzing the differences now visible, eh, "maybe later."
|
||
|---|---|---|
| .. | ||
| test_snapshots.ambr | ||