Migrated removed_from_channel_modal to be Pure and use Redux (matterm…

…ost#1839)

* Migrated to redux
* Removed usage of BrowserStore and jQuery
* Added usage of react-bootstrap's Modal and openModal/closeModal
actions
* Added unit tests

components/removed_from_channel_modal/index.js

@@ -11,14 +11,14 @@ import RemovedFromChannelModal from './removed_from_channel_modal';
 
 function mapStateToProps(state) {
  return {
- currentUserId: getCurrentUserId(state),
+ currentUser: getCurrentUser(state),
  };
 }
 
 function mapDispatchToProps(dispatch) {
  return {
  actions: bindActionCreators({
- goToLastViewedChannel,
+ closeModal,
  }, dispatch),
  };
 }

components/removed_from_channel_modal/removed_from_channel_modal.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Modal} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
+import {Modal} from 'react-bootstrap';
 
 export default class RemovedFromChannelModal extends React.PureComponent {
  static propTypes = {
@@ -100,4 +101,4 @@ export default class RemovedFromChannelModal extends React.PureComponent {
  </Modal>
  );
  }
-}
+}

tests/components/removed_from_channel_modal/__snapshots__/removed_from_channel_modal.test.jsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/AddUsersToTeam should match snapshot 1`] = `
+<Modal
+ animation={true}
+ autoFocus={true}
+ backdrop={true}
+ bsClass="modal"
+ dialogComponentClass={[Function]}
+ enforceFocus={true}
+ id="removed_from_channel"
+ keyboard={true}
+ manager={
+ ModalManager {
+ "add": [Function],
+ "containers": Array [],
+ "data": Array [],
+ "handleContainerOverflow": true,
+ "hideSiblingNodes": true,
+ "isTopModal": [Function],
+ "modals": Array [],
+ "remove": [Function],
+ }
+ }
+ onExited={[Function]}
+ onHide={[Function]}
+ renderBackdrop={[Function]}
+ restoreFocus={true}
+ show={true}
+>
+ <ModalHeader
+ bsClass="modal-header"
+ closeButton={true}
+ closeLabel="Close"
+ >
+ <ModalTitle
+ bsClass="modal-title"
+ componentClass="h4"
+ >
+ <FormattedMessage
+ defaultMessage="Removed from "
+ id="removed_channel.from"
+ values={Object {}}
+ />
+ <span
+ className="name"
+ >
+ test-channel
+ </span>
+ </ModalTitle>
+ </ModalHeader>
+ <ModalBody
+ bsClass="modal-body"
+ componentClass="div"
+ >
+ <p>
+ <FormattedMessage
+ defaultMessage="{remover} removed you from {channel}"
+ id="removed_channel.remover"
+ values={
+ Object {
+ "channel": "test-channel",
+ "remover": "Administrator",
+ }
+ }
+ />
+ </p>
+ </ModalBody>
+ <ModalFooter
+ bsClass="modal-footer"
+ componentClass="div"
+ >
+ <button
+ className="btn btn-primary"
+ data-dismiss="modal"
+ onClick={[Function]}
+ type="button"
+ >
+ <FormattedMessage
+ defaultMessage="Okay"
+ id="removed_channel.okay"
+ values={Object {}}
+ />
+ </button>
+ </ModalFooter>
+</Modal>
+`;

tests/components/removed_from_channel_modal/removed_from_channel_modal.test.jsx

@@ -0,0 +1,81 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {shallow} from 'enzyme';
+import {Modal} from 'react-bootstrap';
+
+import {mountWithIntl} from 'tests/helpers/intl-test-helper.jsx';
+
+import RemovedFromChannelModal from 'components/removed_from_channel_modal/removed_from_channel_modal';
+
+describe('components/AddUsersToTeam', () => {
+ const baseProps = {
+ defaultChannel: {
+ name: 'town-square',
+ },
+ currentUser: {
+ id: 'current_user_id',
+ },
+ channelName: 'test-channel',
+ remover: 'Administrator',
+ actions: {
+ closeModal: jest.fn(),
+ },
+ };
+
+ test('should match snapshot', () => {
+ const wrapper = shallow(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should have state "show" equals true on mount', () => {
+ const wrapper = shallow(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+
+ expect(wrapper.state('show')).toBe(true);
+ });
+
+ test('should run handleClose on exit', () => {
+ const wrapper = shallow(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+ wrapper.find('#removed_from_channel button.btn-primary').simulate('click');
+ expect(wrapper.state('show')).toBe(false);
+ });
+
+ test('should display correct props on Modal.Title and Modal.Body', () => {
+ const wrapper = mountWithIntl(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+
+ expect(wrapper.find('.modal-title').text()).toBe('Removed from test-channel');
+ expect(wrapper.find('.modal-body').text()).toBe('Administrator removed you from test-channel');
+ });
+
+ test('should fallback to default text on Modal.Body', () => {
+ baseProps.channelName = null;
+ baseProps.remover = null;
+
+ const wrapper = mountWithIntl(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+
+ expect(wrapper.find('.modal-title').text()).toBe('Removed from the channel');
+ expect(wrapper.find('.modal-body').text()).toBe('Someone removed you from the channel');
+ });
+
+ test('should run closeModal after modal exited', () => {
+ const wrapper = shallow(
+ <RemovedFromChannelModal {...baseProps}/>
+ );
+
+ wrapper.find(Modal).first().props().onExited();
+ expect(baseProps.actions.closeModal).toHaveBeenCalledTimes(1);
+ });
+});