Imagine having a MenuComponent
@Component({
selector: 'cg-menu',
templateUrl: './menu.component.html',
styleUrls: [ './menu.component.scss' ]
})
export class MenuComponent implements OnInit {
menu: MenuItem[];
isLoggedIn$ = this.authStateService.isLoggedIn.pipe(untilDestroyed(this));
constructor(private readonly authStateService: AuthStateService,
private readonly router: Router) {
}
ngOnInit() {
this.authStateService
.state
.pipe(
untilDestroyed(this),
...some logic...
.subscribe();
}
...some logic...
}
Now, consider a AuthStateService
@Injectable({ providedIn: 'root' })
export class AuthStateService {
private readonly state$: Observable<AuthState | null>;
private readonly isLoggedIn$: Observable<boolean | null>;
constructor(private readonly sessionManager: SessionManagerService) {
this.state$ = this.stateTrigger$
.pipe(
...some logic...
shareReplay(1));
this.isLoggedIn$ = this.stateTrigger$
.pipe(
map(state => state !== null),
shareReplay(1));
}
get state(): Observable<AuthState> {
return this.state$;
}
get isLoggedIn(): Observable<boolean> {
return this.isLoggedIn$;
}
...some logic...
}
While attempting to execute this code, I encountered an error triggered by Karma.
describe('MenuComponent', () => {
let component: MenuComponent;
let fixture: ComponentFixture<MenuComponent>;
let authStateServiceSpy;
beforeEach(async(() => {
authStateServiceSpy = jasmine.createSpyObj(
'AuthStateService',
{},
{
state: of(null),
isLoggedIn: of(false)
});
TestBed.configureTestingModule({
declarations: [ MenuComponent ],
imports: [ RouterTestingModule ],
providers: [
{ provide: AuthStateService, useValue: authStateServiceSpy }
],
schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should generate correct menu (expert)', () => {
// The problem is here
spyOnProperty(authStateServiceSpy, 'state', 'get').and.callFake(() => of(stateMock));
expect(component.menu).toEqual([
...something...
]);
});
});
The specific error message reads as follows:
Error: <spyOnProperty> : state is not declared configurable
Usage: spyOnProperty(<object>, <propName>, [accessType])
Error: <spyOnProperty> : state is not declared configurable
Usage: spyOnProperty(<object>, <propName>, [accessType])
at <Jasmine>
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/modules/structure/components/menu/menu.component.spec.ts:55:5)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:123:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:545:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:560:1)
Do you have any insights on what might be causing this issue? Thank you for your assistance.