Merge branch 'next-emoji-test' into 'next'

Next: Refactor Emoji component, add more comprehensive tests

See merge request soapbox-pub/soapbox-fe!1193

app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx

@@ -1,12 +1,23 @@
-import React from 'react';
+import * as React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
 import Emoji from '../emoji';
 
 describe('<Emoji />', () => {
-  it('renders the given text', () => {
+  it('renders a simple emoji', () => {
-    render(<Emoji emoji='smile' />);
+    render(<Emoji emoji='😀' />);
 
-    expect(screen.getByRole('img').getAttribute('alt')).toBe('smile');
+    const img = screen.getByRole('img');
+    expect(img.getAttribute('src')).toBe('/packs/emoji/1f600.svg');
+    expect(img.getAttribute('alt')).toBe('😀');
+  });
+
+  // https://emojipedia.org/emoji-flag-sequence/
+  it('renders a sequence emoji', () => {
+    render(<Emoji emoji='🇺🇸' />);
+
+    const img = screen.getByRole('img');
+    expect(img.getAttribute('src')).toBe('/packs/emoji/1f1fa-1f1f8.svg');
+    expect(img.getAttribute('alt')).toBe('🇺🇸');
   });
 });

app/soapbox/components/ui/emoji/emoji.tsx

@@ -29,12 +29,12 @@ const toCodePoints = (unicodeSurrogates: string): string[] => {
   return points;
 };
 
-interface IEmoji {
+interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
-  className?: string,
   emoji: string,
 }
 
-const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
+const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
+  const { emoji, alt, ...rest } = props;
   const codepoints = toCodePoints(removeVS16s(emoji));
   const filename = codepoints.join('-');
 
@@ -43,9 +43,9 @@ const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
   return (
     <img
       draggable='false'
-      className={className}
+      alt={alt || emoji}
-      alt={emoji}
       src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+      {...rest}
     />
   );
 };