fix: cross-platform emoji compatibility (#1449)

Author: setchy

package.json

@@ -100,6 +100,7 @@
     "afterSign": "scripts/notarize.js"
   },
   "dependencies": {
+    "@discordapp/twemoji": "15.0.3",
     "@electron/remote": "2.1.2",
     "@primer/octicons-react": "19.11.0",
     "axios": "1.7.4",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
-export function setPlatform(platform: NodeJS.Platform) {
-  Object.defineProperty(process, 'platform', {
-    value: platform,
-  });
+import * as helpers from '../utils/helpers';
+
+export function mockDirectoryPath() {
+  jest.spyOn(helpers, 'getDirectoryPath').mockReturnValue('/mocked/dir/name');
 }
 
 /**

src/__mocks__/utils.ts

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { mockGitHubCloudAccount, mockSettings } from '../__mocks__/state-mocks';
-import { ensureStableEmojis } from '../__mocks__/utils';
+import { ensureStableEmojis, mockDirectoryPath } from '../__mocks__/utils';
 import { AppContext } from '../context/App';
 import { GroupBy } from '../types';
 import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
@@ -14,6 +14,7 @@ jest.mock('./RepositoryNotifications', () => ({
 describe('components/AccountNotifications.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
+    mockDirectoryPath();
   });
 
   it('should render itself - group notifications by repositories', () => {

src/components/AccountNotifications.test.tsx

@@ -1,10 +1,11 @@
 import { render } from '@testing-library/react';
-import { ensureStableEmojis } from '../__mocks__/utils';
+import { ensureStableEmojis, mockDirectoryPath } from '../__mocks__/utils';
 import { AllRead } from './AllRead';
 
 describe('components/AllRead.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
+    mockDirectoryPath();
   });
 
   it('should render itself & its children', () => {

src/components/AllRead.test.tsx

@@ -1,5 +1,6 @@
 import { type FC, useMemo } from 'react';
 import { Constants } from '../utils/constants';
+import { EmojiText } from './EmojiText';
 
 export const AllRead: FC = () => {
   const emoji = useMemo(
@@ -12,9 +13,11 @@ export const AllRead: FC = () => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
-      <h1 className="mt-2 mb-5 text-5xl">{emoji}</h1>
+      <div className="mt-2 mb-5 text-5xl">
+        <EmojiText text={emoji} />
+      </div>
 
-      <h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
+      <div className="mb-2 text-xl font-semibold">No new notifications.</div>
     </div>
   );
 };

src/components/AllRead.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { mockDirectoryPath } from '../__mocks__/utils';
+import { EmojiText, type IEmojiText } from './EmojiText';
+
+describe('components/icons/Emoji.tsx', () => {
+  beforeEach(() => {
+    mockDirectoryPath();
+  });
+
+  it('should render', () => {
+    const props: IEmojiText = {
+      text: '🍺',
+    };
+    const tree = render(<EmojiText {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/EmojiText.test.tsx

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import twemoji from '@discordapp/twemoji';
+import { type FC, useEffect, useRef } from 'react';
+import { getDirectoryPath } from '../utils/helpers';
+
+export interface IEmojiText {
+  text: string;
+}
+
+type TwemojiOptions = {
+  base: string;
+  size: string;
+  ext: string;
+};
+
+export const EmojiText: FC<IEmojiText> = ({ text }) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = twemoji.parse(text, {
+        folder: 'svg',
+        ext: '.svg',
+        callback: (icon: string, options: TwemojiOptions, _variant: string) => {
+          const source = path.resolve(
+            getDirectoryPath(),
+            '../../node_modules/@discordapp/twemoji/dist',
+          );
+
+          return ''.concat(source, '/', options.size, '/', icon, options.ext);
+        },
+      });
+    }
+  }, [text]);
+
+  return <span ref={ref} />;
+};

src/components/EmojiText.tsx

@@ -1,7 +1,12 @@
 import { render } from '@testing-library/react';
+import { mockDirectoryPath } from '../__mocks__/utils';
 import { Oops } from './Oops';
 
 describe('components/Oops.tsx', () => {
+  beforeEach(() => {
+    mockDirectoryPath();
+  });
+
   it('should render itself & its children', () => {
     const mockError = {
       title: 'Error title',

src/components/Oops.test.tsx

@@ -1,5 +1,6 @@
 import { type FC, useMemo } from 'react';
 import type { GitifyError } from '../types';
+import { EmojiText } from './EmojiText';
 
 interface IOops {
   error: GitifyError;
@@ -13,9 +14,11 @@ export const Oops: FC<IOops> = ({ error }: IOops) => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
-      <h1 className="mt-2 mb-5 text-5xl">{emoji}</h1>
+      <div className="mt-2 mb-5 text-5xl">
+        <EmojiText text={`${emoji} foo`} />
+      </div>
 
-      <h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
+      <div className="mb-2 text-xl font-semibold">{error.title}</div>
       {error.descriptions.map((description, i) => {
         return (
           // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean