mirror of
https://github.com/1j01/textual-paint.git
synced 2024-09-11 15:56:03 +03:00
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 |