npm package: 15lyzers
Description: GUI Dashboard to analyze and visualize all HTTP calls in Angular 15 applications
Latest version: 2.1.6

# 15Lyzer - Angular HTTP Call Analyzer Dashboard

<div align="center">

![15Lyzer](https://img.shields.io/badge/15Lyzer-v2.0.0-blue)
![License](https://img.shields.io/badge/license-MIT-green)
![Node](https://img.shields.io/badge/node-%3E%3D16.0.0-brightgreen)

**A beautiful GUI dashboard to analyze and visualize all HTTP calls in your Angular 15 applications**

</div>

---

## 🎯 What is 15Lyzer?

15Lyzer is a powerful web-based dashboard that analyzes your Angular 15 application and provides comprehensive insights into all HTTP calls. Simply upload your Angular project directory, and get instant visualization of:

- 📊 **HTTP Call Statistics** - Total calls, methods distribution, and more
- 🔍 **Component/Service Analysis** - See which components and services make HTTP calls
- 📡 **HTTP Method Breakdown** - Visual breakdown of GET, POST, PUT, DELETE, PATCH
- 🎨 **Beautiful Visualizations** - Interactive charts and tables
- ⚡ **Real-time Analysis** - Upload and analyze in seconds

## ✨ Features

### 🖥️ Web Dashboard
- **Modern UI** - Clean, responsive design built with vanilla HTML/CSS/JS
- **Drag & Drop** - Easy directory upload with progress tracking
- **Interactive Charts** - Visual HTTP method distribution
- **Search & Filter** - Find specific components, services, or methods
- **Detailed Tables** - View all HTTP calls with file locations

### 🔍 Analysis Capabilities
- **Automatic Detection** - Finds all HTTP calls in TypeScript files
- **Method Recognition** - Detects GET, POST, PUT, DELETE, PATCH
- **Component Mapping** - Links HTTP calls to specific components/services
- **File Tracking** - Shows exact file locations and line numbers
- **Async Detection** - Identifies async/await patterns

## 📦 Installation

### Prerequisites
- Node.js >= 16.0.0
- npm or yarn

### Install from npm
```bash
npm install -g 15lyzers
```

### Or install from source
```bash
git clone https://github.com/lpaszkiewicz/15Lyzer.git
cd 15Lyzer
npm install
```

## 🚀 Quick Start

### Start the Dashboard
```bash
npm start
```

Or if installed globally:
```bash
15lyzer-dashboard
```

This will start the server at `http://localhost:3000`

### Using the Dashboard

1. **Open your browser** and navigate to `http://localhost:3000`
2. **Click "Choose Directory"** and select your Angular 15 project root
3. **Wait for analysis** - The dashboard will process all TypeScript files
4. **Explore results** - View statistics, charts, and detailed HTTP call information

## 📊 Dashboard Features

### Statistics Cards
View key metrics at a glance:
- Total TypeScript files analyzed
- Total HTTP calls found
- Number of components with HTTP calls
- Number of services with HTTP calls

### HTTP Method Distribution Chart
Visual bar chart showing:
- GET requests (green)
- POST requests (blue)
- PUT requests (orange)
- PATCH requests (purple)
- DELETE requests (red)

### Component/Service Browser
- **Search** - Find classes by name
- **Filter** - Show only components or services
- **Expandable** - Click to see all methods with HTTP calls
- **Method Tags** - Color-coded HTTP method indicators

### Detailed HTTP Calls Table
Comprehensive table with:
- Class name
- Method name
- HTTP methods used
- File path
- Component/Service type
- Async indicator

## 🛠️ Configuration

### Change Port
Set the `PORT` environment variable:
```bash
PORT=8080 npm start
```

### Custom Upload Limit
Edit `src/server.js` to change the file size limit:
```javascript
const upload = multer({
  dest: 'uploads/',
  limits: { fileSize: 200 * 1024 * 1024 }, // 200MB
});
```

## 📁 Project Structure

```
15Lyzer/
├── src/
│   ├── server.js          # Express server and API
│   ├── scanner.js         # File system scanner
│   ├── parser.js          # TypeScript parser
│   └── functionAnalyzer.js # HTTP call analyzer
├── public/
│   ├── index.html         # Dashboard UI
│   ├── styles.css         # Styling
│   └── app.js             # Frontend logic
├── uploads/               # Temporary upload directory
└── package.json
```

## What it detects

15Lyzer scans every non-spec TypeScript file for Angular `HttpClient` usage including:

| Pattern | Detected as |
|---|---|
| `this.http.get('/api/resource')` | `GET` method |
| `this.http.post('/api/resource', data)` | `POST` method |
| `` this.http.get(`/api/resource/${id}`) `` | `GET` with template |
| `this.http.put(url, data)` | `PUT` method |
| `this.http.delete(url)` | `DELETE` method |
| `this.http.patch(url, data)` | `PATCH` method |

## Programmatic API

You can also use 15Lyzer programmatically:

```js
const { scanFiles } = require('15lyzers');
const { analyzeMultipleFiles, getStatistics } = require('15lyzers/src/functionAnalyzer');

const files = scanFiles('./my-angular-app');
const functions = analyzeMultipleFiles(files);
const stats = getStatistics(functions);

console.log(`Found ${stats.withHttpCalls} functions with HTTP calls`);
```

### Detailed Testing with Click Simulation

```js
const { 
  scanFiles, 
  parseFiles, 
  testCallsDetailed, 
  reportDetailedResult,
  createClickContext 
} = require('15lyzer');

const files = scanFiles('./my-angular-app');
const calls = parseFiles(files);

// Test with comprehensive data capture
const results = await testCallsDetailed(calls, 'http://localhost:4200', {
  timeout: 10000,
  headers: { Authorization: 'Bearer token' },
  maxBodySize: 1048576, // 1MB
  detailed: true,
  clickAction: 'User Navigation',
  onResult: (r) => {
    console.log('\n📊 Detailed Result:');
    console.log(`   Completed: ${r.completed}`);
    console.log(`   Timed Out: ${r.timedOut}`);
    console.log(`   Status: ${r.status}`);
    console.log(`   Duration: ${r.duration}ms`);
    console.log(`   Response Size: ${r.responseData?.size || 0} bytes`);
  },
});

// Check completion status
const completed = results.filter((r) => r.completed);
const timedOut = results.filter((r) => r.timedOut);
console.log(`\nCompleted: ${completed.length}/${results.length}`);
console.log(`Timed Out: ${timedOut.length}/${results.length}`);
```

## Exit codes

| Code | Meaning |
|---|---|
| `0` | All tested endpoints returned < 500 status |
| `1` | One or more endpoints returned a 5xx or network error |

## Custom Tool Generation

15Lyzer can analyze your entire Angular 15 application and generate standalone HTTP endpoint tests with zero external dependencies.

### Generate Custom Tools

```bash
15lyzer-generate ./my-app --tool e2e --output ./generated
```

### Available Tool Type

#### **Standalone E2E Test Generator** (`e2e`)

Generates standalone E2E tests for HTTP endpoints using ONLY Node.js built-in modules (no Cypress, Playwright, or any other framework installation required!):

```bash
# Generate standalone tests with zero dependencies
15lyzer-generate ./my-app --tool e2e --output ./e2e/generated
```
# Generate Selenium tests
15lyzer-generate ./my-app --tool e2e --framework selenium --output ./selenium-tests
```

**🎉 NEW: Zero-dependency standalone mode (default)!** No need for Cypress, Playwright, or Selenium! Tests run using 15Lyzer's built-in test runner.

**Important**: When using Cypress, Playwright, or Selenium, you do **NOT** need them installed to generate the test files. The tool only creates the test code templates. You'll only need the chosen framework when you want to actually run those tests.

**Features:**
- Creates E2E tests for all components
- **Standalone framework (default)**: Run tests immediately with ZERO dependencies!
- Uses ONLY Node.js built-in modules (`http`, `https`, `url`) - no external packages
- Or choose from: Cypress, Playwright, Selenium
- Generates framework-specific helper functions
- Auto-intercepts API calls for testing
- Includes TypeScript type declarations
- Generates README with setup instructions

**Example Standalone Output (Default):**
```javascript
const { describe, it, beforeEach, expect, httpRequest } = require('./runner');

describe('MyComponent E2E', () => {
  let baseUrl;

  beforeEach(() => {
    baseUrl = 'http://localhost:4200';
  });

  it('should load component page', async () => {
    const response = await httpRequest({
      method: 'GET',
      url: `${baseUrl}/my-route`,
    });
    expect(response.status).toBe(200);
  });

  it('should fetch data from API', async () => {
    const response = await httpRequest({
      method: 'GET',
      url: `${baseUrl}/api/data`,
    });
    expect(response.status).toBeGreaterThanOrEqual(200);
    expect(response.status).toBeLessThan(300);
  });
});
```

**Features:**
- ✅ **Uses ONLY Node.js built-in modules** (`http`, `https`, `url`)
- ✅ **Zero installation required** - no Cypress, Playwright, or Selenium needed
- ✅ **Familiar test API** - describe/it/expect (similar to Jest/Jasmine)
- ✅ **Built-in HTTP testing** - test real API endpoints
- ✅ **Full async/await support**
- ✅ **Comprehensive assertions** - toBe, toEqual, toContain, toBeTruthy, etc.
- ✅ **Smart endpoint detection** - automatically generates tests for services with HTTP calls

**Run standalone tests:**
```bash
# Run a single test file
node mycomponent.standalone.js

## 🔒 Security

- **Temporary Files** - Uploaded files are automatically deleted after analysis
- **Local Only** - Dashboard runs on localhost by default
- **No Data Storage** - Analysis results are not saved to disk
- **File Validation** - Only TypeScript files are processed

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Start development server
npm start
```

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details

## 🐛 Issues

Found a bug? Have a feature request? Please open an issue on [GitHub](https://github.com/lpaszkiewicz/15Lyzer/issues)

## 📝 Changelog

### v2.0.0 (Current)
- 🎉 **Complete rewrite** as GUI dashboard application
- ✨ Added web-based UI with modern design
- 📊 Added interactive charts and visualizations
- 🔍 Added search and filter capabilities
- ⚡ Improved analysis performance
- 🚀 Real-time directory upload and analysis

### v1.1.0
- Added standalone test generation
- Improved HTTP call detection
- Bug fixes

## 🙏 Credits

Created by Lisa Paszkiewicz

---

<div align="center">
  <strong>Made with ❤️ for the Angular community</strong>
</div>