A web application for analyzing Boolean logic expressions and measuring test coverage. Enter any Boolean expression using standard operators and uppercase variable names — the tool generates the complete truth table and reports three coverage metrics: Predicate Coverage, Clause Coverage, and Combinatorial Coverage.
Built with Next.js 15, React 19, TypeScript, and CSS Modules.
- Instant truth table generation for any Boolean expression
- Three coverage metrics displayed with pass/fail status:
- Predicate Coverage (PC) — does the expression evaluate to both
trueandfalse? - Clause Coverage (CC) — does each individual variable evaluate to both
trueandfalse? - Combinatorial Coverage (CoC) — are all 2ⁿ input combinations represented?
- Predicate Coverage (PC) — does the expression evaluate to both
- Per-variable clause coverage breakdown
- Syntax guide and clickable example expressions
- Responsive dark-theme UI
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI library | React 19 |
| Language | TypeScript 5 |
| Styling | CSS Modules |
| Runtime | Node.js 18+ |
Install the following before cloning:
| Tool | Minimum version | Download |
|---|---|---|
| Node.js | 18.x | https://nodejs.org |
| npm | 9.x (bundled with Node.js) | — |
| Git | 2.x | https://git-scm.com |
Verify your versions:
node -v
npm -v
git --version# 1. Clone the repository
git clone https://github.com/kacytran1122/logic-coverage_tool.git
# 2. Enter the project directory
cd logic-coverage_tool
# 3. Install dependencies
npm install
# 4. Start the development server
npm run devOpen your browser at http://localhost:3000
Node.js via nvm (recommended on Linux)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install 20 nvm use 20
# 1. Clone the repository
git clone https://github.com/kacytran1122/logic-coverage_tool.git
# 2. Enter the project directory
cd logic-coverage_tool
# 3. Install dependencies
npm install
# 4. Start the development server
npm run devOpen your browser at http://localhost:3000
Node.js via Homebrew (recommended on macOS)
brew install nodeOr use nvm as shown in the Linux section above.
Open PowerShell or Command Prompt:
# 1. Clone the repository
git clone https://github.com/kacytran1122/logic-coverage_tool.git
# 2. Enter the project directory
cd logic-coverage_tool
# 3. Install dependencies
npm install
# 4. Start the development server
npm run devOpen your browser at http://localhost:3000
Node.js on Windows Download the Windows installer from https://nodejs.org and run it. Git for Windows is available at https://git-scm.com/download/win.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload at http://localhost:3000 |
npm run build |
Create an optimized production build |
npm start |
Serve the production build |
npm run lint |
Run ESLint across the project |
logic-coverage_tool/
├── src/
│ ├── app/
│ │ ├── globals.css # Global CSS variables, resets, animations
│ │ ├── layout.tsx # Root layout with metadata and font setup
│ │ ├── page.tsx # Main interactive page (client component)
│ │ └── page.module.css # Page-level CSS Modules
│ ├── components/
│ │ ├── CoverageCard.tsx # Coverage metric card (PC / CC / CoC)
│ │ ├── CoverageCard.module.css
│ │ ├── TruthTable.tsx # Truth table with T/F highlighting
│ │ └── TruthTable.module.css
│ └── lib/
│ └── logicCoverage.ts # Core analysis logic (pure TypeScript)
├── public/
├── package.json
├── tsconfig.json
├── next.config.ts
└── .gitignore
| Symbol | Meaning | Example |
|---|---|---|
A–Z |
Variable (uppercase letters only) | A, B, C |
&& |
Logical AND | A && B |
|| |
Logical OR | A || B |
! |
Logical NOT | !A |
() |
Grouping | (A || B) && C |
A && B
(A || B) && C
A && (B || !C)
(A || B) && (C || D)
!A || (B && C)
- Type a Boolean expression in the input field (or click an example chip).
- Press Enter or click Analyze.
- Review the three coverage cards — each shows PASS or FAIL.
- Scroll down to inspect the full truth table.
The overall expression must evaluate to both true and false across all test cases. Since the tool generates every possible combination of variable values, PC will always pass unless the expression is a tautology or contradiction.
Every individual variable (clause) in the expression must independently evaluate to both true and false across all test cases. The CC card shows a tag for each variable indicating whether it achieves both values.
All 2ⁿ possible input combinations (where n is the number of variables) must be present in the test suite. Because the tool generates the complete truth table, CoC always passes. It becomes the relevant metric when testing a subset of cases rather than the full table.
The Logic Coverage Tool originated as a lightweight, browser-based educational utility built with plain HTML, CSS, and JavaScript. Its purpose was to help students and testers visualize how Boolean expressions behave across all possible inputs and understand the three standard logic coverage criteria used in software testing.
The original project consisted of five files:
| File | Role |
|---|---|
index.html |
Page structure and script imports |
app.js |
DOM interaction and truth-table rendering |
logicCoverage.js |
Core coverage logic using eval() |
logicCoverage.test.js |
Four inline tests with a custom assert helper |
style.css |
Minimal dark-theme stylesheet |
All four core tests (predicate coverage, clause coverage, combinatorial coverage, expression evaluation) passed on first run. The logic was clean and well-separated from the UI layer. One known issue was a filename mismatch — index.html referenced styles.css while the actual file was named style.css.
The project was migrated to a modern stack to improve maintainability, type safety, and user experience:
Core logic (src/lib/logicCoverage.ts)
The original logicCoverage.js was rewritten in TypeScript with full interface definitions (TestCase, ClauseCoverage, CoverageResults, AnalysisResult). The eval() call was replaced with a Function constructor call after input sanitization — only uppercase letters, whitespace, &&, ||, !, and () are accepted. A variable limit of 10 was added to prevent generating more than 1,024 rows.
UI (src/app/page.tsx)
The UI was rebuilt as a React client component with:
- Controlled input with real-time error clearing
- Async analysis with a 120 ms loading state for visual feedback
- Clickable example expressions
- Keyboard shortcut (Enter) to trigger analysis
Components
CoverageCard handles all three coverage types. The CC card maps over the clauseCoverage record and renders a tagged chip per variable. TruthTable renders the complete truth table with row-level true/false tinting and an output count summary.
Styling
CSS Modules replaced the single flat stylesheet. A CSS variable system (--accent, --success, --danger, etc.) was introduced so the color palette is consistent across all components. The layout is fully responsive — the coverage grid collapses to a single column on narrow viewports.
| Decision | Reason |
|---|---|
| CSS Modules over Tailwind | Keeps styles co-located with components and avoids a build dependency |
Function constructor over eval |
Allows input sanitization before execution |
| 10-variable cap | 2¹⁰ = 1,024 rows is reasonable; beyond that the table becomes unreadable |
'use client' on page |
All state and interaction is client-side; no server data is needed |
| No external UI library | The component count is small enough that a library would add more overhead than value |
The original four test cases validated:
checkPCreturnstruewhen bothtrueandfalseare present in resultscheckCCcorrectly identifies when each variable achieves both valuescheckCoCconfirms the full 2ⁿ combination countevaluateExpressionevaluatesA && BwithA=true, B=falsetofalse
These cases map directly to the TypeScript functions in src/lib/logicCoverage.ts and remain valid.
This project is open source. See the repository for details.