Skip to content

Add Using Suites #13

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
iddan merged 2 commits into from
Dec 3, 2025
Merged

Add Using Suites #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c29d85f
Add using suites to sidebar
iddan Dec 3, 2025
ab0766e
Add using suites to landing page
iddan Dec 3, 2025
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
27 changes: 23 additions & 4 deletions config/docs-sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,29 @@
const sidebars = {
tutorialSidebar: [
{
type: 'autogenerated',
dirName: '.',
}
]
type: "autogenerated",
dirName: ".",
},
{
type: "html",
value: `
<div style="margin-top: 1rem; padding: 1rem; border-radius: 8px; overflow: hidden; background: var(--theme-section-bg);">
<h3 style="margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: 600;">
Using Suites?
</h3>
<p style="margin: 0; font-size: 0.9rem; line-height: 1.5;">
<a
href="https://github.com/suites-dev/suites/discussions/655"
target="_blank"
rel="noopener noreferrer"
style="text-decoration: underline;"
>Share your experience</a> and help us shape the future of Suites
</p>
</div>
`,
defaultStyle: true,
},
],
};

module.exports = sidebars;
21 changes: 21 additions & 0 deletions src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,27 @@
filter: grayscale(0%);
}

.shareExperience {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 400;
color: rgba(253, 245, 248, 0.7);
margin-top: 2rem;
margin-bottom: 0;
}

.shareExperience a {
color: inherit;
text-decoration: underline;
font-weight: 500;
transition: all 0.3s ease;
}

.shareExperience a:hover {
color: rgba(253, 245, 248, 0.9);
text-decoration: underline;
}

