How to provide a HostAttributeToken in Angular tests?

I recently discovered the HostAttributeToken in Angular (see docs) to provide static attributes for a component.

The following example works fine:

import { Component, HostAttributeToken, inject } from '@angular/core';

@Component({
selector: 'demo-component',
template: `<div [class]="styleClass">Hello world</div>`,
})
export class DemoComponent {
styleClass = inject(new HostAttributeToken('style-class'));
}


usage

<demo-component style-class="bla" />


My question: How can provide the HostAttributeToken in a test with jasmine/karma?

I want to make this attribute required (there is also a flag to make the HostAttributeToken optional).

It is of course easy if there is a host component, but how can I achieve the same thing with the TestBed Api?

A basic test setup without providing an HostAttributeToken would look like this:

import { TestBed } from '@angular/core/testing';
import { DemoComponent } from './demo.component';

describe('DemoComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [DemoComponent],
}).compileComponents();
});

it('should create', () => {
const fixture = TestBed.createComponent(DemoComponent);
expect(fixture.componentInstance).toBeTruthy();
});
});


which errors with

Error: NG0201: No provider for HostAttributeToken style-class found. Find more at https://angular.dev/errors/NG0201
​

Continue reading...