playwright/tests/components/ct-angular/tests/events.spec.ts
2023-11-20 22:23:13 +01:00

64 lines
1.4 KiB
TypeScript

import { test, expect } from '@playwright/experimental-ct-angular';
import { ButtonComponent } from '@/components/button.component';
import { OutputComponent } from '@/components/output.component';
test('emit an submit event when the button is clicked', async ({ mount }) => {
const messages: string[] = [];
const component = await mount(ButtonComponent, {
props: {
title: 'Submit',
},
on: {
submit: (data: string) => messages.push(data),
},
});
await component.click();
expect(messages).toEqual(['hello']);
});
test('replace existing listener when new listener is set', async ({
mount,
}) => {
let count = 0;
const component = await mount(ButtonComponent, {
props: {
title: 'Submit',
},
on: {
submit() {
count++;
},
},
});
component.update({
on: {
submit() {
count++;
},
},
});
await component.click();
expect(count).toBe(1);
});
test('unsubscribe from events when the component is unmounted', async ({
mount,
page,
}) => {
const component = await mount(OutputComponent, {
on: {
answerChange() {},
},
});
await component.unmount();
/* Check that the output observable had been unsubscribed from
* as it sets a global variable `hasUnusbscribed` to true
* when it detects unsubscription. Cf. OutputComponent. */
expect(await page.evaluate(() => (window as any).hasUnsubscribed)).toBe(true);
});