[Glitch] Emoji: Cleanup new code

Port 0c64e7f75e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/emoji/render.test.ts

@@ -1,101 +1,12 @@
 import { customEmojiFactory, unicodeEmojiFactory } from '@/testing/factories';
 
-import { EMOJI_MODE_TWEMOJI } from './constants';
 import * as db from './database';
+import * as loader from './loader';
 import {
-  emojifyElement,
-  emojifyText,
-  testCacheClear,
+  loadEmojiDataToState,
+  stringToEmojiState,
   tokenizeText,
 } from './render';
-import type { EmojiAppState } from './types';
-
-function mockDatabase() {
-  return {
-    searchCustomEmojisByShortcodes: vi
-      .spyOn(db, 'searchCustomEmojisByShortcodes')
-      .mockResolvedValue([customEmojiFactory()]),
-    searchEmojisByHexcodes: vi
-      .spyOn(db, 'searchEmojisByHexcodes')
-      .mockResolvedValue([
-        unicodeEmojiFactory({
-          hexcode: '1F60A',
-          label: 'smiling face with smiling eyes',
-          unicode: '😊',
-        }),
-        unicodeEmojiFactory({
-          hexcode: '1F1EA-1F1FA',
-          label: 'flag-eu',
-          unicode: '🇪🇺',
-        }),
-      ]),
-  };
-}
-
-const expectedSmileImage =
-  '<img draggable="false" class="emojione" alt="😊" title="smiling face with smiling eyes" src="/emoji/1f60a.svg">';
-const expectedFlagImage =
-  '<img draggable="false" class="emojione" alt="🇪🇺" title="flag-eu" src="/emoji/1f1ea-1f1fa.svg">';
-
-function testAppState(state: Partial<EmojiAppState> = {}) {
-  return {
-    locales: ['en'],
-    mode: EMOJI_MODE_TWEMOJI,
-    currentLocale: 'en',
-    darkTheme: false,
-    ...state,
-  } satisfies EmojiAppState;
-}
-
-describe('emojifyElement', () => {
-  function testElement(text = '<p>Hello 😊🇪🇺!</p><p>:custom:</p>') {
-    const testElement = document.createElement('div');
-    testElement.innerHTML = text;
-    return testElement;
-  }
-
-  afterEach(() => {
-    testCacheClear();
-    vi.restoreAllMocks();
-  });
-
-  test('caches element rendering results', async () => {
-    const { searchCustomEmojisByShortcodes, searchEmojisByHexcodes } =
-      mockDatabase();
-    await emojifyElement(testElement(), testAppState());
-    await emojifyElement(testElement(), testAppState());
-    await emojifyElement(testElement(), testAppState());
-    expect(searchEmojisByHexcodes).toHaveBeenCalledExactlyOnceWith(
-      ['1F1EA-1F1FA', '1F60A'],
-      'en',
-    );
-    expect(searchCustomEmojisByShortcodes).toHaveBeenCalledExactlyOnceWith([
-      ':custom:',
-    ]);
-  });
-
-  test('returns null when no emoji are found', async () => {
-    mockDatabase();
-    const actual = await emojifyElement(
-      testElement('<p>here is just text :)</p>'),
-      testAppState(),
-    );
-    expect(actual).toBeNull();
-  });
-});
-
-describe('emojifyText', () => {
-  test('returns original input when no emoji are in string', async () => {
-    const actual = await emojifyText('nothing here', testAppState());
-    expect(actual).toBe('nothing here');
-  });
-
-  test('renders Unicode emojis to twemojis', async () => {
-    mockDatabase();
-    const actual = await emojifyText('Hello 😊🇪🇺!', testAppState());
-    expect(actual).toBe(`Hello ${expectedSmileImage}${expectedFlagImage}!`);
-  });
-});
 
 describe('tokenizeText', () => {
   test('returns an array of text to be a single token', () => {
@@ -162,3 +73,106 @@ describe('tokenizeText', () => {
     ]);
   });
 });
