Angular signal access gets error on testing

Question

I have this new angular signal variables on my component:

private employees: Signal<Employee[]> = this.employeesService.filteredEmployeesSignal;
public employeesDataSource = computed(
    () => new MatTableDataSource<Employee>(this.employees())
);

All works fine until tests fails with this error: this.employees is not a function when tries to access to this.employees() signal value. It detects as a function instead as a signal value getter.

I tried to get the value in other local constant inside the computed signal but the error persist.

Answer 1

We can mock the service and configure the signal on the mocked service then check the returned value!

spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { signal } from '@angular/core';
import { EmployeesService } from './employees.service';

describe('App tests', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let employeeServiceMock!: EmployeesService;

  beforeEach(async () => {
    employeeServiceMock = {
      filteredEmployeesSignal: signal([]),
    };
    await TestBed.configureTestingModule({
      imports: [CommonModule],
      providers: [
        {
          provide: EmployeesService,
          useValue: employeeServiceMock,
        },
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should set employees property', () => {
    expect(component['employees']()).toEqual([]);
  });
});

stackblitz demo -> cd test -> npm i -> npm run test