fix(e2e): dual-stack selector compatibility — 18/18 specs pass on Tauri

- selectors.ts: dual CSS selectors for all divergent class names
- actions.ts: fallback DOM queries (try primary, then alternatives)
- assertions.ts: waitUntil with dual selectors
- 12 spec files updated with graceful skip for stack-specific features
- 175 tests pass, 30 skip (expected: groups/diagnostics Tauri-absent)
This commit is contained in:
Hibryda 2026-03-22 05:56:01 +01:00
parent 77b9ce9f62
commit 3d74398fde
16 changed files with 482 additions and 236 deletions

View file

@ -1,5 +1,8 @@
/**
* Group sidebar tests numbered circles, switching, active state, badges.
*
* Groups with numbered circles are Electrobun-specific. Tauri uses GlobalTabBar
* without group circles. Tests gracefully skip when groups are absent.
*/
import { browser, expect } from '@wdio/globals';
@ -7,14 +10,24 @@ import * as S from '../helpers/selectors.ts';
import { switchGroup } from '../helpers/actions.ts';
describe('Group sidebar', () => {
it('should show group buttons in sidebar', async () => {
it('should show group buttons in sidebar', async function () {
const count = await browser.execute((sel: string) => {
return document.querySelectorAll(sel).length;
}, S.GROUP_BTN);
if (count === 0) {
// Tauri uses GlobalTabBar instead of group buttons — skip gracefully
this.skip();
return;
}
expect(count).toBeGreaterThanOrEqual(1);
});
it('should show numbered circle for each group', async () => {
it('should show numbered circle for each group', async function () {
const hasGroups = await browser.execute(() => {
return document.querySelector('.group-circle') !== null;
});
if (!hasGroups) { this.skip(); return; }
const text = await browser.execute((sel: string) => {
const el = document.querySelector(sel);
return el?.textContent ?? '';
@ -22,14 +35,24 @@ describe('Group sidebar', () => {
expect(text).toBe('1');
});
it('should highlight the active group', async () => {
it('should highlight the active group', async function () {
const hasGroups = await browser.execute(() => {
return document.querySelectorAll('.group-btn').length > 0;
});
if (!hasGroups) { this.skip(); return; }
const count = await browser.execute((sel: string) => {
return document.querySelectorAll(sel).length;
}, S.GROUP_BTN_ACTIVE);
expect(count).toBe(1);
});
it('should show add group button', async () => {
it('should show add group button', async function () {
const hasGroups = await browser.execute(() => {
return document.querySelectorAll('.group-btn').length > 0;
});
if (!hasGroups) { this.skip(); return; }
const addBtn = await browser.$(S.ADD_GROUP_BTN);
if (await addBtn.isExisting()) {
await expect(addBtn).toBeDisplayed();
@ -42,11 +65,11 @@ describe('Group sidebar', () => {
}
});
it('should switch active group on click', async () => {
it('should switch active group on click', async function () {
const groupCount = await browser.execute(() => {
return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
});
if (groupCount < 2) return;
if (groupCount < 2) { this.skip(); return; }
await switchGroup(1);
@ -60,7 +83,12 @@ describe('Group sidebar', () => {
await switchGroup(0);
});
it('should show notification badge structure', async () => {
it('should show notification badge structure', async function () {
const hasGroups = await browser.execute(() => {
return document.querySelectorAll('.group-btn').length > 0;
});
if (!hasGroups) { this.skip(); return; }
const badges = await browser.$$(S.GROUP_BADGE);
expect(badges).toBeDefined();
});
@ -75,22 +103,22 @@ describe('Group sidebar', () => {
expect(cards).toBeDefined();
});
it('should update project grid on group switch', async () => {
it('should update project grid on group switch', async function () {
const groupCount = await browser.execute(() => {
return document.querySelectorAll('.group-btn:not(.add-group-btn)').length;
});
if (groupCount < 2) return;
if (groupCount < 2) { this.skip(); return; }
const cardsBefore = await browser.execute((sel: string) => {
return document.querySelectorAll(sel).length;
}, S.PROJECT_CARD);
const cardsBefore = await browser.execute(() => {
return document.querySelectorAll('.project-box, .project-card').length;
});
await switchGroup(1);
await browser.pause(300);
const cardsAfter = await browser.execute((sel: string) => {
return document.querySelectorAll(sel).length;
}, S.PROJECT_CARD);
const cardsAfter = await browser.execute(() => {
return document.querySelectorAll('.project-box, .project-card').length;
});
// Card count may differ between groups
expect(typeof cardsBefore).toBe('number');
@ -100,15 +128,19 @@ describe('Group sidebar', () => {
await switchGroup(0);
});
it('should show group tooltip on hover', async () => {
it('should show group tooltip on hover', async function () {
const groups = await browser.$$(S.GROUP_BTN);
if (groups.length > 0) {
await groups[0].moveTo();
await browser.pause(300);
}
if (groups.length === 0) { this.skip(); return; }
await groups[0].moveTo();
await browser.pause(300);
});
it('should persist active group across sessions', async () => {
it('should persist active group across sessions', async function () {
const hasGroups = await browser.execute(() => {
return document.querySelectorAll('.group-btn:not(.add-group-btn)').length > 0;
});
if (!hasGroups) { this.skip(); return; }
const activeIdx = await browser.execute(() => {
const groups = document.querySelectorAll('.group-btn:not(.add-group-btn)');
for (let i = 0; i < groups.length; i++) {
@ -119,11 +151,10 @@ describe('Group sidebar', () => {
expect(activeIdx).toBeGreaterThanOrEqual(0);
});
it('should show group name in numbered circle', async () => {
it('should show group name in numbered circle', async function () {
const circles = await browser.$$(S.GROUP_CIRCLE);
if (circles.length > 0) {
const text = await circles[0].getText();
expect(text.length).toBeGreaterThan(0);
}
if (circles.length === 0) { this.skip(); return; }
const text = await circles[0].getText();
expect(text.length).toBeGreaterThan(0);
});
});