Experimental implementation for webapp plugins (#7185)

* Start of experimental implementation for webapp plugins

* Updates to webapp plugin architecture

* Update pluggable test

* Remove debug code

2 files changed, 161 insertions, 0 deletions

diff --git a/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap b/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap
new file mode 100644
index 000000000..2f7a5e232
--- /dev/null
+++ b/webapp/tests/plugins/__snapshots__/pluggable.test.jsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugins/Pluggable should match snapshot with no overridden component 1`] = `
+<IntlProvider>
+  <Pluggable
+    components={Object {}}
+    theme={Object {}}
+  >
+    <ProfilePopover
+      hasMention={false}
+      isRHS={false}
+      src="src"
+      theme={Object {}}
+      user={Object {}}
+    >
+      <Popover
+        bsClass="popover"
+        id="user-profile-popover"
+        placement="right"
+        theme={Object {}}
+        title="@undefined"
+      >
+        <div
+          className="popover right"
+          id="user-profile-popover"
+          role="tooltip"
+          style={
+            Object {
+              "display": "block",
+              "left": undefined,
+              "top": undefined,
+            }
+          }
+          theme={Object {}}
+        >
+          <div
+            className="arrow"
+            style={
+              Object {
+                "left": undefined,
+                "top": undefined,
+              }
+            }
+          />
+          <h3
+            className="popover-title"
+          >
+            @undefined
+          </h3>
+          <div
+            className="popover-content"
+          >
+            <img
+              className="user-popover__image"
+              height="128"
+              src="src"
+              width="128"
+            />
+            <div
+              className="popover__row first"
+              data-toggle="tooltip"
+            >
+              <a
+                className="text-nowrap text-lowercase user-popover__email"
+                href="#"
+                onClick={[Function]}
+              >
+                <i
+                  className="fa fa-paper-plane"
+                />
+                <FormattedMessage
+                  defaultMessage="Send Message"
+                  id="user_profile.send.dm"
+                  values={Object {}}
+                >
+                  <span>
+                    Send Message
+                  </span>
+                </FormattedMessage>
+              </a>
+            </div>
+          </div>
+        </div>
+      </Popover>
+    </ProfilePopover>
+  </Pluggable>
+</IntlProvider>
+`;
+
+exports[`plugins/Pluggable should match snapshot with overridden component 1`] = `
+<Pluggable
+  components={
+    Object {
+      "ProfilePopover": [Function],
+    }
+  }
+  theme={Object {}}
+>
+  <ProfilePopoverPlugin
+    hasMention={false}
+    isRHS={false}
+    src="src"
+    theme={Object {}}
+    user={Object {}}
+  >
+    <span>
+      ProfilePopoverPlugin
+    </span>
+  </ProfilePopoverPlugin>
+</Pluggable>
+`;
diff --git a/webapp/tests/plugins/pluggable.test.jsx b/webapp/tests/plugins/pluggable.test.jsx
new file mode 100644
index 000000000..96dedb037
--- /dev/null
+++ b/webapp/tests/plugins/pluggable.test.jsx
@@ -0,0 +1,50 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {mount} from 'enzyme';
+import {IntlProvider} from 'react-intl';
+
+import Pluggable from 'plugins/pluggable/pluggable.jsx';
+import ProfilePopover from 'components/profile_popover.jsx';
+
+class ProfilePopoverPlugin extends React.PureComponent {
+    render() {
+        return <span>{'ProfilePopoverPlugin'}</span>;
+    }
+}
+
+describe('plugins/Pluggable', () => {
+    test('should match snapshot with overridden component', () => {
+        const wrapper = mount(
+            <Pluggable
+                components={{ProfilePopover: ProfilePopoverPlugin}}
+                theme={{}}
+            >
+                <ProfilePopover
+                    user={{}}
+                    src='src'
+                />
+            </Pluggable>
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot with no overridden component', () => {
+        window.mm_config = {};
+        const wrapper = mount(
+            <IntlProvider>
+                <Pluggable
+                    components={{}}
+                    theme={{}}
+                >
+                    <ProfilePopover
+                        user={{}}
+                        src='src'
+                    />
+                </Pluggable>
+            </IntlProvider>
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});