+
+describe('stringToEmojiState', () => {
+  test('returns unicode emoji state for valid unicode emoji', () => {
+    expect(stringToEmojiState('😊')).toEqual({
+      type: 'unicode',
+      code: '1F60A',
+    });
+  });
+
+  test('returns custom emoji state for valid custom emoji', () => {
+    expect(stringToEmojiState(':smile:')).toEqual({
+      type: 'custom',
+      code: 'smile',
+      data: undefined,
+    });
+  });
+
+  test('returns custom emoji state with data when provided', () => {
+    const customEmoji = {
+      smile: customEmojiFactory({
+        shortcode: 'smile',
+        url: 'https://example.com/smile.png',
+        static_url: 'https://example.com/smile_static.png',
+      }),
+    };
+    expect(stringToEmojiState(':smile:', customEmoji)).toEqual({
+      type: 'custom',
+      code: 'smile',
+      data: customEmoji.smile,
+    });
+  });
+
+  test('returns null for invalid emoji strings', () => {
+    expect(stringToEmojiState('notanemoji')).toBeNull();
+    expect(stringToEmojiState(':invalid-emoji:')).toBeNull();
+  });
+});
+
+describe('loadEmojiDataToState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('loads unicode data into state', async () => {
+    const dbCall = vi
+      .spyOn(db, 'loadEmojiByHexcode')
+      .mockResolvedValue(unicodeEmojiFactory());
+    const unicodeState = { type: 'unicode', code: '1F60A' } as const;
+    const result = await loadEmojiDataToState(unicodeState, 'en');
+    expect(dbCall).toHaveBeenCalledWith('1F60A', 'en');
+    expect(result).toEqual({
+      type: 'unicode',
+      code: '1F60A',
+      data: unicodeEmojiFactory(),
+    });
+  });
+
+  test('loads custom emoji data into state', async () => {
+    const dbCall = vi
+      .spyOn(db, 'loadCustomEmojiByShortcode')
+      .mockResolvedValueOnce(customEmojiFactory());
+    const customState = { type: 'custom', code: 'smile' } as const;
+    const result = await loadEmojiDataToState(customState, 'en');
+    expect(dbCall).toHaveBeenCalledWith('smile');
+    expect(result).toEqual({
+      type: 'custom',
+      code: 'smile',
+      data: customEmojiFactory(),
+    });
+  });
+
+  test('returns null if unicode emoji not found in database', async () => {
+    vi.spyOn(db, 'loadEmojiByHexcode').mockResolvedValueOnce(undefined);
+    const unicodeState = { type: 'unicode', code: '1F60A' } as const;
+    const result = await loadEmojiDataToState(unicodeState, 'en');
+    expect(result).toBeNull();
+  });
+
+  test('returns null if custom emoji not found in database', async () => {
+    vi.spyOn(db, 'loadCustomEmojiByShortcode').mockResolvedValueOnce(undefined);
+    const customState = { type: 'custom', code: 'smile' } as const;
+    const result = await loadEmojiDataToState(customState, 'en');
+    expect(result).toBeNull();
+  });
+
+  test('retries loading emoji data once if initial load fails', async () => {
+    const dbCall = vi
+      .spyOn(db, 'loadEmojiByHexcode')
+      .mockRejectedValue(new db.LocaleNotLoadedError('en'));
+    vi.spyOn(loader, 'importEmojiData').mockResolvedValueOnce();
+    const consoleCall = vi
+      .spyOn(console, 'warn')
+      .mockImplementationOnce(() => null);
+
+    const unicodeState = { type: 'unicode', code: '1F60A' } as const;
+    const result = await loadEmojiDataToState(unicodeState, 'en');
+
+    expect(dbCall).toHaveBeenCalledTimes(2);
+    expect(loader.importEmojiData).toHaveBeenCalledWith('en');
+    expect(consoleCall).toHaveBeenCalled();
+    expect(result).toBeNull();
+  });
+});