Testing with fixtures and debug elements in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a test fixture for the MyComponent.

Angular

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

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

AcreateComponent

BcompileComponents

CconfigureTestingModule

Dinject

Attempts:

3 left

💡 Hint

Common Mistakes

Using compileComponents instead of createComponent.

Trying to inject the component directly.

The createComponent method creates a fixture for the component to test.

2fill in blank

medium

Complete the code to access the native DOM element from the fixture.

Angular

const element = fixture.debugElement.[1];

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

AnativeElement

Binjector

CcomponentInstance

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using componentInstance instead of nativeElement.

Trying to access children when you want the root element.

The nativeElement property gives direct access to the DOM element.

3fill in blank

hard

Fix the error in the test by completing the code to detect changes after updating component properties.

Angular

fixture.[1]();

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

AautoDetectChanges

BdetectChanges

CupdateView

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using autoDetectChanges which is a configuration, not a method.

Trying to call a non-existent method like refresh.

Calling detectChanges() tells Angular to update the view with the latest data.

4fill in blank

hard

Fill both blanks to query a button element by CSS selector and trigger a click event.

Angular

const button = fixture.debugElement.[1](By.css('button'));
button.[2]('click');

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

Aquery

BtriggerEventHandler

CqueryAll

DnativeElement

Attempts:

3 left

💡 Hint

Common Mistakes

Using queryAll when only one element is needed.

Trying to call click() directly on debugElement.

Use query to find the element and triggerEventHandler to simulate the click.

5fill in blank

hard

Fill all three blanks to create a test that checks if a component's title is rendered correctly.

Angular

fixture.detectChanges();
const compiled = fixture.debugElement.[1](By.css('h1')).nativeElement;
expect(compiled.[2]).toContain(component.[3]);

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

Aquery

BtextContent

Ctitle

DqueryAll

Attempts:

3 left

💡 Hint

Common Mistakes

Using queryAll instead of query when only one element is needed.

Checking innerHTML instead of textContent.

Comparing to a wrong component property.

We query the h1 element, check its textContent, and compare it to the component's title property.