From 017cd2a9575149bb87f382f441b9c960b6816c9d Mon Sep 17 00:00:00 2001
From: Joram Wilander <jwawilander@gmail.com>
Date: Wed, 17 May 2017 11:29:41 -0400
Subject: 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
---
 .../__snapshots__/new_channel_modal.test.jsx.snap  | 733 +++++++++++++++++++++
 webapp/tests/components/new_channel_modal.test.jsx |  79 +++
 2 files changed, 812 insertions(+)
 create mode 100644 webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
 create mode 100644 webapp/tests/components/new_channel_modal.test.jsx

(limited to 'webapp/tests/components')

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();
+    });
+});
-- 
cgit v1.2.3-1-g7c22