Update unit test: use default theme, snapshot on wrapped elements and removal of unnecessary adapter (#2171)

* use default theme when unit testing the component * update snapshots by getting wrapped elements only * fix merge conflicts
2018-10-01 15:11:00 +08:00 · 2018-10-01 15:11:00 +08:00 · cb1e286e4f
commit cb1e286e4f
parent fb2f711359
22 changed files with 759 additions and 1295 deletions
--- a/app/components/announcement_banner/announcement_banner.test.js
+++ b/app/components/announcement_banner/announcement_banner.test.js
@ -4,6 +4,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import AnnouncementBanner from './announcement_banner.js';

 jest.useFakeTimers();
@ -16,7 +18,7 @@ describe('AnnouncementBanner', () => {
        bannerText: 'Banner Text',
        bannerTextColor: '#fff',
        navigator: {},
-        theme: {},
+        theme: Preferences.THEMES.default,
    };

    test('should match snapshot', () => {
--- a/app/components/custom_list/snapshots/index.test.js.snap
+++ b/app/components/custom_list/snapshots/index.test.js.snap
@ -27,7 +27,7 @@ exports[`CustomList should match snapshot 1`] = `
    scrollRenderAheadDistance={0}
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#ffffff",
        "flex": 1,
      }
    }
@ -42,7 +42,7 @@ exports[`CustomList should match snapshot, renderFooter 2`] = `
  style={
    Object {
      "alignItems": "center",
-      "backgroundColor": "#aaa",
+      "backgroundColor": "#ffffff",
      "height": 70,
      "justifyContent": "center",
    }
@ -53,7 +53,7 @@ exports[`CustomList should match snapshot, renderFooter 2`] = `
    id="mobile.loading_members"
    style={
      Object {
-        "color": "rgba(170,170,170,0.6)",
+        "color": "rgba(61,60,64,0.6)",
      }
    }
  />
@ -64,14 +64,14 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
 <Component
  style={
    Object {
-      "backgroundColor": "#aaa",
+      "backgroundColor": "#ffffff",
    }
  }
 >
  <Component
    style={
      Object {
-        "backgroundColor": "rgba(170,170,170,0.07)",
+        "backgroundColor": "rgba(61,60,64,0.07)",
        "paddingLeft": 10,
        "paddingVertical": 2,
      }
@ -80,7 +80,7 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
    <Component
      style={
        Object {
-          "color": "#aaa",
+          "color": "#3d3c40",
          "fontWeight": "600",
        }
      }
@ -95,7 +95,7 @@ exports[`CustomList should match snapshot, renderSeparator 1`] = `
 <Component
  style={
    Object {
-      "backgroundColor": "rgba(170,170,170,0.1)",
+      "backgroundColor": "rgba(61,60,64,0.1)",
      "flex": 1,
      "height": 1,
    }
--- a/app/components/custom_list/index.test.js
+++ b/app/components/custom_list/index.test.js
@ -4,6 +4,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import {createMembersSections, loadingText} from 'app/utils/member_list';

 import CustomList from './index';
@ -13,7 +15,7 @@ describe('CustomList', () => {

    const baseProps = {
        data: [{username: 'username_1'}, {username: 'username_2'}],
-        theme: {centerChannelBg: '#aaa', centerChannelColor: '#aaa'},
+        theme: Preferences.THEMES.default,
        searching: false,
        onListEndReached: emptyFunc,
        onListEndReachedThreshold: 0,
--- a/app/components/custom_list/user_list_row/user_list_test.test.js
+++ b/app/components/custom_list/user_list_row/user_list_test.test.js
@ -2,15 +2,12 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {configure, shallow} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import {shallow} from 'enzyme';

 import Preferences from 'mattermost-redux/constants/preferences';

 import UserListRow from './user_list_row';

-configure({adapter: new Adapter()});
-
 jest.mock('react-intl');
 jest.mock('app/utils/theme', () => {
    const original = require.requireActual('app/utils/theme');
--- a/app/components/post_list/date_header/snapshots/date_header.test.js.snap
+++ b/app/components/post_list/date_header/snapshots/date_header.test.js.snap
@ -17,7 +17,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
  <Component
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#3d3c40",
        "flex": 1,
        "height": 1,
        "opacity": 0.2,
@ -36,7 +36,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
      month="short"
      style={
        Object {
-          "color": "#aaa",
+          "color": "#3d3c40",
          "fontSize": 14,
          "fontWeight": "600",
        }
@ -49,7 +49,7 @@ exports[`DateHeader component should match snapshot with suffix 1`] = `
  <Component
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#3d3c40",
        "flex": 1,
        "height": 1,
        "opacity": 0.2,
@ -76,7 +76,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
  <Component
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#3d3c40",
        "flex": 1,
        "height": 1,
        "opacity": 0.2,
@ -95,7 +95,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
      month="short"
      style={
        Object {
-          "color": "#aaa",
+          "color": "#3d3c40",
          "fontSize": 14,
          "fontWeight": "600",
        }
@ -108,7 +108,7 @@ exports[`DateHeader component should match snapshot without suffix 1`] = `
  <Component
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#3d3c40",
        "flex": 1,
        "height": 1,
        "opacity": 0.2,
--- a/app/components/post_list/date_header/date_header.test.js
+++ b/app/components/post_list/date_header/date_header.test.js
@ -6,11 +6,13 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import DateHeader from './date_header.js';

 describe('DateHeader', () => {
    const baseProps = {
-        theme: {centerChannelBg: '#aaa', centerChannelColor: '#aaa'},
+        theme: Preferences.THEMES.default,
    };

    describe('component should match snapshot', () => {
--- a/app/components/show_more_button/snapshots/show_more_button.test.js.snap
+++ b/app/components/show_more_button/snapshots/show_more_button.test.js.snap
@ -39,9 +39,9 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
  <LinearGradient
    colors={
      Array [
-        "rgba(47,62,78,0)",
-        "rgba(47,62,78,0.75)",
-        "#2f3e4e",
+        "rgba(255,255,255,0)",
+        "rgba(255,255,255,0.75)",
+        "#ffffff",
      ]
    }
    end={
@ -89,7 +89,7 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
    <Component
      style={
        Object {
-          "backgroundColor": "rgba(221,221,221,0.2)",
+          "backgroundColor": "rgba(61,60,64,0.2)",
          "flex": 1,
          "height": 1,
          "marginRight": 10,
@ -101,8 +101,8 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
      onPress={[MockFunction]}
      style={
        Object {
-          "backgroundColor": "#2f3e4e",
-          "borderColor": "rgba(221,221,221,0.2)",
+          "backgroundColor": "#ffffff",
+          "borderColor": "rgba(61,60,64,0.2)",
          "borderRadius": 4,
          "borderWidth": 1,
          "height": 37,
@ -122,7 +122,7 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
        <Component
          style={
            Object {
-              "color": undefined,
+              "color": "#2389d7",
              "fontSize": 16,
              "fontWeight": "600",
              "marginRight": 8,
@ -136,7 +136,7 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
          id="post_info.message.show_more"
          style={
            Object {
-              "color": undefined,
+              "color": "#2389d7",
              "fontSize": 13,
              "fontWeight": "600",
            }
@ -147,7 +147,7 @@ exports[`ShowMoreButton should match, full snapshot 1`] = `
    <Component
      style={
        Object {
-          "backgroundColor": "rgba(221,221,221,0.2)",
+          "backgroundColor": "rgba(61,60,64,0.2)",
          "flex": 1,
          "height": 1,
          "marginLeft": 10,
--- a/app/components/show_more_button/show_more_button.test.js
+++ b/app/components/show_more_button/show_more_button.test.js
@ -5,6 +5,8 @@ import React from 'react';
 import {TouchableOpacity} from 'react-native';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import LinearGradient from 'react-native-linear-gradient';

 import ShowMoreButton from './show_more_button';
@ -14,10 +16,7 @@ describe('ShowMoreButton', () => {
        highlight: false,
        onPress: jest.fn(),
        showMore: true,
-        theme: {
-            centerChannelBg: '#2f3e4e',
-            centerChannelColor: '#dddddd',
-        },
+        theme: Preferences.THEMES.default,
    };

    test('should match, full snapshot', () => {
--- a/app/screens/error_teams_list/snapshots/error_teams_list.test.js.snap
+++ b/app/screens/error_teams_list/snapshots/error_teams_list.test.js.snap
@ -4,7 +4,7 @@ exports[`ErrorTeamsList should match snapshot 1`] = `
 <Component
  style={
    Object {
-      "backgroundColor": undefined,
+      "backgroundColor": "#ffffff",
      "flex": 1,
    }
  }
@ -24,7 +24,34 @@ exports[`ErrorTeamsList should match snapshot 1`] = `
      }
    }
    onRetry={[Function]}
-    theme={Object {}}
+    theme={
+      Object {
+        "awayIndicator": "#ffbc42",
+        "buttonBg": "#166de0",
+        "buttonColor": "#ffffff",
+        "centerChannelBg": "#ffffff",
+        "centerChannelColor": "#3d3c40",
+        "codeTheme": "github",
+        "dndIndicator": "#f74343",
+        "errorTextColor": "#fd5960",
+        "linkColor": "#2389d7",
+        "mentionBj": "#ffffff",
+        "mentionColor": "#145dbf",
+        "mentionHighlightBg": "#ffe577",
+        "mentionHighlightLink": "#166de0",
+        "newMessageSeparator": "#ff8800",
+        "onlineIndicator": "#06d6a0",
+        "sidebarBg": "#145dbf",
+        "sidebarHeaderBg": "#1153ab",
+        "sidebarHeaderTextColor": "#ffffff",
+        "sidebarText": "#ffffff",
+        "sidebarTextActiveBorder": "#579eff",
+        "sidebarTextActiveColor": "#ffffff",
+        "sidebarTextHoverBg": "#4578bf",
+        "sidebarUnreadText": "#ffffff",
+        "type": "Mattermost",
+      }
+    }
  />
 </Component>
 `;
--- a/app/screens/error_teams_list/error_teams_list.test.js
+++ b/app/screens/error_teams_list/error_teams_list.test.js
@ -2,13 +2,13 @@
 // See LICENSE.txt for license information.

 import React from 'react';
-import {configure, shallow} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import {shallow} from 'enzyme';
+
+import Preferences from 'mattermost-redux/constants/preferences';
+
 import FailedNetworkAction from 'app/components/failed_network_action';
 import ErrorTeamsList from './error_teams_list';

-configure({adapter: new Adapter()});
-
 describe('ErrorTeamsList', () => {
    const navigator = {
        setOnNavigatorEvent: () => {}, // eslint-disable-line no-empty-function
@ -27,7 +27,7 @@ describe('ErrorTeamsList', () => {
            logout: () => {}, // eslint-disable-line no-empty-function
            selectDefaultTeam: () => {}, // eslint-disable-line no-empty-function
        },
-        theme: {},
+        theme: Preferences.THEMES.default,
        navigator,
    };

--- a/app/screens/menu_action_selector/snapshots/menu_action_selector.test.js.snap
+++ b/app/screens/menu_action_selector/snapshots/menu_action_selector.test.js.snap
--- a/app/screens/menu_action_selector/menu_action_selector.test.js
+++ b/app/screens/menu_action_selector/menu_action_selector.test.js
@ -4,6 +4,8 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {IntlProvider} from 'react-intl';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import MenuActionSelector from './menu_action_selector.js';

 jest.mock('rn-fetch-blob', () => ({
@ -76,7 +78,7 @@ describe('MenuActionSelector', () => {
        onSelect: jest.fn(),
        data: [{text: 'text', value: 'value'}],
        dataSource: null,
-        theme: {},
+        theme: Preferences.THEMES.default,
    };

    test('should match snapshot for explicit options', async () => {
@ -84,7 +86,7 @@ describe('MenuActionSelector', () => {
            <MenuActionSelector {...baseProps}/>,
            {context: {intl}},
        );
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
    });

    test('should match snapshot for users', async () => {
@ -98,10 +100,10 @@ describe('MenuActionSelector', () => {
            <MenuActionSelector {...props}/>,
            {context: {intl}},
        );
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
        wrapper.setState({isLoading: false});
        wrapper.update();
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
    });

    test('should match snapshot for channels', async () => {
@ -115,10 +117,10 @@ describe('MenuActionSelector', () => {
            <MenuActionSelector {...props}/>,
            {context: {intl}},
        );
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
        wrapper.setState({isLoading: false});
        wrapper.update();
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
    });

    test('should match snapshot for searching', async () => {
@ -134,6 +136,6 @@ describe('MenuActionSelector', () => {
        );
        wrapper.setState({isLoading: false, searching: true, term: 'name2'});
        wrapper.update();
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.getElement()).toMatchSnapshot();
    });
 });
--- a/app/screens/more_channels/snapshots/more_channels.test.js.snap
+++ b/app/screens/more_channels/snapshots/more_channels.test.js.snap
@ -18,8 +18,8 @@ exports[`MoreChannels should match snapshot 1`] = `
        inputHeight={33}
        inputStyle={
          Object {
-            "backgroundColor": "rgba(170,170,170,0.2)",
-            "color": "#aaa",
+            "backgroundColor": "rgba(61,60,64,0.2)",
+            "color": "#3d3c40",
            "fontSize": 15,
          }
        }
@ -29,10 +29,10 @@ exports[`MoreChannels should match snapshot 1`] = `
        onFocus={[Function]}
        onSearchButtonPress={[Function]}
        onSelectionChange={[Function]}
-        placeholderTextColor="rgba(170,170,170,0.5)"
-        tintColorDelete="rgba(170,170,170,0.5)"
-        tintColorSearch="rgba(170,170,170,0.5)"
-        titleCancelColor="#aaa"
+        placeholderTextColor="rgba(61,60,64,0.5)"
+        tintColorDelete="rgba(61,60,64,0.5)"
+        tintColorSearch="rgba(61,60,64,0.5)"
+        titleCancelColor="#3d3c40"
        value=""
      />
    </Component>
@ -67,10 +67,30 @@ exports[`MoreChannels should match snapshot 1`] = `
      showSections={false}
      theme={
        Object {
-          "centerChannelBg": "#aaa",
-          "centerChannelColor": "#aaa",
-          "sidebarHeaderBg": "#aaa",
-          "sidebarHeaderTextColor": "#aaa",
+          "awayIndicator": "#ffbc42",
+          "buttonBg": "#166de0",
+          "buttonColor": "#ffffff",
+          "centerChannelBg": "#ffffff",
+          "centerChannelColor": "#3d3c40",
+          "codeTheme": "github",
+          "dndIndicator": "#f74343",
+          "errorTextColor": "#fd5960",
+          "linkColor": "#2389d7",
+          "mentionBj": "#ffffff",
+          "mentionColor": "#145dbf",
+          "mentionHighlightBg": "#ffe577",
+          "mentionHighlightLink": "#166de0",
+          "newMessageSeparator": "#ff8800",
+          "onlineIndicator": "#06d6a0",
+          "sidebarBg": "#145dbf",
+          "sidebarHeaderBg": "#1153ab",
+          "sidebarHeaderTextColor": "#ffffff",
+          "sidebarText": "#ffffff",
+          "sidebarTextActiveBorder": "#579eff",
+          "sidebarTextActiveColor": "#ffffff",
+          "sidebarTextHoverBg": "#4578bf",
+          "sidebarUnreadText": "#ffffff",
+          "type": "Mattermost",
        }
      }
    />
--- a/app/screens/more_channels/more_channels.test.js
+++ b/app/screens/more_channels/more_channels.test.js
@ -4,6 +4,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import MoreChannels from './more_channels.js';

 jest.mock('react-intl');
@ -29,12 +31,7 @@ describe('MoreChannels', () => {
        currentUserId: 'current_user_id',
        currentTeamId: 'current_team_id',
        navigator,
-        theme: {
-            centerChannelBg: '#aaa',
-            centerChannelColor: '#aaa',
-            sidebarHeaderBg: '#aaa',
-            sidebarHeaderTextColor: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
        canCreateChannels: true,
        channels: [{id: 'id', name: 'name', display_name: 'display_name'}],
        closeButton: {},
--- a/app/screens/select_team/snapshots/select_team.test.js.snap
+++ b/app/screens/select_team/snapshots/select_team.test.js.snap
@ -15,7 +15,34 @@ exports[`SelectTeam should match snapshot for fail of teams 1`] = `
    }
  }
  onRetry={[Function]}
-  theme={Object {}}
+  theme={
+    Object {
+      "awayIndicator": "#ffbc42",
+      "buttonBg": "#166de0",
+      "buttonColor": "#ffffff",
+      "centerChannelBg": "#ffffff",
+      "centerChannelColor": "#3d3c40",
+      "codeTheme": "github",
+      "dndIndicator": "#f74343",
+      "errorTextColor": "#fd5960",
+      "linkColor": "#2389d7",
+      "mentionBj": "#ffffff",
+      "mentionColor": "#145dbf",
+      "mentionHighlightBg": "#ffe577",
+      "mentionHighlightLink": "#166de0",
+      "newMessageSeparator": "#ff8800",
+      "onlineIndicator": "#06d6a0",
+      "sidebarBg": "#145dbf",
+      "sidebarHeaderBg": "#1153ab",
+      "sidebarHeaderTextColor": "#ffffff",
+      "sidebarText": "#ffffff",
+      "sidebarTextActiveBorder": "#579eff",
+      "sidebarTextActiveColor": "#ffffff",
+      "sidebarTextHoverBg": "#4578bf",
+      "sidebarUnreadText": "#ffffff",
+      "type": "Mattermost",
+    }
+  }
 />
 `;

@ -23,7 +50,7 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
 <Component
  style={
    Object {
-      "backgroundColor": undefined,
+      "backgroundColor": "#ffffff",
      "flex": 1,
    }
  }
--- a/app/screens/select_team/select_team.test.js
+++ b/app/screens/select_team/select_team.test.js
@ -3,6 +3,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import {RequestStatus} from 'mattermost-redux/constants';

 import SelectTeam from './select_team.js';
@ -40,7 +42,7 @@ describe('SelectTeam', () => {
        },
        userWithoutTeams: false,
        teams: [],
-        theme: {},
+        theme: Preferences.THEMES.default,
        teamsRequest: {
            status: RequestStatus.FAILURE,
        },
--- a/app/screens/settings/notification_settings_email/snapshots/notification_settings_email.android.test.js.snap
+++ b/app/screens/settings/notification_settings_email/snapshots/notification_settings_email.android.test.js.snap
@ -18,8 +18,30 @@ exports[`NotificationSettingsEmailAndroid should match snapshot 1`] = `
  }
  theme={
    Object {
-      "centerChannelBg": "#aaa",
-      "centerChannelColor": "#aaa",
+      "awayIndicator": "#ffbc42",
+      "buttonBg": "#166de0",
+      "buttonColor": "#ffffff",
+      "centerChannelBg": "#ffffff",
+      "centerChannelColor": "#3d3c40",
+      "codeTheme": "github",
+      "dndIndicator": "#f74343",
+      "errorTextColor": "#fd5960",
+      "linkColor": "#2389d7",
+      "mentionBj": "#ffffff",
+      "mentionColor": "#145dbf",
+      "mentionHighlightBg": "#ffe577",
+      "mentionHighlightLink": "#166de0",
+      "newMessageSeparator": "#ff8800",
+      "onlineIndicator": "#06d6a0",
+      "sidebarBg": "#145dbf",
+      "sidebarHeaderBg": "#1153ab",
+      "sidebarHeaderTextColor": "#ffffff",
+      "sidebarText": "#ffffff",
+      "sidebarTextActiveBorder": "#579eff",
+      "sidebarTextActiveColor": "#ffffff",
+      "sidebarTextHoverBg": "#4578bf",
+      "sidebarUnreadText": "#ffffff",
+      "type": "Mattermost",
    }
  }
 />
--- a/app/screens/settings/notification_settings_email/snapshots/notification_settings_email.ios.test.js.snap
+++ b/app/screens/settings/notification_settings_email/snapshots/notification_settings_email.ios.test.js.snap
@ -14,8 +14,30 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
  headerId="mobile.notification_settings.email.send"
  theme={
    Object {
-      "centerChannelBg": "#aaa",
-      "centerChannelColor": "#aaa",
+      "awayIndicator": "#ffbc42",
+      "buttonBg": "#166de0",
+      "buttonColor": "#ffffff",
+      "centerChannelBg": "#ffffff",
+      "centerChannelColor": "#3d3c40",
+      "codeTheme": "github",
+      "dndIndicator": "#f74343",
+      "errorTextColor": "#fd5960",
+      "linkColor": "#2389d7",
+      "mentionBj": "#ffffff",
+      "mentionColor": "#145dbf",
+      "mentionHighlightBg": "#ffe577",
+      "mentionHighlightLink": "#166de0",
+      "newMessageSeparator": "#ff8800",
+      "onlineIndicator": "#06d6a0",
+      "sidebarBg": "#145dbf",
+      "sidebarHeaderBg": "#1153ab",
+      "sidebarHeaderTextColor": "#ffffff",
+      "sidebarText": "#ffffff",
+      "sidebarTextActiveBorder": "#579eff",
+      "sidebarTextActiveColor": "#ffffff",
+      "sidebarTextHoverBg": "#4578bf",
+      "sidebarUnreadText": "#ffffff",
+      "type": "Mattermost",
    }
  }
 >
@ -33,8 +55,30 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
      selected={true}
      theme={
        Object {
-          "centerChannelBg": "#aaa",
-          "centerChannelColor": "#aaa",
+          "awayIndicator": "#ffbc42",
+          "buttonBg": "#166de0",
+          "buttonColor": "#ffffff",
+          "centerChannelBg": "#ffffff",
+          "centerChannelColor": "#3d3c40",
+          "codeTheme": "github",
+          "dndIndicator": "#f74343",
+          "errorTextColor": "#fd5960",
+          "linkColor": "#2389d7",
+          "mentionBj": "#ffffff",
+          "mentionColor": "#145dbf",
+          "mentionHighlightBg": "#ffe577",
+          "mentionHighlightLink": "#166de0",
+          "newMessageSeparator": "#ff8800",
+          "onlineIndicator": "#06d6a0",
+          "sidebarBg": "#145dbf",
+          "sidebarHeaderBg": "#1153ab",
+          "sidebarHeaderTextColor": "#ffffff",
+          "sidebarText": "#ffffff",
+          "sidebarTextActiveBorder": "#579eff",
+          "sidebarTextActiveColor": "#ffffff",
+          "sidebarTextHoverBg": "#4578bf",
+          "sidebarUnreadText": "#ffffff",
+          "type": "Mattermost",
        }
      }
    />
@ -61,8 +105,30 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
      selected={false}
      theme={
        Object {
-          "centerChannelBg": "#aaa",
-          "centerChannelColor": "#aaa",
+          "awayIndicator": "#ffbc42",
+          "buttonBg": "#166de0",
+          "buttonColor": "#ffffff",
+          "centerChannelBg": "#ffffff",
+          "centerChannelColor": "#3d3c40",
+          "codeTheme": "github",
+          "dndIndicator": "#f74343",
+          "errorTextColor": "#fd5960",
+          "linkColor": "#2389d7",
+          "mentionBj": "#ffffff",
+          "mentionColor": "#145dbf",
+          "mentionHighlightBg": "#ffe577",
+          "mentionHighlightLink": "#166de0",
+          "newMessageSeparator": "#ff8800",
+          "onlineIndicator": "#06d6a0",
+          "sidebarBg": "#145dbf",
+          "sidebarHeaderBg": "#1153ab",
+          "sidebarHeaderTextColor": "#ffffff",
+          "sidebarText": "#ffffff",
+          "sidebarTextActiveBorder": "#579eff",
+          "sidebarTextActiveColor": "#ffffff",
+          "sidebarTextHoverBg": "#4578bf",
+          "sidebarUnreadText": "#ffffff",
+          "type": "Mattermost",
        }
      }
    />
--- a/app/screens/settings/notification_settings_email/notification_settings_email.android.test.js
+++ b/app/screens/settings/notification_settings_email/notification_settings_email.android.test.js
@ -3,6 +3,8 @@

 import React from 'react';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import {shallowWithIntl} from 'test/intl-test-helper';
 import {emptyFunction} from 'app/utils/general';

@ -22,10 +24,7 @@ describe('NotificationSettingsEmailAndroid', () => {
        },
        sendEmailNotifications: true,
        siteName: 'Mattermost',
-        theme: {
-            centerChannelBg: '#aaa',
-            centerChannelColor: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
    };

    test('should match snapshot', () => {
--- a/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js
+++ b/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js
@ -4,6 +4,8 @@
 import React from 'react';
 import {shallow} from 'enzyme';

+import Preferences from 'mattermost-redux/constants/preferences';
+
 import {emptyFunction} from 'app/utils/general';

 import SectionItem from 'app/screens/settings/section_item';
@ -30,10 +32,7 @@ describe('NotificationSettingsEmailIos', () => {
        },
        sendEmailNotifications: true,
        siteName: 'Mattermost',
-        theme: {
-            centerChannelBg: '#aaa',
-            centerChannelColor: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
    };

    test('should match snapshot, renderEmailSection', () => {
--- a/app/screens/user_profile/snapshots/user_profile.test.js.snap
+++ b/app/screens/user_profile/snapshots/user_profile.test.js.snap
@ -12,7 +12,7 @@ exports[`user_profile should match snapshot 1`] = `
  <ScrollView
    style={
      Object {
-        "backgroundColor": "#aaa",
+        "backgroundColor": "#ffffff",
        "flex": 1,
      }
    }
@ -35,7 +35,7 @@ exports[`user_profile should match snapshot 1`] = `
      <Component
        style={
          Object {
-            "color": "#aaa",
+            "color": "#3d3c40",
            "fontSize": 15,
            "marginTop": 15,
          }
@ -69,7 +69,7 @@ exports[`user_profile should match snapshot 1`] = `
        <Component
          style={
            Object {
-              "color": "#aaa",
+              "color": "#3d3c40",
              "fontSize": 15,
            }
          }
@ -89,9 +89,30 @@ exports[`user_profile should match snapshot 1`] = `
      textId="mobile.routes.user_profile.send_message"
      theme={
        Object {
-          "centerChannelBg": "#aaa",
-          "centerChannelColor": "#aaa",
-          "color": "#aaa",
+          "awayIndicator": "#ffbc42",
+          "buttonBg": "#166de0",
+          "buttonColor": "#ffffff",
+          "centerChannelBg": "#ffffff",
+          "centerChannelColor": "#3d3c40",
+          "codeTheme": "github",
+          "dndIndicator": "#f74343",
+          "errorTextColor": "#fd5960",
+          "linkColor": "#2389d7",
+          "mentionBj": "#ffffff",
+          "mentionColor": "#145dbf",
+          "mentionHighlightBg": "#ffe577",
+          "mentionHighlightLink": "#166de0",
+          "newMessageSeparator": "#ff8800",
+          "onlineIndicator": "#06d6a0",
+          "sidebarBg": "#145dbf",
+          "sidebarHeaderBg": "#1153ab",
+          "sidebarHeaderTextColor": "#ffffff",
+          "sidebarText": "#ffffff",
+          "sidebarTextActiveBorder": "#579eff",
+          "sidebarTextActiveColor": "#ffffff",
+          "sidebarTextHoverBg": "#4578bf",
+          "sidebarUnreadText": "#ffffff",
+          "type": "Mattermost",
        }
      }
      togglable={false}
--- a/app/screens/user_profile/user_profile.test.js
+++ b/app/screens/user_profile/user_profile.test.js
@ -2,10 +2,12 @@
 // See LICENSE.txt for license information.
 import React from 'react';
 import {shallow} from 'enzyme';
-jest.mock('react-intl');
+
+import Preferences from 'mattermost-redux/constants/preferences';

 import UserProfile from './user_profile.js';

+jest.mock('react-intl');
 jest.mock('app/utils/theme', () => {
    const original = require.requireActual('app/utils/theme');
    return {
@ -29,11 +31,7 @@ describe('user_profile', () => {
            resetTo: jest.fn(),
        },
        teams: [],
-        theme: {
-            centerChannelBg: '#aaa',
-            centerChannelColor: '#aaa',
-            color: '#aaa',
-        },
+        theme: Preferences.THEMES.default,
        enableTimezone: false,
        user: {
            email: 'test@test.com',