@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem 1rem;
Expand Down
72 changes: 54 additions & 18 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,37 +19,46 @@ function HomepageHeader() {
<div className={styles.textColumn}>
<h1 className={styles.title}>Suites</h1>
<p className={styles.subtitle}>
<strong>A unit-testing framework for TypeScript backends working
with inversion of control and dependency injection</strong>
<strong>
A unit-testing framework for TypeScript backends working with
inversion of control and dependency injection
</strong>
</p>
<div className={styles.buttonGroup}>
<Link
className={`${styles.button} ${styles.buttonPrimary} button button--primary`}
to="/docs/get-started/"
onClick={() => trackButtonClick('get_started', 'homepage_hero')}
onClick={() => trackButtonClick("get_started", "homepage_hero")}
>
Get Started
</Link>
<Link
className={`${styles.button} button button--outline button--primary`}
to="/docs/get-started/why-suites"
onClick={() => trackButtonClick('why_suites', 'homepage_hero')}
onClick={() => trackButtonClick("why_suites", "homepage_hero")}
>
Why Suites?
</Link>
<Link
className={`${styles.button} button button--outline button--primary`}
to="/docs/guides/"
onClick={() => trackButtonClick('guides', 'homepage_hero')}
onClick={() => trackButtonClick("guides", "homepage_hero")}
>
Guides
</Link>
<Link
className={`${styles.button} button button--outline button--primary`}
to="https://github.com/suites-dev/suites"
onClick={() => trackButtonClick('github', 'homepage_hero')}
onClick={() => trackButtonClick("github", "homepage_hero")}
>
<FaGithub style={{ marginRight: '8px', verticalAlign: 'middle', position: 'relative', top: '-1px' }} />
<FaGithub
style={{
marginRight: "8px",
verticalAlign: "middle",
position: "relative",
top: "-1px",
}}
/>
GitHub
</Link>
</div>
Expand Down Expand Up @@ -200,17 +209,19 @@ describe('User Service', () => {
<div className={styles.featureEmoji}>👩‍💻</div>
<h3 className={styles.featureTitle}>Declarative</h3>
<p className={styles.featureDescription}>
One function call creates fully-typed, isolated test environments.
Suites auto-generates all mocks and wires dependencies automatically.
No manual setup, no type casts, no boilerplate.
One function call creates fully-typed, isolated test
environments. Suites auto-generates all mocks and wires
dependencies automatically. No manual setup, no type casts, no
boilerplate.
</p>
</div>
<div className={styles.featureItem}>
<div className={styles.featureEmoji}>✅</div>
<h3 className={styles.featureTitle}>Type-Safe</h3>
<p className={styles.featureDescription}>
Generate type-safe mocks bound to implementations. Eliminate broken
tests after refactors, silent runtime failures, and manual type casting.
Generate type-safe mocks bound to implementations. Eliminate
broken tests after refactors, silent runtime failures, and
manual type casting.
</p>
</div>
<div className={styles.featureItem}>
Expand All @@ -226,7 +237,10 @@ describe('User Service', () => {
<div className={styles.featureEmoji}>✨</div>
<h3 className={styles.featureTitle}>AI Ready</h3>
<p className={styles.featureDescription}>
One canonical pattern teaches AI agents the entire API. Coding agents like Claude Code and Cursor write correct tests in a single pass with 95% less context consumption compared to manual mocking patterns.
One canonical pattern teaches AI agents the entire API. Coding
agents like Claude Code and Cursor write correct tests in a
single pass with 95% less context consumption compared to manual
mocking patterns.
</p>
</div>
</div>
Expand Down Expand Up @@ -263,13 +277,27 @@ describe('User Service', () => {
/>
</div>
</div>
<p className={styles.shareExperience}>
Using Suites?{" "}
<a
href="https://github.com/suites-dev/suites/discussions/655"
target="_blank"
rel="noopener noreferrer"
>
Share your experience
</a>{" "}
and help us shape the future of Suites
</p>
</div>

<section className={styles.alternatingSection}>
<div className={styles.textColumn}>
<h2>One Testing Pattern for Entire Organization</h2>
<p>
Stop relearning test patterns on every project. Suites provides a consistent, standardized approach that works identically across NestJS, InversifyJS, and any DI framework, giving teams a unified testing experience.
Stop relearning test patterns on every project. Suites provides a
consistent, standardized approach that works identically across
NestJS, InversifyJS, and any DI framework, giving teams a unified
testing experience.
</p>
<Link
className={`${styles.button} button button--outline button--primary`}
Expand All @@ -295,7 +323,9 @@ TestBed.sociable(OrderService)
<div className={styles.textColumn}>
<h2>Tests That Reveal Intent, Not Boilerplate</h2>
<p>
Suites' declarative API removes 90% of test setup code. No more scrolling through mock wiring, logic is front and center. New team members write tests on day one, not day ten.
Suites' declarative API removes 90% of test setup code. No more
scrolling through mock wiring, logic is front and center. New team
members write tests on day one, not day ten.
</p>
<Link
className={`${styles.button} button button--outline button--primary`}
Expand All @@ -321,8 +351,10 @@ await unit.generateRandomUser();`}
<div className={styles.textColumn}>
<h2>Type-Safe, Automatic Mocking</h2>
<p>
No more debugging broken mocks. Suites automatically generates fully-typed mocks bound to implementation. Catch errors at compile time, not runtime.
Refactor with confidence while mocks stay valid when dependencies change.
No more debugging broken mocks. Suites automatically generates
fully-typed mocks bound to implementation. Catch errors at compile
time, not runtime. Refactor with confidence while mocks stay valid
when dependencies change.
</p>
<Link
className={`${styles.button} button button--outline button--primary`}
Expand All @@ -348,7 +380,11 @@ userApi.get.mockResolvedValue({ name: 'John' });`}
<div className={styles.textColumn}>
<h2>Built for AI-First Development</h2>
<p>
Manual mocking forces AI agents to hold 40+ lines of boilerplate per test in context. Suites provides one canonical pattern that reduces token consumption by 95%. AI coding assistants like Claude Code, Cursor, and GitHub Copilot generate accurate tests in a single pass without burning tokens on repetitive setup code.
Manual mocking forces AI agents to hold 40+ lines of boilerplate
per test in context. Suites provides one canonical pattern that
reduces token consumption by 95%. AI coding assistants like Claude
Code, Cursor, and GitHub Copilot generate accurate tests in a
single pass without burning tokens on repetitive setup code.
</p>
<Link
className={`${styles.button} button button--outline button--primary`}
Expand Down