CRUD REST API на Angular и ASP.NET Core

// employees.module.ts
@NgModule({
  declarations: [
    EmployeeListComponent,
    EmployeeDetailsComponent,
    EmployeeFormComponent
  ],
  imports: [
    CommonModule,
    EmployeesRoutingModule,
    ReactiveFormsModule,
    SharedModule
  ]
})
export class EmployeesModule { }

// Smart Component (container)
@Component({
  selector: 'app-employee-list-container',
  template: `<app-employee-list 
                [employees]="employees$ | async" 
                (deleteEmployee)="onDelete($event)">
              </app-employee-list>`
})
export class EmployeeListContainerComponent {
  employees$ = this.employeeService.getAll();
  
  constructor(private employeeService: EmployeeService) {}
  
  onDelete(id: number) {
    this.employeeService.delete(id).subscribe(() => {
      // Обновить список после удаления
    });
  }
}
 
// Dumb Component (presentational)
@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html'
})
export class EmployeeListComponent {
  @Input() employees: Employee[] = [];
  @Output() deleteEmployee = new EventEmitter<number>();
  
  onDelete(id: number) {
    this.deleteEmployee.emit(id);
  }
}

import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // Другие модули...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
 
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.apiUrl;
 
  constructor(private http: HttpClient) { }
 
  get<T>(url: string, params: any = {}): Observable<T> {
    let httpParams = new HttpParams();
    for (const key in params) {
      if (params.hasOwnProperty(key)) {
        httpParams = httpParams.set(key, params[key]);
      }
    }
    return this.http.get<T>(`${this.baseUrl}/${url}`, { params: httpParams });
  }
 
  post<T>(url: string, body: any): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}/${url}`, body);
  }
 
  put<T>(url: string, body: any): Observable<T> {
    return this.http.put<T>(`${this.baseUrl}/${url}`, body);
  }
 
  delete<T>(url: string): Observable<T> {
    return this.http.delete<T>(`${this.baseUrl}/${url}`);
  }
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from './api.service';
import { Employee } from '../models/employee';
import { PagedResult } from '../models/paged-result';
 
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private endpoint = 'employees';
 
  constructor(private apiService: ApiService) { }
 
  getAll(filters: any = {}): Observable<PagedResult<Employee>> {
    return this.apiService.get<PagedResult<Employee>>(this.endpoint, filters);
  }
 
  getById(id: number): Observable<Employee> {
    return this.apiService.get<Employee>(`${this.endpoint}/${id}`);
  }
 
  create(employee: Partial<Employee>): Observable<Employee> {
    return this.apiService.post<Employee>(this.endpoint, employee);
  }
 
  update(employee: Employee): Observable<any> {
    return this.apiService.put<any>(`${this.endpoint}/${employee.id}`, employee);
  }
 
  delete(id: number): Observable<any> {
    return this.apiService.delete<any>(`${this.endpoint}/${id}`);
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Employee } from '../models/employee';
import { EmployeeService } from './employee.service';
import { tap, catchError } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root'
})
export class EmployeeStoreService {
  private employees$ = new BehaviorSubject<Employee[]>([]);
  private loading$ = new BehaviorSubject<boolean>(false);
  private error$ = new BehaviorSubject<any>(null);
 
  constructor(private employeeService: EmployeeService) { }
 
  getEmployees(): Observable<Employee[]> {
    return this.employees$.asObservable();
  }
 
  getLoading(): Observable<boolean> {
    return this.loading$.asObservable();
  }
 
  getError(): Observable<any> {
    return this.error$.asObservable();
  }
 
  loadEmployees(filters: any = {}): void {
    this.loading$.next(true);
    this.error$.next(null);
    
    this.employeeService.getAll(filters).pipe(
      tap(response => {
        this.employees$.next(response.items);
        this.loading$.next(false);
      }),
      catchError(error => {
        this.error$.next(error);
        this.loading$.next(false);
        throw error;
      })
    ).subscribe();
  }
 
  addEmployee(employee: Partial<Employee>): void {
    this.loading$.next(true);
    this.error$.next(null);
    
    this.employeeService.create(employee).pipe(
      tap(newEmployee => {
        const currentEmployees = this.employees$.getValue();
        this.employees$.next([...currentEmployees, newEmployee]);
        this.loading$.next(false);
      }),
      catchError(error => {
        this.error$.next(error);
        this.loading$.next(false);
        throw error;
      })
    ).subscribe();
  }
 
  // Остальные методы (update, delete...)
}

import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html'
})
export class DataTableComponent<T> {
  @Input() items: T[] = [];
  @Input() columns: { key: string, label: string }[] = [];
  @Input() totalItems = 0;
  @Input() pageSize = 10;
  @Input() currentPage = 1;
  @Input() loading = false;
  
  @Output() pageChange = new EventEmitter<number>();
  @Output() sortChange = new EventEmitter<{ key: string, direction: 'asc' | 'desc' }>();
  
  // Методы для пагинации и сортировки...
}
[/CSHARP]
 
А вот соответствующий шаблон:
 
[/CSHARP]html
<div class="data-table">
  <table>
    <thead>
      <tr>
        <th *ngFor="let column of columns" 
            (click)="onSort(column.key)">
          {{ column.label }}
          <!-- Индикатор сортировки -->
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngIf="loading">
        <td [attr.colspan]="columns.length" class="loading">Загрузка...</td>
      </tr>
      <tr *ngIf="!loading && items.length === 0">
        <td [attr.colspan]="columns.length" class="no-data">Нет данных</td>
      </tr>
      <tr *ngFor="let item of items">
        <td *ngFor="let column of columns">
          {{ item[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
  
  <!-- Пагинация -->
  <div class="pagination" *ngIf="totalItems > pageSize">
    <button (click)="onPageChange(currentPage - 1)" 
            [disabled]="currentPage === 1">Предыдущая</button>
    <!-- Номера страниц -->
    <button (click)="onPageChange(currentPage + 1)" 
            [disabled]="currentPage * pageSize >= totalItems">Следующая</button>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { EmployeeService } from '../../services/employee.service';
import { Employee } from '../../models/employee';
 
@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html'
})
export class EmployeeFormComponent implements OnInit {
  form: FormGroup;
  employeeId: number | null = null;
  isEditMode = false;
  loading = false;
  submitted = false;
  
  constructor(
    private formBuilder: FormBuilder,
    private employeeService: EmployeeService,
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.form = this.createForm();
  }
  
  ngOnInit(): void {
    this.employeeId = this.route.snapshot.params['id'] ? 
      +this.route.snapshot.params['id'] : null;
    this.isEditMode = !!this.employeeId;
    
    if (this.isEditMode) {
      this.loadEmployee();
    }
  }
  
  createForm(): FormGroup {
    return this.formBuilder.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      dateOfBirth: ['', [Validators.required]],
      address: ['', [Validators.required]],
      gender: ['', [Validators.required]],
      pinCode: ['', [Validators.required]]
    });
  }
  
  loadEmployee(): void {
    if (!this.employeeId) return;
    
    this.loading = true;
    this.employeeService.getById(this.employeeId).subscribe(
      employee => {
        this.form.patchValue({
          name: employee.name,
          email: employee.email,
          dateOfBirth: new Date(employee.dateOfBirth).toISOString().split('T')[0],
          address: employee.address,
          gender: employee.gender,
          pinCode: employee.pinCode
        });
        this.loading = false;
      },
      error => {
        console.error('Failed to load employee', error);
        this.loading = false;
      }
    );
  }
  
  onSubmit(): void {
    this.submitted = true;
    
    if (this.form.invalid) {
      return;
    }
    
    const employeeData = { ...this.form.value };
    
    this.loading = true;
    
    if (this.isEditMode) {
      this.employeeService.update({ id: this.employeeId, ...employeeData })
        .subscribe(
          () => {
            this.loading = false;
            this.router.navigate(['/employees']);
          },
          error => {
            console.error('Failed to update employee', error);
            this.loading = false;
          }
        );
    } else {
      this.employeeService.create(employeeData)
        .subscribe(
          () => {
            this.loading = false;
            this.router.navigate(['/employees']);
          },
          error => {
            console.error('Failed to create employee', error);
            this.loading = false;
          }
        );
    }
  }
}

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
export function ageValidator(minAge: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) {
      return null;
    }
    
    const birthDate = new Date(control.value);
    const today = new Date();
    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();
    
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--;
    }
    
    return age < minAge ? { 'minAge': { required: minAge, actual: age } } : null;
  };
}

this.form = this.formBuilder.group({
  // Другие поля...
  dateOfBirth: ['', [Validators.required, ageValidator(18)]]
});

import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, debounceTime, take, switchMap } from 'rxjs/operators';
import { EmployeeService } from './employee.service';
 
@Injectable({
  providedIn: 'root'
})
export class EmployeeValidators {
  constructor(private employeeService: EmployeeService) { }
  
  uniqueEmail(employeeId?: number): AsyncValidatorFn {
    return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
      if (!control.value) {
        return of(null);
      }
      
      return of(control.value).pipe(
        debounceTime(300),
        take(1),
        switchMap(email => 
          this.employeeService.checkEmailExists(email, employeeId).pipe(
            map(exists => exists ? { 'emailExists': true } : null),
            catchError(() => of(null))
          )
        )
      );
    };
  }
}

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { NotificationService } from '../services/notification.service';
 
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private notificationService: NotificationService) {}
 
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMsg = '';
        
        if (error.error instanceof ErrorEvent) {
          // Клиентская ошибка
          errorMsg = `Ошибка: ${error.error.message}`;
        } else {
          // Серверная ошибка
          errorMsg = `Код ошибки: ${error.status}, Сообщение: ${error.message}`;
          
          // Специальная обработка в зависимости от кода ошибки
          switch (error.status) {
            case 401:
              this.notificationService.showError('Необходима авторизация');
              // Здесь можно добавить редирект на страницу логина
              break;
            case 403:
              this.notificationService.showError('Доступ запрещен');
              break;
            case 404:
              this.notificationService.showError('Ресурс не найден');
              break;
            case 500:
              this.notificationService.showError('Внутренняя ошибка сервера');
              break;
            default:
              this.notificationService.showError('Произошла ошибка');
          }
        }
        
        console.error(errorMsg);
        return throwError(error);
      })
    );
  }
}

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
  private requests: HttpRequest<any>[] = [];
  
  constructor(private loadingService: LoadingService) {}
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requests.push(req);
    this.loadingService.setLoading(true);
    
    return next.handle(req).pipe(
      finalize(() => {
        const index = this.requests.indexOf(req);
        if (index !== -1) {
          this.requests.splice(index, 1);
        }
        this.loadingService.setLoading(this.requests.length > 0);
      })
    );
  }
}

@NgModule({
  // ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true },
  ]
})
export class CoreModule { }

@Component({
  // ...
})
export class EmployeeSearchComponent implements OnInit, OnDestroy {
  searchControl = new FormControl('');
  employees$: Observable<Employee[]>;
  loading = false;
  private destroy$ = new Subject<void>();
  
  constructor(private employeeService: EmployeeService) {}
  
  ngOnInit(): void {
    this.employees$ = this.searchControl.valueChanges.pipe(
      // Не отправляем запрос при каждом нажатии клавиши
      debounceTime(300), 
      
      // Игнорируем если значение не изменилось
      distinctUntilChanged(),
      
      // Показываем индикатор загрузки
      tap(() => this.loading = true),
      
      // Преобразуем строку поиска в запрос к API
      switchMap(term => 
        term ? 
          this.employeeService.search(term).pipe(
            // Обрабатываем ошибку, но не завершаем поток
            catchError(() => of([]))
          ) : 
          of([])
      ),
      
      // Скрываем индикатор загрузки
      tap(() => this.loading = false),
      
      // Отписываемся при уничтожении компонента
      takeUntil(this.destroy$)
    );
  }
  
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

combineLatest([
  this.route.params.pipe(map(params => params['id'])),
  this.authService.currentUser$
]).pipe(
  switchMap(([employeeId, currentUser]) => 
    this.employeeService.getById(employeeId).pipe(
      map(employee => ({
        employee,
        canEdit: currentUser && (
          currentUser.role === 'admin' || 
          currentUser.id === employee.managerId
        )
      }))
    )
  )
).subscribe(({ employee, canEdit }) => {
  this.employee = employee;
  this.canEdit = canEdit;
});

@Component({
  selector: 'app-employee-card',
  templateUrl: './employee-card.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EmployeeCardComponent {
  @Input() employee: Employee;
}

trackById(index: number, employee: Employee): number {
  return employee.id;
}

const routes: Routes = [
  {
    path: 'employees',
    loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule)
  }
];

@Pipe({
  name: 'filterEmployees',
  pure: true
})
export class FilterEmployeesPipe implements PipeTransform {
  transform(employees: Employee[], searchTerm: string): Employee[] {
    if (!employees || !searchTerm) {
      return employees;
    }
    
    return employees.filter(employee => 
      employee.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      employee.email.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Subject } from 'rxjs';
 
export interface Notification {
  message: string;
  type: 'success' | 'error' | 'warning' | 'info';
  duration?: number;
}
 
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private notificationSubject = new Subject<Notification>();
  notifications$ = this.notificationSubject.asObservable();
  
  constructor(private snackBar: MatSnackBar) {
    this.notifications$.subscribe(notification => {
      this.showSnackbar(notification);
    });
  }
  
  showSuccess(message: string, duration = 3000): void {
    this.notificationSubject.next({ message, type: 'success', duration });
  }
  
  showError(message: string, duration = 5000): void {
    this.notificationSubject.next({ message, type: 'error', duration });
  }
  
  showWarning(message: string, duration = 4000): void {
    this.notificationSubject.next({ message, type: 'warning', duration });
  }
  
  showInfo(message: string, duration = 3000): void {
    this.notificationSubject.next({ message, type: 'info', duration });
  }
  
  private showSnackbar(notification: Notification): void {
    this.snackBar.open(notification.message, 'Закрыть', {
      duration: notification.duration,
      panelClass: [INLINE]notification-${notification.type}[/INLINE]
    });
  }
}

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { NotificationService } from './notification.service';
import { LoggingService } from './logging.service';
 
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private injector: Injector) {}
  
  handleError(error: any): void {
    const notificationService = this.injector.get(NotificationService);
    const loggingService = this.injector.get(LoggingService);
    
    let message = 'Произошла неизвестная ошибка';
    let stackTrace = '';
    
    if (error instanceof HttpErrorResponse) {
      // Серверная ошибка
      message = error.error?.message || `${error.status}: ${error.statusText}`;
    } else if (error instanceof Error) {
      // Клиентская ошибка
      message = error.message;
      stackTrace = error.stack || '';
    }
    
    // Уведомляем пользователя
    notificationService.showError(message);
    
    // Логируем ошибку
    loggingService.logError(message, stackTrace);
    
    // Не забываем вывести в консоль для разработчика
    console.error(error);
  }
}

@NgModule({
  // ...
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import { delay } from 'rxjs/operators';
import { Employee } from '../models/employee';
 
@Injectable()
export class MockEmployeeService {
  private employees: Employee[] = [
    { id: 1, name: 'Иван Иванов', email: 'ivan@example.com', dateOfBirth: new Date(1990, 1, 1), gender: '0', address: 'Москва', pinCode: '123456' },
    { id: 2, name: 'Анна Петрова', email: 'anna@example.com', dateOfBirth: new Date(1992, 5, 15), gender: '1', address: 'Санкт-Петербург', pinCode: '654321' },
    // Другие тестовые данные...
  ];
 
  getAll(): Observable<any> {
    return of({
      items: this.employees,
      totalCount: this.employees.length,
      page: 1,
      pageSize: 10
    }).pipe(delay(500)); // Имитируем задержку сети
  }
 
  getById(id: number): Observable<Employee> {
    const employee = this.employees.find(e => e.id === id);
    if (!employee) {
      return throwError({ status: 404, message: 'Employee not found' });
    }
    return of(employee).pipe(delay(300));
  }
 
  create(employee: Partial<Employee>): Observable<Employee> {
    const newId = Math.max(...this.employees.map(e => e.id)) + 1;
    const newEmployee = { id: newId, ...employee } as Employee;
    this.employees.push(newEmployee);
    return of(newEmployee).pipe(delay(700));
  }
 
  update(employee: Employee): Observable<any> {
    const index = this.employees.findIndex(e => e.id === employee.id);
    if (index === -1) {
      return throwError({ status: 404, message: 'Employee not found' });
    }
    this.employees[index] = { ...employee };
    return of({}).pipe(delay(600));
  }
 
  delete(id: number): Observable<any> {
    const index = this.employees.findIndex(e => e.id === id);
    if (index === -1) {
      return throwError({ status: 404, message: 'Employee not found' });
    }
    this.employees.splice(index, 1);
    return of({}).pipe(delay(400));
  }
}

@NgModule({
  // ...
  providers: [
    {
      provide: EmployeeService,
      useClass: environment.useMocks ? MockEmployeeService : EmployeeService
    }
  ]
})
export class AppModule { }

// environment.ts (development)
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api'
};
 
// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://your-production-api.com/api'
};

@Component({
  selector: 'app-loading',
  template: '<div class="spinner">Загрузка данных...</div>'
})
export class LoadingComponent { }
 
@Component({
  selector: 'app-error',
  template: `
    <div class="error-container">
      <h2>Произошла ошибка</h2>
      <p>{{ message }}</p>
      <button (click)="retry.emit()">Повторить</button>
    </div>
  `
})
export class ErrorComponent {
  @Input() message: string = 'Не удалось загрузить данные';
  @Output() retry = new EventEmitter<void>();
}
 
@Component({
  selector: 'app-empty-state',
  template: `
    <div class="empty-container">
      <p>{{ message }}</p>
      <button *ngIf="showAddButton" (click)="add.emit()">Добавить</button>
    </div>
  `
})
export class EmptyStateComponent {
  @Input() message: string = 'Нет данных для отображения';
  @Input() showAddButton = false;
  @Output() add = new EventEmitter<void>();
}

interface State<T> {
  loading: boolean;
  error: string | null;
  data: T;
}
 
function createInitialState<T>(initialData: T): State<T> {
  return {
    loading: false,
    error: null,
    data: initialData
  };
}
 
@Component({
  // ...
})
export class EmployeeListComponent implements OnInit {
  state$: Observable<State<Employee[]>>;
 
  ngOnInit(): void {
    this.state$ = this.employeeService.getAll().pipe(
      map(data => ({ loading: false, error: null, data })),
      startWith({ loading: true, error: null, data: [] }),
      catchError(error => of({ loading: false, error: error.message, data: [] }))
    );
  }
}

ngOnInit(): void {
  forkJoin({
    employees: this.employeeService.getAll(),
    departments: this.departmentService.getAll(),
    positions: this.positionService.getAll()
  }).pipe(
    catchError(error => {
      this.notificationService.showError('Ошибка загрузки данных');
      return throwError(error);
    })
  ).subscribe(({ employees, departments, positions }) => {
    this.employees = employees;
    this.departments = departments;
    this.positions = positions;
    this.isLoading = false;
  });
}

ngOnInit(): void {
  this.activatedRoute.params.pipe(
    map(params => params['id']),
    switchMap(id => this.employeeService.getById(id)),
    switchMap(employee => {
      this.employee = employee;
      return this.departmentService.getById(employee.departmentId);
    }),
    catchError(error => {
      this.notificationService.showError('Ошибка загрузки данных');
      return throwError(error);
    })
  ).subscribe(department => {
    this.department = department;
    this.isLoading = false;
  });
}

import * as Sentry from '@sentry/angular';
 
Sentry.init({
  dsn: 'https://your-dsn-key@sentry.io/project-id',
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],
  tracesSampleRate: 1.0, // В продакшене уменьшить до 0.2-0.5
});
 
@NgModule({
  // ...
  providers: [
    { provide: ErrorHandler, useValue: Sentry.createErrorHandler() }
  ]
})
export class AppModule {}

export class CachingService {
  private cache = new Map<string, CacheEntry<any>>();
 
  get<T>(key: string): T | null {
    const entry = this.cache.get(key);
    if (!entry) return null;
    
    if (Date.now() > entry.expiresAt) {
      this.cache.delete(key);
      return null;
    }
    
    return entry.value;
  }
 
  set<T>(key: string, value: T, ttlSeconds = 60): void {
    const expiresAt = Date.now() + ttlSeconds * 1000;
    this.cache.set(key, { value, expiresAt });
  }
  
  // Метод для инвалидации кеша при изменениях
  invalidateStartingWith(prefix: string): void {
    for (const key of this.cache.keys()) {
      if (key.startsWith(prefix)) {
        this.cache.delete(key);
      }
    }
  }
}

describe('EmployeeService', () => {
  let service: EmployeeService;
  let httpMock: HttpTestingController;
 
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [EmployeeService]
    });
 
    service = TestBed.inject(EmployeeService);
    httpMock = TestBed.inject(HttpTestingController);
  });
 
  it('should retrieve employees', () => {
    const mockEmployees = [{ id: 1, name: 'Test Employee' }];
 
    service.getAll().subscribe(employees => {
      expect(employees.items).toEqual(mockEmployees);
    });
 
    const req = httpMock.expectOne(`${environment.apiUrl}/employees`);
    expect(req.request.method).toBe('GET');
    req.flush({ items: mockEmployees, totalCount: 1, page: 1, pageSize: 10 });
  });
  
  afterEach(() => {
    httpMock.verify();
  });
});

describe('EmployeeListComponent', () => {
  let component: EmployeeListComponent;
  let fixture: ComponentFixture<EmployeeListComponent>;
  let mockEmployeeService: jasmine.SpyObj<EmployeeService>;
 
  beforeEach(() => {
    mockEmployeeService = jasmine.createSpyObj('EmployeeService', ['getAll', 'delete']);
    mockEmployeeService.getAll.and.returnValue(of({
      items: [{ id: 1, name: 'Test' }],
      totalCount: 1,
      page: 1,
      pageSize: 10
    }));
 
    TestBed.configureTestingModule({
      declarations: [EmployeeListComponent],
      providers: [
        { provide: EmployeeService, useValue: mockEmployeeService }
      ]
    }).compileComponents();
 
    fixture = TestBed.createComponent(EmployeeListComponent);
    component = fixture.componentInstance;
  });
 
  it('should load employees on init', () => {
    fixture.detectChanges();
    expect(mockEmployeeService.getAll).toHaveBeenCalled();
    expect(component.employees.length).toBe(1);
  });
});