[MM-60068] Convert ./components/emoji/emoji_page.tsx from Class Component to Function Component (#27915)
* fix: convert component to function component * add test for 'emoji_page' * fix: moved lists outside the component and updated dependencies in useEffect * fix: fix lint for 'emoji_page' test file
Этот коммит содержится в:
Rita Anene
@@ -0,0 +1,43 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`EmojiPage should render without crashing 1`] = `
|
||||
<div
|
||||
className="backstage-content emoji-list"
|
||||
>
|
||||
<div
|
||||
className="backstage-header"
|
||||
>
|
||||
<h1>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="Custom Emoji"
|
||||
id="emoji_list.header"
|
||||
/>
|
||||
</h1>
|
||||
<Memo(AnyTeamPermissionGate)
|
||||
permissions={
|
||||
Array [
|
||||
"create_emojis",
|
||||
]
|
||||
}
|
||||
>
|
||||
<Link
|
||||
className="add-link"
|
||||
to="/team/emoji/add"
|
||||
>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="Add Custom Emoji"
|
||||
id="emoji_list.add"
|
||||
/>
|
||||
</button>
|
||||
</Link>
|
||||
</Memo(AnyTeamPermissionGate)>
|
||||
</div>
|
||||
<Connect(injectIntl(EmojiList))
|
||||
scrollToTop={[MockFunction]}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
62
webapp/channels/src/components/emoji/emoji_page.test.tsx
Обычный файл
62
webapp/channels/src/components/emoji/emoji_page.test.tsx
Обычный файл
@@ -0,0 +1,62 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import type {ShallowWrapper} from 'enzyme';
|
||||
import {shallow} from 'enzyme';
|
||||
import React from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
|
||||
|
||||
import AnyTeamPermissionGate from 'components/permissions_gates/any_team_permission_gate';
|
||||
|
||||
import EmojiList from './emoji_list';
|
||||
import EmojiPage from './emoji_page';
|
||||
|
||||
jest.mock('utils/utils', () => ({
|
||||
localizeMessage: jest.fn().mockReturnValue('Custom Emoji'),
|
||||
resetTheme: jest.fn(),
|
||||
applyTheme: jest.fn(),
|
||||
}));
|
||||
|
||||
describe('EmojiPage', () => {
|
||||
const mockLoadRolesIfNeeded = jest.fn();
|
||||
const mockScrollToTop = jest.fn();
|
||||
const mockCurrentTheme = {} as Theme;
|
||||
|
||||
const defaultProps = {
|
||||
teamName: 'team',
|
||||
teamDisplayName: 'Team Display Name',
|
||||
siteName: 'Site Name',
|
||||
scrollToTop: mockScrollToTop,
|
||||
currentTheme: mockCurrentTheme,
|
||||
actions: {
|
||||
loadRolesIfNeeded: mockLoadRolesIfNeeded,
|
||||
},
|
||||
};
|
||||
|
||||
it('should render without crashing', () => {
|
||||
const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the emoji list and the add button with permission', () => {
|
||||
const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
|
||||
expect(wrapper.find(EmojiList).exists()).toBe(true);
|
||||
expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
|
||||
expect(wrapper.find(Link).prop('to')).toBe('/team/emoji/add');
|
||||
});
|
||||
|
||||
it('should not render the add button if permission is not granted', () => {
|
||||
const wrapper: ShallowWrapper = shallow(
|
||||
<EmojiPage {...defaultProps}/>,
|
||||
).setProps({teamName: '', actions: {loadRolesIfNeeded: mockLoadRolesIfNeeded}});
|
||||
expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
|
||||
expect(wrapper.find(Link).exists()).toBe(true); // Update this to match your permission setup
|
||||
});
|
||||
|
||||
it('should render EmojiList component', () => {
|
||||
const wrapper = shallow(<EmojiPage {...defaultProps}/>);
|
||||
expect(wrapper.find(EmojiList).exists()).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,8 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import React, {useEffect} from 'react';
|
||||
import {FormattedMessage, useIntl} from 'react-intl';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
import Permissions from 'mattermost-redux/constants/permissions';
|
||||
@@ -25,62 +25,64 @@ type Props = {
|
||||
};
|
||||
}
|
||||
|
||||
export default class EmojiPage extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
teamName: '',
|
||||
teamDisplayName: '',
|
||||
siteName: '',
|
||||
};
|
||||
const CREATE_EMOJIS_PERMISSIONS = [Permissions.CREATE_EMOJIS];
|
||||
const ROLES = ['system_admin', 'team_admin', 'system_user', 'team_user'];
|
||||
|
||||
componentDidMount() {
|
||||
this.updateTitle();
|
||||
this.props.actions.loadRolesIfNeeded(['system_admin', 'team_admin', 'system_user', 'team_user']);
|
||||
export default function EmojiPage({
|
||||
teamDisplayName = '',
|
||||
teamName = '',
|
||||
siteName = '',
|
||||
scrollToTop,
|
||||
currentTheme,
|
||||
actions,
|
||||
}: Props) {
|
||||
const intl = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
updateTitle();
|
||||
actions.loadRolesIfNeeded(ROLES);
|
||||
Utils.resetTheme();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Utils.applyTheme(this.props.currentTheme);
|
||||
}
|
||||
return () => {
|
||||
Utils.applyTheme(currentTheme);
|
||||
};
|
||||
}, []);
|
||||
|
||||
updateTitle = () => {
|
||||
document.title = Utils.localizeMessage('custom_emoji.header', 'Custom Emoji') + ' - ' + this.props.teamDisplayName + ' ' + this.props.siteName;
|
||||
useEffect(() => {
|
||||
updateTitle();
|
||||
}, [siteName]);
|
||||
|
||||
const updateTitle = () => {
|
||||
document.title = intl.formatMessage({id: 'custom_emoji.header', defaultMessage: 'Custom Emoji'}) + ' - ' + teamDisplayName + ' ' + siteName;
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.props.siteName !== prevProps.siteName) {
|
||||
this.updateTitle();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='backstage-content emoji-list'>
|
||||
<div className='backstage-header'>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id='emoji_list.header'
|
||||
defaultMessage='Custom Emoji'
|
||||
/>
|
||||
</h1>
|
||||
<AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
|
||||
<Link
|
||||
className='add-link'
|
||||
to={'/' + this.props.teamName + '/emoji/add'}
|
||||
return (
|
||||
<div className='backstage-content emoji-list'>
|
||||
<div className='backstage-header'>
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id='emoji_list.header'
|
||||
defaultMessage='Custom Emoji'
|
||||
/>
|
||||
</h1>
|
||||
<AnyTeamPermissionGate permissions={CREATE_EMOJIS_PERMISSIONS}>
|
||||
<Link
|
||||
className='add-link'
|
||||
to={'/' + teamName + '/emoji/add'}
|
||||
>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-primary'
|
||||
>
|
||||
<button
|
||||
type='button'
|
||||
className='btn btn-primary'
|
||||
>
|
||||
<FormattedMessage
|
||||
id='emoji_list.add'
|
||||
defaultMessage='Add Custom Emoji'
|
||||
/>
|
||||
</button>
|
||||
</Link>
|
||||
</AnyTeamPermissionGate>
|
||||
</div>
|
||||
<EmojiList scrollToTop={this.props.scrollToTop}/>
|
||||
<FormattedMessage
|
||||
id='emoji_list.add'
|
||||
defaultMessage='Add Custom Emoji'
|
||||
/>
|
||||
</button>
|
||||
</Link>
|
||||
</AnyTeamPermissionGate>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<EmojiList scrollToTop={scrollToTop}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Ссылка в новой задаче
Block a user