Service testing with dependency injection in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject the service in the test setup.

Angular

beforeEach(() => {
  TestBed.configureTestingModule({});
  service = TestBed.[1](MyService);
});

Drag options to blanks, or click blank then click option'

Aget

Binject

Cprovide

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inject' instead of 'get' causes errors because 'inject' is used differently.

Trying to use 'provide' which is for configuring providers, not retrieving services.

Use TestBed.get() to retrieve the service instance for testing.

2fill in blank

medium

Complete the code to provide the service in the testing module.

Angular

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

Drag options to blanks, or click blank then click option'

AHttpClient

BMyService

CComponentFixture

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Adding unrelated classes like HttpClient or NgModule in providers.

Forgetting to add the service to providers causes injection errors.

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

3fill in blank

hard

Fix the error in the test by completing the injection syntax.

Angular

it('should be created', inject([[1]], (service: MyService) => {
  expect(service).toBeTruthy();
}));

Drag options to blanks, or click blank then click option'

AHttpClient

BNgModule

CComponentFixture

DMyService

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated classes in the inject array causes injection failure.

Leaving the array empty or with wrong service names.

The inject function requires the service class to inject as the first argument.

4fill in blank

hard

Fill both blanks to create a spy object and provide it in the test module.

Angular

const spy = jasmine.createSpyObj('[1]', ['getData']);

TestBed.configureTestingModule({
  providers: [{ provide: [2], useValue: spy }]
});

Drag options to blanks, or click blank then click option'

AMyService

BHttpClient

DDataService

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for spy and provide causes injection mismatch.

Providing the wrong class or string token.

Create a spy object for the service name and provide it using provide with the service class.

5fill in blank

hard

Fill all three blanks to inject the service, spy on a method, and test the return value.

Angular

service = TestBed.[1](MyService);
spyOn(service, '[2]').and.returnValue(of('mock data'));
service.[3]().subscribe(data => {
  expect(data).toBe('mock data');
});

Drag options to blanks, or click blank then click option'

Aget

BgetData

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method names for spying or calling causes test failures.

Not returning an observable from the spy causes subscription errors.

Use get to inject, spy on the getData method, and call it to test the mocked return.