|
| 1 | +import { test, expect } from '@playwright/test'; |
| 2 | + |
| 3 | +test.describe('CodeMirror Editor Features — gnata mode', () => { |
| 4 | + test.beforeEach(async ({ page }) => { |
| 5 | + await page.goto('/gnata'); |
| 6 | + // Wait for both eval and LSP WASM to load |
| 7 | + await expect(page.locator('.status.ready')).toBeVisible({ timeout: 30000 }); |
| 8 | + // Extra wait for LSP to fully initialize |
| 9 | + await page.waitForTimeout(2000); |
| 10 | + }); |
| 11 | + |
| 12 | + test('typing in expression editor does not reset cursor', async ({ page }) => { |
| 13 | + // Click on expression editor |
| 14 | + const exprEditor = page.locator('.gnata-mode-wrapper .cm-content').first(); |
| 15 | + await exprEditor.click(); |
| 16 | + |
| 17 | + // Select all and clear |
| 18 | + await page.keyboard.press('Meta+a'); |
| 19 | + await page.keyboard.press('Backspace'); |
| 20 | + await page.waitForTimeout(200); |
| 21 | + |
| 22 | + // Type a multi-character expression |
| 23 | + await page.keyboard.type('Account.Name', { delay: 50 }); |
| 24 | + await page.waitForTimeout(300); |
| 25 | + |
| 26 | + // The text should be "Account.Name" (not garbled by cursor resets) |
| 27 | + const text = await exprEditor.textContent(); |
| 28 | + expect(text).toContain('Account.Name'); |
| 29 | + }); |
| 30 | + |
| 31 | + test('autocomplete appears when typing after a dot', async ({ page }) => { |
| 32 | + // Click on expression editor |
| 33 | + const exprEditor = page.locator('.gnata-mode-wrapper .cm-content').first(); |
| 34 | + await exprEditor.click(); |
| 35 | + |
| 36 | + // Select all and clear |
| 37 | + await page.keyboard.press('Meta+a'); |
| 38 | + await page.keyboard.press('Backspace'); |
| 39 | + await page.waitForTimeout(200); |
| 40 | + |
| 41 | + // Type "Account." to trigger dot-completion |
| 42 | + await page.keyboard.type('Account.', { delay: 80 }); |
| 43 | + |
| 44 | + // Wait for autocomplete popup |
| 45 | + await page.waitForTimeout(1500); |
| 46 | + |
| 47 | + // Autocomplete tooltip should be visible |
| 48 | + const autocomplete = page.locator('.cm-tooltip-autocomplete'); |
| 49 | + await expect(autocomplete).toBeVisible({ timeout: 5000 }); |
| 50 | + |
| 51 | + // Should suggest "Name" and "Order" (from the default input JSON) |
| 52 | + const items = await autocomplete.textContent(); |
| 53 | + expect(items).toContain('Name'); |
| 54 | + expect(items).toContain('Order'); |
| 55 | + }); |
| 56 | + |
| 57 | + test('hover shows function documentation', async ({ page }) => { |
| 58 | + // Load invoice example which uses $sum |
| 59 | + await page.getByRole('button', { name: 'Invoice', exact: true }).click(); |
| 60 | + await page.waitForTimeout(500); |
| 61 | + |
| 62 | + // Hover over $sum in the expression |
| 63 | + const exprEditor = page.locator('.gnata-mode-wrapper .cm-content').first(); |
| 64 | + const box = await exprEditor.boundingBox(); |
| 65 | + expect(box).not.toBeNull(); |
| 66 | + |
| 67 | + // Move mouse to the beginning of the expression where $sum is |
| 68 | + await page.mouse.move(box!.x + 20, box!.y + box!.height / 2); |
| 69 | + await page.waitForTimeout(2000); |
| 70 | + |
| 71 | + // Hover tooltip should appear with function documentation |
| 72 | + const hover = page.locator('.cm-tooltip-hover'); |
| 73 | + await expect(hover).toBeVisible({ timeout: 5000 }); |
| 74 | + }); |
| 75 | + |
| 76 | + test('diagnostics show red underline on invalid expression', async ({ page }) => { |
| 77 | + const exprEditor = page.locator('.gnata-mode-wrapper .cm-content').first(); |
| 78 | + await exprEditor.click(); |
| 79 | + |
| 80 | + // Select all and type an invalid expression |
| 81 | + await page.keyboard.press('Meta+a'); |
| 82 | + await page.keyboard.press('Backspace'); |
| 83 | + await page.keyboard.type('$sum(', { delay: 50 }); |
| 84 | + |
| 85 | + // Wait for linter to run (200ms delay + some buffer) |
| 86 | + await page.waitForTimeout(1000); |
| 87 | + |
| 88 | + // Should show a lint error marker or squiggly underline |
| 89 | + const lintError = page.locator('.cm-lintRange-error, .cm-diagnostic-error, .cm-lint-marker-error'); |
| 90 | + await expect(lintError.first()).toBeVisible({ timeout: 5000 }); |
| 91 | + }); |
| 92 | + |
| 93 | + test('example pills change expression and input', async ({ page }) => { |
| 94 | + // Click Pipeline example |
| 95 | + await page.getByRole('button', { name: 'Pipeline', exact: true }).click(); |
| 96 | + await page.waitForTimeout(500); |
| 97 | + |
| 98 | + // Expression should contain ~> (pipeline operator) |
| 99 | + const expr = page.locator('.gnata-mode-wrapper .cm-content').first(); |
| 100 | + const exprText = await expr.textContent(); |
| 101 | + expect(exprText).toContain('~>'); |
| 102 | + |
| 103 | + // Input should contain records data |
| 104 | + const panels = page.locator('.gnata-mode-wrapper .cm-content'); |
| 105 | + const inputText = await panels.nth(1).textContent(); |
| 106 | + expect(inputText).toContain('records'); |
| 107 | + }); |
| 108 | + |
| 109 | + test('result shows green text on successful evaluation', async ({ page }) => { |
| 110 | + // Load invoice example |
| 111 | + await page.getByRole('button', { name: 'Invoice', exact: true }).click(); |
| 112 | + // Wait longer for debounced eval (300ms) + StrictMode remount |
| 113 | + await page.waitForTimeout(3000); |
| 114 | + |
| 115 | + // Result panel (last cm-content) should have content |
| 116 | + const result = page.locator('.gnata-mode-wrapper .cm-content').last(); |
| 117 | + await expect(result).not.toBeEmpty({ timeout: 5000 }); |
| 118 | + const resultText = await result.textContent(); |
| 119 | + expect(resultText).toMatch(/\d/); |
| 120 | + }); |
| 121 | +}); |
0 commit comments