I am currently using:
Angular CLI: 10.2.3
Node: 12.22.1
Everything is working fine with the project build and execution. I am now focusing on adding tests using Jest and Spectator. Specifically, I'm attempting to test a basic service where I can mock most of the values.
@Injectable({
providedIn: 'root'
})
export class BasicAuthService {
environmentName = '';
environmentUrl = '';
constructor(
private http: HttpClient,
private config: ConfigService, //custom service 1
private runtimeConfig: RuntimeConfigService, // custom service 2
) {
this.environmentName = runtimeConfig.config.environmentName;
this.environmentUrl = this.environmentName == "localhost"
? "http://" + runtimeConfig.config.serviceUrl
: runtimeConfig.config.serviceUrl;
}
getAuthentication(credentials) {
let basicAuthHeaderString = 'Basic '
+ window.btoa(credentials.username + ':' + credentials.password);
let headers = new HttpHeaders({'Content-Type': 'application/json'});
let options = {
headers: headers
}
let envUrl = `${this.environmentUrl}/api/login`
return this.http.post<any>(envUrl, JSON.stringify(credentials), options)
.pipe(
map(
data => {
sessionStorage.setItem('authenticatedUser', credentials.username);
sessionStorage.setItem('token', data.token);
this.config.userGroupData = data.entitlements[0];
}
)
);
}
}
Within the constructor, it attempts to set two variables (this.environmentName and this.environmentUrl) based on another custom service (runtimeConfig).
My testing setup looks like this:
describe('BasicAuthService', () => {
let spectator: SpectatorService<BasicAuthService>;
const createService = createServiceFactory({
service: BasicAuthService,
providers: [],
imports: [
HttpClientTestingModule],
entryComponents: [],
mocks: [ConfigService, RuntimeConfigService]
});
beforeEach(() => spectator = createService());
it('should be logged in', () => {
const runtimeConfigService = spectator.inject<RuntimeConfigService>(RuntimeConfigService);
const configService = spectator.inject<ConfigService>(ConfigService);
runtimeConfigService.config = {
environmentName: "localhost",
serviceUrl : "localhost:8071"
}; // This also does not work, same error.
expect(spectator.service.getAuthentication(createService)).toBeTruthy();
});
});
However, the test is failing with the following error:
? BasicAuthService > should be logged in
TypeError: Cannot read property 'environmentName' of undefined
22 | private runtimeConfig: RuntimeConfigService,
23 | ) {
> 24 | this.environmentName = runtimeConfig.config.environmentName;
| ^
The runtime configuration is as follows. Even after trying to initialize the values, the issue persists:
// RuntimeConfigService
@Injectable({
providedIn: 'root'
})
export class RuntimeConfigService {
config: Config;
constructor(private http: HttpClient) {}
loadConfig() {
return this.http
.get<Config>('./assets/runtime-config.json')
.toPromise()
.then(config => {
this.config = config;
});
}
}
export class Config {
serviceUrl: string;
environmentName: string;
}
How can I effectively mock these services and their values to enable successful testing for this scenario?