2 files changed, 150 insertions, 0 deletions
diff --git a/webapp/tests/components/admin_console/__snapshots__/color_setting.test.jsx.snap b/webapp/tests/components/admin_console/__snapshots__/color_setting.test.jsx.snap
new file mode 100644
index 000000000..7b8c934ce
--- /dev/null
+++ b/webapp/tests/components/admin_console/__snapshots__/color_setting.test.jsx.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ColorSetting should match snapshot, all 1`] = `
+<Settings
+  helpText="helptext"
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={false}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;
+
+exports[`components/ColorSetting should match snapshot, disabled 1`] = `
+<Settings
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={true}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;
+
+exports[`components/ColorSetting should match snapshot, no help text 1`] = `
+<Settings
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={false}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;
diff --git a/webapp/tests/components/admin_console/color_setting.test.jsx b/webapp/tests/components/admin_console/color_setting.test.jsx
new file mode 100644
index 000000000..a1c44a037
--- /dev/null
+++ b/webapp/tests/components/admin_console/color_setting.test.jsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import ColorSetting from 'components/admin_console/color_setting.jsx';
+
+describe('components/ColorSetting', () => {
+    test('should match snapshot, all', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                helpText='helptext'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={false}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, no help text', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={false}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, disabled', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={true}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});