Skip to content

Commit f1411a3

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
feat: live preview edit mode basic tests to check for boxes presence
1 parent 6150d61 commit f1411a3

File tree

1 file changed

+245
-0
lines changed

1 file changed

+245
-0
lines changed

‎test/spec/LiveDevelopmentMultiBrowser-test.js‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@ define(function (require, exports, module) {
174174
// Ensure edit mode is disabled before opening live preview
175175
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
176176
LiveDevMultiBrowser.config.isProUser = false;
177+
// Update the remote browser configuration to sync the disabled state
178+
if (LiveDevMultiBrowser.updateConfig) {
179+
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
180+
}
177181
}
178182
LiveDevMultiBrowser.open();
179183
await waitsForLiveDevelopmentFileSwitch();
@@ -1882,5 +1886,246 @@ define(function (require, exports, module) {
18821886
testWindow.$("#pinURLButton").click();
18831887
await endPreviewSession();
18841888
}, 30000);
1889+
1890+
describe("Edit Mode Tests", function () {
1891+
1892+
async function waitsForLiveDevelopmentToOpenWithEditMode(elemHighlights = 'hover') {
1893+
// Enable edit mode before opening live preview
1894+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
1895+
LiveDevMultiBrowser.config.isProUser = true;
1896+
LiveDevMultiBrowser.config.elemHighlights = elemHighlights;
1897+
// Update the remote browser configuration
1898+
if (LiveDevMultiBrowser.updateConfig) {
1899+
LiveDevMultiBrowser.updateConfig(JSON.stringify(LiveDevMultiBrowser.config));
1900+
}
1901+
}
1902+
LiveDevMultiBrowser.open();
1903+
await waitsForLiveDevelopmentFileSwitch();
1904+
}
1905+
1906+
async function endEditModePreviewSession() {
1907+
await _enableLiveHighlights(true);
1908+
LiveDevMultiBrowser.close();
1909+
// Disable edit mode after session
1910+
if (LiveDevMultiBrowser && LiveDevMultiBrowser.config) {
1911+
LiveDevMultiBrowser.config.isProUser = false;
1912+
LiveDevMultiBrowser.config.elemHighlights = 'hover';
1913+
}
1914+
await awaitsForDone(CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
1915+
"closing all file");
1916+
}
1917+
1918+
async function waitForInfoBox(shouldBeVisible = true, timeout = 5000) {
1919+
await forRemoteExec(`
1920+
const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
1921+
let hasInfoBox = false;
1922+
shadowHosts.forEach(host => {
1923+
if (host.shadowRoot && host.shadowRoot.innerHTML.includes('phoenix-node-info-box')) {
1924+
hasInfoBox = true;
1925+
}
1926+
});
1927+
hasInfoBox;
1928+
`, (result) => {
1929+
return result === shouldBeVisible;
1930+
});
1931+
}
1932+
1933+
async function waitForMoreOptionsBox(shouldBeVisible = true, timeout = 5000) {
1934+
await forRemoteExec(`
1935+
const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
1936+
let hasMoreOptionsBox = false;
1937+
shadowHosts.forEach(host => {
1938+
if (host.shadowRoot && host.shadowRoot.innerHTML.includes('phoenix-more-options-box')) {
1939+
hasMoreOptionsBox = true;
1940+
}
1941+
});
1942+
hasMoreOptionsBox;
1943+
`, (result) => {
1944+
return result === shouldBeVisible;
1945+
});
1946+
}
1947+
1948+
async function waitForClickedElement(shouldBeVisible = true, timeout = 5000) {
1949+
await forRemoteExec(`
1950+
const highlightedElements = document.getElementsByClassName("__brackets-ld-highlight");
1951+
Array.from(highlightedElements).some(el =>
1952+
el.style.backgroundColor && el.style.backgroundColor.includes('rgba(0, 162, 255')
1953+
);
1954+
`, (result) => {
1955+
return result === shouldBeVisible;
1956+
});
1957+
}
1958+
1959+
async function waitForNoEditBoxes() {
1960+
// Wait for no shadow DOM boxes and no clicked element highlighting
1961+
await forRemoteExec(`
1962+
const shadowHosts = Array.from(document.body.children).filter(el => el.shadowRoot);
1963+
shadowHosts.length;
1964+
`, (result) => {
1965+
return result === 0;
1966+
});
1967+
1968+
await waitForClickedElement(false);
1969+
}
1970+
1971+
it("should show info box on hover when elemHighlights is 'hover'", async function () {
1972+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
1973+
"SpecRunnerUtils.openProjectFiles simple1.html");
1974+
1975+
await waitsForLiveDevelopmentToOpenWithEditMode('hover');
1976+
1977+
// Initially no boxes should be visible
1978+
await waitForNoEditBoxes();
1979+
1980+
// Hover over testId element
1981+
await forRemoteExec(`
1982+
const event = new MouseEvent('mouseover', { bubbles: true, cancelable: true });
1983+
document.getElementById('testId').dispatchEvent(event);
1984+
`);
1985+
1986+
// Info box should appear on hover
1987+
await waitForInfoBox(true);
1988+
await waitForMoreOptionsBox(false);
1989+
1990+
// Mouse out should hide the info box
1991+
await forRemoteExec(`
1992+
const event = new MouseEvent('mouseout', { bubbles: true, cancelable: true });
1993+
document.getElementById('testId').dispatchEvent(event);
1994+
`);
1995+
1996+
await waitForInfoBox(false);
1997+
await waitForNoEditBoxes();
1998+
1999+
await endEditModePreviewSession();
2000+
}, 30000);
2001+
2002+
it("should show more options box on click when elemHighlights is 'hover'", async function () {
2003+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2004+
"SpecRunnerUtils.openProjectFiles simple1.html");
2005+
2006+
await waitsForLiveDevelopmentToOpenWithEditMode('hover');
2007+
2008+
// Click on testId element
2009+
await forRemoteExec(`document.getElementById('testId').click()`);
2010+
2011+
// More options box should appear on click
2012+
await waitForMoreOptionsBox(true);
2013+
await waitForClickedElement(true);
2014+
2015+
// Clicking on a different element should move the box
2016+
await forRemoteExec(`document.getElementById('testId2').click()`);
2017+
2018+
await waitForMoreOptionsBox(true);
2019+
await waitForClickedElement(true);
2020+
2021+
await endEditModePreviewSession();
2022+
}, 30000);
2023+
2024+
it("should show more options box on click when elemHighlights is 'click'", async function () {
2025+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2026+
"SpecRunnerUtils.openProjectFiles simple1.html");
2027+
2028+
await waitsForLiveDevelopmentToOpenWithEditMode('click');
2029+
2030+
// Initially no boxes should be visible
2031+
await waitForNoEditBoxes();
2032+
2033+
// In click mode, hover should not show info box
2034+
await forRemoteExec(`
2035+
const event = new MouseEvent('mouseover', { bubbles: true, cancelable: true });
2036+
document.getElementById('testId').dispatchEvent(event);
2037+
`);
2038+
2039+
// Should still be no boxes visible
2040+
await waitForInfoBox(false);
2041+
await waitForMoreOptionsBox(false);
2042+
2043+
// Click should show more options box
2044+
await forRemoteExec(`document.getElementById('testId').click()`);
2045+
2046+
await waitForMoreOptionsBox(true);
2047+
await waitForClickedElement(true);
2048+
2049+
await endEditModePreviewSession();
2050+
}, 30000);
2051+
2052+
it("should handle multiple element interactions in hover mode", async function () {
2053+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple2.html"]),
2054+
"SpecRunnerUtils.openProjectFiles simple2.html");
2055+
2056+
await waitsForLiveDevelopmentToOpenWithEditMode('hover');
2057+
2058+
// Test hovering over multiple elements
2059+
const elementIds = ['simpId', 'simpId2', 'simpId3'];
2060+
2061+
for (let elementId of elementIds) {
2062+
// Hover over element
2063+
await forRemoteExec(`
2064+
const event = new MouseEvent('mouseover', { bubbles: true, cancelable: true });
2065+
document.getElementById('${elementId}').dispatchEvent(event);
2066+
`);
2067+
2068+
// Info box should appear
2069+
await waitForInfoBox(true);
2070+
2071+
// Mouse out
2072+
await forRemoteExec(`
2073+
const event = new MouseEvent('mouseout', { bubbles: true, cancelable: true });
2074+
document.getElementById('${elementId}').dispatchEvent(event);
2075+
`);
2076+
2077+
// Box should disappear
2078+
await waitForInfoBox(false);
2079+
}
2080+
2081+
await endEditModePreviewSession();
2082+
}, 30000);
2083+
2084+
it("should handle multiple element clicks and box movement", async function () {
2085+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple2.html"]),
2086+
"SpecRunnerUtils.openProjectFiles simple2.html");
2087+
2088+
await waitsForLiveDevelopmentToOpenWithEditMode('hover');
2089+
2090+
const elementIds = ['simpId', 'simpId2', 'simpId3'];
2091+
2092+
// Click on first element
2093+
await forRemoteExec(`document.getElementById('${elementIds[0]}').click()`);
2094+
2095+
await waitForMoreOptionsBox(true);
2096+
await waitForClickedElement(true);
2097+
2098+
// Click on subsequent elements - box should move
2099+
for (let i = 1; i < elementIds.length; i++) {
2100+
await forRemoteExec(`document.getElementById('${elementIds[i]}').click()`);
2101+
2102+
await waitForMoreOptionsBox(true);
2103+
await waitForClickedElement(true);
2104+
}
2105+
2106+
await endEditModePreviewSession();
2107+
}, 30000);
2108+
2109+
it("should dismiss boxes when clicking outside elements", async function () {
2110+
await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
2111+
"SpecRunnerUtils.openProjectFiles simple1.html");
2112+
2113+
await waitsForLiveDevelopmentToOpenWithEditMode('hover');
2114+
2115+
// Click on element to show more options box
2116+
await forRemoteExec(`document.getElementById('testId').click()`);
2117+
2118+
await waitForMoreOptionsBox(true);
2119+
2120+
// Click on body (outside any specific element)
2121+
await forRemoteExec(`document.body.click()`);
2122+
2123+
// Boxes should be dismissed
2124+
await waitForMoreOptionsBox(false);
2125+
await waitForClickedElement(false);
2126+
2127+
await endEditModePreviewSession();
2128+
}, 30000);
2129+
});
18852130
});
18862131
});

0 commit comments

Comments
 (0)