Fixes #13485 : Migrate 'components/tutorial/tutorial_tip' module and …

…associated tests to TypeScript (#4589) * migrated tutorial tips to ts * updated tests * minor changes * mis removed jsx for one file * removed mistakenly added eslint rule * removed lock file from commit * removed spacing * removed old snapshot * small nit fixed Co-authored-by: mattermod <[email protected]>
mattermost · Jan 6, 2020 · bad4409 · bad4409
1 parent 60fb340
commit bad4409
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 50 deletions.
diff --git a/.../__snapshots__/tutorial_tip.test.jsx.snap → .../__snapshots__/tutorial_tip.test.tsx.snap b/.../__snapshots__/tutorial_tip.test.jsx.snap → .../__snapshots__/tutorial_tip.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/tutorial/tutorial_tip/tutorial_tip.jsx should match snapshot 1`] = `
+exports[`components/tutorial/tutorial_tip/tutorial_tip should match snapshot 1`] = `
 <div
  className="tip-div "
  id="tipButton"
@@ -37,7 +37,6 @@ exports[`components/tutorial/tutorial_tip/tutorial_tip.jsx should match snapshot
  <div
  className="arrow"
  />
- 1
  <div
  className="tutorial__footer"
  >

diff --git a/components/tutorial/tutorial_tip/index.js b/components/tutorial/tutorial_tip/index.js
@@ -10,7 +10,7 @@ import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {closeMenu as closeRhsMenu} from 'actions/views/rhs';
 import {Preferences} from 'utils/constants';
 
-import TutorialTip from './tutorial_tip.jsx';
+import TutorialTip from './tutorial_tip';
 
 function mapStateToProps(state) {
  const currentUserId = getCurrentUserId(state);

diff --git a/...torial/tutorial_tip/tutorial_tip.test.jsx → ...torial/tutorial_tip/tutorial_tip.test.tsx b/...torial/tutorial_tip/tutorial_tip.test.jsx → ...torial/tutorial_tip/tutorial_tip.test.tsx
@@ -2,24 +2,23 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, ShallowWrapper} from 'enzyme';
 
-import TutorialTip from 'components/tutorial/tutorial_tip/tutorial_tip.jsx';
+import TutorialTip from 'components/tutorial/tutorial_tip/tutorial_tip';
 import {Constants, Preferences} from 'utils/constants';
 
-describe('components/tutorial/tutorial_tip/tutorial_tip.jsx', () => {
+describe('components/tutorial/tutorial_tip/tutorial_tip', () => {
  jest.mock('actions/diagnostics_actions.jsx');
 
  const currentUserId = 'currentUserId';
-
  const requiredProps = {
  currentUserId,
  step: 1,
  actions: {
  closeRhsMenu: jest.fn(),
  savePreferences: jest.fn(),
  },
- screens: [1, 2, 3],
+ screens: [<></>, <></>, <></>],
  placement: 'right',
  };
 
@@ -33,7 +32,9 @@ describe('components/tutorial/tutorial_tip/tutorial_tip.jsx', () => {
  const closeRhsMenu = jest.fn();
 
  const props = {...requiredProps, actions: {closeRhsMenu, savePreferences}};
- const wrapper = shallow(<TutorialTip {...props}/>);
+ const wrapper: ShallowWrapper<any, any, TutorialTip> = shallow(
+ <TutorialTip {...props}/>
+ );
 
  wrapper.instance().handleNext();
  expect(closeRhsMenu).toHaveBeenCalledTimes(0);
@@ -49,7 +50,9 @@ describe('components/tutorial/tutorial_tip/tutorial_tip.jsx', () => {
  const closeRhsMenu = jest.fn();
 
  const props = {...requiredProps, actions: {closeRhsMenu, savePreferences}};
- const wrapper = shallow(<TutorialTip {...props}/>);
+ const wrapper: ShallowWrapper<any, any, TutorialTip> = shallow(
+ <TutorialTip {...props}/>
+ );
 
  wrapper.instance().handleNext();
  wrapper.instance().handleNext();
@@ -68,10 +71,14 @@ describe('components/tutorial/tutorial_tip/tutorial_tip.jsx', () => {
  });
 
  test('should have called mockEvent.preventDefault when skipTutorial', () => {
- const mockEvent = {preventDefault: jest.fn()};
+ const mockEvent = {
+ preventDefault: jest.fn()
+ } as unknown as React.MouseEvent<HTMLAnchorElement>;
 
  const props = {...requiredProps};
- const wrapper = shallow(<TutorialTip {...props}/>);
+ const wrapper: ShallowWrapper<any, any, TutorialTip> = shallow(
+ <TutorialTip {...props}/>
+ );
 
  wrapper.instance().skipTutorial(mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
@@ -80,10 +87,14 @@ describe('components/tutorial/tutorial_tip/tutorial_tip.jsx', () => {
  test('should have called both closeRhsMenu and savePreferences when skipTutorial', () => {
  const savePreferences = jest.fn();
  const closeRhsMenu = jest.fn();
- const mockEvent = {preventDefault: jest.fn()};
+ const mockEvent = {
+ preventDefault: jest.fn()
+ } as unknown as React.MouseEvent<HTMLAnchorElement>;
 
  const props = {...requiredProps, actions: {closeRhsMenu, savePreferences}};
- const wrapper = shallow(<TutorialTip {...props}/>);
+ const wrapper: ShallowWrapper<any, any, TutorialTip> = shallow(
+ <TutorialTip {...props}/>
+ );
 
  wrapper.instance().skipTutorial(mockEvent);
 

diff --git a/...ts/tutorial/tutorial_tip/tutorial_tip.jsx → ...ts/tutorial/tutorial_tip/tutorial_tip.tsx b/...ts/tutorial/tutorial_tip/tutorial_tip.jsx → ...ts/tutorial/tutorial_tip/tutorial_tip.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Overlay} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
@@ -14,41 +13,58 @@ import tutorialGifWhite from 'images/tutorialTipWhite.gif';
 const Preferences = Constants.Preferences;
 const TutorialSteps = Constants.TutorialSteps;
 
-export default class TutorialTip extends React.Component {
- static propTypes = {
- currentUserId: PropTypes.string.isRequired,
- step: PropTypes.number.isRequired,
- screens: PropTypes.array.isRequired,
- placement: PropTypes.string.isRequired,
- overlayClass: PropTypes.string,
- diagnosticsTag: PropTypes.string,
- actions: PropTypes.shape({
- closeRhsMenu: PropTypes.func.isRequired,
- savePreferences: PropTypes.func.isRequired,
- }),
- }
+type Preference = {
+ user_id: string;
+ category: string;
+ name: string;
+ value: string;
+}
+
+type Props = {
+ currentUserId: string;
+ step: number;
+ screens: Array<JSX.Element>;
+ placement: string;
+ overlayClass: string;
+ diagnosticsTag?: string;
+ actions: {
+ closeRhsMenu: () => void;
+ savePreferences: (currentUserId: string, preferences: Array<Preference>) => void;
+ };
+}
+
+type State = {
+ currentScreen: number;
+ show: boolean;
+}
+
+export default class TutorialTip extends React.Component<Props, State> {
+ public targetRef: React.RefObject<HTMLImageElement>;
 
- static defaultProps = {
+ public static defaultProps: Partial<Props> = {
  overlayClass: '',
  }
 
- constructor(props) {
+ public constructor(props: Props) {
  super(props);
 
- this.state = {currentScreen: 0, show: false};
+ this.state = {
+ currentScreen: 0,
+ show: false
+ };
 
  this.targetRef = React.createRef();
  }
 
- show = () => {
+ private show = (): void => {
  this.setState({show: true});
  }
 
- hide = () => {
+ private hide = (): void => {
  this.setState({show: false});
  }
 
- handleNext = () => {
+ public handleNext = (): void => {
  if (this.state.currentScreen < this.props.screens.length - 1) {
  this.setState({currentScreen: this.state.currentScreen + 1});
  return;
@@ -86,7 +102,7 @@ export default class TutorialTip extends React.Component {
  savePreferences(currentUserId, preferences);
  }
 
- skipTutorial = (e) => {
+ public skipTutorial = (e: React.MouseEvent<HTMLAnchorElement>): void => {
  e.preventDefault();
 
  if (this.props.diagnosticsTag) {
@@ -109,27 +125,29 @@ export default class TutorialTip extends React.Component {
  actions.savePreferences(currentUserId, preferences);
  }
 
- handleCircleClick = (e, screen) => {
+ private handleCircleClick = (e: React.MouseEvent<HTMLAnchorElement>, screen: number): void => {
  e.preventDefault();
  this.setState({currentScreen: screen});
  }
 
- getTarget = () => {
+ private getTarget = (): HTMLImageElement | null => {
  return this.targetRef.current;
  }
 
- render() {
- const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? (
- <FormattedMessage
- id='tutorial_tip.ok'
- defaultMessage='Okay'
- />
- ) : (
- <FormattedMessage
- id='tutorial_tip.next'
- defaultMessage='Next'
- />
- );
+ public render(): JSX.Element {
+ const buttonText = this.state.currentScreen === this.props.screens.length - 1 ?
+ (
+ <FormattedMessage
+ id='tutorial_tip.ok'
+ defaultMessage='Okay'
+ />
+ ) :
+ (
+ <FormattedMessage
+ id='tutorial_tip.next'
+ defaultMessage='Next'
+ />
+ );
 
  const dots = [];
  if (this.props.screens.length > 1) {
@@ -151,7 +169,7 @@ export default class TutorialTip extends React.Component {
  }
  }
 
- var tutorialGifImage = tutorialGif;
+ let tutorialGifImage = tutorialGif;
  if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar' || this.props.overlayClass === 'tip-overlay--header--up') {
  tutorialGifImage = tutorialGifWhite;
  }

diff --git a/types/images.d.ts b/types/images.d.ts
@@ -3,3 +3,4 @@
 
 declare module '*.jpg';
 declare module '*.png';
+declare module '*.gif';