test: count settings rows and Pro bodies in the frames that draw them

This commit is contained in:
Linus Rath
2026-11-02 19:39:09 +01:00
parent d2205b9c09
commit 37b8cc0640
2 changed files with 15 additions and 4 deletions
@@ -55,9 +55,9 @@ describe('AppShellSkeleton under the Pro interface', () => {
const [strip, body] = [...pane.children];
expect(strip.querySelectorAll('[data-sk-pro-tab]')).toHaveLength(8);
expect(classes(strip)).toEqual(expect.arrayContaining(['h-9', 'bg-secondary']));
expect([...body.children].map((b) => b.getAttribute('data-sk-pro-body'))).toEqual([
'mail', 'calendar', 'contacts', 'files', 'settings', 'other',
]);
// A page Pro takes over only draws its own body: the redirect focuses
// its tab. (The /pro page draws all of them, see ProSkeleton below.)
expect([...body.children].map((b) => b.getAttribute('data-sk-pro-body'))).toEqual(['calendar', 'other']);
}
// The split pane only shows with a split.
expect(classes(panes[1])).toEqual(expect.arrayContaining(['hidden', 'boot-pro-split:flex']));
@@ -78,6 +78,16 @@ describe('ProSkeleton', () => {
expect(pro?.querySelector('[data-pro-shell]')).not.toBeNull();
expect(container.querySelector('[data-boot-skeleton="login"]')).not.toBeNull();
});
it('draws every page body in both panes on /pro, where the stored tabs decide', () => {
const container = html(<ProSkeleton label="Loading" />);
for (const pane of container.querySelectorAll('[data-sk-pro-pane]')) {
const body = pane.children[1];
expect([...body.children].map((b) => b.getAttribute('data-sk-pro-body'))).toEqual([
'mail', 'calendar', 'contacts', 'files', 'settings', 'other',
]);
}
});
});
describe('the Pro CSS picks the stored tabs and pages', () => {
@@ -20,9 +20,10 @@ function variantSelector(name: string): string {
return match[1].trim();
}
/** The standard settings frame (the hidden Pro frame carries its own copy of the body). */
function mount(html: string) {
document.body.innerHTML = html;
return document.body;
return document.body.querySelector<HTMLElement>('[data-boot-skeleton="settings"]') ?? document.body;
}
afterEach(() => {