diff --git a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx b/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
index 0f65103d8..85126806f 100644
--- a/app/soapbox/components/ui/emoji/__tests__/emoji.test.tsx
+++ b/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('', () => {
- it('renders the given text', () => {
- render();
+ it('renders a simple emoji', () => {
+ render();
- 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();
+
+ const img = screen.getByRole('img');
+ expect(img.getAttribute('src')).toBe('/packs/emoji/1f1fa-1f1f8.svg');
+ expect(img.getAttribute('alt')).toBe('πΊπΈ');
});
});
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
index 9bbaa0dec..e9bcda2ed 100644
--- a/app/soapbox/components/ui/emoji/emoji.tsx
+++ b/app/soapbox/components/ui/emoji/emoji.tsx
@@ -29,12 +29,12 @@ const toCodePoints = (unicodeSurrogates: string): string[] => {
return points;
};
-interface IEmoji {
- className?: string,
+interface IEmoji extends React.ImgHTMLAttributes {
emoji: string,
}
-const Emoji: React.FC = ({ className, emoji }): JSX.Element | null => {
+const Emoji: React.FC = (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 = ({ className, emoji }): JSX.Element | null => {
return (
);
};