Convert 'components/user_settings/general' module and associated test…

…s to TypeScript (#5545)

* [WIP] Convert user setting/general and associated test to typescript

* Update

* Update submitActive value

* Fix styles

* Update export method

* Update types

* Update user type, description message type

* Update library

* Update user type for testing

* Update test cases

* Minor fix

* Update some incorect types

* Remove change from package-lock

* Correct type for userNameLabel and positionLabel variables

Co-authored-by: Mattermod <[email protected]>

components/user_settings/general/index.js → components/user_settings/general/index.ts

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux';
 import {
  getMe,
  updateMe,
@@ -13,13 +13,43 @@ import {
 import {clearErrors, logError} from 'mattermost-redux/actions/errors';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
-import UserSettingsGeneralTab from './user_settings_general.jsx';
+import {GlobalState} from 'mattermost-redux/types/store';
+import {ActionFunc} from 'mattermost-redux/types/actions';
+import {UserProfile} from 'mattermost-redux/types/users';
 
-function mapStateToProps(state) {
+import UserSettingsGeneralTab from './user_settings_general';
+
+type Actions = {
+ logError: ({message, type}: {message: any; type: string}, status: boolean) => void;
+ clearErrors: () => void;
+ getMe: () => void;
+ updateMe: (user: UserProfile) => Promise<{
+ data: boolean;
+ error?: {
+ server_error_id: string;
+ message: string;
+ };
+ }>;
+ sendVerificationEmail: (email: string) => Promise<{
+ data: boolean;
+ error?: {
+ err: string;
+ };
+ }>;
+ setDefaultProfileImage: (id: string) => void;
+ uploadProfileImage: (id: string, file: object) => Promise<{
+ data: boolean;
+ error?: {
+ message: string;
+ };
+ }>;
+}
+
+function mapStateToProps(state: GlobalState) {
  const config = getConfig(state);
 
  const requireEmailVerification = config.RequireEmailVerification === 'true';
- const maxFileSize = parseInt(config.MaxFileSize, 10);
+ const maxFileSize = parseInt(config.MaxFileSize!, 10);
  const ldapFirstNameAttributeSet = config.LdapFirstNameAttributeSet === 'true';
  const ldapLastNameAttributeSet = config.LdapLastNameAttributeSet === 'true';
  const samlFirstNameAttributeSet = config.SamlFirstNameAttributeSet === 'true';
@@ -28,7 +58,6 @@ function mapStateToProps(state) {
  const samlNicknameAttributeSet = config.SamlNicknameAttributeSet === 'true';
  const samlPositionAttributeSet = config.SamlPositionAttributeSet === 'true';
  const ldapPositionAttributeSet = config.LdapPositionAttributeSet === 'true';
- const ldapPictureAttributeSet = config.LdapPictureAttributeSet === 'true';
 
  return {
  requireEmailVerification,
@@ -41,13 +70,13 @@ function mapStateToProps(state) {
  samlNicknameAttributeSet,
  samlPositionAttributeSet,
  ldapPositionAttributeSet,
- ldapPictureAttributeSet,
  };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: Dispatch) {
  return {
- actions: bindActionCreators({
+ actions: bindActionCreators<ActionCreatorsMapObject<ActionFunc>,
+ Actions>({
  logError,
  clearErrors,
  getMe,

components/user_settings/general/user_settings_general.test.js → components/user_settings/general/user_settings_general.test.tsx

@@ -4,15 +4,26 @@
 import React from 'react';
 import {Provider} from 'react-redux';
 import configureStore from 'redux-mock-store';
+import {UserProfile} from 'mattermost-redux/types/users';
 
 import {shallowWithIntl, mountWithIntl} from 'tests/helpers/intl-test-helper';
+import {TestHelper} from 'utils/test_helper';
 
-import UserSettingsGeneral from './user_settings_general.jsx';
+import UserSettingsGeneral, {UserSettingsGeneralTab} from './user_settings_general';
 
 describe('components/user_settings/general/UserSettingsGeneral', () => {
- const user = {
+ const user: UserProfile = TestHelper.getUserMock({
  id: 'user_id',
- };
+ username: 'user_name',
+ first_name: 'first_name',
+ last_name: 'last_name',
+ nickname: 'nickname',
+ position: '',
+ email: '',
+ password: '',
+ auth_service: '',
+ last_picture_update: 0,
+ });
 
  const requiredProps = {
  user,
@@ -31,6 +42,9 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
  uploadProfileImage: jest.fn(),
  },
  maxFileSize: 1024,
+ ldapPositionAttributeSet: false,
+ samlPositionAttributeSet: false,
+ ldapPictureAttributeSet: false,
  };
 
  const mockStore = configureStore();
@@ -47,9 +61,9 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
  const props = {...requiredProps, actions: {...requiredProps.actions, updateMe}};
  const wrapper = shallowWithIntl(<UserSettingsGeneral {...props}/>);
 
- wrapper.instance().submitUser(requiredProps.currentUser, '');
+ (wrapper.instance() as UserSettingsGeneralTab).submitUser(requiredProps.user, false);
  expect(updateMe).toHaveBeenCalledTimes(1);
- expect(updateMe).toHaveBeenCalledWith(requiredProps.currentUser);
+ expect(updateMe).toHaveBeenCalledWith(requiredProps.user);
  });
 
  test('submitUser() should have called getMe', async () => {
@@ -58,7 +72,7 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
  const props = {...requiredProps, actions: {...requiredProps.actions, updateMe, getMe}};
  const wrapper = shallowWithIntl(<UserSettingsGeneral {...props}/>);
 
- await wrapper.instance().submitUser(requiredProps.currentUser, '');
+ await (wrapper.instance() as UserSettingsGeneralTab).submitUser(requiredProps.user, false);
  expect(getMe).toHaveBeenCalledTimes(1);
  expect(getMe).toHaveBeenCalledWith();
  });
@@ -68,7 +82,7 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
  const props = {...requiredProps, actions: {...requiredProps.actions, uploadProfileImage}};
  const wrapper = shallowWithIntl(<UserSettingsGeneral {...props}/>);
 
- wrapper.instance().submitPicture(requiredProps.currentUser, '');
+ (wrapper.instance() as UserSettingsGeneralTab).submitPicture();
  expect(uploadProfileImage).toHaveBeenCalledTimes(0);
  });
 
@@ -78,20 +92,20 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
  const wrapper = shallowWithIntl(<UserSettingsGeneral {...props}/>);
 
  const mockFile = {type: 'image/jpeg', size: requiredProps.maxFileSize};
- const event = {target: {files: [mockFile]}};
+ const event: any = {target: {files: [mockFile]}};
 
- wrapper.instance().updatePicture(event);
+ (wrapper.instance() as UserSettingsGeneralTab).updatePicture(event);
 
  expect(wrapper.state('pictureFile')).toBe(event.target.files[0]);
- expect(wrapper.instance().submitActive).toBe(true);
+ expect((wrapper.instance() as UserSettingsGeneralTab).submitActive).toBe(true);
 
- await wrapper.instance().submitPicture(requiredProps.currentUser, '');
+ await (wrapper.instance() as UserSettingsGeneralTab).submitPicture();
 
  expect(uploadProfileImage).toHaveBeenCalledTimes(1);
  expect(uploadProfileImage).toHaveBeenCalledWith(requiredProps.user.id, mockFile);
 
  expect(wrapper.state('pictureFile')).toBe(null);
- expect(wrapper.instance().submitActive).toBe(false);
+ expect((wrapper.instance() as UserSettingsGeneralTab).submitActive).toBe(false);
 
  expect(requiredProps.updateSection).toHaveBeenCalledTimes(1);
  expect(requiredProps.updateSection).toHaveBeenCalledWith('');