From ef5ceeacfea00d2eb7261d1400aa44f14713e37c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 11:10:35 -0500 Subject: [PATCH 01/11] Fix soapboxConfig propType errors --- .../features/soapbox_config/components/site_preview.js | 2 +- app/soapbox/features/ui/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js index b4506dd81..3d52d7200 100644 --- a/app/soapbox/features/soapbox_config/components/site_preview.js +++ b/app/soapbox/features/soapbox_config/components/site_preview.js @@ -52,5 +52,5 @@ export default function SitePreview({ soapbox }) { } SitePreview.propTypes = { - soapbox: ImmutablePropTypes.map.isRequired, + soapbox: ImmutablePropTypes.record.isRequired, }; diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 9af173cb3..f0761f1b1 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -188,7 +188,7 @@ class SwitchingColumnsArea extends React.PureComponent { children: PropTypes.node, location: PropTypes.object, onLayoutChange: PropTypes.func.isRequired, - soapbox: ImmutablePropTypes.map.isRequired, + soapbox: ImmutablePropTypes.record.isRequired, features: PropTypes.object.isRequired, }; @@ -399,7 +399,7 @@ class UI extends React.PureComponent { streamingUrl: PropTypes.string, account: PropTypes.object, features: PropTypes.object.isRequired, - soapbox: ImmutablePropTypes.map.isRequired, + soapbox: ImmutablePropTypes.record.isRequired, vapidKey: PropTypes.string, }; From 426f02722ac0263de576558cc06bc92a1decf962 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 11:21:09 -0500 Subject: [PATCH 02/11] Make Soapbox component an FC, move console.log --- app/soapbox/containers/soapbox.js | 45 ++++++------------------------- app/soapbox/main.tsx | 6 +++++ app/soapbox/utils/console.ts | 24 +++++++++++++++++ 3 files changed, 38 insertions(+), 37 deletions(-) create mode 100644 app/soapbox/utils/console.ts diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index e5f0de6fd..413160092 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -16,7 +16,6 @@ import { loadSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; import { FE_SUBDIRECTORY } from 'soapbox/build_config'; -import { NODE_ENV } from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; import AuthLayout from 'soapbox/features/auth_layout'; import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard'; @@ -237,40 +236,12 @@ class SoapboxMount extends React.PureComponent { } -export default class Soapbox extends React.PureComponent { +const Soapbox = () => { + return ( + + + + ); +}; - printConsoleWarning = () => { - /* eslint-disable no-console */ - console.log('%cStop!', [ - 'color: #ff0000', - 'display: block', - 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif', - 'font-size: 50px', - 'font-weight: 800', - 'padding: 4px 0', - ].join(';')); - console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [ - 'color: #111111', - 'display: block', - 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif', - 'font-size: 18px', - 'padding: 4px 0 16px', - ].join(';')); - /* eslint-enable no-console */ - } - - componentDidMount() { - if (NODE_ENV === 'production') { - this.printConsoleWarning(); - } - } - - render() { - return ( - - - - ); - } - -} +export default Soapbox; diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx index 0a9bbdb75..9505ae07a 100644 --- a/app/soapbox/main.tsx +++ b/app/soapbox/main.tsx @@ -6,6 +6,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import * as BuildConfig from 'soapbox/build_config'; +import { printConsoleWarning } from 'soapbox/utils/console'; import { default as Soapbox } from './containers/soapbox'; import * as monitoring from './monitoring'; @@ -18,6 +19,11 @@ function main() { // Sentry monitoring.start(); + // Print console warning + if (BuildConfig.NODE_ENV === 'production') { + printConsoleWarning(); + } + ready(() => { const mountNode = document.getElementById('soapbox') as HTMLElement; diff --git a/app/soapbox/utils/console.ts b/app/soapbox/utils/console.ts new file mode 100644 index 000000000..96f8b6b5e --- /dev/null +++ b/app/soapbox/utils/console.ts @@ -0,0 +1,24 @@ +/** Print a warning to users not to copy-paste into the console */ +const printConsoleWarning = () => { + /* eslint-disable no-console */ + console.log('%cStop!', [ + 'color: #ff0000', + 'display: block', + 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif', + 'font-size: 50px', + 'font-weight: 800', + 'padding: 4px 0', + ].join(';')); + console.log('%cThis is a browser feature intended for developers. If someone told you to copy-paste something here it is a scam and will give them access to your account.', [ + 'color: #111111', + 'display: block', + 'font-family: system-ui, -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", sans-serif', + 'font-size: 18px', + 'padding: 4px 0 16px', + ].join(';')); + /* eslint-enable no-console */ +}; + +export { + printConsoleWarning, +}; From 04eac8a95e987e27812b11b0f415c0030fb73b2b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 11:47:28 -0500 Subject: [PATCH 03/11] SoapboxMount: convert to React.FC --- app/soapbox/containers/soapbox.js | 247 ++++++++++++------------------ 1 file changed, 96 insertions(+), 151 deletions(-) diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js index 413160092..15984bb09 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.js @@ -1,19 +1,15 @@ 'use strict'; import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; +import React, { useState, useEffect } from 'react'; import { IntlProvider } from 'react-intl'; -import { Provider, connect } from 'react-redux'; +import { Provider, useDispatch } from 'react-redux'; import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'; import { ScrollContext } from 'react-router-scroll-4'; import { loadInstance } from 'soapbox/actions/instance'; import { fetchMe } from 'soapbox/actions/me'; -import { getSettings } from 'soapbox/actions/settings'; import { loadSoapboxConfig } from 'soapbox/actions/soapbox'; -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; import { FE_SUBDIRECTORY } from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; @@ -23,10 +19,9 @@ import PublicLayout from 'soapbox/features/public_layout'; import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container'; import WaitlistPage from 'soapbox/features/verification/waitlist_page'; import { createGlobals } from 'soapbox/globals'; -import messages from 'soapbox/locales/messages'; -import { makeGetAccount } from 'soapbox/selectors'; +import { useAppSelector, useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; +import MESSAGES from 'soapbox/locales/messages'; import { getFeatures } from 'soapbox/utils/features'; -import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types'; import { generateThemeCss } from 'soapbox/utils/theme'; import { ONBOARDING_VERSION } from '../actions/onboarding'; @@ -35,7 +30,8 @@ import ErrorBoundary from '../components/error_boundary'; import UI from '../features/ui'; import { store } from '../store'; -const validLocale = locale => Object.keys(messages).includes(locale); +/** Ensure the given locale exists in our codebase */ +const validLocale = locale => Object.keys(MESSAGES).includes(locale); // Configure global functions for developers createGlobals(store); @@ -66,175 +62,124 @@ const loadInitial = () => { }; }; -const makeAccount = makeGetAccount(); +const SoapboxMount = () => { + const dispatch = useDispatch(); + + const me = useAppSelector(state => state.me); + const account = useOwnAccount(); + const settings = useSettings(); + const soapboxConfig = useSoapboxConfig(); + + const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en'; -const mapStateToProps = (state) => { - const me = state.get('me'); - const account = makeAccount(state, me); - const settings = getSettings(state); const needsOnboarding = settings.get('onboardingVersion') < ONBOARDING_VERSION; - const soapboxConfig = getSoapboxConfig(state); - const locale = settings.get('locale'); + const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; - const singleUserMode = soapboxConfig.get('singleUserMode') && soapboxConfig.get('singleUserModeProfile'); + const [messages, setMessages] = useState({}); + const [localeLoading, setLocaleLoading] = useState(true); + const [isLoaded, setIsLoaded] = useState(false); - return { - me, - account, - reduceMotion: settings.get('reduceMotion'), - underlineLinks: settings.get('underlineLinks'), - systemFont: settings.get('systemFont'), - dyslexicFont: settings.get('dyslexicFont'), - demetricator: settings.get('demetricator'), - locale: validLocale(locale) ? locale : 'en', - themeCss: generateThemeCss(soapboxConfig), - brandColor: soapboxConfig.get('brandColor'), - appleAppId: soapboxConfig.get('appleAppId'), - themeMode: settings.get('themeMode'), - singleUserMode, - needsOnboarding, - }; -}; + const themeCss = generateThemeCss(soapboxConfig); -@connect(mapStateToProps) -class SoapboxMount extends React.PureComponent { - - static propTypes = { - me: SoapboxPropTypes.me, - account: ImmutablePropTypes.record, - reduceMotion: PropTypes.bool, - underlineLinks: PropTypes.bool, - systemFont: PropTypes.bool, - needsOnboarding: PropTypes.bool, - dyslexicFont: PropTypes.bool, - demetricator: PropTypes.bool, - locale: PropTypes.string.isRequired, - themeCss: PropTypes.string, - themeMode: PropTypes.string, - brandColor: PropTypes.string, - appleAppId: PropTypes.string, - dispatch: PropTypes.func, - singleUserMode: PropTypes.bool, - }; - - state = { - messages: {}, - localeLoading: true, - isLoaded: false, - } - - setMessages = () => { - messages[this.props.locale]().then(messages => { - this.setState({ messages, localeLoading: false }); + // Load the user's locale + useEffect(() => { + MESSAGES[locale]().then(messages => { + setMessages(messages); + setLocaleLoading(false); }).catch(() => {}); - } + }, [locale]); - maybeUpdateMessages = prevProps => { - if (this.props.locale !== prevProps.locale) { - this.setMessages(); - } - } - - componentDidMount() { - this.setMessages(); - - this.props.dispatch(loadInitial()).then(() => { - this.setState({ isLoaded: true }); + // Load initial data from the API + useEffect(() => { + dispatch(loadInitial()).then(() => { + setIsLoaded(true); }).catch(() => { - this.setState({ isLoaded: false }); + setIsLoaded(false); }); - } + }); - componentDidUpdate(prevProps) { - this.maybeUpdateMessages(prevProps); - } - - shouldUpdateScroll(prevRouterProps, { location }) { + const shouldUpdateScroll = (prevRouterProps, { location }) => { return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); - } + }; - render() { - const { me, account, themeCss, locale, needsOnboarding, singleUserMode } = this.props; - if (me === null) return null; - if (me && !account) return null; - if (!this.state.isLoaded) return null; - if (this.state.localeLoading) return null; + if (me === null) return null; + if (me && !account) return null; + if (!isLoaded) return null; + if (localeLoading) return null; - const waitlisted = account && !account.getIn(['source', 'approved'], true); - - if (account && !waitlisted && needsOnboarding) { - return ( - - - - - {themeCss && } - - - - - - - - - - - ); - } - - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { - 'no-reduce-motion': !this.props.reduceMotion, - 'underline-links': this.props.underlineLinks, - 'dyslexic': this.props.dyslexicFont, - 'demetricator': this.props.demetricator, - }); + const waitlisted = account && !account.getIn(['source', 'approved'], true); + if (account && !waitlisted && needsOnboarding) { return ( - + - + {themeCss && } - - - {this.props.appleAppId && ( - - )} + - <> - - - - - {waitlisted && } />} - - {!me && (singleUserMode - ? - : )} - - {!me && } - - - - - - - - - - - - + + ); } -} + const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { + 'no-reduce-motion': !settings.get('reduceMotion'), + 'underline-links': settings.get('underlineLinks'), + 'dyslexic': settings.get('dyslexicFont'), + 'demetricator': settings.get('demetricator'), + }); + + return ( + + + + + {themeCss && } + + + {soapboxConfig.appleAppId && ( + + )} + + + + + <> + + + + + {waitlisted && } />} + + {!me && (singleUserMode + ? + : )} + + {!me && } + + + + + + + + + + + + + + + + ); +}; const Soapbox = () => { return ( From ce42a47e70583004294235d050d634e38eeda408 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 12:19:33 -0500 Subject: [PATCH 04/11] Convert containers/soapbox into TSX --- .../containers/{soapbox.js => soapbox.tsx} | 37 ++++++++++--------- .../locales/{messages.js => messages.ts} | 23 +++++++----- 2 files changed, 33 insertions(+), 27 deletions(-) rename app/soapbox/containers/{soapbox.js => soapbox.tsx} (89%) rename app/soapbox/locales/{messages.js => messages.ts} (67%) diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.tsx similarity index 89% rename from app/soapbox/containers/soapbox.js rename to app/soapbox/containers/soapbox.tsx index 15984bb09..03923be5c 100644 --- a/app/soapbox/containers/soapbox.js +++ b/app/soapbox/containers/soapbox.tsx @@ -3,15 +3,16 @@ import classNames from 'classnames'; import React, { useState, useEffect } from 'react'; import { IntlProvider } from 'react-intl'; -import { Provider, useDispatch } from 'react-redux'; +import { Provider } from 'react-redux'; import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom'; +// @ts-ignore: it doesn't have types import { ScrollContext } from 'react-router-scroll-4'; import { loadInstance } from 'soapbox/actions/instance'; import { fetchMe } from 'soapbox/actions/me'; import { loadSoapboxConfig } from 'soapbox/actions/soapbox'; import { fetchVerificationConfig } from 'soapbox/actions/verification'; -import { FE_SUBDIRECTORY } from 'soapbox/build_config'; +import * as BuildConfig from 'soapbox/build_config'; import Helmet from 'soapbox/components/helmet'; import AuthLayout from 'soapbox/features/auth_layout'; import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard'; @@ -19,7 +20,7 @@ import PublicLayout from 'soapbox/features/public_layout'; import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container'; import WaitlistPage from 'soapbox/features/verification/waitlist_page'; import { createGlobals } from 'soapbox/globals'; -import { useAppSelector, useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; +import { useAppSelector, useAppDispatch, useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks'; import MESSAGES from 'soapbox/locales/messages'; import { getFeatures } from 'soapbox/utils/features'; import { generateThemeCss } from 'soapbox/utils/theme'; @@ -31,16 +32,17 @@ import UI from '../features/ui'; import { store } from '../store'; /** Ensure the given locale exists in our codebase */ -const validLocale = locale => Object.keys(MESSAGES).includes(locale); +const validLocale = (locale: string): boolean => Object.keys(MESSAGES).includes(locale); // Configure global functions for developers createGlobals(store); // Preload happens synchronously -store.dispatch(preload()); +store.dispatch(preload() as any); /** Load initial data from the backend */ const loadInitial = () => { + // @ts-ignore return async(dispatch, getState) => { // Await for authenticated fetch await dispatch(fetchMe()); @@ -63,7 +65,7 @@ const loadInitial = () => { }; const SoapboxMount = () => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const me = useAppSelector(state => state.me); const account = useOwnAccount(); @@ -75,7 +77,7 @@ const SoapboxMount = () => { const needsOnboarding = settings.get('onboardingVersion') < ONBOARDING_VERSION; const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile; - const [messages, setMessages] = useState({}); + const [messages, setMessages] = useState>({}); const [localeLoading, setLocaleLoading] = useState(true); const [isLoaded, setIsLoaded] = useState(false); @@ -98,6 +100,7 @@ const SoapboxMount = () => { }); }); + // @ts-ignore: I don't actually know what these should be, lol const shouldUpdateScroll = (prevRouterProps, { location }) => { return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); }; @@ -107,7 +110,14 @@ const SoapboxMount = () => { if (!isLoaded) return null; if (localeLoading) return null; - const waitlisted = account && !account.getIn(['source', 'approved'], true); + const waitlisted = account && !account.source.get('approved', true); + + const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { + 'no-reduce-motion': !settings.get('reduceMotion'), + 'underline-links': settings.get('underlineLinks'), + 'dyslexic': settings.get('dyslexicFont'), + 'demetricator': settings.get('demetricator'), + }); if (account && !waitlisted && needsOnboarding) { return ( @@ -120,7 +130,7 @@ const SoapboxMount = () => { - + @@ -129,13 +139,6 @@ const SoapboxMount = () => { ); } - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { - 'no-reduce-motion': !settings.get('reduceMotion'), - 'underline-links': settings.get('underlineLinks'), - 'dyslexic': settings.get('dyslexicFont'), - 'demetricator': settings.get('demetricator'), - }); - return ( @@ -150,7 +153,7 @@ const SoapboxMount = () => { - + <> diff --git a/app/soapbox/locales/messages.js b/app/soapbox/locales/messages.ts similarity index 67% rename from app/soapbox/locales/messages.js rename to app/soapbox/locales/messages.ts index 129869d50..d9499697f 100644 --- a/app/soapbox/locales/messages.js +++ b/app/soapbox/locales/messages.ts @@ -1,16 +1,19 @@ -// Import custom messages -const importCustom = locale => { +type MessageJson = Record; +type MessageModule = { default: MessageJson }; + +/** Import custom messages */ +const importCustom = (locale: string): Promise => { return import(/* webpackChunkName: "locale_[request]" */`custom/locales/${locale}.json`) - .catch(error => ({ default: {} })); + .catch(() => ({ default: {} })); }; -// Import git-checked messages -const importMessages = locale => { +/** Import git-checked messages */ +const importMessages = (locale: string): Promise => { return import(/* webpackChunkName: "locale_[request]" */`./${locale}.json`); }; -// Override custom messages -const importMessagesWithCustom = locale => { +/** Override custom messages */ +const importMessagesWithCustom = (locale: string): Promise => { return Promise.all([ importMessages(locale), importCustom(locale), @@ -23,7 +26,7 @@ const importMessagesWithCustom = locale => { }); }; -const locales = [ +const locales: string[] = [ 'ar', 'ast', 'bg', @@ -89,10 +92,10 @@ const locales = [ 'zh-TW', ]; -// Build the export +/** Soapbox locales map */ const messages = locales.reduce((acc, locale) => { acc[locale] = () => importMessagesWithCustom(locale); return acc; -}, {}); +}, {} as Record Promise>); export default messages; From 6184ab780a136adb0c2dc7f569ac1d50f2d7d307 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 12:20:26 -0500 Subject: [PATCH 05/11] ErrorBoundary: fix BuildConfig import --- app/soapbox/components/error_boundary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/error_boundary.tsx b/app/soapbox/components/error_boundary.tsx index 242c6fbc0..2b865e3bb 100644 --- a/app/soapbox/components/error_boundary.tsx +++ b/app/soapbox/components/error_boundary.tsx @@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; -import BuildConfig from 'soapbox/build_config'; +import * as BuildConfig from 'soapbox/build_config'; import { Text, Stack } from 'soapbox/components/ui'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import { captureException } from 'soapbox/monitoring'; From b6c7e3717b92801331949c25602d89cf7fad2ec4 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 12:24:54 -0500 Subject: [PATCH 06/11] test-setup: mock uuid as a string --- app/soapbox/jest/test-setup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/jest/test-setup.ts b/app/soapbox/jest/test-setup.ts index 82beb982a..f091e3676 100644 --- a/app/soapbox/jest/test-setup.ts +++ b/app/soapbox/jest/test-setup.ts @@ -7,7 +7,7 @@ jest.mock('soapbox/api'); afterEach(() => clearApiMocks()); // Mock external dependencies -jest.mock('uuid', () => ({ v4: jest.fn(() => 1) })); +jest.mock('uuid', () => ({ v4: jest.fn(() => '1') })); const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null }); window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock); From 6b19adbb26bdc9855fb876ee066dfd0209623b0d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 14:29:25 -0500 Subject: [PATCH 07/11] Add basic tests to containers/soapbox --- .../containers/__tests__/soapbox.test.js | 45 +++++++++++++++++++ app/soapbox/containers/soapbox.tsx | 4 +- .../components/external-login-form.tsx | 2 +- app/soapbox/features/landing_page/index.tsx | 2 +- .../features/onboarding/onboarding-wizard.tsx | 2 +- 5 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 app/soapbox/containers/__tests__/soapbox.test.js diff --git a/app/soapbox/containers/__tests__/soapbox.test.js b/app/soapbox/containers/__tests__/soapbox.test.js new file mode 100644 index 000000000..4c152dc33 --- /dev/null +++ b/app/soapbox/containers/__tests__/soapbox.test.js @@ -0,0 +1,45 @@ +import React from 'react'; + +import { __stub as stub } from 'soapbox/api'; +import { render, screen, waitFor } from 'soapbox/jest/test-helpers'; + +import Soapbox from '../soapbox'; + +describe('', () => { + describe('without a user or instance', () => { + beforeEach(() => { + stub(mock => { + mock.onGet('/api/v1/instance').reply(404, ''); + }); + }); + + it('renders external login', async() => { + render(); + + await waitFor(() => { + expect(location.href.endsWith('/login/external')).toBeTruthy(); + expect(screen.getByTestId('external-login')).toBeInTheDocument(); + }); + + }); + }); + + describe('without a user', () => { + beforeEach(() => { + stub(mock => { + mock.onGet('/api/v1/instance') + .reply(200, require('soapbox/__fixtures__/pleroma-instance.json')); + }); + }); + + it('renders the homepage', async() => { + render(); + + waitFor(() => { + expect(screen.getByTestId('homepage')).toBeInTheDocument(); + expect(screen.getByText('Gleasonator')).toBeInTheDocument(); + expect(screen.getByText('Speak freely.')).toBeInTheDocument(); + }); + }); + }); +}); diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index 03923be5c..a7223dde1 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -123,7 +123,7 @@ const SoapboxMount = () => { return ( - + {themeCss && } @@ -142,7 +142,7 @@ const SoapboxMount = () => { return ( - + {themeCss && } diff --git a/app/soapbox/features/external_login/components/external-login-form.tsx b/app/soapbox/features/external_login/components/external-login-form.tsx index 2d6c7d2fa..582709007 100644 --- a/app/soapbox/features/external_login/components/external-login-form.tsx +++ b/app/soapbox/features/external_login/components/external-login-form.tsx @@ -43,7 +43,7 @@ const ExternalLoginForm: React.FC = () => { } return ( -
+ { }; return ( -
+
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx index 7ef3cb804..bc85b63cc 100644 --- a/app/soapbox/features/onboarding/onboarding-wizard.tsx +++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx @@ -67,7 +67,7 @@ const OnboardingWizard = () => { }, []); return ( -
+
From f476b5ce96fddf98ae81c423463a1005ba859fe7 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 17:03:29 -0500 Subject: [PATCH 08/11] Mock IndexedDB in tests --- app/soapbox/jest/test-setup.ts | 4 +++ package.json | 1 + yarn.lock | 55 +++++++++++++++++++++++++++++++++- 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/app/soapbox/jest/test-setup.ts b/app/soapbox/jest/test-setup.ts index f091e3676..6456e3e84 100644 --- a/app/soapbox/jest/test-setup.ts +++ b/app/soapbox/jest/test-setup.ts @@ -6,6 +6,10 @@ import { __clear as clearApiMocks } from '../__mocks__/api'; jest.mock('soapbox/api'); afterEach(() => clearApiMocks()); +// Mock IndexedDB +// https://dev.to/andyhaskell/testing-your-indexeddb-code-with-jest-2o17 +require('fake-indexeddb/auto'); + // Mock external dependencies jest.mock('uuid', () => ({ v4: jest.fn(() => '1') })); diff --git a/package.json b/package.json index db202449f..128e3ccea 100644 --- a/package.json +++ b/package.json @@ -211,6 +211,7 @@ "eslint-plugin-promise": "^5.1.0", "eslint-plugin-react": "^7.25.1", "eslint-plugin-react-hooks": "^4.2.0", + "fake-indexeddb": "^3.1.7", "husky": "^7.0.2", "jest": "^27.5.1", "lint-staged": ">=10", diff --git a/yarn.lock b/yarn.lock index d012a5b17..d7cd7c4db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3084,6 +3084,11 @@ balanced-match@^2.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9" integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA== +base64-arraybuffer-es6@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/base64-arraybuffer-es6/-/base64-arraybuffer-es6-0.7.0.tgz#dbe1e6c87b1bf1ca2875904461a7de40f21abc86" + integrity sha512-ESyU/U1CFZDJUdr+neHRhNozeCv72Y7Vm0m1DCbjX3KBjT6eYocvAJlSk6+8+HkVwXlT1FNxhGW6q3UKAlCvvw== + batch@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" @@ -3708,6 +3713,11 @@ core-js@^3.1.3, core-js@^3.15.2: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49" integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w== +core-js@^3.4: + version "3.22.2" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.2.tgz#3ea0a245b0895fa39d1faa15fe75d91ade504a01" + integrity sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA== + core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -4296,6 +4306,13 @@ domelementtype@^2.0.1, domelementtype@^2.2.0: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57" integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A== +domexception@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90" + integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug== + dependencies: + webidl-conversions "^4.0.2" + domexception@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304" @@ -4927,6 +4944,13 @@ extend@^3.0.0: resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== +fake-indexeddb@^3.1.7: + version "3.1.7" + resolved "https://registry.yarnpkg.com/fake-indexeddb/-/fake-indexeddb-3.1.7.tgz#d9efbeade113c15efbe862e4598a4b0a1797ed9f" + integrity sha512-CUGeCzCOVjmeKi2C0pcvSh6NDU6uQIaS+7YyR++tO/atJJujkBYVhDvfePdz/U8bD33BMVWirsr1MKczfAqbjA== + dependencies: + realistic-structured-clone "^2.0.1" + fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" @@ -9049,6 +9073,16 @@ readdirp@~3.6.0: dependencies: picomatch "^2.2.1" +realistic-structured-clone@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/realistic-structured-clone/-/realistic-structured-clone-2.0.4.tgz#7eb4c2319fc3cb72f4c8d3c9e888b11647894b50" + integrity sha512-lItAdBIFHUSe6fgztHPtmmWqKUgs+qhcYLi3wTRUl4OTB3Vb8aBVSjGfQZUvkmJCKoX3K9Wf7kyLp/F/208+7A== + dependencies: + core-js "^3.4" + domexception "^1.0.1" + typeson "^6.1.0" + typeson-registry "^1.0.0-alpha.20" + rechoir@^0.7.0: version "0.7.1" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686" @@ -10440,6 +10474,20 @@ typescript@^4.4.4: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== +typeson-registry@^1.0.0-alpha.20: + version "1.0.0-alpha.39" + resolved "https://registry.yarnpkg.com/typeson-registry/-/typeson-registry-1.0.0-alpha.39.tgz#9e0f5aabd5eebfcffd65a796487541196f4b1211" + integrity sha512-NeGDEquhw+yfwNhguLPcZ9Oj0fzbADiX4R0WxvoY8nGhy98IbzQy1sezjoEFWOywOboj/DWehI+/aUlRVrJnnw== + dependencies: + base64-arraybuffer-es6 "^0.7.0" + typeson "^6.0.0" + whatwg-url "^8.4.0" + +typeson@^6.0.0, typeson@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/typeson/-/typeson-6.1.0.tgz#5b2a53705a5f58ff4d6f82f965917cabd0d7448b" + integrity sha512-6FTtyGr8ldU0pfbvW/eOZrEtEkczHRUtduBnA90Jh9kMPCiFNnXIon3vF41N0S4tV1HHQt4Hk1j4srpESziCaA== + uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" @@ -10730,6 +10778,11 @@ wbuf@^1.1.0, wbuf@^1.7.3: dependencies: minimalistic-assert "^1.0.0" +webidl-conversions@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad" + integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg== + webidl-conversions@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff" @@ -10914,7 +10967,7 @@ whatwg-mimetype@^2.3.0: resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== -whatwg-url@^8.0.0, whatwg-url@^8.5.0: +whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0: version "8.7.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77" integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg== From 6012b2a5ba42aee943f46ef3c0304e2baa2b17cf Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 17:36:46 -0500 Subject: [PATCH 09/11] Delete dysfunctional test --- .../containers/__tests__/soapbox.test.js | 45 ------------------- 1 file changed, 45 deletions(-) delete mode 100644 app/soapbox/containers/__tests__/soapbox.test.js diff --git a/app/soapbox/containers/__tests__/soapbox.test.js b/app/soapbox/containers/__tests__/soapbox.test.js deleted file mode 100644 index 4c152dc33..000000000 --- a/app/soapbox/containers/__tests__/soapbox.test.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; - -import { __stub as stub } from 'soapbox/api'; -import { render, screen, waitFor } from 'soapbox/jest/test-helpers'; - -import Soapbox from '../soapbox'; - -describe('', () => { - describe('without a user or instance', () => { - beforeEach(() => { - stub(mock => { - mock.onGet('/api/v1/instance').reply(404, ''); - }); - }); - - it('renders external login', async() => { - render(); - - await waitFor(() => { - expect(location.href.endsWith('/login/external')).toBeTruthy(); - expect(screen.getByTestId('external-login')).toBeInTheDocument(); - }); - - }); - }); - - describe('without a user', () => { - beforeEach(() => { - stub(mock => { - mock.onGet('/api/v1/instance') - .reply(200, require('soapbox/__fixtures__/pleroma-instance.json')); - }); - }); - - it('renders the homepage', async() => { - render(); - - waitFor(() => { - expect(screen.getByTestId('homepage')).toBeInTheDocument(); - expect(screen.getByText('Gleasonator')).toBeInTheDocument(); - expect(screen.getByText('Speak freely.')).toBeInTheDocument(); - }); - }); - }); -}); From 79a5820687e21fafe674ee559dc8e9a1f2f6a251 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 17:47:11 -0500 Subject: [PATCH 10/11] SoapboxMount: fix useEffect() --- app/soapbox/containers/soapbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index a7223dde1..9cb520366 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -98,7 +98,7 @@ const SoapboxMount = () => { }).catch(() => { setIsLoaded(false); }); - }); + }, []); // @ts-ignore: I don't actually know what these should be, lol const shouldUpdateScroll = (prevRouterProps, { location }) => { From eecc46cbdc02c31aa6bfbc8eb6d0f3231687fe71 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 21 Apr 2022 17:52:48 -0500 Subject: [PATCH 11/11] Fix useEffect() calls... whoops --- .eslintrc.js | 1 - app/soapbox/features/auth_login/components/logout.tsx | 2 +- .../external_login/components/external-login-form.tsx | 2 +- app/soapbox/features/public_layout/components/pulse.tsx | 2 +- app/soapbox/features/ui/components/promo_panel.tsx | 4 ++-- 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ae8c9e981..bb111e2f4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -256,7 +256,6 @@ module.exports = { 'promise/catch-or-return': 'error', 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn', }, overrides: [ { diff --git a/app/soapbox/features/auth_login/components/logout.tsx b/app/soapbox/features/auth_login/components/logout.tsx index e702e146b..5c1bee915 100644 --- a/app/soapbox/features/auth_login/components/logout.tsx +++ b/app/soapbox/features/auth_login/components/logout.tsx @@ -16,7 +16,7 @@ const Logout: React.FC = () => { dispatch(logOut(intl) as any) .then(() => setDone(true)) .catch(console.warn); - }); + }, []); if (done) { return ; diff --git a/app/soapbox/features/external_login/components/external-login-form.tsx b/app/soapbox/features/external_login/components/external-login-form.tsx index 582709007..4b58d176c 100644 --- a/app/soapbox/features/external_login/components/external-login-form.tsx +++ b/app/soapbox/features/external_login/components/external-login-form.tsx @@ -36,7 +36,7 @@ const ExternalLoginForm: React.FC = () => { if (code) { dispatch(loginWithCode(code)); } - }); + }, [code]); if (code) { return ; diff --git a/app/soapbox/features/public_layout/components/pulse.tsx b/app/soapbox/features/public_layout/components/pulse.tsx index 6aba78c32..33e94dae2 100644 --- a/app/soapbox/features/public_layout/components/pulse.tsx +++ b/app/soapbox/features/public_layout/components/pulse.tsx @@ -20,7 +20,7 @@ const Pulse: React.FC = () => { setAnimationData(json); }) .catch(console.error); - }); + }, []); if (animationData) { return ( diff --git a/app/soapbox/features/ui/components/promo_panel.tsx b/app/soapbox/features/ui/components/promo_panel.tsx index 5a0b9a24d..6766a6ad4 100644 --- a/app/soapbox/features/ui/components/promo_panel.tsx +++ b/app/soapbox/features/ui/components/promo_panel.tsx @@ -18,8 +18,8 @@ const PromoPanel: React.FC = () => { {promoItems.map((item, i) => ( - - + + {item.textLocales.get(locale) || item.text}