@applitools/eyes-playwright
Version:
Applitools Eyes SDK for Playwright
174 lines (162 loc) • 5.51 kB
JavaScript
"use strict";
/**
* Mock Iframe Renderer - Creates mock iframe representations for test mode
*
* This module provides functionality to create mock iframe elements that simulate
* the Eyes test result viewer without actually loading the full iframe. This is
* useful for testing and development purposes, including testing visual appearance
* during CSS loading phases.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.createMockIframe = void 0;
/**
* CSS content that will be loaded after a 1-second delay
* This simulates the delayed loading behavior to test visual appearance during loading
*/
const MOCK_CSS = `
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
transition: all 0.3s ease;
}
.mock-container {
max-width: 600px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
h3 {
margin: 0 0 20px 0;
font-size: 24px;
font-weight: 600;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 10px;
}
.info-item {
margin-bottom: 12px;
padding: 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
animation: slideIn 0.3s ease forwards;
opacity: 0;
}
.info-item:nth-child(1) { animation-delay: 0.1s; }
.info-item:nth-child(2) { animation-delay: 0.2s; }
.info-item:nth-child(3) { animation-delay: 0.3s; }
.info-item:nth-child(4) { animation-delay: 0.4s; }
.info-item:nth-child(5) { animation-delay: 0.5s; }
.info-item:nth-child(6) { animation-delay: 0.6s; }
.info-item:nth-child(7) { animation-delay: 0.7s; }
@keyframes slideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
strong {
opacity: 0.9;
font-weight: 600;
}
.link-container {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
a {
text-decoration: none;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 6px;
display: inline-block;
transition: all 0.2s ease;
}
a:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
`;
/**
* Creates a mock iframe element displaying Eyes test result information
* Uses the srcdoc attribute for inline HTML content and delays CSS loading
* to test visual appearance during loading phases
*
* @param result - The Eyes test result to display
* @returns HTMLIFrameElement with mock content
*/
function createMockIframe(result) {
const iframe = document.createElement('iframe');
iframe.classList.add('eyes-session-result', 'eyes-mock-iframe');
iframe.setAttribute('value', result.id);
iframe.style.visibility = 'hidden';
iframe.style.opacity = '0';
// Initial HTML content without styling (to show unstyled phase)
const htmlContent = `
<html>
<head>
<meta name="color-scheme" content="light dark">
<meta charset="UTF-8">
<style id="loading-style">
body {
margin: 0;
padding: 20px;
font-family: monospace;
}
.loading-indicator {
font-size: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="loading-indicator">Loading styles...</div>
<div class="mock-container">
<h3>Mock Eyes Iframe</h3>
<div class="info-item"><strong>Session ID:</strong> ${result.id}</div>
<div class="info-item"><strong>Status:</strong> ${result.status}</div>
<div class="info-item"><strong>Browser:</strong> ${result.hostApp}</div>
<div class="info-item"><strong>Viewport:</strong> ${result.hostDisplaySize.width}x${result.hostDisplaySize.height}</div>
<div class="info-item"><strong>Steps:</strong> ${result.steps}</div>
<div class="info-item"><strong>Is New:</strong> ${result.isNew}</div>
<div class="info-item"><strong>Has Differences:</strong> ${result.isDifferent}</div>
<div class="link-container">
<a href="${result.appUrls.session}" target="_blank">
View in Eyes Dashboard →
</a>
</div>
</div>
<script>
// Simulate CSS loading after 1 second
setTimeout(function() {
// Remove loading indicator
const loadingIndicator = document.querySelector('.loading-indicator');
if (loadingIndicator) {
loadingIndicator.remove();
}
// Remove initial loading styles
const loadingStyle = document.getElementById('loading-style');
if (loadingStyle) {
loadingStyle.remove();
}
// Add the main styles
const styleElement = document.createElement('style');
styleElement.textContent = ${JSON.stringify(MOCK_CSS)};
document.head.appendChild(styleElement);
}, 500);
</script>
</body>
</html>
`;
iframe.srcdoc = htmlContent;
iframe.onload = () => {
// Show iframe after load with a smooth transition
iframe.style.visibility = 'visible';
iframe.style.opacity = '1';
};
// Show iframe after it's loaded with a smooth transition
return iframe;
}
exports.createMockIframe = createMockIframe;