Mocking services in tests in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a mock service using Jasmine spy.

Angular

const mockService = jasmine.[1]('MyService');

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

AspyOn

BcreateSpy

CcreateSpyObj

DmockService

Attempts:

3 left

💡 Hint

Common Mistakes

Using spyOn instead of createSpyObj to create the mock object.

Trying to create a spy without specifying method names.

Use createSpyObj to create a mock object with spy methods.

2fill in blank

medium

Complete the code to provide the mock service in the Angular test module.

Angular

TestBed.configureTestingModule({ providers: [{ provide: MyService, use[1]: mockService }] });

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

AValue

BClass

CFactory

DExisting

Attempts:

3 left

💡 Hint

Common Mistakes

Using useClass instead of useValue for a mock object.

Forgetting to provide the mock service in the test module.

Use useValue to provide a mock object instance as the service.

3fill in blank

hard

Fix the error in spying on the service method in the test.

Angular

spyOn(mockService, '[1]').and.returnValue(of(true));

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

Afetchdata

BfetchData

CFetchData

Dfetch_data

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing for the method name.

Using underscores or other naming styles not matching the service.

Method names are case-sensitive and usually camelCase in Angular services.

4fill in blank

hard

Fill both blanks to create a mock service with two spy methods.

Angular

const mockService = jasmine.createSpyObj('MyService', [[1], [2]]);

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

A'getData'

B'saveData'

C'deleteData'

D'updateData'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around method names.

Providing method names not matching the service interface.

Provide method names as strings in an array to create spies for each.

5fill in blank

hard

Fill all three blanks to spy on a method and set a return value in the test.

Angular

spyOn(mockService, [1]).and.[2](of([3]));

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

A'fetchData'

Breturn

Ctrue

DreturnValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'return' instead of 'returnValue'.

Not quoting the method name.

Passing a non-Observable value without wrapping in 'of()'.

Use spyOn with the method name as a string, then and.returnValue to set the mock return value.