Привет, подскажите пожалуйста Начал писать юнит тесты для презентационных компонентов @Component({

selector: '...',
standalone: true,
imports: [...],
template: `
<cd-flat-button
(clicked)="createClicked.emit()"
icon="plus"
text="Create"
/>

<cd-stroked-button
class="button"
(clicked)="columnsClicked.emit()"
icon="view-columns"
text="Columns"
/>

<cd-stroked-button
class="button"
(clicked)="exportClicked.emit()"
icon="export"
text="Export"
/>

<cd-flat-button
*ngIf="showDelete"
class="button"
(clicked)="deleteClicked.emit()"
icon="trash"
/>
`,
styles: [
`
.button {
margin-inline-start: 8px;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ActionButtonsComponent {
@Input() showDelete = false;

@Output() readonly createClicked = new EventEmitter<void>();
@Output() readonly columnsClicked = new EventEmitter<void>();
@Output() readonly exportClicked = new EventEmitter<void>();
@Output() readonly deleteClicked = new EventEmitter<void>();
}

И вот как будет правильнее
Сделать методы в классе onCreateClicked() / onColumnsClicked() / ... и вызывать эти методы в темплейте, тем самым я буду покрывать тестами эти методы

Или через document.querySelector получать кнопки и кликать на них, и тем самым смотреть работу output'ов

Как вы решаете данную проблему? Так как получать кнопки через селектор означает, что еще классы нужно вешать, но с другой стороны без доп методов, которые как по мне не нужны

честно говоря эти output-ы выглядят крайне странно, как и сам компонент, я бы в темплейт засунул только ng-content а кнопки прокидывал сверху

запускать spyon на эмиттер. кликать на пункт. проверять, что .emit вызван

идея заключалась в том, что есть 5 мест, где нужно показывать эти 4 кнопки и в моем случае есть 1 компонент, который показывает эти 4 кнопки одним тегом без доп импортов в такой бы ты ситуации, все также бы поступил?

да, сильно много кода это не прибавит, но избавит от проблем если появится место с 3 кнопками