testeranto
Version:
the AI powered BDD test framework for typescript projects
331 lines (319 loc) • 11.5 kB
HTML
<div class="snap-container">
<!-- Hero Section -->
<section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="
background: linear-gradient(0deg, #000 0%, #222 50%, #000 100%);
background-size: 200% 200%;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<style>
.snap-section h2 {
font-size: 500% ;
}
.snap-section .lead {
font-size: 150% ;
}
</style>
<div class="container text-center">
<h1 class="display-3 fw-bold mb-4">Testeranto</h1>
<h2 class="lead fs-2 mb-5">
The AI-powered BDD test framework for Typescript projects.
</h2>
</div>
</section>
<!-- Vibe Coding (Left) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(to bottom, #0a0023 0%, #551a57 100%);
color: var(--dark-vibrant-text);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 mb-4 text-center">
Vibe Coding meets<br />the Real World
</h2>
</div>
<div class="col-md-6">
<p class="lead">
You've heard the hype - now it's time to get down to business.
Harness the raw power of LLMs to write and test your TypeScript at
scale. Soon you'll be working in your real-world codebase like a
pro.
</p>
</div>
</div>
</div>
</section>
<!-- Self-fixing Tests (Right) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(
135deg,
rgba(66, 85, 197, 0.9) 0%,
rgba(105, 4, 106, 0.9) 100%
),
radial-gradient(
circle at 30% 30%,
rgba(66, 85, 197, 0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 70% 70%,
rgba(105, 4, 106, 0.2) 0%,
transparent 50%
);
color: var(--dark-vibrant-text);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<h2 class="display-4 mb-4 text-center">
Tests so smart<br />they fix themselves
</h2>
</div>
<div class="col-md-6 order-md-1">
<p class="lead">
When tests fail, an LLM can automatically resolve the problem with a
single click. They handle type errors and static analysis too.
Informed by your documentation, they can even implement new
features. You might never write code by hand again.
</p>
</div>
</div>
</div>
</section>
<!-- Precision Prompts (Left) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: radial-gradient(
ellipse at top left,
#1900fe 0%,
transparent 70%
),
radial-gradient(ellipse at bottom right, #00e5ff 0%, transparent 70%),
linear-gradient(to bottom, #1900fe 0%, #00e5ff 100%);
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 mb-4 text-center">
Perfectly<br />Precise<br />Prompts
</h2>
</div>
<div class="col-md-6">
<p class="lead">
Testeranto's optimized prompts maximize the LLM's limited context
window by including only the most relevant source files,
documentation, and test results. This means you can get better
results from smaller models. The context is so well-structured that
you can even run OpenRouter models locally and avoid paying those
pesky API fees.
</p>
</div>
</div>
</div>
</section>
<!-- Test Results (Right) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(
135deg,
rgba(54, 206, 65, 0.9) 0%,
rgba(59, 188, 255, 0.9) 100%
),
radial-gradient(
circle at 20% 30%,
rgba(54, 206, 65, 0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(59, 188, 255, 0.2) 0%,
transparent 50%
);
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<h2 class="display-4 mb-4 text-center">
Test results,<br />artfully arranged
</h2>
</div>
<div class="col-md-6 order-md-1">
<p class="lead">
Are you tired of looking at ugly test reports? Testeranto tracks
everything in Git and presents test results, static analysis, type
errors, screenshots, features, and documentation in a lovely little
static site that's easily deployed to GitHub Pages.
</p>
</div>
</div>
</div>
</section>
<!-- Multi-runtime (Left) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(
135deg,
rgba(19, 72, 0, 0.9) 0%,
rgba(48, 222, 57, 0.9) 100%
),
radial-gradient(
circle at 20% 30%,
rgba(19, 72, 0, 0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(48, 222, 57, 0.2) 0%,
transparent 50%
);
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 mb-4 text-center">
Frontend, backend<br />and everything in between
</h2>
</div>
<div class="col-md-6">
<p class="lead">
Run your tests in Node.js, Chrome, or both! Testeranto's custom
multi-runtime architecture can execute tests in any environment. You
no longer need to hoist your React components with Jest - you can
render and test them right in the browser. You can even take
screenshots with puppeteer!
</p>
</div>
</div>
</div>
</section>
<!-- Typed BDD DSL (Right) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(
135deg,
rgba(255, 152, 0, 0.9) 0%,
rgba(229, 255, 107, 0.9) 100%
),
radial-gradient(
circle at 20% 30%,
rgba(255, 152, 0, 0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 80% 70%,
rgba(229, 255, 107, 0.2) 0%,
transparent 50%
);
color: var(--primary-vibrant-text);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<h2 class="display-4 mb-4 text-center">A new type of BDD</h2>
</div>
<div class="col-md-6 order-md-1">
<p class="lead">
Behavior-Driven Development specifications are written in a
tightly-typed TypeScript DSL. You can edit those specs right in the
browser with Github's Web VSCode editor, without ever cloning your
project. It's so easy, even a stakeholder can do it.
</p>
</div>
</div>
</div>
</section>
<!-- Aider (Left) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(
135deg,
#ff2222 0%,
#ffc107 50%,
#ff2222 100%
);
background-size: 200% 200%;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: gradientFlow 15s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 mb-4 text-center">
Your repo made smarter with Aider.
</h2>
</div>
<div class="col-md-6">
<p class="lead">
Aider is an AI pair-programming assistant that can read and edit
local files. While Testeranto leverages Aider for prompt execution,
you can also use it directly to generate tested TypeScript right
from the command line.
</p>
</div>
</div>
</div>
</section>
<!-- Bundle of Joy (Right) -->
<section class="snap-section min-vh-100 d-flex align-items-center" style="
background: linear-gradient(to bottom, #d10000 0%, #330033 100%);
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: vibrantPulse 8s ease infinite;
">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-2">
<h2 class="display-4 mb-4 text-center">A bundle of joy</h2>
</div>
<div class="col-md-6 order-md-1">
<p class="lead">
Testeranto leverages the blazingly fast TypeScript bundler esbuild
to build tests. Its intelligent dependency tracking means editing a
file only triggers re-bundling of affected tests. Add your own
plugins to enhance esbuild's capabilities and you can bundle just
about anything.
</p>
</div>
</div>
</div>
</section>
<!-- Demo Section -->
<section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="
background: linear-gradient(0deg, #000 0%, #222 50%, #000 100%);
animation: vibrantPulse 8s ease infinite;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
">
<div class="container text-center">
<h2 class="display-4 mb-4">A demo is worth a thousand tokens.</h2>
<h2 class="mb-5">
<a href="/testeranto/projects.html#/projects/core/tests/src%2Fcomponents%2Fpure%2FProjectPageView.test%2Findex.tsx/web"
style="">See it for yourself</a>
</h2>
</div>
</section>
<!-- Beta Program Section -->
<!-- <section class="snap-section d-flex align-items-center justify-content-center min-vh-100" style="background: white;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
<div class="container text-center">
<h2 class="display-4 mb-4">A demo is worth a thousand tokens.</h2>
<p class="lead mb-5">See testeranto in action <a
href="/testeranto/projects.html#/projects/core/tests/src%2Fcomponents%2Fpure%2FProjectPageView.test%2Findex.tsx/web"
style="color: #fff;">here</a></p>
</div>
</section> -->
</div>