UI-tests und fixes aus tests

public/js/test/settings.test.js

@@ -0,0 +1,136 @@
+import { describe, it, afterEach, expect, $, $$, click, closeAll, sleep } from './runner.js';
+
+describe('Settings: Open/Close', () => {
+    afterEach(() => closeAll());
+
+    it('opens on button click', async () => {
+        click('#settings-btn');
+        await sleep(150);
+        expect($('#settings-overlay')).toBeVisible();
+    });
+
+    it('has all 7 tabs', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        const names = $$('.settings-tab').map(t => t.dataset.tab);
+        expect(names.length).toBe(7);
+        for (const tab of ['branding', 'account', 'theme', 'caldav', 'relay', 'behavior', 'notifications']) {
+            expect(names).toContain(tab);
+        }
+    });
+
+    it('tab switching shows correct panels', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        for (const tab of ['theme', 'account', 'caldav', 'relay', 'behavior', 'notifications']) {
+            click($$('.settings-tab').find(t => t.dataset.tab === tab));
+            await sleep(50);
+            expect($(`#settings-panel-${tab}`).classList.contains('hidden')).toBe(false);
+        }
+    });
+
+    it('closes on X button', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click('#settings-close');
+        await sleep(150);
+        expect($('#settings-overlay')).toBeHidden();
+    });
+
+    it('closes on overlay click', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        $('#settings-overlay').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await sleep(150);
+        expect($('#settings-overlay')).toBeHidden();
+    });
+});
+
+describe('Settings: Account', () => {
+    afterEach(() => closeAll());
+
+    it('password fields exist and are masked', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'account'));
+        await sleep(50);
+        for (const id of ['settings-pw-current', 'settings-pw-new', 'settings-pw-confirm', 'settings-pw-save']) {
+            expect($(`#${id}`)).toExist();
+        }
+        expect($('#settings-pw-current').type).toBe('password');
+    });
+
+    it('vault key field exists', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'account'));
+        await sleep(50);
+        expect($('#settings-vault-key')).toExist();
+        expect($('#settings-vault-save')).toExist();
+    });
+});
+
+describe('Settings: Behavior', () => {
+    afterEach(() => closeAll());
+
+    it('has all selects', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'behavior'));
+        await sleep(100);
+        for (const id of ['setting-current-days', 'setting-card-height', 'setting-card-width', 'setting-body-lines', 'setting-click-action']) {
+            expect($(`#${id}`)).toExist();
+        }
+    });
+
+    it('has all toggles', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'behavior'));
+        await sleep(100);
+        for (const id of ['setting-show-tags', 'setting-show-thumbnails', 'setting-show-done-badge', 'setting-confirm-delete', 'setting-auto-save']) {
+            expect($(`#${id}`)).toExist();
+        }
+    });
+});
+
+describe('Settings: CalDAV', () => {
+    afterEach(() => closeAll());
+
+    it('has connection fields', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'caldav'));
+        await sleep(50);
+        for (const id of ['caldav-url', 'caldav-user', 'caldav-pass', 'caldav-test', 'caldav-save', 'caldav-sync-now']) {
+            expect($(`#${id}`)).toExist();
+        }
+    });
+});
+
+describe('Settings: Relay', () => {
+    afterEach(() => closeAll());
+
+    it('has relay fields', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'relay'));
+        await sleep(50);
+        for (const id of ['relay-url', 'relay-key', 'relay-save', 'relay-test']) {
+            expect($(`#${id}`)).toExist();
+        }
+    });
+});
+
+describe('Settings: Notifications', () => {
+    afterEach(() => closeAll());
+
+    it('has notification controls', async () => {
+        click('#settings-btn');
+        await sleep(100);
+        click($$('.settings-tab').find(t => t.dataset.tab === 'notifications'));
+        await sleep(100);
+        expect($('#notif-lookahead')).toExist();
+        expect($('#notif-time')).toExist();
+    });
+});