From 41d1cd51e54e18d7cadac9bcadd5d3e2371f6f89 Mon Sep 17 00:00:00 2001
From: Abhinav Kumar <abhinav@avitechlab.com>
Date: Fri, 15 Nov 2024 18:11:06 +0530
Subject: [PATCH] fix: no spaces between emoji aliases (#33278)

---
 .changeset/spotty-ads-knock.md                |  5 ++
 .../admin/customEmoji/CustomEmoji.spec.tsx    | 79 +++++++++++++++++++
 .../views/admin/customEmoji/CustomEmoji.tsx   |  2 +-
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spotty-ads-knock.md
 create mode 100644 apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx

diff --git a/.changeset/spotty-ads-knock.md b/.changeset/spotty-ads-knock.md
new file mode 100644
index 000000000000..b40e70b74a98
--- /dev/null
+++ b/.changeset/spotty-ads-knock.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes display of emoji aliases in custom emoji list by adding commas between aliases
diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx
new file mode 100644
index 000000000000..d59a8c815150
--- /dev/null
+++ b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.spec.tsx
@@ -0,0 +1,79 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import CustomEmoji from './CustomEmoji';
+
+const appRoot = mockAppRoot().withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+	count: 1,
+	offset: 0,
+	total: 1,
+	success: true,
+	emojis: [
+		{
+			_id: '1',
+			name: 'smile',
+			aliases: ['happy', 'joy'],
+			extension: 'webp',
+			_updatedAt: new Date().toISOString(),
+			etag: 'abcdef',
+		},
+	],
+}));
+
+describe('CustomEmoji Component', () => {
+	const mockRef = { current: jest.fn() };
+	const mockOnClick = jest.fn();
+
+	it('renders emoji list', async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('smile')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases as comma-separated values when aliases is an array", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: appRoot.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy, joy')).toBeInTheDocument();
+		});
+	});
+
+	it("renders emoji's aliases values when aliases is a string", async () => {
+		render(<CustomEmoji onClick={mockOnClick} reload={mockRef} />, {
+			legacyRoot: true,
+			wrapper: mockAppRoot()
+				.withEndpoint('GET', '/v1/emoji-custom.all', () => ({
+					count: 1,
+					offset: 0,
+					total: 1,
+					success: true,
+					emojis: [
+						{
+							_id: '1',
+							name: 'smile',
+							aliases: 'happy' as any,
+							extension: 'webp',
+							_updatedAt: new Date().toISOString(),
+							etag: 'abcdef',
+						},
+					],
+				}))
+				.build(),
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('happy')).toBeInTheDocument();
+		});
+	});
+});
diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
index 0e6bb2a7687d..4c02776b80d5 100644
--- a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
@@ -95,7 +95,7 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 											<Box withTruncatedText>{emojis.name}</Box>
 										</GenericTableCell>
 										<GenericTableCell color='default'>
-											<Box withTruncatedText>{emojis.aliases.join(', ')}</Box>
+											<Box withTruncatedText>{Array.isArray(emojis.aliases) ? emojis.aliases.join(', ') : emojis.aliases}</Box>
 										</GenericTableCell>
 									</GenericTableRow>
 								))}