getsaf / shallow-render

Angular testing made easy with shallow rendering and easy mocking. https://getsaf.github.io/shallow-render
MIT License
273 stars 25 forks source link

Error "is not a known Element" when rendering a Component as ng-content #241

Open floisloading opened 1 year ago

floisloading commented 1 year ago

Precondition

We implement our Icons in a SVG module. One of the components is EditSvg (selector svg-edit).

We are currently making components in our SharedModule standalone. IconButtonComponent is one of them:

<button *ngIf="!href" [ngClass]="{ 'icon-button': true, activated: this.activated }" (click)="checkClick($event)">
  <ng-template *ngTemplateOutlet="content"></ng-template>
</button>

<a *ngIf="href" [href]="href" [ngClass]="{ 'icon-button': true, 'no-link': true, activated: this.activated }" (click)="checkClick($event)">
  <ng-template *ngTemplateOutlet="content"></ng-template>
</a>

<ng-template #content>
  <ng-content></ng-content>
</ng-template>
@Component({
  selector: 'app-icon-button',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './icon-button.component.html',
  styleUrls: ['./icon-button.component.sass'],
})
export class IconButtonComponent {
  @Input() href?: string;
  @Input() activated? = false;
  disabled?: boolean = false;

  @Output() onClick = new EventEmitter<MouseEvent>();

  checkClick(event: MouseEvent) {
    if (!this.disabled) this.onClick.emit(event);
  }
}

This component is used in our code like this:

<app-icon-button (onClick)="openListMenu()">
  <svg-edit></svg-edit>
</app-icon-button>

Error

I wanted to adapt the Shallow Render Specs to standalone, but I keep getting the error Failed: NG0304: 'svg-edit' is not a known element (used in the 'ProxyShallowContainerComponent' component template).

The specs look like this:

describe('IconButtonComponent', () => {
  let shallow: Shallow<IconButtonComponent>;

  beforeEach(() => {
    shallow = new Shallow(IconButtonComponent);
  });

  it('should show the icon', async () => {
    // given
    const icon = 'svg-edit';
    // when
    const { find } = await shallow.render(`
      <app-icon-button>
        <${icon}></${icon}>
      </app-icon-button>
    `);
    // then
    expect(find(icon)).toBeTruthy();
  });

What I've tried

How can I make EditSvg accessible in my tests?