Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I use @Output communication in my test integration?

See original GitHub issue

Hi,

How can I use @Ouput communincation between my child and parent component?

header-back-button.component.ts (parente component)

@Component({
  selector: 'cebs-header-back-button',
  template: `
    <header>
      <cebs-icon-button
        icon="chevron_left"
        aria-label="back button"
        (clickEvent)="goBack()"
      ></cebs-icon-button>
    </header>
  `,
  styles: [
    `
      :host {
        width: 100%;
      }

      header {
        display: flex;
      }
    `,
  ],
})
export class HeaderBackButtonComponent {
  constructor(private location: Location) {}

  goBack(): void {
    this.location.back()
  }
}

icon-button.component.ts (child component)

@Component({
  selector: 'cebs-icon-button',
  template: `
    <button (click)="onClick()" aria-label="icon button">
      <span class="material-symbols-outlined icon">{{ icon }}</span>
    </button>
  `,
  styles: [
    `
      button {
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--primary-color);
      }

      .icon {
        color: white;
      }
    `,
  ],
})
export class IconButtonComponent {
  @Output() clickEvent = new EventEmitter()

  @Input() icon!: string

  onClick(): void {
    this.clickEvent.emit()
  }
}

header-back-button.component.spec.ts (my test)

describe('HeaderBackButtonComponent', () => {
  it('should render a header back button component', async () => {
    await render(HeaderBackButtonComponent, {
      declarations: [IconButtonComponent],
    })

    expect(screen.getByLabelText(/back button/i)).toBeDefined()
    expect(screen.getByLabelText(/icon button/i)).toBeDefined()
  })

  it('should call a Location.back when user click in the button', async () => {
    const goBackSpy = jest.fn()
    await render(HeaderBackButtonComponent, {
      declarations: [IconButtonComponent],

      componentProperties: {
        goBack: goBackSpy,
      },
    })
    const location = TestBed.inject(Location)
    jest.spyOn(location, 'back')

    const button = screen.getByLabelText(/icon button/i)

    userEvent.click(button)

    expect(goBackSpy).toHaveBeenCalled()
  })
})

when I try to test my expect toHaveBeenCalled is not work, because the output in the child component is not emit