<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>QA Eval — SPA Store</title>
<style>
body { font-family: sans-serif; padding: 20px; margin: 0; }
nav { background: #333; padding: 10px 20px; }
nav a { color: white; margin-right: 15px; text-decoration: none; cursor: pointer; }
nav a:hover { text-decoration: underline; }
#app { padding: 20px; }
.product { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 4px; }
.product button { padding: 6px 12px; background: #0066cc; color: white; border: none; cursor: pointer; }
.cart-count { background: #cc0000; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.error { color: red; padding: 10px; }
.loading { color: #666; padding: 10px; }
</style>
</head>
<body>
<nav>
<a href="#/home">Home</a>
<a href="#/prodcts">Products</a> <!-- BUG 1: broken route — typo "prodcts" instead of "products" -->
<a href="#/contact">Contact</a>
<span class="cart-count" id="cart-count">0</span>
</nav>
<div id="app">
<p>Welcome to SPA Store. Use the navigation above.</p>
</div>
<script>
let cartCount = 0;
// BUG 2: cart count never resets on route change — stale state
function addToCart() {
cartCount++;
document.getElementById('cart-count').textContent = cartCount;
}
function renderHome() {
document.getElementById('app').innerHTML = `
<h1>Welcome to SPA Store</h1>
<p>Browse our products using the navigation above.</p>
`;
}
function renderProducts() {
document.getElementById('app').innerHTML = '<p class="loading">Loading products...</p>';
// BUG 3: async race — shows data briefly, then shows error
setTimeout(() => {
document.getElementById('app').innerHTML = `
<h1>Products</h1>
<div class="product">
<h3>Widget A</h3>
<p>$29.99</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
<div class="product">
<h3>Widget B</h3>
<p>$49.99</p>
<button onclick="addToCart()">Add to Cart</button>
</div>
`;
}, 300);
setTimeout(() => {
document.getElementById('app').innerHTML = '<p class="error">Error: Failed to fetch products from API</p>';
}, 1000);
}
function renderContact() {
document.getElementById('app').innerHTML = `
<h1>Contact Us</h1>
<p>Email: support@spastore.example.com</p>
`;
}
// BUG 4: nav links have no aria-current attribute on active route
function router() {
const hash = window.location.hash || '#/home';
switch (hash) {
case '#/home': renderHome(); break;
case '#/products': renderProducts(); break;
case '#/contact': renderContact(); break;
default:
document.getElementById('app').innerHTML = '<p>Page not found</p>';
}
// BUG 5: console.warn on every route change — simulates listener leak
console.warn('Possible memory leak detected: 11 event listeners added to window');
}
window.addEventListener('hashchange', router);
router();
</script>
</body>
</html>