upstream-rocketchat/apps/meteor/tests/e2e/message-composer.spec.ts

import { faker } from '@faker-js/faker';

import { Users } from './fixtures/userStates';
import { HomeChannel } from './page-objects';
import { createTargetChannel } from './utils';
import { expect, test } from './utils/test';

test.use({ storageState: Users.user1.state });

test.describe.serial('message-composer', () => {
	let poHomeChannel: HomeChannel;
	let targetChannel: string;

	test.beforeAll(async ({ api }) => {
		targetChannel = await createTargetChannel(api, { members: ['rocket.cat'] });
	});

	test.beforeEach(async ({ page }) => {
		poHomeChannel = new HomeChannel(page);

		await poHomeChannel.gotoChannel(targetChannel);
	});

	test('should have all formatters and the main actions visible on toolbar', async () => {
		await poHomeChannel.content.sendMessage('hello composer');

		await expect(poHomeChannel.composer.allPrimaryActions).toHaveCount(12);
	});

	test('should have only the main formatter and the main action', async ({ page }) => {
		await page.setViewportSize({ width: 768, height: 600 });

		await expect(poHomeChannel.composer.allPrimaryActions).toHaveCount(6);
	});

	test('should navigate on toolbar using arrow keys', async ({ page }) => {
		await page.keyboard.press('Tab');
		await page.keyboard.press('ArrowRight');
		await page.keyboard.press('ArrowRight');
		await expect(poHomeChannel.composer.btnItalicFormatter).toBeFocused();

		await page.keyboard.press('ArrowLeft');
		await expect(poHomeChannel.composer.btnBoldFormatter).toBeFocused();
	});

	test('should move the focus away from toolbar using tab key', async ({ page }) => {
		await page.keyboard.press('Tab');
		await page.keyboard.press('Tab');

		await expect(poHomeChannel.composer.btnEmoji).not.toBeFocused();
	});

	test('should add a link to the selected text', async ({ page }) => {
		const url = faker.internet.url();

		await page.keyboard.type('hello composer');
		await page.keyboard.press('Control+A'); // on Windows and Linux
		await page.keyboard.press('Meta+A'); // on macOS
		await poHomeChannel.composer.btnLinkFormatter.click();
		// It takes a while for the modal to be visible and ready to receive input, so we need to wait for it before typing the url
		await poHomeChannel.composer.addLinkModal.waitFor();
		await page.keyboard.type(url);
		await page.keyboard.press('Enter');

		await expect(poHomeChannel.composer.inputMessage).toHaveValue(`[hello composer](${url})`);
	});

	test('should select popup item and not send the message when pressing enter', async ({ page }) => {
		await poHomeChannel.content.sendMessage('hello composer');

		await test.step('mention popup', async () => {
			await page.keyboard.type('hello composer @all');

			await page.keyboard.press('Enter');

			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @all ');

			await poHomeChannel.composer.inputMessage.fill('');
		});

		await test.step('emoji popup', async () => {
			await page.keyboard.type('hello composer :flag_br');

			await page.keyboard.press('Enter');

			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer 🇧🇷 ');

			await poHomeChannel.composer.inputMessage.fill('');
		});

		await test.step('slash command', async () => {
			await page.keyboard.type('/gim');

			await page.keyboard.press('Enter');

			await expect(poHomeChannel.composer.inputMessage).toHaveValue('/gimme ');

			await poHomeChannel.composer.inputMessage.fill('');
		});
	});

	test('should list popup items correctly', async ({ page }) => {
		await poHomeChannel.content.sendMessage('hello composer');

		await test.step('mention popup', async () => {
			await page.keyboard.type('hello composer @rocket.cat');

			await expect(poHomeChannel.composer.boxPopup.getByText('rocket.cat')).toBeVisible();
		});
	});

	test('should close mention popup when canceling a message edit via "Cancel" button', async ({ page }) => {
		await poHomeChannel.content.sendMessage('hello composer @rocket.cat');

		await test.step('expect to edit last message', async () => {
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
			await poHomeChannel.content.openLastMessageMenu();
			await poHomeChannel.content.btnOptionEditMessage.click();
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @rocket.cat');
		});

		await test.step('expect to open popup on mention', async () => {
			await page.keyboard.type(' @');
			await expect(poHomeChannel.composer.boxPopup).toBeVisible();
		});

		await test.step('expect popup to close after the first edit is cancelled', async () => {
			await poHomeChannel.composer.btnCancel.click();
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @rocket.cat');
			await expect(poHomeChannel.composer.boxPopup).not.toBeVisible();
		});

		await test.step('expect to leave editing mode', async () => {
			await poHomeChannel.composer.btnCancel.click();
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
		});
	});

	test('should close mention popup when canceling a message edit via keyboard', async ({ page }) => {
		await poHomeChannel.content.sendMessage('hello composer @rocket.cat');

		await test.step('expect to edit last message', async () => {
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
			await poHomeChannel.content.openLastMessageMenu();
			await poHomeChannel.content.btnOptionEditMessage.click();
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @rocket.cat');
		});

		await test.step('expect to open popup on mention', async () => {
			await page.keyboard.type(' @');
			await expect(poHomeChannel.composer.boxPopup).toBeVisible();
		});

		await test.step('expect popup to close after the first edit is cancelled', async () => {
			await page.keyboard.press('Escape');
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('hello composer @rocket.cat');
			await expect(poHomeChannel.composer.boxPopup).not.toBeVisible();
		});

		await test.step('expect to leave editing mode', async () => {
			await page.keyboard.press('Escape');
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
		});
	});

	test('should close mention popup after sending a message ending with a mention', async ({ page }) => {
		await poHomeChannel.composer.inputMessage.click();

		await test.step('expect to open popup on mention', async () => {
			await page.keyboard.type('hello composer @rocket.cat');
			await expect(poHomeChannel.composer.boxPopup).toBeVisible();
		});

		await test.step('expect popup to close after sending the message', async () => {
			await poHomeChannel.composer.btnSend.click();
			await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
			await expect(poHomeChannel.composer.boxPopup).not.toBeVisible();
		});
	});

	test('should open mention popup on text inserted without keyboard events', async ({ page }) => {
		await poHomeChannel.composer.inputMessage.click();

		await page.keyboard.insertText('hello composer @rocket.cat');
		await expect(poHomeChannel.composer.boxPopup).toBeVisible();

		await poHomeChannel.composer.inputMessage.fill('');
	});

	test('should clear the composer after running a client-only slash command', async () => {
		await poHomeChannel.content.dispatchSlashCommand('/shrug');

		await expect(poHomeChannel.content.lastUserMessageBody).toContainText('(ツ)');
		await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
	});

	test('should clear the composer after an unrecognized slash command', async () => {
		await poHomeChannel.content.dispatchSlashCommand('/notaslashcommand');

		await expect(poHomeChannel.content.lastUserMessageBody).toContainText('No such command');
		await expect(poHomeChannel.composer.inputMessage).toHaveValue('');
	});

	test.describe('audio recorder', () => {
		test('should open audio recorder', async () => {
			await test.step('should be able to record an audio with text content in composer ', async () => {
				await poHomeChannel.composer.inputMessage.fill('this is a message with audio message');
				await expect(poHomeChannel.composer.btnAudioMessage).toBeEnabled();
			});

			await poHomeChannel.composer.btnAudioMessage.click();
			await expect(poHomeChannel.audioRecorder).toBeVisible();
		});

		test('should stop recording when clicking on cancel', async () => {
			await poHomeChannel.composer.btnAudioMessage.click();
			await expect(poHomeChannel.audioRecorder).toBeVisible();

			await poHomeChannel.audioRecorder.getByRole('button', { name: 'Cancel recording', exact: true }).click();
			await expect(poHomeChannel.audioRecorder).not.toBeVisible();
		});

		test('should attach file to the composer when clicking on "Finish recording"', async ({ page }) => {
			await poHomeChannel.composer.btnAudioMessage.click();
			await expect(poHomeChannel.audioRecorder).toBeVisible();

			await page.waitForTimeout(1000);
			await poHomeChannel.audioRecorder.getByRole('button', { name: 'Finish Recording', exact: true }).click();
			await expect(poHomeChannel.composer.getFileByName('Audio record.mp3')).toBeVisible();
		});
	});
});