caterium/caterium-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Test Help against responsive native sidebar geometry in all browser engines

Browse Source
This commit is contained in:
pavlov346346-source 2026-09-19 08:04:32 +03:00
parent 15ab908836
commit 006ba12f98
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
tests/help-center.spec.mjs
View File

@ -55,6 +55,17 @@ test('Help uses a question-circle mask with the native sidebar icon geometry and
const help=page.locator('#ctHelpNav'); const help=page.locator('#ctHelpNav');
await expect(help).toHaveClass(/sun-nav-button/); await expect(help).toHaveClass(/sun-nav-button/);
await page.locator('header nav .nav-settings').waitFor({state:'attached'}); await page.locator('header nav .nav-settings').waitFor({state:'attached'});
// The narrow layout uses the common compact markers, not desktop SVG masks.
// Check its native geometry before exercising the actual left sidebar in each engine.
if(page.viewportSize().width<=900){
const sizes=await help.evaluate(el=>{
const size=node=>{const s=getComputedStyle(node,'::before');return {width:s.width,height:s.height,margin:s.margin};};
return {help:size(el),peer:size(document.querySelector('header nav .nav-settings'))};
});
expect(sizes.help).toEqual(sizes.peer);
await page.setViewportSize({width:1440,height:900});
}
await expect(page.locator('body')).toHaveClass(/sun-enterprise-sidebar/);
await expect.poll(()=>help.evaluate(el=>getComputedStyle(el,'::before').getPropertyValue('mask-image')||getComputedStyle(el,'::before').getPropertyValue('-webkit-mask-image'))).toContain('data:image/svg+xml'); await expect.poll(()=>help.evaluate(el=>getComputedStyle(el,'::before').getPropertyValue('mask-image')||getComputedStyle(el,'::before').getPropertyValue('-webkit-mask-image'))).toContain('data:image/svg+xml');
const result=await help.evaluate(el=>{ const result=await help.evaluate(el=>{
const peer=document.querySelector('header nav .nav-settings'); const peer=document.querySelector('header nav .nav-settings');
@ -74,8 +85,10 @@ test('Help uses a question-circle mask with the native sidebar icon geometry and
return {normal,active,viewBox:svg?.documentElement.getAttribute('viewBox'),fill:svg?.documentElement.getAttribute('fill'),stroke:svg?.documentElement.getAttribute('stroke-width'),circle:svg?.querySelector('circle')?.getAttribute('r'),question:svg?.querySelector('path')?.getAttribute('d')}; return {normal,active,viewBox:svg?.documentElement.getAttribute('viewBox'),fill:svg?.documentElement.getAttribute('fill'),stroke:svg?.documentElement.getAttribute('stroke-width'),circle:svg?.querySelector('circle')?.getAttribute('r'),question:svg?.querySelector('path')?.getAttribute('d')};
}); });
expect(result.viewBox).toBe('0 0 24 24');expect(result.fill).toBe('none');expect(result.stroke).toBe('1.9');expect(result.circle).toBe('9');expect(result.question).toContain('M12 17h.01'); expect(result.viewBox).toBe('0 0 24 24');expect(result.fill).toBe('none');expect(result.stroke).toBe('1.9');expect(result.circle).toBe('9');expect(result.question).toContain('M12 17h.01');
// Compare against the final app styles rather than an intermediate 20px rule.
expect(result.normal.help).toEqual(result.normal.peer);expect(result.active.help).toEqual(result.active.peer); expect(result.normal.help).toEqual(result.normal.peer);expect(result.active.help).toEqual(result.active.peer);
expect(result.normal.help.width).toBe('20px');expect(result.normal.help.height).toBe('20px'); expect(parseFloat(result.normal.help.width)).toBeGreaterThanOrEqual(16);
expect(result.normal.help.width).toBe(result.normal.help.height);
await expect(help.locator('svg,img')).toHaveCount(0); await expect(help.locator('svg,img')).toHaveCount(0);
await expect(help).toHaveText('Помощь'); await expect(help).toHaveText('Помощь');
}); });