diff --git a/app/javascript/mastodon/components/__tests__/button-test.jsx b/app/javascript/mastodon/components/__tests__/button-test.jsx index ad7a0c49c..f38ff6a7d 100644 --- a/app/javascript/mastodon/components/__tests__/button-test.jsx +++ b/app/javascript/mastodon/components/__tests__/button-test.jsx @@ -1,6 +1,7 @@ -import { render, fireEvent, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; +import { render, fireEvent, screen } from 'mastodon/test_helpers'; + import { Button } from '../button'; describe('); + +}; + +BackButton.propTypes = { + pinned: PropTypes.bool, + show: PropTypes.bool, +}; + class ColumnHeader extends PureComponent { static contextTypes = { @@ -72,16 +102,6 @@ class ColumnHeader extends PureComponent { this.props.onMove(1); }; - handleBackClick = () => { - const { history } = this.props; - - if (history.location?.state?.fromMastodon) { - history.goBack(); - } else { - history.push('/'); - } - }; - handleTransitionEnd = () => { this.setState({ animating: false }); }; @@ -95,7 +115,7 @@ class ColumnHeader extends PureComponent { }; render () { - const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props; + const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -138,14 +158,7 @@ class ColumnHeader extends PureComponent { pinButton = ; } - if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) { - backButton = ( - - ); - } + backButton = ; const collapsedContent = [ extraContent, diff --git a/app/javascript/mastodon/features/blocks/index.jsx b/app/javascript/mastodon/features/blocks/index.jsx index 21b7a263f..615e4c8be 100644 --- a/app/javascript/mastodon/features/blocks/index.jsx +++ b/app/javascript/mastodon/features/blocks/index.jsx @@ -10,7 +10,6 @@ import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/ import { debounce } from 'lodash'; import { fetchBlocks, expandBlocks } from '../../actions/blocks'; -import { ColumnBackButtonSlim } from '../../components/column_back_button'; import { LoadingIndicator } from '../../components/loading_indicator'; import ScrollableList from '../../components/scrollable_list'; import AccountContainer from '../../containers/account_container'; @@ -60,8 +59,7 @@ class Blocks extends ImmutablePureComponent { const emptyMessage = ; return ( - - + ; return ( - - - + - + ; return ( - - + - + ; + describe('', () => { describe(' click handler', () => { it('runs the scroll animation if the column contains scrollable content', () => { const scrollToMock = jest.fn(); const { container } = render( - +
, ); @@ -17,7 +19,7 @@ describe('', () => { }); it('does not try to scroll if there is no scrollable content', () => { - render(); + render(); fireEvent.click(screen.getByText('notifications')); }); }); diff --git a/app/javascript/mastodon/features/ui/components/column.jsx b/app/javascript/mastodon/features/ui/components/column.jsx index d667f42d9..b6c09b62c 100644 --- a/app/javascript/mastodon/features/ui/components/column.jsx +++ b/app/javascript/mastodon/features/ui/components/column.jsx @@ -3,15 +3,15 @@ import { PureComponent } from 'react'; import { debounce } from 'lodash'; +import ColumnHeader from '../../../components/column_header'; import { isMobile } from '../../../is_mobile'; import { scrollTop } from '../../../scroll'; -import ColumnHeader from './column_header'; - export default class Column extends PureComponent { static propTypes = { heading: PropTypes.string, + alwaysShowBackButton: PropTypes.bool, icon: PropTypes.string, iconComponent: PropTypes.func, children: PropTypes.node, @@ -51,13 +51,14 @@ export default class Column extends PureComponent { }; render () { - const { heading, icon, iconComponent, children, active, hideHeadingOnMobile } = this.props; + const { heading, icon, iconComponent, children, active, hideHeadingOnMobile, alwaysShowBackButton } = this.props; const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth))); const columnHeaderId = showHeading && heading.replace(/ /g, '-'); + const header = showHeading && ( - + ); return (
{ - this.props.onClick(); - }; - - render () { - const { icon, iconComponent, type, active, columnHeaderId } = this.props; - let iconElement = ''; - - if (icon) { - iconElement = ; - } - - return ( -

- -

- ); - } - -} diff --git a/app/javascript/mastodon/test_helpers.tsx b/app/javascript/mastodon/test_helpers.tsx new file mode 100644 index 000000000..689589556 --- /dev/null +++ b/app/javascript/mastodon/test_helpers.tsx @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; +import type { PropsWithChildren } from 'react'; +import { Component } from 'react'; + +import { IntlProvider } from 'react-intl'; + +import { MemoryRouter } from 'react-router'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import { render as rtlRender } from '@testing-library/react'; + +class FakeIdentityWrapper extends Component< + PropsWithChildren<{ signedIn: boolean }> +> { + static childContextTypes = { + identity: PropTypes.shape({ + signedIn: PropTypes.bool.isRequired, + accountId: PropTypes.string, + disabledAccountId: PropTypes.string, + accessToken: PropTypes.string, + }).isRequired, + }; + + getChildContext() { + return { + identity: { + signedIn: this.props.signedIn, + accountId: '123', + accessToken: 'test-access-token', + }, + }; + } + + render() { + return this.props.children; + } +} + +function render( + ui: React.ReactElement, + { locale = 'en', signedIn = true, ...renderOptions } = {}, +) { + const Wrapper = (props: { children: React.ReactElement }) => { + return ( + + + + {props.children} + + + + ); + }; + return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); +} + +// re-export everything +// eslint-disable-next-line import/no-extraneous-dependencies +export * from '@testing-library/react'; + +// override render method +export { render }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b8e6af0aa..1e341680e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3137,20 +3137,6 @@ $ui-header-height: 55px; margin-inline-end: 5px; } -.column-back-button--slim { - position: relative; -} - -.column-back-button--slim-button { - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - position: absolute; - inset-inline-end: 0; - top: -50px; -} - .react-toggle { display: inline-block; position: relative;