From 2dd16311623b6bbe70abb68c424233c23861a6ca Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 6 Jul 2022 13:12:35 -0500 Subject: [PATCH] More component test TS fixes --- app/soapbox/components/__tests__/account.test.tsx | 14 ++++++++------ app/soapbox/components/__tests__/avatar.test.tsx | 4 +++- .../components/__tests__/avatar_overlay.test.tsx | 13 ++++++++----- .../components/__tests__/display_name.test.tsx | 4 +++- .../components/__tests__/emoji_selector.test.tsx | 1 + .../components/__tests__/quoted-status.test.tsx | 8 +++++--- .../__tests__/scroll-top-button.test.tsx | 4 ++-- .../polls/__tests__/poll-footer.test.tsx | 2 +- .../ui/datepicker/__tests__/datepicker.test.tsx | 2 +- app/soapbox/jest/test-helpers.tsx | 4 +++- 10 files changed, 35 insertions(+), 21 deletions(-) diff --git a/app/soapbox/components/__tests__/account.test.tsx b/app/soapbox/components/__tests__/account.test.tsx index e7af7b8f0..7f1458349 100644 --- a/app/soapbox/components/__tests__/account.test.tsx +++ b/app/soapbox/components/__tests__/account.test.tsx @@ -5,6 +5,8 @@ import { render, screen } from '../../jest/test-helpers'; import { normalizeAccount } from '../../normalizers'; import Account from '../account'; +import type { ReducerAccount } from 'soapbox/reducers/accounts'; + describe('', () => { it('renders account name and username', () => { const account = normalizeAccount({ @@ -12,7 +14,7 @@ describe('', () => { acct: 'justin-username', display_name: 'Justin L', avatar: 'test.jpg', - }); + }) as ReducerAccount; const store = { accounts: ImmutableMap({ @@ -20,7 +22,7 @@ describe('', () => { }), }; - render(, null, store); + render(, undefined, store); expect(screen.getByTestId('account')).toHaveTextContent('Justin L'); expect(screen.getByTestId('account')).toHaveTextContent(/justin-username/i); }); @@ -33,7 +35,7 @@ describe('', () => { display_name: 'Justin L', avatar: 'test.jpg', verified: true, - }); + }) as ReducerAccount; const store = { accounts: ImmutableMap({ @@ -41,7 +43,7 @@ describe('', () => { }), }; - render(, null, store); + render(, undefined, store); expect(screen.getByTestId('verified-badge')).toBeInTheDocument(); }); @@ -52,7 +54,7 @@ describe('', () => { display_name: 'Justin L', avatar: 'test.jpg', verified: false, - }); + }) as ReducerAccount; const store = { accounts: ImmutableMap({ @@ -60,7 +62,7 @@ describe('', () => { }), }; - render(, null, store); + render(, undefined, store); expect(screen.queryAllByTestId('verified-badge')).toHaveLength(0); }); }); diff --git a/app/soapbox/components/__tests__/avatar.test.tsx b/app/soapbox/components/__tests__/avatar.test.tsx index 55abca520..56f592925 100644 --- a/app/soapbox/components/__tests__/avatar.test.tsx +++ b/app/soapbox/components/__tests__/avatar.test.tsx @@ -5,6 +5,8 @@ import { normalizeAccount } from 'soapbox/normalizers'; import { render, screen } from '../../jest/test-helpers'; import Avatar from '../avatar'; +import type { ReducerAccount } from 'soapbox/reducers/accounts'; + describe('', () => { const account = normalizeAccount({ username: 'alice', @@ -12,7 +14,7 @@ describe('', () => { display_name: 'Alice', avatar: '/animated/alice.gif', avatar_static: '/static/alice.jpg', - }); + }) as ReducerAccount; const size = 100; diff --git a/app/soapbox/components/__tests__/avatar_overlay.test.tsx b/app/soapbox/components/__tests__/avatar_overlay.test.tsx index b62d4eef8..105828556 100644 --- a/app/soapbox/components/__tests__/avatar_overlay.test.tsx +++ b/app/soapbox/components/__tests__/avatar_overlay.test.tsx @@ -1,25 +1,28 @@ -import { fromJS } from 'immutable'; import React from 'react'; +import { normalizeAccount } from 'soapbox/normalizers'; + import { render, screen } from '../../jest/test-helpers'; import AvatarOverlay from '../avatar_overlay'; +import type { ReducerAccount } from 'soapbox/reducers/accounts'; + describe(' { - const account = fromJS({ + const account = normalizeAccount({ username: 'alice', acct: 'alice', display_name: 'Alice', avatar: '/animated/alice.gif', avatar_static: '/static/alice.jpg', - }); + }) as ReducerAccount; - const friend = fromJS({ + const friend = normalizeAccount({ username: 'eve', acct: 'eve@blackhat.lair', display_name: 'Evelyn', avatar: '/animated/eve.gif', avatar_static: '/static/eve.jpg', - }); + }) as ReducerAccount; it('renders a overlay avatar', () => { render(); diff --git a/app/soapbox/components/__tests__/display_name.test.tsx b/app/soapbox/components/__tests__/display_name.test.tsx index 6d0a05ed5..4c1c1bd23 100644 --- a/app/soapbox/components/__tests__/display_name.test.tsx +++ b/app/soapbox/components/__tests__/display_name.test.tsx @@ -5,9 +5,11 @@ import { normalizeAccount } from 'soapbox/normalizers'; import { render, screen } from '../../jest/test-helpers'; import DisplayName from '../display-name'; +import type { ReducerAccount } from 'soapbox/reducers/accounts'; + describe('', () => { it('renders display name + account name', () => { - const account = normalizeAccount({ acct: 'bar@baz' }); + const account = normalizeAccount({ acct: 'bar@baz' }) as ReducerAccount; render(); expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz'); diff --git a/app/soapbox/components/__tests__/emoji_selector.test.tsx b/app/soapbox/components/__tests__/emoji_selector.test.tsx index 891e3e61c..c680d156e 100644 --- a/app/soapbox/components/__tests__/emoji_selector.test.tsx +++ b/app/soapbox/components/__tests__/emoji_selector.test.tsx @@ -6,6 +6,7 @@ import EmojiSelector from '../emoji_selector'; describe('', () => { it('renders correctly', () => { const children = ; + // @ts-ignore children.__proto__.addEventListener = () => {}; render(children); diff --git a/app/soapbox/components/__tests__/quoted-status.test.tsx b/app/soapbox/components/__tests__/quoted-status.test.tsx index 208a913b2..d57b59b30 100644 --- a/app/soapbox/components/__tests__/quoted-status.test.tsx +++ b/app/soapbox/components/__tests__/quoted-status.test.tsx @@ -4,6 +4,8 @@ import { render, screen, rootState } from '../../jest/test-helpers'; import { normalizeStatus, normalizeAccount } from '../../normalizers'; import QuotedStatus from '../quoted-status'; +import type { ReducerStatus } from 'soapbox/reducers/statuses'; + describe('', () => { it('renders content', () => { const account = normalizeAccount({ @@ -16,11 +18,11 @@ describe('', () => { account, content: 'hello world', contentHtml: 'hello world', - }); + }) as ReducerStatus; - const state = rootState.setIn(['accounts', '1', account]); + const state = rootState.setIn(['accounts', '1'], account); - render(, null, state); + render(, undefined, state); screen.getByText(/hello world/i); expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i); }); diff --git a/app/soapbox/components/__tests__/scroll-top-button.test.tsx b/app/soapbox/components/__tests__/scroll-top-button.test.tsx index 89518b977..76e6b7c1c 100644 --- a/app/soapbox/components/__tests__/scroll-top-button.test.tsx +++ b/app/soapbox/components/__tests__/scroll-top-button.test.tsx @@ -28,7 +28,7 @@ describe('', () => { message={messages.queue} />, ); - expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument(); + expect(screen.getByText('Click to see 1 new post')).toBeInTheDocument(); render( ', () => { message={messages.queue} />, ); - expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument(); + expect(screen.getByText('Click to see 9999999 new posts')).toBeInTheDocument(); }); }); diff --git a/app/soapbox/components/polls/__tests__/poll-footer.test.tsx b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx index 7265f7e1c..9a403e339 100644 --- a/app/soapbox/components/polls/__tests__/poll-footer.test.tsx +++ b/app/soapbox/components/polls/__tests__/poll-footer.test.tsx @@ -36,7 +36,7 @@ describe('', () => { }); const user = userEvent.setup(); - const store = mockStore(rootReducer(undefined, {})); + const store = mockStore(rootReducer(undefined, {} as any)); render( diff --git a/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx index c4f94c89f..f2db8981c 100644 --- a/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx +++ b/app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx @@ -30,7 +30,7 @@ describe('', () => { ); let daySelect: HTMLElement; - daySelect = document.querySelector('[data-testid="datepicker-day"]'); + daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement; expect(queryAllByRole(daySelect, 'option')).toHaveLength(29); await userEvent.selectOptions( diff --git a/app/soapbox/jest/test-helpers.tsx b/app/soapbox/jest/test-helpers.tsx index 459049b52..abc13fffb 100644 --- a/app/soapbox/jest/test-helpers.tsx +++ b/app/soapbox/jest/test-helpers.tsx @@ -12,11 +12,13 @@ import '@testing-library/jest-dom'; import NotificationsContainer from '../features/ui/containers/notifications_container'; import { default as rootReducer } from '../reducers'; +import type { StateRecord } from 'soapbox/reducers'; + // Mock Redux // https://redux.js.org/recipes/writing-tests/ const middlewares = [thunk]; const mockStore = configureMockStore(middlewares); -let rootState = rootReducer(undefined, {} as Action); +let rootState = rootReducer(undefined, {} as Action) as unknown as ReturnType; /** Apply actions to the state, one at a time. */ const applyActions = (state: any, actions: any, reducer: any) => {