93 lines
3.3 KiB
JavaScript
93 lines
3.3 KiB
JavaScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
|
||
|
|
await page.goto('http://localhost:5173/test/index.html');
|
||
|
|
await page.waitForFunction(() => window.testStatus === 'ready');
|
||
|
|
});
|
||
|
|
|
||
|
|
test.describe('CodeEditor Basic', () => {
|
||
|
|
test('should render content and update value', async ({ page }) => {
|
||
|
|
const editor = page.locator('#editor1');
|
||
|
|
await expect(editor).toBeVisible();
|
||
|
|
|
||
|
|
// Check initial value
|
||
|
|
const initialVal = await page.evaluate(() => document.getElementById('editor1').value);
|
||
|
|
expect(initialVal).toBe("console.log('Hello World');");
|
||
|
|
|
||
|
|
// Simulate typing in CodeMirror
|
||
|
|
const cmContent = editor.locator('.cm-content');
|
||
|
|
await cmContent.click();
|
||
|
|
await page.keyboard.press('End');
|
||
|
|
await page.keyboard.type('\n// New Comment');
|
||
|
|
|
||
|
|
const updatedVal = await page.evaluate(() => document.getElementById('editor1').value);
|
||
|
|
expect(updatedVal).toContain('// New Comment');
|
||
|
|
|
||
|
|
// Check if external display updated
|
||
|
|
const display = page.locator('#val1');
|
||
|
|
await expect(display).toContainText('// New Comment');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should handle language and theme attributes', async ({ page }) => {
|
||
|
|
const editor = page.locator('#editor1');
|
||
|
|
|
||
|
|
// Test lang change
|
||
|
|
await page.evaluate(() => {
|
||
|
|
document.getElementById('editor1').setAttribute('lang', 'json');
|
||
|
|
});
|
||
|
|
// Internal state check (if we had a way to verify lang, for now just ensure no crash)
|
||
|
|
|
||
|
|
// Test theme change
|
||
|
|
await page.evaluate(() => {
|
||
|
|
document.getElementById('editor1').setAttribute('theme', 'light');
|
||
|
|
});
|
||
|
|
const hasDarkTheme = await page.locator('.cm-theme-one-dark').count();
|
||
|
|
expect(hasDarkTheme).toBe(0);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test.describe('AutoForm Integration', () => {
|
||
|
|
test('should sync data with AutoForm', async ({ page }) => {
|
||
|
|
const form = page.locator('#myForm');
|
||
|
|
await expect(form).toBeVisible();
|
||
|
|
|
||
|
|
// Update CodeEditor and check form.data
|
||
|
|
const codeEditor = form.locator('CodeEditor');
|
||
|
|
await expect(codeEditor).toBeVisible();
|
||
|
|
const cmContent = codeEditor.locator('.cm-content');
|
||
|
|
|
||
|
|
// Use a more robust way to clear and type
|
||
|
|
await page.evaluate(() => {
|
||
|
|
const editor = document.querySelector('#myForm CodeEditor');
|
||
|
|
editor.value = '';
|
||
|
|
});
|
||
|
|
await cmContent.type('{"updated": true}');
|
||
|
|
|
||
|
|
const updatedFormData = await page.evaluate(() => {
|
||
|
|
return document.getElementById('myForm').data.config;
|
||
|
|
});
|
||
|
|
expect(JSON.parse(updatedFormData).updated).toBe(true);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test.describe('Performance Benchmark', () => {
|
||
|
|
test('measure render time', async ({ page }) => {
|
||
|
|
const start = await page.evaluate(() => performance.now());
|
||
|
|
|
||
|
|
await page.evaluate(() => {
|
||
|
|
const div = document.createElement('div');
|
||
|
|
div.innerHTML = '<CodeEditor id="perfEditor" value="performance test"></CodeEditor>';
|
||
|
|
document.body.appendChild(div);
|
||
|
|
window.RefreshState(div);
|
||
|
|
});
|
||
|
|
|
||
|
|
await page.waitForSelector('#perfEditor .cm-editor');
|
||
|
|
const end = await page.evaluate(() => performance.now());
|
||
|
|
|
||
|
|
const renderTime = end - start;
|
||
|
|
console.log(`CodeEditor Render Time: ${renderTime.toFixed(2)}ms`);
|
||
|
|
expect(renderTime).toBeLessThan(500); // Reasonable threshold
|
||
|
|
});
|
||
|
|
});
|