angular-testing

Comprehensive testing strategies with Jasmine, Jest, Cypress, and Playwright

View on GitHub
Author Ihsan - Full-Stack Developer & AI Strategist
Namespace @EhssanAtassi/angular-master-marketplace
Category testing
Version 1.0.0
Stars 0
Downloads 3
self.md verified
Table of content

Comprehensive testing strategies with Jasmine, Jest, Cypress, and Playwright

Installation

npx claude-plugins install @EhssanAtassi/angular-master-marketplace/angular-testing

Contents

Folders: agents, commands, skills

Included Skills

This plugin includes 2 skill definitions:

mocking-patterns

View skill definition

Angular Mocking Patterns

Comprehensive guide to mocking patterns, test doubles, spies, and HTTP testing in Angular applications.

Table of Contents

  1. Test Doubles Overview
  2. Jasmine Spies
  3. Service Mocking
  4. HTTP Mocking
  5. Observable Mocking
  6. Component Mocking
  7. Router & Location Mocking
  8. Form Mocking
  9. LocalStorage & SessionStorage
  10. Advanced Patterns

—|———-|———| | Dummy | Need to pass parameters | Logger that’s never called | | Stub | Need consistent responses | API returning test data | | Spy | Need to verify calls | Track method invocations | | Mock | Need behavior verification | Service with expectations | | Fake | Need working alternative | In-memory database |

Jasmine Spies

Creating Spies

// Method 1: Standalone spy
const spy = jasmine.createSpy('myFunction');

// Method 2: Spy on existing object
const service = new UserService();
spyOn(service, 'getData');

// Method 3: Spy object (multiple methods)
const spyObj = jasmine.createSpyObj('UserService', [
  'getUser',
  'updateUser',
  'deleteUser'
]);

// Method 4: Spy object with properties
const spyObjWithProps = jasmine.createSpyObj('UserService', 
  ['getUser'], // methods
  { currentUser: { id: 1, name: 'John' } } // properties
);

...(truncated)

</details>

### testing-strategies

<details>
<summary>View skill definition</summary>

# Angular Testing Strategies

Comprehensive guide to testing strategies, patterns, and best practices for Angular applications.

## Table of Contents

1. [Testing Pyramid](#testing-pyramid)
2. [Unit Testing Strategies](#unit-testing-strategies)
3. [Integration Testing](#integration-testing)
4. [E2E Testing](#e2e-testing)
5. [Test Organization](#test-organization)
6. [AAA Pattern](#aaa-pattern)
7. [Test Doubles](#test-doubles)
8. [Common Anti-Patterns](#common-anti-patterns)
9. [Performance Optimization](#performance-optimization)
10. [CI/CD Integration](#cicd-integration)

--------|-------|------|------------|-------------|
| Unit | ⚡⚡⚡ | 💰 | ⭐⭐ | ✅ Easy |
| Integration | ⚡⚡ | 💰💰 | ⭐⭐⭐ | ⚠️ Medium |
| E2E | ⚡ | 💰💰💰 | ⭐⭐⭐⭐ | ❌ Hard |

---

## Unit Testing Strategies

### What to Unit Test

✅ **DO Test**:
- Pure functions and business logic
- Service methods
- Component methods (isolated)
- Pipes and custom validators
- Utility functions
- State management (reducers, selectors)

❌ **DON'T Test**:
- Angular framework internals
- Third-party libraries
- Simple getters/setters
- Generated code

### Component Testing Approaches

#### 1. Shallow Testing (Isolated)

Test component logic without rendering:

```typescript
describe('UserProfileComponent (Shallow)', () => {
  let component: UserProfileComponent;
  let userService: jasmine.SpyObj<UserService>;

  beforeEach(() => {
    userService = jasmine.createSpyObj('UserService', ['getUser', 'updateUser']);
    component = new 

...(truncated)

</details>

## Source

[View on GitHub](https://github.com/EhssanAtassi/angular-marketplace-developer)
Tags: testing angulartestingjasminejestcypressplaywright