@smartsoft001-mobilems/claude-plugins 2.67.0 → 2.69.0

package/plugins/flow-legacy/skills/test-unit/SKILL.md

@@ -0,0 +1,494 @@
+---
+name: test-unit
+description: Write unit tests following project conventions for Angular 14 legacy projects. Generates Jest tests for components, services, and NestJS using AAA pattern.
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+---
+
+# Unit Test Skill (Angular 14 Legacy)
+
+Write unit tests following project conventions using Jest framework with AAA (Arrange-Act-Assert) pattern for Angular 14 legacy projects.
+
+## Testing Framework
+
+- **Framework**: Jest for all unit tests
+- **File naming**: `{name}.spec.ts` alongside source files
+- **Test runner**: Nx 14 (`nx test {project}`)
+
+## Test File Location
+
+Place test files next to the source files they test:
+
+```
+feature/
+├── feature.service.ts
+├── feature.service.spec.ts
+├── feature.component.ts
+└── feature.component.spec.ts
+```
+
+## Naming Convention
+
+- **Describe blocks**: `@{package-name}: ClassName`
+- **Test format**: `it('should...')` with clear behavior description
+
+## Test Structure (AAA Pattern)
+
+Always use Arrange-Act-Assert pattern with blank line separation (no comments):
+
+```typescript
+it('should perform expected operation', () => {
+  const input = 'test';
+
+  const result = service.performOperation(input);
+
+  expect(result).toBe('expected output');
+});
+```
+
+## Angular 14 Component Testing
+
+### Basic Component Test (NgModule-based)
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { FeatureComponent } from './feature.component';
+
+describe('@mms/shared-angular: FeatureComponent', () => {
+  let component: FeatureComponent;
+  let fixture: ComponentFixture<FeatureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FeatureComponent], // NOT imports (not standalone)
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeatureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display expected content', () => {
+    component.title = 'Test Title';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Test Title');
+  });
+});
+```
+
+### Testing Components with @Input/@Output
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { FormFieldComponent } from './form-field.component';
+
+describe('@mms/shared-angular: FormFieldComponent', () => {
+  let component: FormFieldComponent;
+  let fixture: ComponentFixture<FormFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FormFieldComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FormFieldComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should accept input value', () => {
+    component.label = 'Test Label';
+    fixture.detectChanges();
+
+    expect(component.label).toBe('Test Label');
+  });
+
+  it('should emit output event', () => {
+    const spy = jest.fn();
+    component.changed.subscribe(spy);
+
+    component.onValueChange('new value');
+
+    expect(spy).toHaveBeenCalledWith('new value');
+  });
+
+  it('should support two-way binding', () => {
+    const valueChangeSpy = jest.fn();
+    component.valueChange.subscribe(valueChangeSpy);
+
+    component.value = 'initial';
+    component.onInputChange('updated');
+
+    expect(valueChangeSpy).toHaveBeenCalledWith('updated');
+  });
+});
+```
+
+### Testing with BehaviorSubject State
+
+```typescript
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { of, BehaviorSubject } from 'rxjs';
+
+import { ListComponent } from './list.component';
+import { StateService } from './state.service';
+
+describe('@mms/shared-angular: ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+  let mockStateService: {
+    items$: BehaviorSubject<Item[]>;
+    isLoading$: BehaviorSubject<boolean>;
+  };
+
+  beforeEach(async () => {
+    mockStateService = {
+      items$: new BehaviorSubject<Item[]>([]),
+      isLoading$: new BehaviorSubject<boolean>(false),
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [ListComponent],
+      providers: [
+        { provide: StateService, useValue: mockStateService },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should display items from state', () => {
+    mockStateService.items$.next([
+      { id: '1', name: 'Item 1' },
+      { id: '2', name: 'Item 2' },
+    ]);
+    fixture.detectChanges();
+
+    const items = fixture.nativeElement.querySelectorAll('li');
+    expect(items.length).toBe(2);
+  });
+
+  it('should show loading spinner', () => {
+    mockStateService.isLoading$.next(true);
+    fixture.detectChanges();
+
+    const spinner = fixture.nativeElement.querySelector('app-spinner');
+    expect(spinner).toBeTruthy();
+  });
+});
+```
+
+### Testing with Services (Constructor DI)
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { FeatureComponent } from './feature.component';
+import { DataService } from './data.service';
+
+describe('@mms/shared-angular: FeatureComponent', () => {
+  let component: FeatureComponent;
+  let fixture: ComponentFixture<FeatureComponent>;
+  let mockDataService: jest.Mocked<DataService>;
+
+  beforeEach(async () => {
+    mockDataService = {
+      getData: jest.fn().mockReturnValue(of(['item1', 'item2'])),
+      saveData: jest.fn().mockReturnValue(of(true)),
+    } as unknown as jest.Mocked<DataService>;
+
+    await TestBed.configureTestingModule({
+      declarations: [FeatureComponent],
+      providers: [{ provide: DataService, useValue: mockDataService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeatureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should load data on init', () => {
+    expect(mockDataService.getData).toHaveBeenCalled();
+    expect(component.items).toEqual(['item1', 'item2']);
+  });
+});
+```
+
+## Angular 14 Service Testing
+
+### Service with BehaviorSubject
+
+```typescript
+import { TestBed } from '@angular/core/testing';
+import { take } from 'rxjs/operators';
+
+import { StateService } from './state.service';
+
+describe('@mms/shared-angular: StateService', () => {
+  let service: StateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [StateService],
+    });
+    service = TestBed.inject(StateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should emit initial state', (done) => {
+    service.items$.pipe(take(1)).subscribe(items => {
+      expect(items).toEqual([]);
+      done();
+    });
+  });
+
+  it('should update items', (done) => {
+    const newItems = [{ id: '1', name: 'Test' }];
+
+    service.setItems(newItems);
+
+    service.items$.pipe(take(1)).subscribe(items => {
+      expect(items).toEqual(newItems);
+      done();
+    });
+  });
+
+  it('should return current value', () => {
+    const items = [{ id: '1', name: 'Test' }];
+    service.setItems(items);
+
+    expect(service.currentItems).toEqual(items);
+  });
+});
+```
+
+### Service with HTTP (Angular 14 HttpClientTestingModule)
+
+```typescript
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { DataService } from './data.service';
+
+describe('@mms/shared-angular: DataService', () => {
+  let service: DataService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [DataService],
+    });
+
+    service = TestBed.inject(DataService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should fetch data', () => {
+    const mockData = [{ id: 1, name: 'Test' }];
+
+    service.getData().subscribe((data) => {
+      expect(data).toEqual(mockData);
+    });
+
+    const req = httpMock.expectOne('/api/data');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockData);
+  });
+});
+```
+
+## NestJS Service Testing
+
+### Basic Service Test
+
+```typescript
+import { TestingModule, Test } from '@nestjs/testing';
+
+import { FeatureService } from './feature.service';
+
+describe('@mms/module-name: FeatureService', () => {
+  let service: FeatureService;
+  let module: TestingModule;
+
+  beforeEach(async () => {
+    module = await Test.createTestingModule({
+      providers: [FeatureService],
+    }).compile();
+
+    service = module.get<FeatureService>(FeatureService);
+  });
+
+  afterEach(async () => {
+    await module.close();
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
+  it('should perform expected operation', () => {
+    const input = 'test';
+
+    const result = service.performOperation(input);
+
+    expect(result).toBe('expected output');
+  });
+});
+```
+
+## Mocking Patterns
+
+### Service Mock
+
+```typescript
+const mockService = {
+  getData: jest.fn().mockReturnValue(of(mockData)),
+  createItem: jest.fn().mockReturnValue(of(mockItem)),
+  updateItem: jest.fn().mockReturnValue(of(updatedMockItem)),
+};
+```
+
+### LocalStorage Mock
+
+```typescript
+let localStorageMock: any;
+
+beforeEach(() => {
+  localStorageMock = (() => {
+    let store: Record<string, string> = {};
+    return {
+      getItem: jest.fn((key: string) => store[key] || null),
+      setItem: jest.fn((key: string, value: string) => {
+        store[key] = value;
+      }),
+      removeItem: jest.fn((key: string) => {
+        delete store[key];
+      }),
+      clear: jest.fn(() => {
+        store = {};
+      }),
+    };
+  })();
+  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+});
+```
+
+### Router Mock
+
+```typescript
+const mockRouter = {
+  navigate: jest.fn(),
+  navigateByUrl: jest.fn(),
+  createUrlTree: jest.fn(),
+};
+
+// In providers
+{ provide: Router, useValue: mockRouter }
+```
+
+### ActivatedRoute Mock
+
+```typescript
+const mockActivatedRoute = {
+  params: of({ id: '123' }),
+  queryParams: of({ filter: 'active' }),
+  snapshot: {
+    params: { id: '123' },
+    queryParams: { filter: 'active' },
+  },
+};
+
+// In providers
+{ provide: ActivatedRoute, useValue: mockActivatedRoute }
+```
+
+## Test Commands (Nx 14)
+
+```bash
+# Run tests for specific project
+nx test web
+nx test shared-angular
+
+# Run tests in watch mode
+nx test web --watch
+
+# Run tests with coverage
+nx test web --coverage
+
+# Run all tests
+nx run-many --target=test
+
+# Run specific test file
+nx test shared-angular --testFile=feature.service.spec.ts
+```
+
+## What to Test
+
+- Business logic in services
+- Component behavior and state changes
+- Public API contracts (@Input/@Output)
+- BehaviorSubject state management
+- Error handling scenarios
+- Input validation
+- Edge cases and boundary conditions
+
+## What NOT to Test
+
+- Third-party libraries
+- Framework internals (Angular/NestJS)
+- Simple getters/setters without logic
+- Auto-generated code
+- Private methods directly (test through public API)
+
+## Workflow
+
+1. **Read source file** to understand the code being tested
+2. **Create test file** with `.spec.ts` extension next to source
+3. **Write describe block** with package and class name
+4. **Add beforeEach** with TestBed setup (declarations, not imports)
+5. **Write tests** using AAA pattern
+6. **Run tests** with `nx test {project}`
+7. **Fix failures** and ensure all pass
+
+## Best Practices (Angular 14)
+
+1. **One assertion per test** when practical
+2. **Descriptive test names** that explain behavior
+3. **Independent tests** - no shared state between tests
+4. **Mock external dependencies** - isolate unit under test
+5. **Test edge cases** - empty arrays, null values, boundaries
+6. **Keep tests fast** - avoid real HTTP calls or timers
+7. **Clean up** - use afterEach for cleanup when needed
+8. **Use declarations** - components are NOT standalone in Angular 14
+9. **Mock BehaviorSubjects** - not signals (no signals in Angular 14)