From c87bd2b2e7caa49149f08dc99f132ed650314f5b Mon Sep 17 00:00:00 2001 From: Soapbox Bot Date: Thu, 5 Jan 2023 18:18:42 +0000 Subject: [PATCH 01/15] Update dependency @testing-library/react to v13 --- package.json | 2 +- yarn.lock | 38 +++++++++++++++++++------------------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index ece6c7fb49..4ca084fe7c 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@tailwindcss/line-clamp": "^0.4.2", "@tailwindcss/typography": "^0.5.7", "@tanstack/react-query": "^4.0.10", - "@testing-library/react": "^12.1.4", + "@testing-library/react": "^13.0.0", "@types/escape-html": "^1.0.1", "@types/http-link-header": "^1.0.3", "@types/jest": "^29.0.0", diff --git a/yarn.lock b/yarn.lock index d8df4b0bb0..b913ab08e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2357,14 +2357,14 @@ "@types/use-sync-external-store" "^0.0.3" use-sync-external-store "^1.2.0" -"@testing-library/dom@^8.0.0": - version "8.12.0" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.12.0.tgz#fef5e545533fb084175dda6509ee71d7d2f72e23" - integrity sha512-rBrJk5WjI02X1edtiUcZhgyhgBhiut96r5Jp8J5qktKdcvLcZpKDW8i2hkGMMItxrghjXuQ5AM6aE0imnFawaw== +"@testing-library/dom@^8.5.0": + version "8.19.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.1.tgz#0e2dafd281dedb930bb235eac1045470b4129d0e" + integrity sha512-P6iIPyYQ+qH8CvGauAqanhVnjrnRe0IZFSYCeGkSRW9q3u8bdVn2NPI+lasFyVsEQn1J/IFmp5Aax41+dAP9wg== dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" - "@types/aria-query" "^4.2.0" + "@types/aria-query" "^5.0.1" aria-query "^5.0.0" chalk "^4.1.0" dom-accessibility-api "^0.5.9" @@ -2394,14 +2394,14 @@ "@babel/runtime" "^7.12.5" react-error-boundary "^3.1.0" -"@testing-library/react@^12.1.4": - version "12.1.4" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0" - integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA== +"@testing-library/react@^13.0.0": + version "13.4.0" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.4.0.tgz#6a31e3bf5951615593ad984e96b9e5e2d9380966" + integrity sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw== dependencies: "@babel/runtime" "^7.12.5" - "@testing-library/dom" "^8.0.0" - "@types/react-dom" "*" + "@testing-library/dom" "^8.5.0" + "@types/react-dom" "^18.0.0" "@testing-library/user-event@^14.0.3": version "14.0.3" @@ -2438,10 +2438,10 @@ resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e" integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ== -"@types/aria-query@^4.2.0": - version "4.2.2" - resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" - integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== +"@types/aria-query@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc" + integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q== "@types/babel__core@^7.1.12", "@types/babel__core@^7.1.14": version "7.1.19" @@ -2801,10 +2801,10 @@ date-fns "^2.0.1" react-popper "^2.2.5" -"@types/react-dom@*": - version "17.0.14" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f" - integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ== +"@types/react-dom@^18.0.0": + version "18.0.10" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352" + integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg== dependencies: "@types/react" "*" From ceec48a709b79c0e64a7d4acd1146b4661ee27dc Mon Sep 17 00:00:00 2001 From: Soapbox Bot Date: Thu, 5 Jan 2023 18:34:21 +0000 Subject: [PATCH 02/15] Update react monorepo to v18 --- package.json | 4 ++-- yarn.lock | 29 +++++++++++++---------------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index ece6c7fb49..d99218e0f7 100644 --- a/package.json +++ b/package.json @@ -153,10 +153,10 @@ "prop-types": "^15.5.10", "punycode": "^2.1.1", "qrcode.react": "^3.0.2", - "react": "^17.0.2", + "react": "^18.0.0", "react-color": "^2.19.3", "react-datepicker": "^4.8.0", - "react-dom": "^17.0.2", + "react-dom": "^18.0.0", "react-helmet": "^6.1.0", "react-hot-toast": "^2.4.0", "react-hotkeys": "^1.1.4", diff --git a/yarn.lock b/yarn.lock index d8df4b0bb0..93e3726232 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9640,14 +9640,13 @@ react-datepicker@^4.8.0: react-onclickoutside "^6.12.0" react-popper "^2.2.5" -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-error-boundary@^3.1.0: version "3.1.4" @@ -9959,13 +9958,12 @@ react-virtuoso@^3.1.3: "@virtuoso.dev/react-urx" "^0.2.12" "@virtuoso.dev/urx" "^0.2.12" -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.0.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" reactcss@^1.2.0: version "1.2.3" @@ -10426,13 +10424,12 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" schema-utils@*, schema-utils@^3.0, schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1: version "3.1.1" From 3521e5698fdf7bb9b34e491e077d9b887cac990b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 16:42:18 -0600 Subject: [PATCH 03/15] Switch to React 18's createRoot API https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis --- app/soapbox/main.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx index 41dd3a233a..671e7a7523 100644 --- a/app/soapbox/main.tsx +++ b/app/soapbox/main.tsx @@ -3,7 +3,7 @@ import './precheck'; import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime'; import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import { defineMessages } from 'react-intl'; import { setSwUpdating } from 'soapbox/actions/sw'; @@ -34,9 +34,10 @@ function main() { } ready(() => { - const mountNode = document.getElementById('soapbox') as HTMLElement; + const container = document.getElementById('soapbox') as HTMLElement; + const root = createRoot(container); - ReactDOM.render(, mountNode); + root.render(); if (BuildConfig.NODE_ENV === 'production') { // avoid offline in dev mode because it's harder to debug From 273266d9ac8bdc38e1423cdbccbe53ed6aa59aff Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 16:56:05 -0600 Subject: [PATCH 04/15] useDimensions: don't return null --- app/soapbox/hooks/useDimensions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/hooks/useDimensions.ts b/app/soapbox/hooks/useDimensions.ts index bf7fc78b88..b08c05f4e3 100644 --- a/app/soapbox/hooks/useDimensions.ts +++ b/app/soapbox/hooks/useDimensions.ts @@ -25,7 +25,7 @@ const useDimensions = (): UseDimensionsResult => { ); useEffect((): any => { - if (!element) return null; + if (!element) return; observer.observe(element); return () => { From bd9bad9a4c9228af3fb2fc6e6fd2a5ce025e778c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:22:59 -0600 Subject: [PATCH 05/15] Fix ChatPage tests --- .../chat-page/__tests__/chat-page.test.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx b/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx index ddac6c8bc2..21ed9ddb0b 100644 --- a/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx +++ b/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx @@ -6,7 +6,7 @@ import { __stub } from 'soapbox/api'; import { normalizeAccount } from 'soapbox/normalizers'; import { ReducerAccount } from 'soapbox/reducers/accounts'; -import { render, screen } from '../../../../../jest/test-helpers'; +import { render, screen, waitFor } from '../../../../../jest/test-helpers'; import ChatPage from '../chat-page'; describe('', () => { @@ -48,7 +48,10 @@ describe('', () => { await userEvent.click(screen.getByTestId('button')); expect(screen.getByTestId('chat-page')).toBeInTheDocument(); - expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully'); + + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully'); + }); }); }); @@ -77,7 +80,10 @@ describe('', () => { it('renders the Chats', async () => { render(, undefined, store); await userEvent.click(screen.getByTestId('button')); - expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.'); + + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.'); + }); }); }); }); From fd542d179635225a99070f96aba16b76c2081196 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:30:00 -0600 Subject: [PATCH 06/15] Fix SmsVerification tests --- .../steps/__tests__/sms-verification.test.tsx | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx index 097bb29118..d837f46b7d 100644 --- a/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx +++ b/app/soapbox/features/verification/steps/__tests__/sms-verification.test.tsx @@ -37,8 +37,10 @@ describe('', () => { ); }); - expect(screen.getByRole('heading')).toHaveTextContent('Verification code'); - expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.'); + await waitFor(() => { + expect(screen.getByRole('heading')).toHaveTextContent('Verification code'); + expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.'); + }); act(() => { toast.remove(); @@ -68,8 +70,10 @@ describe('', () => { ); }); - expect(screen.getByRole('heading')).toHaveTextContent('Verification code'); - expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.'); + await waitFor(() => { + expect(screen.getByRole('heading')).toHaveTextContent('Verification code'); + expect(screen.getByTestId('toast')).toHaveTextContent('A verification code has been sent to your phone number.'); + }); act(() => { toast.remove(); @@ -82,7 +86,9 @@ describe('', () => { await userEvent.type(screen.getByLabelText('Digit 5'), '5'); await userEvent.type(screen.getByLabelText('Digit 6'), '6'); - expect(screen.getByTestId('toast')).toHaveTextContent('Your SMS token has expired.'); + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent('Your SMS token has expired.'); + }); }); }); @@ -106,7 +112,9 @@ describe('', () => { ); }); - expect(screen.getByTestId('toast')).toHaveTextContent('Failed to send SMS message to your phone number.'); + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent('Failed to send SMS message to your phone number.'); + }); }); }); }); From b98073ee8fed1f90b92c6a920a051503264c1b66 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:32:04 -0600 Subject: [PATCH 07/15] Fix ReportModal test --- .../modals/report-modal/__tests__/report-modal.test.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx index a2dee08b52..269f97146c 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/__tests__/report-modal.test.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { __stub } from 'soapbox/api'; -import { render, screen } from '../../../../../../jest/test-helpers'; +import { render, screen, waitFor } from '../../../../../../jest/test-helpers'; import { normalizeAccount, normalizeStatus } from '../../../../../../normalizers'; import ReportModal from '../report-modal'; @@ -64,6 +64,9 @@ describe('', () => { await user.click(screen.getByTestId('rule-1')); await user.click(screen.getByText(/Next/)); await user.click(screen.getByText(/Submit/)); - expect(screen.getByText(/Thanks for submitting your report/)).toBeInTheDocument(); + + await waitFor(() => { + expect(screen.getByText(/Thanks for submitting your report/)).toBeInTheDocument(); + }); }); }); From 83c93a6d51af1f836797996458b2cf2b3cba9e65 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:34:47 -0600 Subject: [PATCH 08/15] Fix Registration tests --- .../verification/__tests__/registration.test.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/verification/__tests__/registration.test.tsx b/app/soapbox/features/verification/__tests__/registration.test.tsx index fbde2fce36..b408947f6a 100644 --- a/app/soapbox/features/verification/__tests__/registration.test.tsx +++ b/app/soapbox/features/verification/__tests__/registration.test.tsx @@ -30,7 +30,10 @@ describe('', () => { fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} }); }); - expect(screen.getByTestId('toast')).toHaveTextContent(/welcome to/i); + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent(/welcome to/i); + }); + expect(screen.queryAllByRole('heading')).toHaveLength(0); }); }); @@ -47,7 +50,9 @@ describe('', () => { fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} }); }); - expect(screen.getByTestId('toast')).toHaveTextContent(/this username has already been taken/i); + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent(/this username has already been taken/i); + }); }); it('handles generic errors', async() => { @@ -61,7 +66,9 @@ describe('', () => { fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} }); }); - expect(screen.getByTestId('toast')).toHaveTextContent(/failed to register your account/i); + await waitFor(() => { + expect(screen.getByTestId('toast')).toHaveTextContent(/failed to register your account/i); + }); }); }); From 3fa9cbe211dea20a30e4cac947227f64ef51d9c9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:36:02 -0600 Subject: [PATCH 09/15] Fix EmailVerification test --- .../verification/steps/__tests__/email-verification.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx index d1c71649f9..38e7cf8a79 100644 --- a/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx +++ b/app/soapbox/features/verification/steps/__tests__/email-verification.test.tsx @@ -60,7 +60,9 @@ describe('', () => { ); }); - expect(screen.getByTestId('form-group-error')).toHaveTextContent('is taken'); + await waitFor(() => { + expect(screen.getByTestId('form-group-error')).toHaveTextContent('is taken'); + }); }); }); }); From 1e89efebaedf42d62bd325e308d16adbadf74189 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:45:48 -0600 Subject: [PATCH 10/15] Tests: wrap toast.remove() with act() --- app/soapbox/jest/test-setup.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/soapbox/jest/test-setup.ts b/app/soapbox/jest/test-setup.ts index dc27e9a89d..d4d16859b7 100644 --- a/app/soapbox/jest/test-setup.ts +++ b/app/soapbox/jest/test-setup.ts @@ -1,5 +1,6 @@ 'use strict'; +import { act } from '@testing-library/react'; import { toast } from 'react-hot-toast'; import { __clear as clearApiMocks } from '../api/__mocks__'; @@ -17,7 +18,9 @@ require('fake-indexeddb/auto'); // Clear toasts after each test. afterEach(() => { - toast.remove(); + act(() => { + toast.remove(); + }); }); const intersectionObserverMock = () => ({ observe: () => null, disconnect: () => null }); From edbaf60009e72298931c5e0d2513fed06f056a3d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 17:58:01 -0600 Subject: [PATCH 11/15] Fix FeedCarousel test --- .../features/feed-filtering/__tests__/feed-carousel.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx index 71d1c9f296..bb6048edb2 100644 --- a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx +++ b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx @@ -78,6 +78,9 @@ describe('', () => { expect(screen.getAllByTestId('carousel-item-avatar')[0]).toHaveClass('ring-primary-600'); }); + // HACK: wait for state change + await new Promise((r) => setTimeout(r, 0)); + // Marked as seen, not selected await userEvent.click(screen.getAllByTestId('carousel-item-avatar')[0]); await waitFor(() => { From e83914482d7602d9895d0d678a76259af16218fd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 5 Jan 2023 18:05:55 -0600 Subject: [PATCH 12/15] Fix useFetchRelationships tests --- .../queries/__tests__/relationships.test.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/soapbox/queries/__tests__/relationships.test.ts b/app/soapbox/queries/__tests__/relationships.test.ts index 65b5e544fe..6466da7ff1 100644 --- a/app/soapbox/queries/__tests__/relationships.test.ts +++ b/app/soapbox/queries/__tests__/relationships.test.ts @@ -30,7 +30,7 @@ describe('useFetchRelationships()', () => { }); it('is successful', async() => { - const { result } = renderHook(() => { + renderHook(() => { const fetchRelationships = useFetchRelationships(); useEffect(() => { @@ -40,11 +40,11 @@ describe('useFetchRelationships()', () => { return fetchRelationships; }, undefined, store); - await waitFor(() => expect(result.current.isLoading).toBe(false)); - - expect(store.getState().relationships.size).toBe(1); - expect(store.getState().relationships.getIn([id, 'id'])).toBe(id); - expect(store.getState().relationships.getIn([id, 'blocked_by'])).toBe(true); + await waitFor(() => { + expect(store.getState().relationships.size).toBe(1); + expect(store.getState().relationships.getIn([id, 'id'])).toBe(id); + expect(store.getState().relationships.getIn([id, 'blocked_by'])).toBe(true); + }); }); }); @@ -60,7 +60,7 @@ describe('useFetchRelationships()', () => { }); it('is successful', async() => { - const { result } = renderHook(() => { + renderHook(() => { const fetchRelationships = useFetchRelationships(); useEffect(() => { @@ -70,11 +70,11 @@ describe('useFetchRelationships()', () => { return fetchRelationships; }, undefined, store); - await waitFor(() => expect(result.current.isLoading).toBe(false)); - - expect(store.getState().relationships.size).toBe(2); - expect(store.getState().relationships.getIn([ids[0], 'id'])).toBe(ids[0]); - expect(store.getState().relationships.getIn([ids[1], 'id'])).toBe(ids[1]); + await waitFor(() => { + expect(store.getState().relationships.size).toBe(2); + expect(store.getState().relationships.getIn([ids[0], 'id'])).toBe(ids[0]); + expect(store.getState().relationships.getIn([ids[1], 'id'])).toBe(ids[1]); + }); }); }); }); From dbb745f38d9d1dd482358b7f023f7553aa4bbd36 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 6 Jan 2023 11:38:36 -0600 Subject: [PATCH 13/15] Fix loading of attachment dimensions for React 18 (useEffect --> useLayoutEffect) --- app/soapbox/components/media-gallery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx index 75ff9f7982..9b9d1fb7d7 100644 --- a/app/soapbox/components/media-gallery.tsx +++ b/app/soapbox/components/media-gallery.tsx @@ -1,5 +1,5 @@ import classNames from 'clsx'; -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useLayoutEffect } from 'react'; import Blurhash from 'soapbox/components/blurhash'; import Icon from 'soapbox/components/icon'; @@ -533,7 +533,7 @@ const MediaGallery: React.FC = (props) => { /> )); - useEffect(() => { + useLayoutEffect(() => { if (node.current) { const { offsetWidth } = node.current; From 8730a276c7c70ceebbae7023b9337ef83548bb21 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 6 Jan 2023 11:46:14 -0600 Subject: [PATCH 14/15] Audio/Video: fix initial size with useLayoutEffect for React 18 --- app/soapbox/features/audio/index.tsx | 4 ++-- app/soapbox/features/video/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx index ecbae5b166..17854386ec 100644 --- a/app/soapbox/features/audio/index.tsx +++ b/app/soapbox/features/audio/index.tsx @@ -1,7 +1,7 @@ import classNames from 'clsx'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import Icon from 'soapbox/components/icon'; @@ -397,7 +397,7 @@ const Audio: React.FC = (props) => { const progress = Math.min((currentTime / getDuration()) * 100, 100); - useEffect(() => { + useLayoutEffect(() => { if (player.current) { _setDimensions(); } diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx index 71aaae65da..bd63528e4c 100644 --- a/app/soapbox/features/video/index.tsx +++ b/app/soapbox/features/video/index.tsx @@ -1,7 +1,7 @@ import classNames from 'clsx'; import debounce from 'lodash/debounce'; import throttle from 'lodash/throttle'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import Blurhash from 'soapbox/components/blurhash'; @@ -159,7 +159,7 @@ const Video: React.FC = ({ } }; - useEffect(() => { + useLayoutEffect(() => { setDimensions(); }, [player.current]); From 5083096d1ff3b049fff7e5f53f83cf89475b9e37 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 6 Jan 2023 11:51:47 -0600 Subject: [PATCH 15/15] ChatPage: useLayoutEffect --- app/soapbox/features/chats/components/chat-page/chat-page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx index 407d49e7be..dbe50d3855 100644 --- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx +++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx @@ -1,5 +1,5 @@ import classNames from 'clsx'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { matchPath, Route, Switch, useHistory } from 'react-router-dom'; import { Stack } from 'soapbox/components/ui'; @@ -44,7 +44,7 @@ const ChatPage: React.FC = ({ chatId }) => { setHeight(fullHeight - top + offset); }; - useEffect(() => { + useLayoutEffect(() => { calculateHeight(); }, [containerRef.current]);