designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: selector test page with mock OWA DOM fragments

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 09:00:11 -07:00
parent 62157e67bc
commit 2140b4468a
1 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
selectors-test.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outlook Relook — Selector Test Page</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; }
h1 { font-size: 18px; margin-bottom: 16px; }
h2 { font-size: 14px; margin: 20px 0 8px; color: #666; }
.mock { border: 1px dashed #ccc; padding: 8px 12px; margin: 4px 0; font-size: 13px; background: #fafafa; }
.result { margin: 4px 0; font-size: 12px; font-family: monospace; }
.pass { color: #2e7d32; }
.fail { color: #c62828; }
#results { margin-top: 24px; border-top: 1px solid #eee; padding-top: 16px; }
button { padding: 8px 16px; margin-top: 12px; cursor: pointer; }
</style>
</head>
<body>
<h1>Outlook Relook — Selector Test Page</h1>
<p>Mock OWA DOM fragments. Click "Run Tests" to verify selectors match.</p>
<!-- Mock OWA elements -->
<h2>Copilot</h2>
<div class="mock" aria-label="Copilot" role="button">Copilot Button</div>
<div class="mock" aria-label="Copilot chat" role="complementary">Copilot Pane</div>
<div class="mock" aria-label="Inline writing suggestion">Copilot Compose Suggestion</div>
<h2>Suggested Replies</h2>
<div class="mock" aria-label="Suggested replies" role="group">Sounds good! | Thanks! | Got it.</div>
<h2>Promotional Banners</h2>
<div class="mock" aria-label="Try the new Outlook" role="banner">Try the new Outlook</div>
<div class="mock" aria-label="Upgrade to premium">Upgrade to premium</div>
<div class="mock" aria-label="Get the Outlook app">Get the Outlook app</div>
<h2>Focused/Other Tabs</h2>
<div class="mock" role="tablist" aria-label="Focused Inbox tabs">
<div role="tab">Focused</div>
<div role="tab">Other</div>
</div>
<h2>Sidebar App Icons</h2>
<nav class="mock" aria-label="App navigation">
<div>Mail</div><div>Calendar</div><div>People</div><div>To Do</div>
</nav>
<h2>Layout Regions</h2>
<div class="mock" role="banner">Top Bar / Banner</div>
<div class="mock" role="toolbar" aria-label="Command actions">Command Bar</div>
<div class="mock" role="listbox" aria-label="Message list">
<div role="option" aria-label="Unread: Subject line">Message Row</div>
<div role="option">Read Message Row</div>
</div>
<div class="mock" role="navigation" aria-label="Folder pane">
<div role="tree" aria-label="Folder list">
<div role="treeitem">Inbox</div>
<div role="treeitem">Sent</div>
</div>
</div>
<h2>Behavior Targets</h2>
<div class="mock" role="search"><input placeholder="Search" aria-label="Search mail"></div>
<div class="mock" aria-label="Ribbon display options" aria-expanded="true" role="button">Ribbon Toggle</div>
<div class="mock" role="alert">Toast notification: Message sent</div>
<button id="runTests">Run Tests</button>
<div id="results"></div>
<script>
document.getElementById('runTests').addEventListener('click', function () {
var results = document.getElementById('results');
// Clear results using safe DOM methods
while (results.firstChild) {
results.removeChild(results.firstChild);
}
var heading = document.createElement('h2');
heading.textContent = 'Test Results';
results.appendChild(heading);
var tests = [
{ name: 'copilot-button', selector: '[aria-label*="Copilot" i]', expectMatch: true },
{ name: 'copilot-pane', selector: '[aria-label*="Copilot" i][role="complementary"]', expectMatch: true },
{ name: 'copilot-compose', selector: '[aria-label*="writing suggestion" i]', expectMatch: true },
{ name: 'suggested-replies', selector: '[aria-label*="Suggested repl" i]', expectMatch: true },
{ name: 'promo-banners', selector: '[aria-label*="Try the new" i]', expectMatch: true },
{ name: 'focused-tabs', selector: '[role="tablist"][aria-label*="Focused" i]', expectMatch: true },
{ name: 'sidebar-apps', selector: 'nav[aria-label*="App" i]', expectMatch: true },
{ name: 'top-bar', selector: '[role="banner"]', expectMatch: true },
{ name: 'command-bar-alt', selector: '[role="toolbar"][aria-label*="action" i]', expectMatch: true },
{ name: 'message-list', selector: '[role="listbox"][aria-label*="Message list" i]', expectMatch: true },
{ name: 'folder-pane', selector: '[role="navigation"][aria-label*="Folder" i]', expectMatch: true },
{ name: 'search', selector: '[role="search"]', expectMatch: true },
{ name: 'ribbon-toggle', selector: '[aria-label*="Ribbon" i][aria-expanded]', expectMatch: true },
{ name: 'toast', selector: '[role="alert"]', expectMatch: true },
];
var pass = 0;
var fail = 0;
for (var i = 0; i < tests.length; i++) {
var test = tests[i];
var found = document.querySelectorAll(test.selector).length > 0;
var ok = found === test.expectMatch;
var div = document.createElement('div');
div.className = 'result ' + (ok ? 'pass' : 'fail');
div.textContent = (ok ? 'PASS' : 'FAIL') + ' ' + test.name + ': selector="' + test.selector + '" found=' + found + ' expected=' + test.expectMatch;
results.appendChild(div);
if (ok) pass++; else fail++;
}
var summary = document.createElement('div');
summary.className = 'result';
summary.textContent = pass + ' passed, ' + fail + ' failed out of ' + tests.length + ' tests';
summary.style.fontWeight = 'bold';
summary.style.marginTop = '12px';
results.appendChild(summary);
});
</script>
</body>
</html>