Eshu
view release on metacpan or search on metacpan
t/0108-realworld-web-patterns.t view on Meta::CPAN
<div class="field">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Sign in</button>
<p><a href="/forgot">Forgot password?</a></p>
</form>
</main>
</body>
</html>
END
my $exp = <<'END';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<main class="auth-container">
<form method="POST" action="/login" class="login-form">
<h1>Sign in</h1>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div class="field">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Sign in</button>
<p><a href="/forgot">Forgot password?</a></p>
</form>
</main>
</body>
</html>
END
is(Eshu->indent_html($in), $exp, 'HTML: login form with void elements and nested structure');
}
# Navigation component
{
my $in = <<'END';
<nav class="site-nav" aria-label="Main navigation">
<div class="nav-brand">
<a href="/" class="logo"><img src="/img/logo.svg" alt="Home" width="120" height="40"></a>
</div>
<ul class="nav-links" role="list">
<li><a href="/about" class="nav-link">About</a></li>
<li class="has-dropdown">
<a href="/products" class="nav-link" aria-expanded="false">Products</a>
<ul class="dropdown" role="list">
<li><a href="/products/alpha">Alpha</a></li>
<li><a href="/products/beta">Beta</a></li>
</ul>
</li>
<li><a href="/contact" class="nav-link">Contact</a></li>
</ul>
<button class="nav-toggle" aria-controls="nav-links" aria-expanded="false">Menu</button>
</nav>
END
my $exp = <<'END';
<nav class="site-nav" aria-label="Main navigation">
<div class="nav-brand">
<a href="/" class="logo"><img src="/img/logo.svg" alt="Home" width="120" height="40"></a>
</div>
<ul class="nav-links" role="list">
<li><a href="/about" class="nav-link">About</a></li>
<li class="has-dropdown">
<a href="/products" class="nav-link" aria-expanded="false">Products</a>
<ul class="dropdown" role="list">
<li><a href="/products/alpha">Alpha</a></li>
<li><a href="/products/beta">Beta</a></li>
</ul>
</li>
<li><a href="/contact" class="nav-link">Contact</a></li>
</ul>
<button class="nav-toggle" aria-controls="nav-links" aria-expanded="false">Menu</button>
</nav>
END
is(Eshu->indent_html($in), $exp, 'HTML: nested nav with dropdown and aria attributes');
}
# HTML table
{
my $in = <<'END';
<table class="data-table" role="grid">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td><span class="badge badge--admin">Admin</span></td>
<td><a href="/users/1/edit">Edit</a></td>
</tr>
</tbody>
</table>
END
my $exp = <<'END';
<table class="data-table" role="grid">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td><span class="badge badge--admin">Admin</span></td>
<td><a href="/users/1/edit">Edit</a></td>
</tr>
</tbody>
</table>
END
is(Eshu->indent_html($in), $exp, 'HTML: data table with thead/tbody and scope attributes');
}
# ── XML patterns ───────────────────────────────────────────────────────────
# Atom feed
{
my $in = <<'END';
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>My Blog</title>
<subtitle>Thoughts on code</subtitle>
<link href="https://example.com/" rel="alternate"/>
( run in 1.707 second using v1.01-cache-2.11-cpan-600a1bdf6e4 )