TestBed configuration in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Angular test setup?

Given the TestBed configuration and component below, what will be the text content of the

element after fixture.detectChanges()?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-greet',
  template: `<p>{{ greeting }}</p>`
})
class GreetComponent {
  greeting = 'Hello, Angular!';
}

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [GreetComponent]
  });
});

const fixture = TestBed.createComponent(GreetComponent);
fixture.detectChanges();
const pElement = fixture.nativeElement.querySelector('p');
const text = pElement.textContent;

A "Hello, Angular!"

B "{{ greeting }}"

C "Hello, World!"

D ""

💡 Hint

Remember that fixture.detectChanges() triggers Angular's change detection to update the template bindings.

The component's greeting property is set to 'Hello, Angular!'. After fixture.detectChanges(), Angular updates the template, so the

element shows this text.

📝 Syntax

intermediate

Which TestBed configuration will cause a runtime error when creating the component?

Consider the following TestBed configurations. Which one will cause an error when calling TestBed.createComponent(MyComponent)?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-my',
  template: `<div>Test</div>`
})
class MyComponent {}

// TestBed configurations:
// A: declarations: [MyComponent]
// B: imports: [MyComponent]
// C: providers: [MyComponent]
// D: declarations: []

A TestBed.configureTestingModule({ declarations: [] });

B TestBed.configureTestingModule({ imports: [MyComponent] });

C TestBed.configureTestingModule({ providers: [MyComponent] });

D TestBed.configureTestingModule({ declarations: [MyComponent] });

💡 Hint

Components must be declared in the declarations array to be created.

Option A does not declare MyComponent. So, TestBed.createComponent(MyComponent) throws an error because Angular doesn't know about this component in the testing module.

🔧 Debug

advanced

Why does this TestBed test fail to inject the service?

Given this TestBed setup, why does the test fail with 'No provider for DataService' error?

Angular

import { Injectable } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Injectable()
class DataService {
  getData() { return 'data'; }
}

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [],
    providers: []
  });
});

const service = TestBed.inject(DataService);

A DataService must be imported from '@angular/common' to be injectable.

B DataService must be declared in declarations, not providers.

C DataService is not added to the providers array in TestBed configuration.

D TestBed.inject() can only inject components, not services.

💡 Hint

Services must be listed in providers to be injectable in tests.

The error occurs because DataService is not provided in the testing module's providers array. Angular cannot inject a service it doesn't know about.

❓ state_output

advanced

What is the value of 'count' after this TestBed test runs?

In this test, what will be the value of component.count after fixture.detectChanges()?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Increment</button><p>{{ count }}</p>`
})
class CounterComponent {
  count = 0;
  increment() { this.count++; }
}

beforeEach(() => {
  TestBed.configureTestingModule({ declarations: [CounterComponent] });
});

const fixture = TestBed.createComponent(CounterComponent);
const component = fixture.componentInstance;
component.increment();
fixture.detectChanges();

A 0

B 1

C undefined

D NaN

💡 Hint

Calling the increment method increases count before change detection.

The increment() method is called once before fixture.detectChanges(), so count becomes 1.

🧠 Conceptual

expert

Which TestBed configuration correctly mocks a service dependency?

You have a component that depends on ApiService. You want to test the component with a mock service that returns fixed data. Which TestBed configuration correctly provides the mock?

Angular

class ApiService {
  fetch() { return 'real data'; }
}

class MockApiService {
  fetch() { return 'mock data'; }
}

TestBed.configureTestingModule({
  declarations: [MyComponent],
  // Which providers array is correct?
  providers: ???
});

A providers: [{ provide: MockApiService, useClass: ApiService }]

B providers: [{ provide: ApiService, useValue: ApiService }]

C providers: [ApiService, MockApiService]

D providers: [{ provide: ApiService, useClass: MockApiService }]

💡 Hint

Use the provide/useClass pattern to replace a service with a mock in tests.

Option D tells Angular to provide ApiService using the MockApiService class, effectively replacing the real service with the mock during testing.