Skip to content

test(e2e): add Playwright tests for 5 elements #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ErickXavier merged 1 commit into from
Jun 15, 2026
Merged

test(e2e): add Playwright tests for 5 elements #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions docs/examples/accordion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion — NoJS Elements E2E</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 2rem; color: #333; }
section { margin-bottom: 2rem; }
</style>
</head>
<body>

<!-- Single-mode accordion (default) -->
<section>
<div accordion data-test="single-accordion">
<details data-test="panel-1">
<summary data-test="summary-1">Panel 1</summary>
<p>Content for panel 1.</p>
</details>
<details data-test="panel-2">
<summary data-test="summary-2">Panel 2</summary>
<p>Content for panel 2.</p>
</details>
<details data-test="panel-3">
<summary data-test="summary-3">Panel 3</summary>
<p>Content for panel 3.</p>
</details>
</div>
</section>

<!-- Multi-mode accordion -->
<section>
<div accordion="multi" data-test="multi-accordion">
<details data-test="multi-panel-1">
<summary data-test="multi-summary-1">Multi Panel 1</summary>
<p>Multi content 1.</p>
</details>
<details data-test="multi-panel-2">
<summary data-test="multi-summary-2">Multi Panel 2</summary>
<p>Multi content 2.</p>
</details>
<details data-test="multi-panel-3">
<summary data-test="multi-summary-3">Multi Panel 3</summary>
<p>Multi content 3.</p>
</details>
</div>
</section>

<!-- Pre-opened panel -->
<section>
<div accordion data-test="preopen-accordion">
<details data-test="preopen-panel-1">
<summary>Closed Panel</summary>
<p>Closed content.</p>
</details>
<details open data-test="preopen-panel-2">
<summary>Pre-opened Panel</summary>
<p>Pre-opened content.</p>
</details>
</div>
</section>

<script src="../../../NoJS/dist/iife/no.js"></script>
<script src="../../../dist/iife/nojs-elements.js"></script>
<script>
NoJS.use(NoJSElements);
NoJS.init();
</script>
</body>
</html>
62 changes: 62 additions & 0 deletions docs/examples/breadcrumb/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Breadcrumb — NoJS Elements E2E</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 2rem; color: #333; }
section { margin-bottom: 2rem; }
</style>
</head>
<body>

<!-- Manual breadcrumb with child elements -->
<section>
<nav breadcrumb data-test="manual-breadcrumb">
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/products/widgets">Widgets</a>
<span>Current Item</span>
</nav>
</section>

<!-- Breadcrumb with custom labels via breadcrumb attribute -->
<section>
<nav breadcrumb data-test="labeled-breadcrumb">
<a href="/" breadcrumb="Home Page">Home</a>
<a href="/docs" breadcrumb="Documentation">Docs</a>
<span breadcrumb="API Reference">API</span>
</nav>
</section>

<!-- Breadcrumb with many items (overflow test) -->
<section>
<nav breadcrumb data-test="overflow-breadcrumb" style="max-width: 400px; overflow: hidden;">
<a href="/">Home</a>
<a href="/level-1">Level 1</a>
<a href="/level-1/level-2">Level 2</a>
<a href="/level-1/level-2/level-3">Level 3</a>
<a href="/level-1/level-2/level-3/level-4">Level 4</a>
<span>Current Deep Page</span>
</nav>
</section>

<!-- Non-nav breadcrumb (div) -->
<section>
<div breadcrumb data-test="div-breadcrumb">
<a href="/">Root</a>
<a href="/settings">Settings</a>
<span>Profile</span>
</div>
</section>

<script src="../../../NoJS/dist/iife/no.js"></script>
<script src="../../../dist/iife/nojs-elements.js"></script>
<script>
NoJS.use(NoJSElements);
NoJS.init();
</script>
</body>
</html>
58 changes: 58 additions & 0 deletions docs/examples/popover/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popover — NoJS Elements E2E</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 2rem; color: #333; }
section { margin-bottom: 2rem; }
.popover-content { padding: 1rem; min-width: 150px; }
</style>
</head>
<body>

<!-- Basic popover (bottom, default) -->
<section style="margin-top: 100px;">
<button popover-trigger="basic-pop" data-test="basic-trigger">Show Popover</button>
<div popover="basic-pop" data-test="basic-popover" class="popover-content">
<p data-test="basic-popover-text">Basic popover content</p>
<button popover-dismiss data-test="basic-dismiss">Close</button>
</div>
</section>

<!-- Popover with top position -->
<section style="margin-top: 200px;">
<button popover-trigger="top-pop" data-test="top-trigger">Top Popover</button>
<div popover="top-pop" popover-position="top" data-test="top-popover" class="popover-content">
<p>Top positioned popover</p>
</div>
</section>

