Looking to test an Angular 11 component:
@Component({
selector: 'app-foo-page',
template: `
<app-header mode='operational' cool='true'></app-header>
Some content
`
})
export class FooPageComponent { }
To include HeaderComponent in the declarations:
setUpTestBed({
declarations: [
FooPageComponent,
HeaderComponent,
],
Alternatively, consider this approach:
@Component({ selector: 'app-header', template: 'dummy' })
class DummyHeaderComponent {
@Input() mode = 'operational';
@Input() cool = true;
}
// ...
setUpTestBed({
declarations: [
FooPageComponent,
DummyHeaderComponent,
],
Question arises: Can I create a reusable function to generate such 'dummy' components? Aim is to simplify and streamline the process of building the declarations for testing, without needing to create individual dummy components each time.
In essence, looking to do something like this:
function generateDummyComponentDefinition(selector, inputs) {
// Return a class or constructor function
// ...decorated with @Component(...)
// ...with specified @Input() properties
}
// ...
setUpTestBed({
declarations: [
FooPageComponent,
generateDummyComponentDefinition('app-header', ['mode', 'cool']),
],
Explored TypeScript's Decorators documentation, yet bridging the gap to practical implementation remains challenging.
Is the desired functionality achievable?