summaryrefslogtreecommitdiffstats
path: root/webapp/tests
diff options
context:
space:
mode:
authorJoram Wilander <jwawilander@gmail.com>2017-05-17 11:29:41 -0400
committerCorey Hulen <corey@hulen.com>2017-05-17 08:29:41 -0700
commit017cd2a9575149bb87f382f441b9c960b6816c9d (patch)
treecc1530ac9ab8796bf67f85eb11fa3aba114fd3df /webapp/tests
parenta84a300947e3995945db2789dbf062c2e18c7b8e (diff)
downloadchat-017cd2a9575149bb87f382f441b9c960b6816c9d.tar.gz
chat-017cd2a9575149bb87f382f441b9c960b6816c9d.tar.bz2
chat-017cd2a9575149bb87f382f441b9c960b6816c9d.zip
PLT-6406 Migrate new channel modal to be pure and use redux (#6416)
* Migrate new channel modal to be pure and use redux * Add component tests
Diffstat (limited to 'webapp/tests')
-rw-r--r--webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap733
-rw-r--r--webapp/tests/components/new_channel_modal.test.jsx79
2 files changed, 812 insertions, 0 deletions
diff --git a/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap b/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
new file mode 100644
index 000000000..67194d321
--- /dev/null
+++ b/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
@@ -0,0 +1,733 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/NewChannelModal should match snapshot, modal not showing 1`] = `
+<span>
+ <Modal
+ animation={true}
+ autoFocus={true}
+ backdrop={true}
+ bsClass="modal"
+ bsSize="large"
+ dialogClassName="new-channel__modal"
+ dialogComponentClass={[Function]}
+ enforceFocus={true}
+ keyboard={true}
+ manager={
+ ModalManager {
+ "containers": Array [],
+ "data": Array [],
+ "handleContainerOverflow": true,
+ "hideSiblingNodes": true,
+ "modals": Array [],
+ }
+ }
+ onHide={[Function]}
+ renderBackdrop={[Function]}
+ restoreFocus={true}
+ show={true}
+ >
+ <ModalHeader
+ aria-label="Close"
+ bsClass="modal-header"
+ closeButton={true}
+ >
+ <ModalTitle
+ bsClass="modal-title"
+ componentClass="h4"
+ >
+ <FormattedMessage
+ defaultMessage="New Channel"
+ id="channel_modal.modalTitle"
+ values={Object {}}
+ />
+ </ModalTitle>
+ </ModalHeader>
+ <form
+ className="form-horizontal"
+ role="form"
+ >
+ <ModalBody
+ bsClass="modal-body"
+ componentClass="div"
+ >
+ <div>
+ <div
+ className="modal-intro"
+ >
+ <FormattedMessage
+ defaultMessage="Create a new public channel anyone can join. "
+ id="channel_modal.publicChannel2"
+ values={Object {}}
+ />
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Create a private channel"
+ id="channel_modal.privateGroup2"
+ values={Object {}}
+ />
+ </a>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <label
+ className="col-sm-3 form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Name"
+ id="channel_modal.name"
+ values={Object {}}
+ />
+ </label>
+ <div
+ className="col-sm-9"
+ >
+ <input
+ autoFocus={true}
+ className="form-control"
+ maxLength={22}
+ onChange={[Function]}
+ placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+ tabIndex="1"
+ type="text"
+ value="testchannel"
+ />
+ <p
+ className="input__help dark"
+ >
+ URL: /testchannel (
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Edit"
+ id="channel_modal.edit"
+ values={Object {}}
+ />
+ </a>
+ )
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Purpose"
+ id="channel_modal.purpose"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="250"
+ onChange={[Function]}
+ placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+ rows="4"
+ tabIndex="2"
+ value=""
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Describe how this channel should be used."
+ id="channel_modal.descriptionHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group less"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Header"
+ id="channel_modal.header"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="1024"
+ onChange={[Function]}
+ placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+ rows="4"
+ tabIndex="2"
+ value=""
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+ id="channel_modal.headerHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ </ModalBody>
+ <ModalFooter
+ bsClass="modal-footer"
+ componentClass="div"
+ >
+ <button
+ className="btn btn-default"
+ onClick={[Function]}
+ type="button"
+ >
+ <FormattedMessage
+ defaultMessage="Cancel"
+ id="channel_modal.cancel"
+ values={Object {}}
+ />
+ </button>
+ <button
+ className="btn btn-primary"
+ onClick={[Function]}
+ tabIndex="3"
+ type="submit"
+ >
+ <FormattedMessage
+ defaultMessage="Create New Channel"
+ id="channel_modal.createNew"
+ values={Object {}}
+ />
+ </button>
+ </ModalFooter>
+ </form>
+ </Modal>
+</span>
+`;
+
+exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
+<span>
+ <Modal
+ animation={true}
+ autoFocus={true}
+ backdrop={true}
+ bsClass="modal"
+ bsSize="large"
+ dialogClassName="new-channel__modal"
+ dialogComponentClass={[Function]}
+ enforceFocus={true}
+ keyboard={true}
+ manager={
+ ModalManager {
+ "containers": Array [],
+ "data": Array [],
+ "handleContainerOverflow": true,
+ "hideSiblingNodes": true,
+ "modals": Array [],
+ }
+ }
+ onHide={[Function]}
+ renderBackdrop={[Function]}
+ restoreFocus={true}
+ show={true}
+ >
+ <ModalHeader
+ aria-label="Close"
+ bsClass="modal-header"
+ closeButton={true}
+ >
+ <ModalTitle
+ bsClass="modal-title"
+ componentClass="h4"
+ >
+ <FormattedMessage
+ defaultMessage="New Channel"
+ id="channel_modal.modalTitle"
+ values={Object {}}
+ />
+ </ModalTitle>
+ </ModalHeader>
+ <form
+ className="form-horizontal"
+ role="form"
+ >
+ <ModalBody
+ bsClass="modal-body"
+ componentClass="div"
+ >
+ <div>
+ <div
+ className="modal-intro"
+ >
+ <FormattedMessage
+ defaultMessage="Create a new public channel anyone can join. "
+ id="channel_modal.publicChannel2"
+ values={Object {}}
+ />
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Create a private channel"
+ id="channel_modal.privateGroup2"
+ values={Object {}}
+ />
+ </a>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <label
+ className="col-sm-3 form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Name"
+ id="channel_modal.name"
+ values={Object {}}
+ />
+ </label>
+ <div
+ className="col-sm-9"
+ >
+ <input
+ autoFocus={true}
+ className="form-control"
+ maxLength={22}
+ onChange={[Function]}
+ placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+ tabIndex="1"
+ type="text"
+ value="testchannel"
+ />
+ <p
+ className="input__help dark"
+ >
+ URL: /testchannel (
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Edit"
+ id="channel_modal.edit"
+ values={Object {}}
+ />
+ </a>
+ )
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Purpose"
+ id="channel_modal.purpose"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="250"
+ onChange={[Function]}
+ placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+ rows="4"
+ tabIndex="2"
+ value=""
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Describe how this channel should be used."
+ id="channel_modal.descriptionHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group less"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Header"
+ id="channel_modal.header"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="1024"
+ onChange={[Function]}
+ placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+ rows="4"
+ tabIndex="2"
+ value=""
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+ id="channel_modal.headerHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ </ModalBody>
+ <ModalFooter
+ bsClass="modal-footer"
+ componentClass="div"
+ >
+ <button
+ className="btn btn-default"
+ onClick={[Function]}
+ type="button"
+ >
+ <FormattedMessage
+ defaultMessage="Cancel"
+ id="channel_modal.cancel"
+ values={Object {}}
+ />
+ </button>
+ <button
+ className="btn btn-primary"
+ onClick={[Function]}
+ tabIndex="3"
+ type="submit"
+ >
+ <FormattedMessage
+ defaultMessage="Create New Channel"
+ id="channel_modal.createNew"
+ values={Object {}}
+ />
+ </button>
+ </ModalFooter>
+ </form>
+ </Modal>
+</span>
+`;
+
+exports[`components/NewChannelModal should match snapshot, private channel filled in header and purpose 1`] = `
+<span>
+ <Modal
+ animation={true}
+ autoFocus={true}
+ backdrop={true}
+ bsClass="modal"
+ bsSize="large"
+ dialogClassName="new-channel__modal"
+ dialogComponentClass={[Function]}
+ enforceFocus={true}
+ keyboard={true}
+ manager={
+ ModalManager {
+ "containers": Array [],
+ "data": Array [],
+ "handleContainerOverflow": true,
+ "hideSiblingNodes": true,
+ "modals": Array [],
+ }
+ }
+ onHide={[Function]}
+ renderBackdrop={[Function]}
+ restoreFocus={true}
+ show={true}
+ >
+ <ModalHeader
+ aria-label="Close"
+ bsClass="modal-header"
+ closeButton={true}
+ >
+ <ModalTitle
+ bsClass="modal-title"
+ componentClass="h4"
+ >
+ <FormattedMessage
+ defaultMessage="New Channel"
+ id="channel_modal.modalTitle"
+ values={Object {}}
+ />
+ </ModalTitle>
+ </ModalHeader>
+ <form
+ className="form-horizontal"
+ role="form"
+ >
+ <ModalBody
+ bsClass="modal-body"
+ componentClass="div"
+ >
+ <div>
+ <div
+ className="modal-intro"
+ >
+ <FormattedMessage
+ defaultMessage="Create a new private channel with restricted membership. "
+ id="channel_modal.privateGroup1"
+ values={Object {}}
+ />
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Create a public channel"
+ id="channel_modal.publicChannel1"
+ values={Object {}}
+ />
+ </a>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <label
+ className="col-sm-3 form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Name"
+ id="channel_modal.name"
+ values={Object {}}
+ />
+ </label>
+ <div
+ className="col-sm-9"
+ >
+ <input
+ autoFocus={true}
+ className="form-control"
+ maxLength={22}
+ onChange={[Function]}
+ placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+ tabIndex="1"
+ type="text"
+ value="testchannel"
+ />
+ <p
+ className="input__help dark"
+ >
+ URL: /testchannel (
+ <a
+ href="#"
+ onClick={[Function]}
+ >
+ <FormattedMessage
+ defaultMessage="Edit"
+ id="channel_modal.edit"
+ values={Object {}}
+ />
+ </a>
+ )
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Purpose"
+ id="channel_modal.purpose"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="250"
+ onChange={[Function]}
+ placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+ rows="4"
+ tabIndex="2"
+ value="some purpose"
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Describe how this channel should be used."
+ id="channel_modal.descriptionHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ <div
+ className="form-group less"
+ >
+ <div
+ className="col-sm-3"
+ >
+ <label
+ className="form__label control-label"
+ >
+ <FormattedMessage
+ defaultMessage="Header"
+ id="channel_modal.header"
+ values={Object {}}
+ />
+ </label>
+ <label
+ className="form__label light"
+ >
+ <FormattedMessage
+ defaultMessage="(optional)"
+ id="channel_modal.optional"
+ values={Object {}}
+ />
+ </label>
+ </div>
+ <div
+ className="col-sm-9"
+ >
+ <textarea
+ className="form-control no-resize"
+ maxLength="1024"
+ onChange={[Function]}
+ placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+ rows="4"
+ tabIndex="2"
+ value="some header"
+ />
+ <p
+ className="input__help"
+ >
+ <FormattedMessage
+ defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+ id="channel_modal.headerHelp"
+ values={Object {}}
+ />
+ </p>
+ </div>
+ </div>
+ </ModalBody>
+ <ModalFooter
+ bsClass="modal-footer"
+ componentClass="div"
+ >
+ <button
+ className="btn btn-default"
+ onClick={[Function]}
+ type="button"
+ >
+ <FormattedMessage
+ defaultMessage="Cancel"
+ id="channel_modal.cancel"
+ values={Object {}}
+ />
+ </button>
+ <button
+ className="btn btn-primary"
+ onClick={[Function]}
+ tabIndex="3"
+ type="submit"
+ >
+ <FormattedMessage
+ defaultMessage="Create New Channel"
+ id="channel_modal.createNew"
+ values={Object {}}
+ />
+ </button>
+ </ModalFooter>
+ </form>
+ </Modal>
+</span>
+`;
diff --git a/webapp/tests/components/new_channel_modal.test.jsx b/webapp/tests/components/new_channel_modal.test.jsx
new file mode 100644
index 000000000..358a839a3
--- /dev/null
+++ b/webapp/tests/components/new_channel_modal.test.jsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Constants from 'utils/constants.jsx';
+
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal.jsx';
+
+describe('components/NewChannelModal', () => {
+ afterEach(() => {
+ global.window.mm_config = null;
+ global.window.mm_license = null;
+ });
+
+ test('should match snapshot, modal not showing', () => {
+ function emptyFunction() {} //eslint-disable-line no-empty-function
+
+ global.window.mm_license = {};
+ global.window.mm_license.IsLicensed = 'false';
+
+ const wrapper = shallow(
+ <NewChannelModal
+ show={true}
+ channelType={Constants.OPEN_CHANNEL}
+ channelData={{name: 'testchannel', displayName: 'testchannel', header: '', purpose: ''}}
+ onSubmitChannel={emptyFunction}
+ onModalDismissed={emptyFunction}
+ onTypeSwitched={emptyFunction}
+ onChangeURLPressed={emptyFunction}
+ onDataChanged={emptyFunction}
+ />
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, modal showing', () => {
+ function emptyFunction() {} //eslint-disable-line no-empty-function
+
+ global.window.mm_license = {};
+ global.window.mm_license.IsLicensed = 'false';
+
+ const wrapper = shallow(
+ <NewChannelModal
+ show={true}
+ channelType={Constants.OPEN_CHANNEL}
+ channelData={{name: 'testchannel', displayName: 'testchannel', header: '', purpose: ''}}
+ onSubmitChannel={emptyFunction}
+ onModalDismissed={emptyFunction}
+ onTypeSwitched={emptyFunction}
+ onChangeURLPressed={emptyFunction}
+ onDataChanged={emptyFunction}
+ />
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('should match snapshot, private channel filled in header and purpose', () => {
+ function emptyFunction() {} //eslint-disable-line no-empty-function
+
+ global.window.mm_license = {};
+ global.window.mm_license.IsLicensed = 'false';
+
+ const wrapper = shallow(
+ <NewChannelModal
+ show={true}
+ channelType={Constants.PRIVATE_CHANNEL}
+ channelData={{name: 'testchannel', displayName: 'testchannel', header: 'some header', purpose: 'some purpose'}}
+ onSubmitChannel={emptyFunction}
+ onModalDismissed={emptyFunction}
+ onTypeSwitched={emptyFunction}
+ onChangeURLPressed={emptyFunction}
+ onDataChanged={emptyFunction}
+ />
+ );
+ expect(wrapper).toMatchSnapshot();
+ });
+});