Why testing Angular apps matters - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Angular test setup for a component.

Angular

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

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

AAppComponent

BHttpClientModule

CFormsModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting modules like HttpClientModule in declarations instead of imports.

Forgetting to declare the component under test.

The declarations array should include the component you want to test, such as AppComponent.

2fill in blank

medium

Complete the code to create a test that checks if the component is created successfully.

Angular

it('should create the component', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;
  expect(component).[1];
});

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

AtoBeNull()

BtoBeUndefined()

CtoBeTruthy()

DtoBeFalse()

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBeNull() which expects the value to be null.

Using toBeFalse() which expects the value to be false.

Using toBeTruthy() checks that the component instance exists and is truthy, meaning it was created.

3fill in blank

hard

Fix the error in the test by completing the code to detect changes after setting a component property.

Angular

it('should update title in template', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;
  component.title = 'Test Title';
  fixture.[1]();
  const compiled = fixture.nativeElement as HTMLElement;
  expect(compiled.querySelector('h1')?.textContent).toContain('Test Title');
});

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

AdetectChanges

BupdateView

Crefresh

DapplyChanges

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like updateView or refresh.

Forgetting to call detectChanges causing the template not to update.

Calling fixture.detectChanges() tells Angular to update the template with the latest component data.

4fill in blank

hard

Fill both blanks to import necessary modules and declare the component in the test setup.

Angular

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

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

AHttpClientTestingModule

BAppComponent

CFormsModule

DRouterTestingModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting components in imports or modules in declarations.

Forgetting to import testing modules needed by the component.

HttpClientTestingModule is imported to mock HTTP requests, and AppComponent is declared to test it.

5fill in blank

hard

Fill all three blanks to create a test that spies on a service method and checks if it was called.

Angular

it('should call fetchData from service', () => {
  const fixture = TestBed.createComponent(DataComponent);
  const component = fixture.componentInstance;
  const service = TestBed.inject(DataService);
  spyOn(service, '[1]').and.returnValue(of([]));
  component.loadData();
  expect(service.[2]).toHaveBeenCalled();
  expect(component.data).toEqual([3]);
});

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

AfetchData

C[]

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Using different method names in spyOn and expect.

Expecting data to be an object instead of an array.

The test spies on the fetchData method, expects it to be called, and checks that the component's data is an empty array [] as returned by the spy.