Skip to content

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

Closed
@jadir-junior

Description

@jadir-junior

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions