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.

Practice

1. What is the main purpose of dependency injection in Angular service testing?

easy

A. To manually create instances of services inside tests

B. To avoid writing tests for services

C. To write services without any dependencies

D. To provide required dependencies automatically to the service under test

Solution

1. Step 1: Understand dependency injection role

   Dependency injection automatically provides the needed dependencies to services, avoiding manual setup.

2. Step 2: Relate to testing context

   In tests, this means services get their dependencies without manual creation, simplifying test setup.

3. Final Answer:

   To provide required dependencies automatically to the service under test -> Option D

4. Quick Check:

   Dependency injection = automatic dependency provision [OK]

Hint: Dependency injection means automatic supply of needed parts [OK]

Common Mistakes:

• Thinking dependencies must be created manually in tests
• Believing services have no dependencies
• Confusing dependency injection with avoiding tests

2. Which syntax correctly injects a service named MyService in an Angular test using TestBed?

easy

A. const service = TestBed.inject(MyService);

B. const service = new MyService();

C. const service = TestBed.get(MyService);

D. const service = inject(MyService);

Solution

1. Step 1: Identify correct injection method

   In Angular testing, TestBed.inject() is the modern and correct way to get a service instance.

2. Step 2: Check other options

   new MyService() bypasses DI, TestBed.get() is deprecated, and inject() is used differently.

3. Final Answer:

   const service = TestBed.inject(MyService); -> Option A

4. Quick Check:

   Use TestBed.inject() for service injection [OK]

Hint: Use TestBed.inject() to get services in tests [OK]

Common Mistakes:

• Using new keyword instead of injection
• Using deprecated TestBed.get() method
• Confusing inject() function usage

3. Given this test setup:

TestBed.configureTestingModule({ providers: [MyService] });
const service = TestBed.inject(MyService);
console.log(service.getValue());

If MyService has a method getValue() returning 42, what will be logged?

medium

A. Error: No provider for MyService

B. undefined

C. 42

D. null

Solution

1. Step 1: Confirm service registration

   MyService is provided in the testing module, so Angular can inject it.

2. Step 2: Check method output

   The method getValue() returns 42, so calling it logs 42.

3. Final Answer:

   42 -> Option C

4. Quick Check:

   Registered service method returns 42 [OK]

Hint: Registered services return their method values correctly [OK]

Common Mistakes:

• Forgetting to provide the service in TestBed
• Expecting undefined if method is missing
• Confusing error messages with missing providers

4. What is the error in this test code snippet?

beforeEach(() => {
  TestBed.configureTestingModule({});
  service = TestBed.inject(MyService);
});

Assuming MyService is not provided anywhere else.

medium

A. Service is injected twice causing conflict

B. No provider for MyService error because it is not registered

C. Syntax error in TestBed configuration

D. No error, code works fine

Solution

1. Step 1: Check TestBed providers

   The testing module is configured with an empty object, so MyService is not provided.

2. Step 2: Understand injection failure

   Injecting MyService without providing it causes a runtime error: No provider for MyService.

3. Final Answer:

   No provider for MyService error because it is not registered -> Option B

4. Quick Check:

   Missing provider causes injection error [OK]

Hint: Always provide services in TestBed before injecting [OK]

Common Mistakes:

• Forgetting to add service to providers array
• Assuming services are auto-provided in tests
• Ignoring runtime injection errors

5. You want to test OrderService which depends on ApiService. To isolate OrderService tests, which approach is best?

hard

A. Provide a fake ApiService in TestBed to replace the real one

B. Use the real ApiService without changes

C. Do not provide ApiService and expect errors

D. Manually create OrderService without TestBed

Solution

1. Step 1: Understand dependency isolation

   To test OrderService alone, replace real dependencies with fakes to avoid side effects.

2. Step 2: Use TestBed with fake provider

   Providing a fake ApiService in TestBed allows controlled, safe testing of OrderService.

3. Final Answer:

   Provide a fake ApiService in TestBed to replace the real one -> Option A

4. Quick Check:

   Use fakes to isolate service tests [OK]

Hint: Replace real dependencies with fakes for isolated tests [OK]

Common Mistakes:

• Using real dependencies causing flaky tests
• Skipping providers causing injection errors
• Avoiding TestBed and manual instantiation