From 45504fd87171f31c9e802a71f1e7d281db2c718b Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 08:02:25 -0400 Subject: [PATCH 01/13] fix: cross-platform emoji compatibility Signed-off-by: Adam Setch --- package.json | 1 + pnpm-lock.yaml | 27 +++++++ src/components/AllRead.tsx | 7 +- src/components/Oops.tsx | 7 +- .../AccountNotifications.test.tsx.snap | 68 +++++++++++----- .../__snapshots__/AllRead.test.tsx.snap | 34 +++++--- .../__snapshots__/Oops.test.tsx.snap | 34 +++++--- src/components/icons/Emoji.test.tsx | 12 +++ src/components/icons/Emoji.tsx | 17 ++++ .../icons/__snapshots__/Emoji.test.tsx.snap | 80 +++++++++++++++++++ src/electron/index.html | 11 +++ 11 files changed, 254 insertions(+), 44 deletions(-) create mode 100644 src/components/icons/Emoji.test.tsx create mode 100644 src/components/icons/Emoji.tsx create mode 100644 src/components/icons/__snapshots__/Emoji.test.tsx.snap diff --git a/package.json b/package.json index 646134de3..54091b623 100644 --- a/package.json +++ b/package.json @@ -102,6 +102,7 @@ "dependencies": { "@electron/remote": "2.1.2", "@primer/octicons-react": "19.11.0", + "@twemoji/api": "15.1.0", "axios": "1.7.3", "class-variance-authority": "0.7.0", "clsx": "2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c49c8e16b..fd9d91455 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@primer/octicons-react': specifier: 19.11.0 version: 19.11.0(react@18.3.1) + '@twemoji/api': + specifier: ^15.1.0 + version: 15.1.0 axios: specifier: 1.7.3 version: 1.7.3 @@ -616,6 +619,12 @@ packages: '@tsconfig/node16@1.0.4': resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==} + '@twemoji/api@15.1.0': + resolution: {integrity: sha512-CySXR4/e6vY0z9lC2tW9EVjsH6zzz2/LQvLRMwwpHsDI4xcaweSIP+LcESf1Mq7w2/zcrrhG4ozniMvpSsEXag==} + + '@twemoji/parser@15.1.0': + resolution: {integrity: sha512-3HTiSxPvkWUJ4kZeCvwyKlIwkpTUfBOk6igpBBRQni58ceQMv5YK4smkc8vX/eqOlMMNER/9qobv+Q6Q8LVrqA==} + '@types/aria-query@5.0.4': resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} @@ -2097,6 +2106,9 @@ packages: jsonfile@4.0.0: resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} + jsonfile@5.0.0: + resolution: {integrity: sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==} + jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} @@ -3853,6 +3865,15 @@ snapshots: '@tsconfig/node16@1.0.4': {} + '@twemoji/api@15.1.0': + dependencies: + '@twemoji/parser': 15.1.0 + fs-extra: 8.1.0 + jsonfile: 5.0.0 + universalify: 0.1.2 + + '@twemoji/parser@15.1.0': {} + '@types/aria-query@5.0.4': {} '@types/babel__core@7.20.5': @@ -5708,6 +5729,12 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + jsonfile@5.0.0: + dependencies: + universalify: 0.1.2 + optionalDependencies: + graceful-fs: 4.2.11 + jsonfile@6.1.0: dependencies: universalify: 2.0.1 diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx index b34c932b9..82a4506b9 100644 --- a/src/components/AllRead.tsx +++ b/src/components/AllRead.tsx @@ -1,5 +1,6 @@ import { type FC, useMemo } from 'react'; import { Constants } from '../utils/constants'; +import { Emoji } from './icons/Emoji'; export const AllRead: FC = () => { const emoji = useMemo( @@ -12,9 +13,11 @@ export const AllRead: FC = () => { return (
-

{emoji}

+
+ +
-

No new notifications.

+
No new notifications.
); }; diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx index 7f7b21ea4..baf080779 100644 --- a/src/components/Oops.tsx +++ b/src/components/Oops.tsx @@ -1,5 +1,6 @@ import { type FC, useMemo } from 'react'; import type { GitifyError } from '../types'; +import { Emoji } from './icons/Emoji'; interface IOops { error: GitifyError; @@ -13,9 +14,11 @@ export const Oops: FC = ({ error }: IOops) => { return (
-

{emoji}

+
+ +
-

{error.title}

+
{error.title}
{error.descriptions.map((description, i) => { return ( // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index f37cb8bcd..382a382d5 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -71,16 +71,23 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
-

- 🔥 -

-

+ 🔥 + +

+
Error title - +
@@ -156,16 +163,23 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
-

- 🔥 -

-

+ 🔥 + +

+
Error title - +
@@ -1414,16 +1428,23 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
-

- 🎊 -

-

+ 🎊 + +

+
No new notifications. - +
, @@ -1494,16 +1515,23 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
-

- 🎊 -

-

+ 🎊 + +

+
No new notifications. - +
, "debug": [Function], diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap index 484584b50..d8f2d1463 100644 --- a/src/components/__snapshots__/AllRead.test.tsx.snap +++ b/src/components/__snapshots__/AllRead.test.tsx.snap @@ -8,16 +8,23 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
-

- 🎊 -

-

+ 🎊 + +

+
No new notifications. - +
, @@ -25,16 +32,23 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
-

- 🎊 -

-

+ 🎊 + +

+
No new notifications. - +
, "debug": [Function], diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap index 654158f4c..d9097a7e4 100644 --- a/src/components/__snapshots__/Oops.test.tsx.snap +++ b/src/components/__snapshots__/Oops.test.tsx.snap @@ -8,16 +8,23 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
-

- 🔥 -

-

+ 🔥 + +

+
Error title - +
@@ -30,16 +37,23 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
-

- 🔥 -

-

+ 🔥 + +

+
Error title - +
diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx new file mode 100644 index 000000000..35e1a89a2 --- /dev/null +++ b/src/components/icons/Emoji.test.tsx @@ -0,0 +1,12 @@ +import { render } from '@testing-library/react'; +import { Emoji, type IEmoji } from './Emoji'; + +describe('components/icons/Emoji.tsx', () => { + it('should render', () => { + const props: IEmoji = { + emoji: '🍺', + }; + const tree = render(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/icons/Emoji.tsx b/src/components/icons/Emoji.tsx new file mode 100644 index 000000000..fc884ad46 --- /dev/null +++ b/src/components/icons/Emoji.tsx @@ -0,0 +1,17 @@ +import twemoji from '@twemoji/api'; +import type { FC } from 'react'; + +export interface IEmoji { + emoji: string; +} + +export const Emoji: FC = (props: IEmoji) => { + // Generate the HTML for the emoji using twemoji + const emojiHtml = twemoji.parse(props.emoji, { + folder: 'svg', + ext: '.svg', + }); + + // biome-ignore lint/security/noDangerouslySetInnerHtml: used for cross-platform emoji compatibility + return ; +}; diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap new file mode 100644 index 000000000..f3ab321e8 --- /dev/null +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -0,0 +1,80 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/icons/Emoji.tsx should render 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + 🍺 + +
+ , + "container":
+ + 🍺 + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/electron/index.html b/src/electron/index.html index 89b4b9064..99a1d2ef8 100644 --- a/src/electron/index.html +++ b/src/electron/index.html @@ -79,5 +79,16 @@ width: 100%; height: 2px; } + + /** + * Set emoji size according to surrounding text. + * Ref: https://github.com/jdecked/twemoji?tab=readme-ov-file#inline-styles + */ + img.emoji { + height: 1em; + width: 1em; + margin: 0 0.05em 0 0.1em; + vertical-align: -0.1em; + } From 44ff90d20dabff885f3fe22f0972fba37990dec7 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 08:05:24 -0400 Subject: [PATCH 02/13] fix: cross-platform emoji compatibility Signed-off-by: Adam Setch --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd9d91455..b61363292 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,7 +15,7 @@ importers: specifier: 19.11.0 version: 19.11.0(react@18.3.1) '@twemoji/api': - specifier: ^15.1.0 + specifier: 15.1.0 version: 15.1.0 axios: specifier: 1.7.3 From a87e38e7783905a6a00d34ec090f622fafc80223 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 17:07:04 -0400 Subject: [PATCH 03/13] fix: offline emoji needs to be sourced locally Signed-off-by: Adam Setch --- assets/svg/1f6dc.svg | 1 + assets/svg/README.md | 7 +++++++ src/components/icons/Emoji.tsx | 22 ++++++++++++++++++++++ 3 files changed, 30 insertions(+) create mode 100644 assets/svg/1f6dc.svg create mode 100644 assets/svg/README.md diff --git a/assets/svg/1f6dc.svg b/assets/svg/1f6dc.svg new file mode 100644 index 000000000..364a68e74 --- /dev/null +++ b/assets/svg/1f6dc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/README.md b/assets/svg/README.md new file mode 100644 index 000000000..cec006aa3 --- /dev/null +++ b/assets/svg/README.md @@ -0,0 +1,7 @@ +# Twemoji - Offline SVGs + +The SVGs in this folder are copied from https://github.com/jdecked/twemoji/tree/gh-pages/svg + +We store some of them locally when they're needed for offline access (eg: network connectivity error). + +For all others, we fetch from the CDN. \ No newline at end of file diff --git a/src/components/icons/Emoji.tsx b/src/components/icons/Emoji.tsx index fc884ad46..719ad48b6 100644 --- a/src/components/icons/Emoji.tsx +++ b/src/components/icons/Emoji.tsx @@ -1,3 +1,4 @@ +import path from 'node:path'; import twemoji from '@twemoji/api'; import type { FC } from 'react'; @@ -5,11 +6,32 @@ export interface IEmoji { emoji: string; } +type TwemojiOptions = { + base: string; + size: string; + ext: string; +}; + export const Emoji: FC = (props: IEmoji) => { // Generate the HTML for the emoji using twemoji const emojiHtml = twemoji.parse(props.emoji, { folder: 'svg', ext: '.svg', + callback: (icon: string, options: TwemojiOptions, _variant: string) => { + // Offline + let source: string; + + switch (icon) { + // Offline Emojis sourced from ../assets/svg + case '1f6dc': // 🛜 wifi/network + source = path.resolve(`${__dirname}/../../assets`); + break; + default: + source = options.base; + break; + } + return ''.concat(source, '/', options.size, '/', icon, options.ext); + }, }); // biome-ignore lint/security/noDangerouslySetInnerHtml: used for cross-platform emoji compatibility From 0852264a0af96f57a932d3042fd1b3345c1ac1ac Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 17:12:40 -0400 Subject: [PATCH 04/13] fix: offline emoji needs to be sourced locally Signed-off-by: Adam Setch --- .../__snapshots__/AccountNotifications.test.tsx.snap | 8 ++++---- src/components/__snapshots__/AllRead.test.tsx.snap | 4 ++-- src/components/__snapshots__/Oops.test.tsx.snap | 4 ++-- src/components/icons/__snapshots__/Emoji.test.tsx.snap | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index 382a382d5..bba0fbad0 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -79,7 +79,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f525.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" />
@@ -171,7 +171,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f525.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" />
@@ -1436,7 +1436,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f38a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" /> @@ -1523,7 +1523,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f38a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap index d8f2d1463..63c3ddf3b 100644 --- a/src/components/__snapshots__/AllRead.test.tsx.snap +++ b/src/components/__snapshots__/AllRead.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f38a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" /> @@ -40,7 +40,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f38a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap index d9097a7e4..ee187af01 100644 --- a/src/components/__snapshots__/Oops.test.tsx.snap +++ b/src/components/__snapshots__/Oops.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f525.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" /> @@ -45,7 +45,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f525.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" /> diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap index f3ab321e8..252a51e64 100644 --- a/src/components/icons/__snapshots__/Emoji.test.tsx.snap +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -10,7 +10,7 @@ exports[`components/icons/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f37a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f37a.svg" /> @@ -21,7 +21,7 @@ exports[`components/icons/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/svg/1f37a.svg" + src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f37a.svg" /> , From b06367914d3f5124b69d3afdd7a9ac66c3c0399f Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 21:33:58 -0400 Subject: [PATCH 05/13] increase coverage Signed-off-by: Adam Setch --- src/components/icons/Emoji.test.tsx | 10 ++- .../icons/__snapshots__/Emoji.test.tsx.snap | 81 ++++++++++++++++++- 2 files changed, 89 insertions(+), 2 deletions(-) diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index 35e1a89a2..7736d73ed 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -2,11 +2,19 @@ import { render } from '@testing-library/react'; import { Emoji, type IEmoji } from './Emoji'; describe('components/icons/Emoji.tsx', () => { - it('should render', () => { + it('should render - online CDN SVGs', () => { const props: IEmoji = { emoji: '🍺', }; const tree = render(); expect(tree).toMatchSnapshot(); }); + + it('should render - offline SVGs', () => { + const props: IEmoji = { + emoji: '🛜', + }; + const tree = render(); + expect(tree).toMatchSnapshot(); + }); }); diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap index 252a51e64..471280a5c 100644 --- a/src/components/icons/__snapshots__/Emoji.test.tsx.snap +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -1,6 +1,85 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/icons/Emoji.tsx should render 1`] = ` +exports[`components/icons/Emoji.tsx should render - offline SVGs 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + 🛜 + +
+ , + "container":
+ + 🛜 + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`components/icons/Emoji.tsx should render - online CDN SVGs 1`] = ` { "asFragment": [Function], "baseElement": From 83cfac9f189b667d52570654caef4bc26da73ad7 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 21:45:03 -0400 Subject: [PATCH 06/13] increase coverage Signed-off-by: Adam Setch --- src/components/icons/Emoji.test.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index 7736d73ed..cec1f9d2b 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import { Errors } from '../../utils/constants'; import { Emoji, type IEmoji } from './Emoji'; describe('components/icons/Emoji.tsx', () => { @@ -11,10 +12,13 @@ describe('components/icons/Emoji.tsx', () => { }); it('should render - offline SVGs', () => { - const props: IEmoji = { - emoji: '🛜', - }; - const tree = render(); - expect(tree).toMatchSnapshot(); + const offlineEmojis = Errors.NETWORK.emojis; + + // Check that all NETWORK error emojis are configured for offline use + for (const emoji of offlineEmojis) { + const tree = render(); + expect(tree.baseElement.innerHTML).not.toContain('https://'); // Offline emojis should not have an online URL + expect(tree).toMatchSnapshot(); + } }); }); From 0659fe37f81d49c38707c2c5bd9e52fe1cdee62e Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 22:59:34 -0400 Subject: [PATCH 07/13] increase coverage Signed-off-by: Adam Setch --- src/components/icons/Emoji.test.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index cec1f9d2b..c177a4b55 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -14,11 +14,10 @@ describe('components/icons/Emoji.tsx', () => { it('should render - offline SVGs', () => { const offlineEmojis = Errors.NETWORK.emojis; - // Check that all NETWORK error emojis are configured for offline use - for (const emoji of offlineEmojis) { - const tree = render(); - expect(tree.baseElement.innerHTML).not.toContain('https://'); // Offline emojis should not have an online URL - expect(tree).toMatchSnapshot(); - } + const tree = render(); + + expect(tree.baseElement.innerHTML).not.toContain('https://'); // Offline emojis should not have an online URL + expect(offlineEmojis.length).toEqual(1); // Ensure all NETWORK error emojis are configured for offline use - future proofing + expect(tree).toMatchSnapshot(); }); }); From 5835ab4db9e70707fef605b2a362abf98036c54c Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Thu, 8 Aug 2024 23:02:12 -0400 Subject: [PATCH 08/13] increase coverage Signed-off-by: Adam Setch --- src/components/icons/Emoji.test.tsx | 1 - .../icons/__snapshots__/Emoji.test.tsx.snap | 79 ------------------- 2 files changed, 80 deletions(-) diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index c177a4b55..b6050a386 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -18,6 +18,5 @@ describe('components/icons/Emoji.tsx', () => { expect(tree.baseElement.innerHTML).not.toContain('https://'); // Offline emojis should not have an online URL expect(offlineEmojis.length).toEqual(1); // Ensure all NETWORK error emojis are configured for offline use - future proofing - expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap index 471280a5c..4117ad4f8 100644 --- a/src/components/icons/__snapshots__/Emoji.test.tsx.snap +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -1,84 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/icons/Emoji.tsx should render - offline SVGs 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- - 🛜 - -
- , - "container":
- - 🛜 - -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - exports[`components/icons/Emoji.tsx should render - online CDN SVGs 1`] = ` { "asFragment": [Function], From a64d2a198bbf2175493d7372bb9beb9732543a9e Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Fri, 9 Aug 2024 11:25:37 -0400 Subject: [PATCH 09/13] refactor: pivot to discordapp fork which contains svgs within dist/ Signed-off-by: Adam Setch --- assets/svg/1f6dc.svg | 1 - assets/svg/README.md | 7 ------- package.json | 1 + pnpm-lock.yaml | 18 ++++++++++++++++++ .../AccountNotifications.test.tsx.snap | 8 ++++---- .../__snapshots__/AllRead.test.tsx.snap | 4 ++-- .../__snapshots__/Oops.test.tsx.snap | 4 ++-- src/components/icons/Emoji.test.tsx | 12 +----------- src/components/icons/Emoji.tsx | 16 ++++------------ .../icons/__snapshots__/Emoji.test.tsx.snap | 6 +++--- 10 files changed, 35 insertions(+), 42 deletions(-) delete mode 100644 assets/svg/1f6dc.svg delete mode 100644 assets/svg/README.md diff --git a/assets/svg/1f6dc.svg b/assets/svg/1f6dc.svg deleted file mode 100644 index 364a68e74..000000000 --- a/assets/svg/1f6dc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/svg/README.md b/assets/svg/README.md deleted file mode 100644 index cec006aa3..000000000 --- a/assets/svg/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# Twemoji - Offline SVGs - -The SVGs in this folder are copied from https://github.com/jdecked/twemoji/tree/gh-pages/svg - -We store some of them locally when they're needed for offline access (eg: network connectivity error). - -For all others, we fetch from the CDN. \ No newline at end of file diff --git a/package.json b/package.json index 54091b623..d44f5b7fa 100644 --- a/package.json +++ b/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", "@twemoji/api": "15.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b61363292..3d8afc41d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@discordapp/twemoji': + specifier: ^15.0.3 + version: 15.0.3 '@electron/remote': specifier: 2.1.2 version: 2.1.2(electron@31.3.1) @@ -396,6 +399,9 @@ packages: resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==} engines: {node: '>= 8.9.0'} + '@discordapp/twemoji@15.0.3': + resolution: {integrity: sha512-5t0LLrNaSqViG0cSaomWwfR0+3fWqok+xLq40M8hJHxNX7s8gIoyNZYybQJo+s5/rGMjgdldpt8Ox8MapGvBUA==} + '@discoveryjs/json-ext@0.5.7': resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} engines: {node: '>=10.0.0'} @@ -622,6 +628,9 @@ packages: '@twemoji/api@15.1.0': resolution: {integrity: sha512-CySXR4/e6vY0z9lC2tW9EVjsH6zzz2/LQvLRMwwpHsDI4xcaweSIP+LcESf1Mq7w2/zcrrhG4ozniMvpSsEXag==} + '@twemoji/parser@15.0.0': + resolution: {integrity: sha512-lh9515BNsvKSNvyUqbj5yFu83iIDQ77SwVcsN/SnEGawczhsKU6qWuogewN1GweTi5Imo5ToQ9s+nNTf97IXvg==} + '@twemoji/parser@15.1.0': resolution: {integrity: sha512-3HTiSxPvkWUJ4kZeCvwyKlIwkpTUfBOk6igpBBRQni58ceQMv5YK4smkc8vX/eqOlMMNER/9qobv+Q6Q8LVrqA==} @@ -3511,6 +3520,13 @@ snapshots: ajv: 6.12.6 ajv-keywords: 3.5.2(ajv@6.12.6) + '@discordapp/twemoji@15.0.3': + dependencies: + '@twemoji/parser': 15.0.0 + fs-extra: 8.1.0 + jsonfile: 5.0.0 + universalify: 0.1.2 + '@discoveryjs/json-ext@0.5.7': {} '@electron/asar@3.2.9': @@ -3872,6 +3888,8 @@ snapshots: jsonfile: 5.0.0 universalify: 0.1.2 + '@twemoji/parser@15.0.0': {} + '@twemoji/parser@15.1.0': {} '@types/aria-query@5.0.4': {} diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index bba0fbad0..3ca923268 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -79,7 +79,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -171,7 +171,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -1436,7 +1436,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> @@ -1523,7 +1523,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap index 63c3ddf3b..08d2f7be9 100644 --- a/src/components/__snapshots__/AllRead.test.tsx.snap +++ b/src/components/__snapshots__/AllRead.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> @@ -40,7 +40,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f38a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap index ee187af01..bae8e1e92 100644 --- a/src/components/__snapshots__/Oops.test.tsx.snap +++ b/src/components/__snapshots__/Oops.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -45,7 +45,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f525.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index b6050a386..35e1a89a2 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -1,22 +1,12 @@ import { render } from '@testing-library/react'; -import { Errors } from '../../utils/constants'; import { Emoji, type IEmoji } from './Emoji'; describe('components/icons/Emoji.tsx', () => { - it('should render - online CDN SVGs', () => { + it('should render', () => { const props: IEmoji = { emoji: '🍺', }; const tree = render(); expect(tree).toMatchSnapshot(); }); - - it('should render - offline SVGs', () => { - const offlineEmojis = Errors.NETWORK.emojis; - - const tree = render(); - - expect(tree.baseElement.innerHTML).not.toContain('https://'); // Offline emojis should not have an online URL - expect(offlineEmojis.length).toEqual(1); // Ensure all NETWORK error emojis are configured for offline use - future proofing - }); }); diff --git a/src/components/icons/Emoji.tsx b/src/components/icons/Emoji.tsx index 719ad48b6..db20fb64a 100644 --- a/src/components/icons/Emoji.tsx +++ b/src/components/icons/Emoji.tsx @@ -1,5 +1,5 @@ import path from 'node:path'; -import twemoji from '@twemoji/api'; +import twemoji from '@discordapp/twemoji'; import type { FC } from 'react'; export interface IEmoji { @@ -18,18 +18,10 @@ export const Emoji: FC = (props: IEmoji) => { folder: 'svg', ext: '.svg', callback: (icon: string, options: TwemojiOptions, _variant: string) => { - // Offline - let source: string; + const source = path.resolve( + `${__dirname}/../../node_modules/@discordapp/twemoji/dist`, + ); - switch (icon) { - // Offline Emojis sourced from ../assets/svg - case '1f6dc': // 🛜 wifi/network - source = path.resolve(`${__dirname}/../../assets`); - break; - default: - source = options.base; - break; - } return ''.concat(source, '/', options.size, '/', icon, options.ext); }, }); diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap index 4117ad4f8..9fb4e8650 100644 --- a/src/components/icons/__snapshots__/Emoji.test.tsx.snap +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`components/icons/Emoji.tsx should render - online CDN SVGs 1`] = ` +exports[`components/icons/Emoji.tsx should render 1`] = ` { "asFragment": [Function], "baseElement": @@ -10,7 +10,7 @@ exports[`components/icons/Emoji.tsx should render - online CDN SVGs 1`] = ` alt="🍺" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f37a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" /> @@ -21,7 +21,7 @@ exports[`components/icons/Emoji.tsx should render - online CDN SVGs 1`] = ` alt="🍺" class="emoji" draggable="false" - src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets//svg/1f37a.svg" + src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" /> , From 46d6ac921bf61f03fd950d822b60c213b63fd081 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Fri, 9 Aug 2024 11:30:24 -0400 Subject: [PATCH 10/13] build: update lockfile Signed-off-by: Adam Setch --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d8afc41d..84c736342 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,7 +9,7 @@ importers: .: dependencies: '@discordapp/twemoji': - specifier: ^15.0.3 + specifier: 15.0.3 version: 15.0.3 '@electron/remote': specifier: 2.1.2 From c0cc48c8d5851f7dbcc5579b80a247d11292dba1 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Fri, 9 Aug 2024 12:23:14 -0400 Subject: [PATCH 11/13] mock global.__dirname Signed-off-by: Adam Setch --- src/__mocks__/utils.ts | 8 ++++---- src/components/AccountNotifications.test.tsx | 3 +++ src/components/AllRead.test.tsx | 3 +++ src/components/Oops.test.tsx | 5 +++++ .../__snapshots__/AccountNotifications.test.tsx.snap | 8 ++++---- src/components/__snapshots__/AllRead.test.tsx.snap | 4 ++-- src/components/__snapshots__/Oops.test.tsx.snap | 4 ++-- src/components/icons/Emoji.test.tsx | 5 +++++ src/components/icons/Emoji.tsx | 4 +++- src/components/icons/__snapshots__/Emoji.test.tsx.snap | 4 ++-- src/utils/helpers.ts | 4 ++++ 11 files changed, 37 insertions(+), 15 deletions(-) diff --git a/src/__mocks__/utils.ts b/src/__mocks__/utils.ts index c4c0c7561..223c6b9d3 100644 --- a/src/__mocks__/utils.ts +++ b/src/__mocks__/utils.ts @@ -1,5 +1,5 @@ -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'); } diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx index 7df675406..f221b9b21 100644 --- a/src/components/AccountNotifications.test.tsx +++ b/src/components/AccountNotifications.test.tsx @@ -1,5 +1,6 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import { mockGitHubCloudAccount, mockSettings } from '../__mocks__/state-mocks'; +import { mockDirectoryPath } from '../__mocks__/utils'; import { AppContext } from '../context/App'; import { GroupBy } from '../types'; import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks'; @@ -15,6 +16,8 @@ describe('components/AccountNotifications.tsx', () => { // Have to make it consistent so the emojis are always the same beforeEach(() => { global.Math.random = jest.fn(() => 0.1); + + mockDirectoryPath(); }); it('should render itself - group notifications by repositories', () => { diff --git a/src/components/AllRead.test.tsx b/src/components/AllRead.test.tsx index cd12d4a19..f97be7e6c 100644 --- a/src/components/AllRead.test.tsx +++ b/src/components/AllRead.test.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import { mockDirectoryPath } from '../__mocks__/utils'; import { AllRead } from './AllRead'; describe('components/AllRead.tsx', () => { @@ -6,6 +7,8 @@ describe('components/AllRead.tsx', () => { // Have to make it consistent so the emojis are always the same beforeEach(() => { global.Math.random = jest.fn(() => 0.1); + + mockDirectoryPath(); }); it('should render itself & its children', () => { diff --git a/src/components/Oops.test.tsx b/src/components/Oops.test.tsx index 128055d3d..730d029bd 100644 --- a/src/components/Oops.test.tsx +++ b/src/components/Oops.test.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', diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index 3ca923268..0a554937f 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -79,7 +79,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -171,7 +171,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro alt="🔥" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -1436,7 +1436,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> @@ -1523,7 +1523,7 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat alt="🎊" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap index 08d2f7be9..f2b294a6b 100644 --- a/src/components/__snapshots__/AllRead.test.tsx.snap +++ b/src/components/__snapshots__/AllRead.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> @@ -40,7 +40,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = ` alt="🎊" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f38a.svg" /> diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap index bae8e1e92..b910c2467 100644 --- a/src/components/__snapshots__/Oops.test.tsx.snap +++ b/src/components/__snapshots__/Oops.test.tsx.snap @@ -16,7 +16,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> @@ -45,7 +45,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = ` alt="🔥" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> diff --git a/src/components/icons/Emoji.test.tsx b/src/components/icons/Emoji.test.tsx index 35e1a89a2..a5e4e0950 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/icons/Emoji.test.tsx @@ -1,7 +1,12 @@ import { render } from '@testing-library/react'; +import { mockDirectoryPath } from '../../__mocks__/utils'; import { Emoji, type IEmoji } from './Emoji'; describe('components/icons/Emoji.tsx', () => { + beforeEach(() => { + mockDirectoryPath(); + }); + it('should render', () => { const props: IEmoji = { emoji: '🍺', diff --git a/src/components/icons/Emoji.tsx b/src/components/icons/Emoji.tsx index db20fb64a..4a65ead6f 100644 --- a/src/components/icons/Emoji.tsx +++ b/src/components/icons/Emoji.tsx @@ -1,6 +1,7 @@ import path from 'node:path'; import twemoji from '@discordapp/twemoji'; import type { FC } from 'react'; +import { getDirectoryPath } from '../../utils/helpers'; export interface IEmoji { emoji: string; @@ -19,7 +20,8 @@ export const Emoji: FC = (props: IEmoji) => { ext: '.svg', callback: (icon: string, options: TwemojiOptions, _variant: string) => { const source = path.resolve( - `${__dirname}/../../node_modules/@discordapp/twemoji/dist`, + getDirectoryPath(), + '../../node_modules/@discordapp/twemoji/dist', ); return ''.concat(source, '/', options.size, '/', icon, options.ext); diff --git a/src/components/icons/__snapshots__/Emoji.test.tsx.snap b/src/components/icons/__snapshots__/Emoji.test.tsx.snap index 9fb4e8650..5117ddb54 100644 --- a/src/components/icons/__snapshots__/Emoji.test.tsx.snap +++ b/src/components/icons/__snapshots__/Emoji.test.tsx.snap @@ -10,7 +10,7 @@ exports[`components/icons/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" /> @@ -21,7 +21,7 @@ exports[`components/icons/Emoji.tsx should render 1`] = ` alt="🍺" class="emoji" draggable="false" - src="/Users/asetch/Documents/dev/GitHub/gitify-app/gitify/src/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" + src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f37a.svg" /> , diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 10094b417..eb688437d 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -201,3 +201,7 @@ export function getFilterCount(settings: SettingsState): number { return count; } + +export function getDirectoryPath(): string { + return `${__dirname}`; +} From ecf4ccaeaa3860fe0565cdd75f0e3245fec1a41b Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Sat, 10 Aug 2024 16:58:42 -0400 Subject: [PATCH 12/13] refactor to be a more broader component Signed-off-by: Adam Setch --- src/components/AllRead.tsx | 4 +- .../Emoji.test.tsx => EmojiText.test.tsx} | 10 ++--- src/components/EmojiText.tsx | 37 +++++++++++++++++++ src/components/Oops.tsx | 4 +- .../AccountNotifications.test.tsx.snap | 2 + .../EmojiText.test.tsx.snap} | 0 .../__snapshots__/Oops.test.tsx.snap | 2 + src/components/icons/Emoji.tsx | 33 ----------------- 8 files changed, 50 insertions(+), 42 deletions(-) rename src/components/{icons/Emoji.test.tsx => EmojiText.test.tsx} (51%) create mode 100644 src/components/EmojiText.tsx rename src/components/{icons/__snapshots__/Emoji.test.tsx.snap => __snapshots__/EmojiText.test.tsx.snap} (100%) delete mode 100644 src/components/icons/Emoji.tsx diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx index 82a4506b9..206c31c43 100644 --- a/src/components/AllRead.tsx +++ b/src/components/AllRead.tsx @@ -1,6 +1,6 @@ import { type FC, useMemo } from 'react'; import { Constants } from '../utils/constants'; -import { Emoji } from './icons/Emoji'; +import { EmojiText } from './EmojiText'; export const AllRead: FC = () => { const emoji = useMemo( @@ -14,7 +14,7 @@ export const AllRead: FC = () => { return (
- +
No new notifications.
diff --git a/src/components/icons/Emoji.test.tsx b/src/components/EmojiText.test.tsx similarity index 51% rename from src/components/icons/Emoji.test.tsx rename to src/components/EmojiText.test.tsx index a5e4e0950..8387e3d5d 100644 --- a/src/components/icons/Emoji.test.tsx +++ b/src/components/EmojiText.test.tsx @@ -1,6 +1,6 @@ import { render } from '@testing-library/react'; -import { mockDirectoryPath } from '../../__mocks__/utils'; -import { Emoji, type IEmoji } from './Emoji'; +import { mockDirectoryPath } from '../__mocks__/utils'; +import { EmojiText, type IEmojiText } from './EmojiText'; describe('components/icons/Emoji.tsx', () => { beforeEach(() => { @@ -8,10 +8,10 @@ describe('components/icons/Emoji.tsx', () => { }); it('should render', () => { - const props: IEmoji = { - emoji: '🍺', + const props: IEmojiText = { + text: '🍺', }; - const tree = render(); + const tree = render(); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/EmojiText.tsx b/src/components/EmojiText.tsx new file mode 100644 index 000000000..4c7e1d355 --- /dev/null +++ b/src/components/EmojiText.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 = ({ 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 ; +}; diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx index baf080779..c5ac1e724 100644 --- a/src/components/Oops.tsx +++ b/src/components/Oops.tsx @@ -1,6 +1,6 @@ import { type FC, useMemo } from 'react'; import type { GitifyError } from '../types'; -import { Emoji } from './icons/Emoji'; +import { EmojiText } from './EmojiText'; interface IOops { error: GitifyError; @@ -15,7 +15,7 @@ export const Oops: FC = ({ error }: IOops) => { return (
- +
{error.title}
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index 0a554937f..cfda95a10 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -81,6 +81,7 @@ exports[`components/AccountNotifications.tsx should render itself - account erro draggable="false" src="/mocked/node_modules/@discordapp/twemoji/dist/svg/1f525.svg" /> + foo
+ foo
+ foo
+ foo
= (props: IEmoji) => { - // Generate the HTML for the emoji using twemoji - const emojiHtml = twemoji.parse(props.emoji, { - 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); - }, - }); - - // biome-ignore lint/security/noDangerouslySetInnerHtml: used for cross-platform emoji compatibility - return ; -}; From 3600fa3e3506e967832ca90ec9f936c79744000c Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 14 Aug 2024 08:31:03 -0400 Subject: [PATCH 13/13] Merge branch 'main' into fix/emoji-compatibility Signed-off-by: Adam Setch --- pnpm-lock.yaml | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e76be4746..ae8ea14db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,6 @@ importers: '@primer/octicons-react': specifier: 19.11.0 version: 19.11.0(react@18.3.1) - '@twemoji/api': - specifier: 15.1.0 - version: 15.1.0 axios: specifier: 1.7.4 version: 1.7.4 @@ -628,15 +625,9 @@ packages: '@tsconfig/node16@1.0.4': resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==} - '@twemoji/api@15.1.0': - resolution: {integrity: sha512-CySXR4/e6vY0z9lC2tW9EVjsH6zzz2/LQvLRMwwpHsDI4xcaweSIP+LcESf1Mq7w2/zcrrhG4ozniMvpSsEXag==} - '@twemoji/parser@15.0.0': resolution: {integrity: sha512-lh9515BNsvKSNvyUqbj5yFu83iIDQ77SwVcsN/SnEGawczhsKU6qWuogewN1GweTi5Imo5ToQ9s+nNTf97IXvg==} - '@twemoji/parser@15.1.0': - resolution: {integrity: sha512-3HTiSxPvkWUJ4kZeCvwyKlIwkpTUfBOk6igpBBRQni58ceQMv5YK4smkc8vX/eqOlMMNER/9qobv+Q6Q8LVrqA==} - '@types/aria-query@5.0.4': resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} @@ -3893,17 +3884,8 @@ snapshots: '@tsconfig/node16@1.0.4': {} - '@twemoji/api@15.1.0': - dependencies: - '@twemoji/parser': 15.1.0 - fs-extra: 8.1.0 - jsonfile: 5.0.0 - universalify: 0.1.2 - '@twemoji/parser@15.0.0': {} - '@twemoji/parser@15.1.0': {} - '@types/aria-query@5.0.4': {} '@types/babel__core@7.20.5':