TestBed configuration in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the necessary Angular testing module.

Angular

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

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

AHttpClientTestingModule

BBrowserModule

CFormsModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using BrowserModule instead of HttpClientTestingModule

Forgetting to import any module

The HttpClientTestingModule is used to mock HTTP requests in Angular tests.

2fill in blank

medium

Complete the code to declare the component under test.

Angular

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

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

AFormsModule

BHttpClientTestingModule

CAppComponent

DRouterTestingModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting modules inside declarations

Not declaring the component at all

The component to test must be declared in the declarations array.

3fill in blank

hard

Fix the error in the TestBed setup to create a component fixture.

Angular

const fixture = TestBed.[1](AppComponent);

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

AcompileComponents

Binject

CconfigureTestingModule

DcreateComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using compileComponents instead of createComponent

Trying to inject component directly

createComponent creates a test fixture for the component.

4fill in blank

hard

Fill both blanks to properly configure TestBed with declarations and imports.

Angular

TestBed.configureTestingModule({ declarations: [[1]], imports: [[2]] });

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

AAppComponent

BHttpClientTestingModule

CFormsModule

DRouterTestingModule

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping declarations and imports

Forgetting to import testing modules

The component goes in declarations, and the HTTP testing module goes in imports.

5fill in blank

hard

Fill all three blanks to create a TestBed configuration with declarations, imports, and providers.

Angular

TestBed.configureTestingModule({ declarations: [[1]], imports: [[2]], providers: [[3]] });

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

AAppComponent

BHttpClientTestingModule

CMyService

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting services in imports or declarations

Forgetting to provide services

Declare the component, import the HTTP testing module, and provide the service for dependency injection.