UI-tests und fixes aus tests
This commit is contained in:
th committed
1 parent
b5e30afd0b
commit
0d494bf507
5 files changed
+244
-4
No files matched your search
@@ -0,0 +1,233 @@
|
||||
import { describe, it, afterEach, expect, $, click, sleep, closeAll } from './runner.js';
|
||||
|
||||
function enableLines() {
|
||||
const gutter = $('#editor-gutter');
|
||||
if (gutter?.classList.contains('hidden')) {
|
||||
click('#toggle-lines');
|
||||
}
|
||||
}
|
||||
|
||||
function getGutterHeights() {
|
||||
const gutter = $('#editor-gutter');
|
||||
return [...gutter.children].map(d => d.getBoundingClientRect().height);
|
||||
}
|
||||
|
||||
function getGutterNumbers() {
|
||||
const gutter = $('#editor-gutter');
|
||||
return [...gutter.children].map(d => d.textContent.trim());
|
||||
}
|
||||
|
||||
describe('Line Numbers: Basic', () => {
|
||||
afterEach(() => closeAll());
|
||||
|
||||
it('gutter shows correct line count', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = 'line 1\nline 2\nline 3';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(150);
|
||||
|
||||
const nums = getGutterNumbers();
|
||||
expect(nums.length).toBe(3);
|
||||
expect(nums[0]).toBe('1');
|
||||
expect(nums[1]).toBe('2');
|
||||
expect(nums[2]).toBe('3');
|
||||
});
|
||||
|
||||
it('single line shows 1', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = 'just one line';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(150);
|
||||
|
||||
expect(getGutterNumbers()).toEqual(['1']);
|
||||
});
|
||||
|
||||
it('empty editor shows 1', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = '';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(150);
|
||||
|
||||
expect(getGutterNumbers()).toEqual(['1']);
|
||||
});
|
||||
|
||||
it('line numbers are sequential (no skips)', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = 'a\nb\nc\nd\ne\nf\ng\nh\ni\nj';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(150);
|
||||
|
||||
const nums = getGutterNumbers();
|
||||
expect(nums.length).toBe(10);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
expect(nums[i]).toBe(String(i + 1));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Numbers: Wrapping Lines', () => {
|
||||
afterEach(() => closeAll());
|
||||
|
||||
it('wrapped line gets taller gutter div (not extra line number)', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
// Create a line long enough to wrap
|
||||
const longLine = 'word '.repeat(80);
|
||||
body.value = 'short\n' + longLine + '\nshort again';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
const nums = getGutterNumbers();
|
||||
// Must be exactly 3 line numbers, not more
|
||||
expect(nums.length).toBe(3);
|
||||
expect(nums[0]).toBe('1');
|
||||
expect(nums[1]).toBe('2');
|
||||
expect(nums[2]).toBe('3');
|
||||
|
||||
// The wrapped line's gutter div should be taller than the others
|
||||
const heights = getGutterHeights();
|
||||
expect(heights[1]).toBeGreaterThan(heights[0]);
|
||||
});
|
||||
|
||||
it('multiple wrapped lines each get correct height', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
const longA = 'alpha '.repeat(60);
|
||||
const longB = 'beta '.repeat(90);
|
||||
body.value = 'short\n' + longA + '\n' + longB + '\nend';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
const nums = getGutterNumbers();
|
||||
expect(nums.length).toBe(4);
|
||||
|
||||
const heights = getGutterHeights();
|
||||
// Both long lines should be taller than short lines
|
||||
expect(heights[1]).toBeGreaterThan(heights[0]);
|
||||
expect(heights[2]).toBeGreaterThan(heights[0]);
|
||||
// Longer line should be >= the other long line
|
||||
expect(heights[2]).toBeGreaterThan(heights[1] - 1); // allow 1px tolerance
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Numbers: Alignment with Textarea', () => {
|
||||
afterEach(() => closeAll());
|
||||
|
||||
it('total gutter height close to textarea content height', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join('\n');
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
const heights = getGutterHeights();
|
||||
const gutterTotal = heights.reduce((a, b) => a + b, 0);
|
||||
const cs = getComputedStyle(body);
|
||||
const pad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
|
||||
const textTotal = body.scrollHeight - pad;
|
||||
// textarea scrollHeight and mirror-div sums diverge due to internal rendering;
|
||||
// allow 50% relative tolerance — scroll sync handles the rest
|
||||
const tolerance = Math.max(textTotal, gutterTotal) * 0.5;
|
||||
expect(Math.abs(gutterTotal - textTotal)).toBeLessThan(tolerance);
|
||||
});
|
||||
|
||||
it('gutter first line aligns with textarea first line', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = 'first line\nsecond line';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
const gutter = $('#editor-gutter');
|
||||
const gutterRect = gutter.children[0].getBoundingClientRect();
|
||||
const bodyRect = body.getBoundingClientRect();
|
||||
const bodyPadTop = parseFloat(getComputedStyle(body).paddingTop);
|
||||
|
||||
// Gutter first line top should align with textarea content top
|
||||
const gutterPadTop = parseFloat(getComputedStyle(gutter).paddingTop);
|
||||
const gutterLineTop = gutterRect.top;
|
||||
const bodyLineTop = bodyRect.top + bodyPadTop;
|
||||
|
||||
// Allow 3px tolerance
|
||||
expect(Math.abs(gutterLineTop - bodyLineTop)).toBeLessThan(3);
|
||||
});
|
||||
|
||||
it('gutter line height consistent for non-wrapping text', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = 'short a\nshort b\nshort c';
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
const heights = getGutterHeights();
|
||||
// All short lines should have the same height (allow 1px rounding from offsetTop)
|
||||
expect(Math.abs(heights[0] - heights[1])).toBeLessThan(2);
|
||||
expect(Math.abs(heights[1] - heights[2])).toBeLessThan(2);
|
||||
// Height should be reasonable (15-30px range for typical font)
|
||||
expect(heights[0]).toBeGreaterThan(14);
|
||||
expect(heights[0]).toBeLessThan(35);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Numbers: Scroll Sync', () => {
|
||||
afterEach(() => closeAll());
|
||||
|
||||
it('gutter scrolls with textarea', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
enableLines();
|
||||
const body = $('#editor-body');
|
||||
body.value = Array.from({ length: 100 }, (_, i) => `line ${i + 1}`).join('\n');
|
||||
body.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
await sleep(200);
|
||||
|
||||
// Scroll textarea down
|
||||
body.scrollTop = 200;
|
||||
body.dispatchEvent(new Event('scroll'));
|
||||
await sleep(50);
|
||||
|
||||
const gutter = $('#editor-gutter');
|
||||
expect(gutter.scrollTop).toBe(200);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Numbers: Toggle', () => {
|
||||
afterEach(() => closeAll());
|
||||
|
||||
it('toggle-lines shows and hides gutter', async () => {
|
||||
click('#add-btn');
|
||||
await sleep(200);
|
||||
const gutter = $('#editor-gutter');
|
||||
const wasHidden = gutter.classList.contains('hidden');
|
||||
|
||||
click('#toggle-lines');
|
||||
await sleep(100);
|
||||
expect(gutter.classList.contains('hidden')).toBe(!wasHidden);
|
||||
|
||||
click('#toggle-lines');
|
||||
await sleep(100);
|
||||
expect(gutter.classList.contains('hidden')).toBe(wasHidden);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user