test: Fix flaky Editor and Context Memory DOM assertions and TS typing

Author: ijbo

changelogs/CHANGELOG-flaky-tests.md

@@ -0,0 +1,22 @@
+# Flaky Assertions and Typing Fixes
+
+## Summary
+Fixed false-passes and flaky tests in `editor.spec.js` caused by missing elements being masked by improper testing patterns, and silenced JSDoc typing errors in `context-memory.spec.js` and `editor.spec.js`.
+
+## 1. DOM Assertion Stability
+**When:** The editor is evaluating emojis and GitHub callouts.
+**What:** Replaced hardcoded `waitForTimeout(500)` combined with `.innerHTML()` parsing for native Playwright `.toBeVisible()` and `.toContainText()` matchers.
+**Impact:** Solves race conditions caused by MathJax and Joypixels fetching fonts and stylesheets asynchronously over the network, which previously led tests to evaluate incomplete views.
+
+## 2. JSDoc Typing Adjustments
+**What:** Applied `/** @type {any[]} */` and `/** @type {any} */` casts to `errors` arrays and `window` assignments within Playwright `page.on` listeners and `page.evaluate` blocks.
+**Impact:** Prevents TypeScript's strict type checker from discarding Playwright scripts due to missing explicit variable typing.
+
+---
+
+## Files Changed
+
+| File | Type |
+|------|------|
+| `tests/feature/editor.spec.js` | Test Assertion Fixes |
+| `tests/feature/context-memory.spec.js` | Test Typing Fixes |

tests/feature/context-memory.spec.js

@@ -418,6 +418,7 @@ test.describe('Memory Tag — Preview Card Rendering', () => {
         const removeBtn = page.locator('.ai-remove-tag').first();
         await expect(removeBtn).toBeVisible();
 
+        /** @type {string[]} */
         const errors = [];
         page.on('pageerror', err => errors.push(err.message));
 

tests/feature/editor.spec.js

@@ -5,59 +5,56 @@ test.describe('Editor Features', () => {
     test.beforeEach(async ({ page }) => {
         await page.goto('/');
         await page.waitForSelector('#markdown-editor', { state: 'visible' });
-        await page.waitForFunction(() => window.MDView && window.MDView.currentViewMode === 'split');
+        await page.waitForFunction(() => {
+            const w = /** @type {any} */ (window);
+            return w.MDView && w.MDView.currentViewMode === 'split';
+        });
     });
 
     test('editor renders markdown in preview', async ({ page }) => {
         await page.locator('#markdown-editor').fill('# Hello World\n\nThis is **bold** text.');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('Hello World');
-        expect(html).toContain('<strong>bold</strong>');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview).toContainText('Hello World');
+        await expect(preview.locator('strong')).toHaveText('bold');
     });
 
     test('editor supports code blocks with syntax highlighting', async ({ page }) => {
         await page.locator('#markdown-editor').fill('```javascript\nconst x = 42;\n```');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('const');
-        expect(html).toContain('<code');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview).toContainText('const');
+        await expect(preview.locator('code')).toBeVisible({ timeout: 10000 });
     });
 
     test('editor supports LaTeX math rendering', async ({ page }) => {
         await page.locator('#markdown-editor').fill('$$E = mc^2$$');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('E');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview.locator('mjx-container, .math')).toBeVisible({ timeout: 10000 });
     });
 
     test('editor supports task lists', async ({ page }) => {
         await page.locator('#markdown-editor').fill('- [x] Done\n- [ ] Todo');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('type="checkbox"');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview.locator('input[type="checkbox"]')).toHaveCount(2, { timeout: 10000 });
     });
 
     test('editor supports tables', async ({ page }) => {
         await page.locator('#markdown-editor').fill('| A | B |\n|---|---|\n| 1 | 2 |');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('<table');
-        expect(html).toContain('<td');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview.locator('table')).toBeVisible({ timeout: 10000 });
+        await expect(preview.locator('td')).toHaveCount(2);
     });
 
     test('editor supports emoji shortcodes', async ({ page }) => {
         await page.locator('#markdown-editor').fill(':rocket: :star:');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html.length).toBeGreaterThan(0);
+        const preview = page.locator('#markdown-preview');
+        await expect(preview).toContainText('🚀', { timeout: 10000 });
+        await expect(preview).toContainText('⭐', { timeout: 10000 });
     });
 
     test('editor supports GitHub-style callouts', async ({ page }) => {
         await page.locator('#markdown-editor').fill('> [!NOTE]\n> This is a note.');
-        await page.waitForTimeout(500);
-        const html = await page.locator('#markdown-preview').innerHTML();
-        expect(html).toContain('note');
+        const preview = page.locator('#markdown-preview');
+        await expect(preview.locator('.markdown-callout.callout-note')).toBeVisible({ timeout: 10000 });
     });
 
     test('word count and stats update on input', async ({ page }) => {