Closed
Description
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