Skip to content

Commit 674cdd3

Browse files
devvaannshdevvaannsh
committed
feat: add tests for edit mode
1 parent 2869d5f commit 674cdd3

File tree

1 file changed

+269
-0
lines changed

1 file changed

+269
-0
lines changed

‎test/spec/LiveDevelopmentMultiBrowser-test.js‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2235,6 +2235,275 @@ define(function (require, exports, module) {
22352235

22362236
await endEditModePreviewSession();
22372237
}, 30000);
2238+
2239+
it("should edit text content via double-click and sync to source", async function () {
2240+
await awaitsForDone(
2241+
SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2242+
"SpecRunnerUtils.openProjectFiles simple1.html"
2243+
);
2244+
2245+
await waitsForLiveDevelopmentToOpenWithEditMode("hover");
2246+
2247+
// Get original source code content
2248+
const originalContent = DocumentManager.getCurrentDocument().getText();
2249+
expect(originalContent).toContain("Brackets is awesome!"); // Original text
2250+
2251+
const newText = "Phoenix is fantastic!";
2252+
2253+
// Double-click the element to start editing
2254+
await forRemoteExec(`
2255+
const element = document.getElementById('testId');
2256+
const event = new MouseEvent('dblclick', {
2257+
bubbles: true,
2258+
cancelable: true
2259+
});
2260+
element.dispatchEvent(event);
2261+
`);
2262+
2263+
// Wait a moment for edit mode to activate
2264+
await awaits(500);
2265+
2266+
// Verify element is in edit mode (contenteditable)
2267+
await forRemoteExec(`document.getElementById('testId').hasAttribute('contenteditable')`, (result) => {
2268+
return result === true;
2269+
});
2270+
2271+
// Modify the text content
2272+
await forRemoteExec(`
2273+
const element = document.getElementById('testId');
2274+
element.textContent = '${newText}';
2275+
// Trigger input event to simulate user typing
2276+
element.dispatchEvent(new Event('input', { bubbles: true }));
2277+
`);
2278+
2279+
// Press Enter to finish editing
2280+
await forRemoteExec(`
2281+
const element = document.getElementById('testId');
2282+
const event = new KeyboardEvent('keydown', {
2283+
key: 'Enter',
2284+
bubbles: true,
2285+
cancelable: true
2286+
});
2287+
element.dispatchEvent(event);
2288+
`);
2289+
2290+
// Wait for the operation to complete
2291+
await awaits(1000);
2292+
2293+
// Verify the text is updated in source code
2294+
const updatedContent = DocumentManager.getCurrentDocument().getText();
2295+
expect(updatedContent).toContain(newText);
2296+
expect(updatedContent).not.toContain("Brackets is awesome!");
2297+
2298+
// Verify the text is updated in DOM
2299+
await forRemoteExec(`document.getElementById('testId').textContent.trim()`, (result) => {
2300+
return result === newText;
2301+
});
2302+
2303+
await endEditModePreviewSession();
2304+
}, 30000);
2305+
2306+
it("should edit text content via edit button and sync to source", async function () {
2307+
await awaitsForDone(
2308+
SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2309+
"SpecRunnerUtils.openProjectFiles simple1.html"
2310+
);
2311+
2312+
await waitsForLiveDevelopmentToOpenWithEditMode("hover");
2313+
2314+
// Get original source code content
2315+
const originalContent = DocumentManager.getCurrentDocument().getText();
2316+
expect(originalContent).toContain("Brackets is awesome!"); // Original text
2317+
2318+
const newText = "Edited via button!";
2319+
2320+
// Click on the test element to show more options box
2321+
await forRemoteExec(`document.getElementById('testId').click()`);
2322+
2323+
// Wait for more options box to appear
2324+
await waitForMoreOptionsBox(true);
2325+
2326+
// Click the edit-text button in the shadow DOM
2327+
await forRemoteExec(`
2328+
const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
2329+
let editButton = null;
2330+
2331+
shadowHosts.forEach(host => {
2332+
if (host.shadowRoot && host.shadowRoot.innerHTML.includes('phoenix-more-options-box')) {
2333+
editButton = host.shadowRoot.querySelector('span[data-action="edit-text"]');
2334+
}
2335+
});
2336+
2337+
if (editButton) {
2338+
editButton.click();
2339+
}
2340+
`);
2341+
2342+
// Wait for edit mode to activate
2343+
await awaits(500);
2344+
2345+
// Verify element is in edit mode
2346+
await forRemoteExec(`document.getElementById('testId').hasAttribute('contenteditable')`, (result) => {
2347+
return result === true;
2348+
});
2349+
2350+
// Modify the text content
2351+
await forRemoteExec(`
2352+
const element = document.getElementById('testId');
2353+
element.textContent = '${newText}';
2354+
element.dispatchEvent(new Event('input', { bubbles: true }));
2355+
`);
2356+
2357+
// Press Enter to finish editing
2358+
await forRemoteExec(`
2359+
const element = document.getElementById('testId');
2360+
const event = new KeyboardEvent('keydown', {
2361+
key: 'Enter',
2362+
bubbles: true,
2363+
cancelable: true
2364+
});
2365+
element.dispatchEvent(event);
2366+
`);
2367+
2368+
// Wait for operation to complete
2369+
await awaits(1000);
2370+
2371+
// Verify changes in source code
2372+
const updatedContent = DocumentManager.getCurrentDocument().getText();
2373+
expect(updatedContent).toContain(newText);
2374+
expect(updatedContent).not.toContain("Brackets is awesome!");
2375+
2376+
// Verify changes in DOM
2377+
await forRemoteExec(`document.getElementById('testId').textContent.trim()`, (result) => {
2378+
return result === newText;
2379+
});
2380+
2381+
await endEditModePreviewSession();
2382+
}, 30000);
2383+
2384+
it("should cancel text edit when Escape key is pressed", async function () {
2385+
await awaitsForDone(
2386+
SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2387+
"SpecRunnerUtils.openProjectFiles simple1.html"
2388+
);
2389+
2390+
await waitsForLiveDevelopmentToOpenWithEditMode("hover");
2391+
2392+
// Get original source code content
2393+
const originalContent = DocumentManager.getCurrentDocument().getText();
2394+
expect(originalContent).toContain("Brackets is awesome!"); // Original text
2395+
2396+
const temporaryText = "This should be cancelled!";
2397+
2398+
// Double-click to start editing
2399+
await forRemoteExec(`
2400+
const element = document.getElementById('testId');
2401+
const event = new MouseEvent('dblclick', {
2402+
bubbles: true,
2403+
cancelable: true
2404+
});
2405+
element.dispatchEvent(event);
2406+
`);
2407+
2408+
await awaits(500);
2409+
2410+
// Modify the text content
2411+
await forRemoteExec(`
2412+
const element = document.getElementById('testId');
2413+
element.textContent = '${temporaryText}';
2414+
element.dispatchEvent(new Event('input', { bubbles: true }));
2415+
`);
2416+
2417+
// Press Escape to cancel editing
2418+
await forRemoteExec(`
2419+
const element = document.getElementById('testId');
2420+
const event = new KeyboardEvent('keydown', {
2421+
key: 'Escape',
2422+
bubbles: true,
2423+
cancelable: true
2424+
});
2425+
element.dispatchEvent(event);
2426+
`);
2427+
2428+
// Wait for operation to complete
2429+
await awaits(1000);
2430+
2431+
// Verify source code is unchanged (edit was cancelled)
2432+
const finalContent = DocumentManager.getCurrentDocument().getText();
2433+
expect(finalContent).toContain("Brackets is awesome!"); // Original text preserved
2434+
expect(finalContent).not.toContain(temporaryText); // Temporary text not saved
2435+
2436+
// Verify DOM reverted to original text
2437+
await forRemoteExec(`document.getElementById('testId').textContent.trim()`, (result) => {
2438+
return result === "Brackets is awesome!";
2439+
});
2440+
2441+
// Verify element is no longer in edit mode
2442+
await forRemoteExec(`document.getElementById('testId').hasAttribute('contenteditable')`, (result) => {
2443+
return result === false;
2444+
});
2445+
2446+
await endEditModePreviewSession();
2447+
}, 30000);
2448+
2449+
it("should finish text edit when element loses focus (blur)", async function () {
2450+
await awaitsForDone(
2451+
SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2452+
"SpecRunnerUtils.openProjectFiles simple1.html"
2453+
);
2454+
2455+
await waitsForLiveDevelopmentToOpenWithEditMode("hover");
2456+
2457+
// Get original source code content
2458+
const originalContent = DocumentManager.getCurrentDocument().getText();
2459+
expect(originalContent).toContain("Brackets is awesome!"); // Original text
2460+
2461+
const newText = "Edited via blur event!";
2462+
2463+
// Double-click to start editing
2464+
await forRemoteExec(`
2465+
const element = document.getElementById('testId');
2466+
const event = new MouseEvent('dblclick', {
2467+
bubbles: true,
2468+
cancelable: true
2469+
});
2470+
element.dispatchEvent(event);
2471+
`);
2472+
2473+
await awaits(500);
2474+
2475+
// Modify the text content
2476+
await forRemoteExec(`
2477+
const element = document.getElementById('testId');
2478+
element.textContent = '${newText}';
2479+
element.dispatchEvent(new Event('input', { bubbles: true }));
2480+
`);
2481+
2482+
// Click outside the element to trigger blur
2483+
await forRemoteExec(`
2484+
document.body.click(); // Click on body to lose focus
2485+
`);
2486+
2487+
// Wait for operation to complete
2488+
await awaits(1000);
2489+
2490+
// Verify changes were saved in source code
2491+
const updatedContent = DocumentManager.getCurrentDocument().getText();
2492+
expect(updatedContent).toContain(newText);
2493+
expect(updatedContent).not.toContain("Brackets is awesome!");
2494+
2495+
// Verify changes in DOM
2496+
await forRemoteExec(`document.getElementById('testId').textContent.trim()`, (result) => {
2497+
return result === newText;
2498+
});
2499+
2500+
// Verify element is no longer in edit mode
2501+
await forRemoteExec(`document.getElementById('testId').hasAttribute('contenteditable')`, (result) => {
2502+
return result === false;
2503+
});
2504+
2505+
await endEditModePreviewSession();
2506+
}, 30000);
22382507
});
22392508
});
22402509
});

0 commit comments

Comments
 (0)