Component testing basics in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular testing module needed for component tests.

Angular

import { [1] } from '@angular/core/testing';

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

ATestBed

BNgModule

CComponentFixture

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Using ComponentFixture instead of TestBed

Importing NgModule which is unrelated to testing setup

The TestBed is the main Angular testing utility to configure and create components for tests.

2fill in blank

medium

Complete the code to create a component fixture for testing.

Angular

let fixture = TestBed.[1](MyComponent);

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

Ainject

BcompileComponents

CconfigureTestingModule

DcreateComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using compileComponents which compiles templates but does not create fixture

Using configureTestingModule which sets up the module but does not create component

createComponent creates an instance of the component and its fixture for testing.

3fill in blank

hard

Fix the error in the test setup by completing the missing method call to compile components.

Angular

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [MyComponent]
  }).[1]();
});

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

Ainject

BcreateComponent

CcompileComponents

DresetTestingModule

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting compileComponents causing template errors

Using createComponent here which is done later

compileComponents compiles the component's template and CSS asynchronously before tests run.

4fill in blank

hard

Fill both blanks to access the component instance and trigger change detection.

Angular

const fixture = TestBed.createComponent(MyComponent);
const component = fixture.[1];
fixture.[2]();

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

AcomponentInstance

BdetectChanges

CnativeElement

DmarkForCheck

Attempts:

3 left

💡 Hint

Common Mistakes

Using nativeElement instead of componentInstance

Using markForCheck which is a change detection strategy method, not fixture method

componentInstance accesses the component object.
detectChanges updates the view with the latest data.

5fill in blank

hard

Fill all three blanks to write a test that checks if a component's title renders correctly.

Angular

it('should display title', () => {
  const fixture = TestBed.createComponent(MyComponent);
  const component = fixture.[1];
  component.title = 'Hello';
  fixture.[2]();
  const compiled = fixture.[3];
  expect(compiled.querySelector('h1')?.textContent).toContain('Hello');
});

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

AcomponentInstance

BdetectChanges

CnativeElement

DdebugElement

Attempts:

3 left

💡 Hint

Common Mistakes

Using debugElement instead of nativeElement for DOM access

Forgetting to call detectChanges causing test to fail

componentInstance accesses the component.
detectChanges updates the view.
nativeElement accesses the DOM element for querying.