<!-- Popover with dismiss button -->
<section>
<button popover-trigger="dismiss-pop" data-test="dismiss-trigger">Dismissable</button>
<div popover="dismiss-pop" data-test="dismiss-popover" class="popover-content">
<p>Click dismiss to close</p>
<button popover-dismiss data-test="dismiss-btn">Dismiss</button>
</div>
</section>

<!-- Multiple triggers for the same popover -->
<section>
<button popover-trigger="shared-pop" data-test="shared-trigger-1">Trigger 1</button>
<button popover-trigger="shared-pop" data-test="shared-trigger-2">Trigger 2</button>
<div popover="shared-pop" data-test="shared-popover" class="popover-content">
<p>Shared popover content</p>
</div>
</section>

<script src="../../../NoJS/dist/iife/no.js"></script>
<script src="../../../dist/iife/nojs-elements.js"></script>
<script>
NoJS.use(NoJSElements);
NoJS.init();
</script>
</body>
</html>
58 changes: 58 additions & 0 deletions docs/examples/scroll-spy/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Spy — NoJS Elements E2E</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 0; color: #333; }
nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid #ccc; padding: 0.5rem 1rem; z-index: 10; display: flex; gap: 1rem; }
nav a { text-decoration: none; color: #666; padding: 0.25rem 0.5rem; border-radius: 4px; }
nav a.active { color: #0066cc; font-weight: bold; background: #e6f0ff; }
.content { padding: 4rem 2rem 2rem; }
.section { min-height: 600px; padding: 2rem 0; border-bottom: 1px solid #eee; }
.section:last-child { min-height: 100vh; }
</style>
</head>
<body>

<!-- Spy navigation -->
<nav data-test="spy-nav">
<a href="#section-intro" spy data-test="spy-intro">Intro</a>
<a href="#section-features" spy data-test="spy-features">Features</a>
<a href="#section-docs" spy data-test="spy-docs">Docs</a>
<a href="#section-contact" spy data-test="spy-contact">Contact</a>
</nav>

<!-- Scrollable content sections -->
<div class="content">
<div id="section-intro" class="section" data-test="target-intro">
<h2>Introduction</h2>
<p>This is the intro section with enough height to be scrolled through.</p>
</div>

<div id="section-features" class="section" data-test="target-features">
<h2>Features</h2>
<p>This is the features section.</p>
</div>

<div id="section-docs" class="section" data-test="target-docs">
<h2>Documentation</h2>
<p>This is the documentation section.</p>
</div>

<div id="section-contact" class="section" data-test="target-contact">
<h2>Contact</h2>
<p>This is the contact section.</p>
</div>
</div>

<script src="../../../NoJS/dist/iife/no.js"></script>
<script src="../../../dist/iife/nojs-elements.js"></script>
<script>
NoJS.use(NoJSElements);
NoJS.init();
</script>
</body>
</html>
96 changes: 96 additions & 0 deletions docs/examples/virtual-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual List — NoJS Elements E2E</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; margin: 2rem; color: #333; }
section { margin-bottom: 2rem; }
.virtual-container {
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
border-radius: 4px;
}
.virtual-item {
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
}
.auto-item {
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>

<!-- Fixed-height virtual list -->
<section>
<div
state="{ items: Array.from({ length: 1000 }, (_, i) => ({ id: i, label: 'Item ' + i })) }"
data-test="fixed-section"
>
<p data-test="item-count" bind="'Total: ' + items.length + ' items'"></p>
<div
virtual
virtual-height="40"
virtual-buffer="5"
class="virtual-container"
data-test="fixed-list"
>
<div each="item in items" key="item.id" class="virtual-item" data-test="virtual-item">
<span bind="item.label"></span>
</div>
</div>
</div>
</section>

<!-- Auto-height virtual list -->
<section>
<div
state="{ autoItems: Array.from({ length: 500 }, (_, i) => ({ id: i, text: 'Auto item ' + i + (i % 3 === 0 ? ' — with extra text for variable height' : '') })) }"
data-test="auto-section"
>
<div
virtual
virtual-height="auto"
virtual-buffer="3"
class="virtual-container"
data-test="auto-list"
>
<div each="item in autoItems" key="item.id" class="auto-item">
<span bind="item.text"></span>
</div>
</div>
</div>
</section>

<!-- Small dataset (fewer items than viewport) -->
<section>
<div
state="{ fewItems: Array.from({ length: 5 }, (_, i) => ({ id: i, name: 'Short ' + i })) }"
data-test="small-section"
>
<div
virtual
virtual-height="40"
class="virtual-container"
data-test="small-list"
>
<div each="item in fewItems" key="item.id" class="virtual-item">
<span bind="item.name"></span>
</div>
</div>
</div>
</section>

<script src="../../../NoJS/dist/iife/no.js"></script>
<script src="../../../dist/iife/nojs-elements.js"></script>
<script>
NoJS.use(NoJSElements);
NoJS.init();
</script>
</body>
</html>
Loading
Loading