I added another ANSI art sample, which now shows up in the gallery app's
snapshot, invalidating the test. Maybe I should stop adding sample art.
Or better yet, I should create a separate folder with just two files
so that I can add sample art freely without breaking the tests:
- one file that's small and centered
- one file that's large with scrollbars
`pytest --snapshot-update`
This does not change anything visually, but the snapshots are changed
because the IDs use a hash which includes color names, and the color
names changed from rgb() style to hex.
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."
...but NOT the Free-Form Select test! I'm noticing that when marked
as skipped, running with --snapshot-update deletes the snapshot.
So neither xfail or skip (or xfail with run=False) is a good solution.
It's almost as if people don't normally do TDD with snapshots.
Anyways, HOPEFULLY I can move on now, to actually fixing things,
like the Polygon tool, and new bugs I've found while adding tests.
Make version info static when running in pytest.
I also tried adding in test_snapshots.py:
import textual_paint
textual_paint.__version__ = "snapshot test edition 1"
import textual_paint.__init__ as init
init.__version__ = "snapshot test edition 2"
which seemed to have no effect.
Since I already have special case logic for __version__ in __init__.py,
I'm reasonably happy with this solution.
I'm basically doing TDD to snapshot testing!
I'm creating tests that don't pass yet, setting up an expectation
that the app match the given screenshots, which is funny in a nice
"improper hierarchy" sort of way, but it's possible because I do
actually have the app rendering how I want, just only in isolation.
If I run the ascii_only tests by themselves, I can get good results
from them, but running them interwoven with default Unicode-using UI
tests doesn't work yet, since the ASCII-only mode permanently changes
how certain widgets render, for the life of the process, so that's
what I'm applying TDD to: making it toggleable at runtime.
I commented out the Unicode tests, and uncommented the ASCII-only tests,
renamed test_snapshots.ambr to test_snapshots_ascii.ambr,
reverted the changes to test_snapshots.ambr to get the Unicode version,
ran my new merge_ambr.py script to join the sets of snapshots,
then replaced test_snapshots.ambr with test_snapshots_merged.ambr
Finally, I uncommented both sets of tests, and I'm ready to do TDD!
I already fixed my first bug caught by the snapshot testing!
These variables were intended as constants, but were being mutated.
I recall writing it as `prefix = (...).stylize_before(...)` and then
moving it to a new line when I realized it was mutation-style method,
not so much the chaining-style factory that I wanted, but I conceived
of it too much as a stylistic distinction in the moment, looking back.
Mutation style means mutation!
Side note: tests also showed a spurious change of a cursor blinking.
I don't really know whether that's in this changeset or not, because
the workflow involves re-running the tests to update the baseline, and
the nice visual diffs provided in the snapshot report aren't available
when viewing the commit diff.
1. If the SVGs were separate files, I could see the diffs on GitHub
or in GitHub Desktop, and maybe some other Git clients.
It would also make it a lot easier to simply view the baselines,
which is useful in general.
2. It would be nice if built-in components didn't cause spurious diffs,
including the Input's cursor blinking and the Header's clock ticking.
I already removed the clock from my gallery app, because it's a sort
of trivial decision, but Inputs I'll have to reckon with.
First I tried setting PYTEST_TEXTUAL_PAINT_ARGS as an environment variable, to be interpreted by args.py, but it turns out args.py is only executed once, not once per test. It's not using subprocesses, only importing and reimporting the app code, and instantiating new App instances, so parts of the code that are at the top level of modules is only evaluated once.
So I found a new strategy, of importing the `args` object in the test fixture and modifying it directly.
I also realized the --ascii-only option permanently modifies Textual's widgets and borders, and my own widgets, for the life of the process, so I'm holding off on that one. I should be able to make --ascii-only mode more dynamic, and could even target it as a runtime toggle, as a goal, since that's basically what I'll need to achieve to get it working for the tests, but thinking of it as a feature is more fun.
