[MM-51722] Migrate multiple enzyme tests to react testing library (#22674)

* Migrate multiple enzyme tests to react testing library

* assert components

* update snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/__snapshots__/color_input.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`components/ColorInput should match snapshot, click on picker 1`] = `
 >
   <input
     className="form-control"
+    data-testid="color-inputColorValue"
     id="sidebarBg-inputColorValue"
     maxLength={7}
     onBlur={[Function]}
@@ -51,6 +52,7 @@ exports[`components/ColorInput should match snapshot, init 1`] = `
 >
   <input
     className="form-control"
+    data-testid="color-inputColorValue"
     id="sidebarBg-inputColorValue"
     maxLength={7}
     onBlur={[Function]}
@@ -84,6 +86,7 @@ exports[`components/ColorInput should match snapshot, opened 1`] = `
 >
   <input
     className="form-control"
+    data-testid="color-inputColorValue"
     id="sidebarBg-inputColorValue"
     maxLength={7}
     onBlur={[Function]}
@@ -129,6 +132,7 @@ exports[`components/ColorInput should match snapshot, toggle picker 1`] = `
 >
   <input
     className="form-control"
+    data-testid="color-inputColorValue"
     id="sidebarBg-inputColorValue"
     maxLength={7}
     onBlur={[Function]}

webapp/channels/src/components/admin_console/__snapshots__/admin_console.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/AdminConsole should generate the routes 1`] = `
-<Redirect
-  to="/team-id/channels/town-square"
-/>
-`;
-
-exports[`components/AdminConsole should redirect to town-square when not system admin 1`] = `
-<Redirect
-  to="/team-id/channels/town-square"
-/>
-`;

webapp/channels/src/components/admin_console/__snapshots__/color_setting.test.tsx.snap

@@ -1,59 +1,180 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/ColorSetting should match snapshot, all 1`] = `
-<Settings
+<div>
-  helpText="helptext"
+  <div
-  inputId="id"
+    class="form-group"
-  label="label"
+    data-testid="id"
->
+  >
-  <ColorInput
+    <label
-    id="id"
+      class="control-label col-sm-4"
-    isDisabled={false}
+      for="id"
-    onChange={[Function]}
+    >
+      label
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <div
+        class="color-input input-group"
+      >
+        <input
+          class="form-control"
+          data-testid="color-inputColorValue"
+          id="id-inputColorValue"
+          maxlength="7"
+          type="text"
           value="#fff"
         />
-</Settings>
+        <span
+          class="input-group-addon color-pad"
+          id="id-squareColorIcon"
+        >
+          <i
+            class="color-icon"
+            id="id-squareColorIconValue"
+            style="background-color: rgb(255, 255, 255);"
+          />
+        </span>
+      </div>
+      <div
+        class="help-text"
+        data-testid="idhelp-text"
+      >
+        helptext
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`components/ColorSetting should match snapshot, clicked on color setting 1`] = `
-<Settings
+<div>
-  helpText="helptext"
+  <div
-  inputId="id"
+    class="form-group"
-  label="label"
+    data-testid="id"
->
+  >
-  <ColorInput
+    <label
-    id="id"
+      class="control-label col-sm-4"
-    isDisabled={false}
+      for="id"
-    onChange={[Function]}
+    >
+      label
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <div
+        class="color-input input-group"
+      >
+        <input
+          class="form-control"
+          data-testid="color-inputColorValue"
+          id="id-inputColorValue"
+          maxlength="7"
+          type="text"
           value="#fff"
         />
-</Settings>
+        <span
+          class="input-group-addon color-pad"
+          id="id-squareColorIcon"
+        >
+          <i
+            class="color-icon"
+            id="id-squareColorIconValue"
+            style="background-color: rgb(255, 255, 255);"
+          />
+        </span>
+      </div>
+      <div
+        class="help-text"
+        data-testid="idhelp-text"
+      >
+        helptext
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`components/ColorSetting should match snapshot, disabled 1`] = `
-<Settings
+<div>
-  inputId="id"
+  <div
-  label="label"
+    class="form-group"
->
+    data-testid="id"
-  <ColorInput
+  >
-    id="id"
+    <label
-    isDisabled={true}
+      class="control-label col-sm-4"
-    onChange={[Function]}
+      for="id"
+    >
+      label
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <div
+        class="color-input input-group"
+      >
+        <input
+          class="form-control"
+          data-testid="color-inputColorValue"
+          disabled=""
+          id="id-inputColorValue"
+          maxlength="7"
+          type="text"
           value="#fff"
         />
-</Settings>
+      </div>
+      <div
+        class="help-text"
+        data-testid="idhelp-text"
+      />
+    </div>
+  </div>
+</div>
 `;
 
 exports[`components/ColorSetting should match snapshot, no help text 1`] = `
-<Settings
+<div>
-  inputId="id"
+  <div
-  label="label"
+    class="form-group"
->
+    data-testid="id"
-  <ColorInput
+  >
-    id="id"
+    <label
-    isDisabled={false}
+      class="control-label col-sm-4"
-    onChange={[Function]}
+      for="id"
+    >
+      label
+    </label>
+    <div
+      class="col-sm-8"
+    >
+      <div
+        class="color-input input-group"
+      >
+        <input
+          class="form-control"
+          data-testid="color-inputColorValue"
+          id="id-inputColorValue"
+          maxlength="7"
+          type="text"
           value="#fff"
         />
-</Settings>
+        <span
+          class="input-group-addon color-pad"
+          id="id-squareColorIcon"
+        >
+          <i
+            class="color-icon"
+            id="id-squareColorIconValue"
+            style="background-color: rgb(255, 255, 255);"
+          />
+        </span>
+      </div>
+      <div
+        class="help-text"
+        data-testid="idhelp-text"
+      />
+    </div>
+  </div>
+</div>
 `;

webapp/channels/src/components/admin_console/admin_console.test.tsx

@@ -1,110 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {shallow} from 'enzyme';
-
-import {Team} from '@mattermost/types/teams';
-import {SelfHostedSignupProgress} from '@mattermost/types/cloud';
-import {AdminConfig, ExperimentalSettings} from '@mattermost/types/config';
-
-import {Theme} from 'mattermost-redux/selectors/entities/preferences';
-
-import AdminDefinition from 'components/admin_console/admin_definition';
-import {TestHelper} from 'utils/test_helper';
-import * as Utils from 'utils/utils';
-
-import AdminConsole from './admin_console';
-import type {Props} from './admin_console';
-
-describe('components/AdminConsole', () => {
-    const baseProps: Props = {
-        config: {
-            TestField: true,
-            ExperimentalSettings: {
-                RestrictSystemAdmin: false,
-            } as ExperimentalSettings,
-        } as Partial<AdminConfig>,
-        adminDefinition: AdminDefinition,
-        environmentConfig: {},
-        unauthorizedRoute: '/',
-        consoleAccess: {
-            read: {},
-            write: {},
-        },
-        team: {} as Team,
-        license: {},
-        cloud: {
-            limits: {
-                limits: {},
-                limitsLoaded: false,
-            },
-            errors: {},
-            selfHostedSignup: {
-                progress: SelfHostedSignupProgress.START,
-            },
-        },
-        buildEnterpriseReady: true,
-        match: {
-            url: '',
-        },
-        roles: {
-            channel_admin: TestHelper.getRoleMock(),
-            channel_user: TestHelper.getRoleMock(),
-            team_admin: TestHelper.getRoleMock(),
-            team_user: TestHelper.getRoleMock(),
-            system_admin: TestHelper.getRoleMock(),
-            system_user: TestHelper.getRoleMock(),
-        },
-        showNavigationPrompt: false,
-        isCurrentUserSystemAdmin: false,
-        currentUserHasAnAdminRole: false,
-        currentTheme: {} as Theme,
-        actions: {
-            getConfig: jest.fn(),
-            getEnvironmentConfig: jest.fn(),
-            setNavigationBlocked: jest.fn(),
-            confirmNavigation: jest.fn(),
-            cancelNavigation: jest.fn(),
-            loadRolesIfNeeded: jest.fn(),
-            editRole: jest.fn(),
-            selectLhsItem: jest.fn(),
-            selectTeam: jest.fn(),
-        },
-    };
-
-    beforeEach(() => {
-        jest.spyOn(Utils, 'applyTheme').mockImplementation(() => {});
-        jest.spyOn(Utils, 'resetTheme').mockImplementation(() => {});
-    });
-
-    test('should redirect to town-square when not system admin', () => {
-        const props = {
-            ...baseProps,
-            unauthorizedRoute: '/team-id/channels/town-square',
-            isCurrentUserSystemAdmin: false,
-            currentUserHasAnAdminRole: false,
-            consoleAccess: {read: {}, write: {}},
-            team: {name: 'development'} as Team,
-        };
-        const wrapper = shallow(
-            <AdminConsole {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should generate the routes', () => {
-        const props = {
-            ...baseProps,
-            unauthorizedRoute: '/team-id/channels/town-square',
-            isCurrentUserSystemAdmin: true,
-            currentUserHasAnAdminRole: false,
-            consoleAccess: {read: {}, write: {}},
-            team: {name: 'development'} as Team,
-        };
-        const wrapper = shallow(
-            <AdminConsole {...props}/>,
-        );
-        expect(wrapper).toMatchSnapshot();
-    });
-});

webapp/channels/src/components/admin_console/admin_navbar_dropdown/menu_item_blockable_link.test.tsx

@@ -2,25 +2,29 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+
+import {screen} from '@testing-library/react';
 
 import {MenuItemBlockableLinkImpl} from './menu_item_blockable_link';
+import {renderWithIntl} from 'tests/react_testing_utils';
+import {Provider} from 'react-redux';
+import store from 'stores/redux_store';
+import {BrowserRouter} from 'react-router-dom';
 
 describe('components/MenuItemBlockableLink', () => {
-    test('should match snapshot', () => {
+    test('should render my link', () => {
-        const wrapper = shallow(
+        renderWithIntl(
+            <BrowserRouter>
+                <Provider store={store}>
                     <MenuItemBlockableLinkImpl
                         to='/wherever'
                         text='Whatever'
-            />,
+                    />
+                </Provider>
+            </BrowserRouter>,
         );
 
-        expect(wrapper).toMatchInlineSnapshot(`
+        screen.getByText('Whatever');
-<Connect(BlockableLink)
+        expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain('/wherever');
-  to="/wherever"
->
-  Whatever
-</Connect(BlockableLink)>
-`);
     });
 });

webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap

@@ -1,79 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/admin_console/admin_user_card/admin_user_card should match default snapshot 1`] = `
-<div
+<div>
-  className="AdminUserCard"
->
   <div
-    className="AdminUserCard__header"
+    class="AdminUserCard"
   >
-    <ProfilePicture
-      hasMention={false}
-      isEmoji={false}
-      isRHS={false}
-      popoverPlacement="right"
-      size="xxl"
-      src="/api/v4/users/1234/image"
-      userId="1234"
-      wrapperClass="admin-user-card"
-    />
     <div
-      className="AdminUserCard__user-info"
+      class="AdminUserCard__header"
+    >
+      <span
+        class="status-wrapper  admin-user-card"
+      >
+        <button
+          class="RoundButton-dvlhqG gnYSKj style--none"
+        >
+          <span
+            class="profile-icon "
+          >
+            <img
+              alt="user profile image"
+              class="Avatar Avatar-xxl"
+              loading="lazy"
+              src="/api/v4/users/1234/image"
+              tabindex="-1"
+            />
+          </span>
+        </button>
+      </span>
+      <div
+        class="AdminUserCard__user-info"
       >
         <span>
           Jim
            
           Halpert
         </span>
-      <Bullet
+        <span>
-        user={
+           • 
-          Object {
+        </span>
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "Jim",
-            "id": "1234",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "Halpert",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "Big Tuna",
-            "notify_props": Object {
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some-user",
-          }
-        }
-      />
         <span
-        className="AdminUserCard__user-nickname"
+          class="AdminUserCard__user-nickname"
         >
           Big Tuna
         </span>
       </div>
       <div
-      className="AdminUserCard__user-id"
+        class="AdminUserCard__user-id"
       >
         User ID:
          
@@ -81,86 +53,56 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match d
       </div>
     </div>
     <div
-    className="AdminUserCard__body"
+      class="AdminUserCard__body"
     />
     <div
-    className="AdminUserCard__footer"
+      class="AdminUserCard__footer"
     />
+  </div>
 </div>
 `;
 
 exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no first/last name is defined 1`] = `
-<div
+<div>
-  className="AdminUserCard"
->
   <div
-    className="AdminUserCard__header"
+    class="AdminUserCard"
   >
-    <ProfilePicture
-      hasMention={false}
-      isEmoji={false}
-      isRHS={false}
-      popoverPlacement="right"
-      size="xxl"
-      src="/api/v4/users/1234/image"
-      userId="1234"
-      wrapperClass="admin-user-card"
-    />
     <div
-      className="AdminUserCard__user-info"
+      class="AdminUserCard__header"
+    >
+      <span
+        class="status-wrapper  admin-user-card"
+      >
+        <button
+          class="RoundButton-dvlhqG gnYSKj style--none"
+        >
+          <span
+            class="profile-icon "
+          >
+            <img
+              alt="user profile image"
+              class="Avatar Avatar-xxl"
+              loading="lazy"
+              src="/api/v4/users/1234/image"
+              tabindex="-1"
+            />
+          </span>
+        </button>
+      </span>
+      <div
+        class="AdminUserCard__user-info"
       >
         <span>
            
         </span>
-      <Bullet
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": null,
-            "id": "1234",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": null,
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": "Big Tuna",
-            "notify_props": Object {
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some-user",
-          }
-        }
-      />
         <span
-        className="AdminUserCard__user-nickname"
+          class="AdminUserCard__user-nickname"
         >
           Big Tuna
         </span>
       </div>
       <div
-      className="AdminUserCard__user-id"
+        class="AdminUserCard__user-id"
       >
         User ID:
          
@@ -168,84 +110,54 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
       </div>
     </div>
     <div
-    className="AdminUserCard__body"
+      class="AdminUserCard__body"
     />
     <div
-    className="AdminUserCard__footer"
+      class="AdminUserCard__footer"
     />
+  </div>
 </div>
 `;
 
 exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no first/last name or nickname is defined 1`] = `
-<div
+<div>
-  className="AdminUserCard"
->
   <div
-    className="AdminUserCard__header"
+    class="AdminUserCard"
   >
-    <ProfilePicture
-      hasMention={false}
-      isEmoji={false}
-      isRHS={false}
-      popoverPlacement="right"
-      size="xxl"
-      src="/api/v4/users/1234/image"
-      userId="1234"
-      wrapperClass="admin-user-card"
-    />
     <div
-      className="AdminUserCard__user-info"
+      class="AdminUserCard__header"
+    >
+      <span
+        class="status-wrapper  admin-user-card"
+      >
+        <button
+          class="RoundButton-dvlhqG gnYSKj style--none"
+        >
+          <span
+            class="profile-icon "
+          >
+            <img
+              alt="user profile image"
+              class="Avatar Avatar-xxl"
+              loading="lazy"
+              src="/api/v4/users/1234/image"
+              tabindex="-1"
+            />
+          </span>
+        </button>
+      </span>
+      <div
+        class="AdminUserCard__user-info"
       >
         <span>
            
         </span>
-      <Bullet
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": null,
-            "id": "1234",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": null,
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": null,
-            "notify_props": Object {
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some-user",
-          }
-        }
-      />
         <span
-        className="AdminUserCard__user-nickname"
+          class="AdminUserCard__user-nickname"
         />
       </div>
       <div
-      className="AdminUserCard__user-id"
+        class="AdminUserCard__user-id"
       >
         User ID:
          
@@ -253,86 +165,56 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
       </div>
     </div>
     <div
-    className="AdminUserCard__body"
+      class="AdminUserCard__body"
     />
     <div
-    className="AdminUserCard__footer"
+      class="AdminUserCard__footer"
     />
+  </div>
 </div>
 `;
 
 exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no nickname is defined 1`] = `
-<div
+<div>
-  className="AdminUserCard"
->
   <div
-    className="AdminUserCard__header"
+    class="AdminUserCard"
   >
-    <ProfilePicture
-      hasMention={false}
-      isEmoji={false}
-      isRHS={false}
-      popoverPlacement="right"
-      size="xxl"
-      src="/api/v4/users/1234/image"
-      userId="1234"
-      wrapperClass="admin-user-card"
-    />
     <div
-      className="AdminUserCard__user-info"
+      class="AdminUserCard__header"
+    >
+      <span
+        class="status-wrapper  admin-user-card"
+      >
+        <button
+          class="RoundButton-dvlhqG gnYSKj style--none"
+        >
+          <span
+            class="profile-icon "
+          >
+            <img
+              alt="user profile image"
+              class="Avatar Avatar-xxl"
+              loading="lazy"
+              src="/api/v4/users/1234/image"
+              tabindex="-1"
+            />
+          </span>
+        </button>
+      </span>
+      <div
+        class="AdminUserCard__user-info"
       >
         <span>
           Jim
            
           Halpert
         </span>
-      <Bullet
-        user={
-          Object {
-            "auth_service": "",
-            "bot_description": "",
-            "create_at": 0,
-            "delete_at": 0,
-            "email": "",
-            "first_name": "Jim",
-            "id": "1234",
-            "is_bot": false,
-            "last_activity_at": 0,
-            "last_name": "Halpert",
-            "last_password_update": 0,
-            "last_picture_update": 0,
-            "locale": "",
-            "mfa_active": false,
-            "nickname": null,
-            "notify_props": Object {
-              "channel": "false",
-              "comments": "never",
-              "desktop": "default",
-              "desktop_sound": "false",
-              "email": "false",
-              "first_name": "false",
-              "mark_unread": "mention",
-              "mention_keys": "",
-              "push": "none",
-              "push_status": "offline",
-            },
-            "password": "",
-            "position": "",
-            "props": Object {},
-            "roles": "",
-            "terms_of_service_create_at": 0,
-            "terms_of_service_id": "",
-            "update_at": 0,
-            "username": "some-user",
-          }
-        }
-      />
         <span
-        className="AdminUserCard__user-nickname"
+          class="AdminUserCard__user-nickname"
         />
       </div>
       <div
-      className="AdminUserCard__user-id"
+        class="AdminUserCard__user-id"
       >
         User ID:
          
@@ -340,10 +222,11 @@ exports[`components/admin_console/admin_user_card/admin_user_card should match s
       </div>
     </div>
     <div
-    className="AdminUserCard__body"
+      class="AdminUserCard__body"
     />
     <div
-    className="AdminUserCard__footer"
+      class="AdminUserCard__footer"
     />
+  </div>
 </div>
 `;

webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.test.tsx

@@ -2,11 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+
+import {screen} from '@testing-library/react';
 
 import {TestHelper} from 'utils/test_helper';
 
 import AdminUserCard from 'components/admin_console/admin_user_card/admin_user_card';
+import {renderWithIntl} from 'tests/react_testing_utils';
 
 describe('components/admin_console/admin_user_card/admin_user_card', () => {
     const user = TestHelper.getUserMock({
@@ -22,8 +24,12 @@ describe('components/admin_console/admin_user_card/admin_user_card', () => {
 
     test('should match default snapshot', () => {
         const props = defaultProps;
-        const wrapper = shallow(<AdminUserCard {...props}/>);
+        const {container} = renderWithIntl(<AdminUserCard {...props}/>);
-        expect(wrapper).toMatchSnapshot();
+        screen.getByText(props.user.first_name, {exact: false});
+        screen.getByText(props.user.last_name, {exact: false});
+        screen.getByText(props.user.nickname, {exact: false});
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot if no nickname is defined', () => {
@@ -34,8 +40,12 @@ describe('components/admin_console/admin_user_card/admin_user_card', () => {
                 nickname: null,
             },
         };
-        const wrapper = shallow(<AdminUserCard {...props}/>);
+        const {container} = renderWithIntl(<AdminUserCard {...props}/>);
-        expect(wrapper).toMatchSnapshot();
+        screen.getByText(props.user.first_name, {exact: false});
+        screen.getByText(props.user.last_name, {exact: false});
+        expect(screen.queryByText(defaultProps.user.nickname)).not.toBeInTheDocument();
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot if no first/last name is defined', () => {
@@ -47,8 +57,12 @@ describe('components/admin_console/admin_user_card/admin_user_card', () => {
                 last_name: null,
             },
         };
-        const wrapper = shallow(<AdminUserCard {...props}/>);
+        const {container} = renderWithIntl(<AdminUserCard {...props}/>);
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText(defaultProps.user.first_name)).not.toBeInTheDocument();
+        expect(screen.queryByText(defaultProps.user.last_name)).not.toBeInTheDocument();
+        screen.getByText(props.user.nickname, {exact: false});
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot if no first/last name or nickname is defined', () => {
@@ -61,7 +75,12 @@ describe('components/admin_console/admin_user_card/admin_user_card', () => {
                 nickname: null,
             },
         };
-        const wrapper = shallow(<AdminUserCard {...props}/>);
+        const {container} = renderWithIntl(<AdminUserCard {...props}/>);
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText(defaultProps.user.first_name)).not.toBeInTheDocument();
+        expect(screen.queryByText(defaultProps.user.last_name)).not.toBeInTheDocument();
+        expect(screen.queryByText(defaultProps.user.nickname)).not.toBeInTheDocument();
+        screen.getByText(props.user.id, {exact: false});
+
+        expect(container).toMatchSnapshot();
     });
 });

webapp/channels/src/components/admin_console/color_setting.test.tsx

@@ -2,15 +2,16 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 
 import ColorSetting from 'components/admin_console/color_setting';
+import {renderWithIntl} from 'tests/react_testing_utils';
+import {screen} from '@testing-library/react';
 
 describe('components/ColorSetting', () => {
     test('should match snapshot, all', () => {
         function emptyFunction() {} //eslint-disable-line no-empty-function
 
-        const wrapper = shallow(
+        const {container} = renderWithIntl(
             <ColorSetting
                 id='id'
                 label='label'
@@ -20,13 +21,16 @@ describe('components/ColorSetting', () => {
                 disabled={false}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByText('helptext')).toBeInTheDocument();
+        expect(screen.getByTestId('color-inputColorValue')).not.toBeDisabled();
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot, no help text', () => {
         function emptyFunction() {} //eslint-disable-line no-empty-function
 
-        const wrapper = shallow(
+        const {container} = renderWithIntl(
             <ColorSetting
                 id='id'
                 label='label'
@@ -35,13 +39,15 @@ describe('components/ColorSetting', () => {
                 disabled={false}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.queryByText('helptext')).not.toBeInTheDocument();
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot, disabled', () => {
         function emptyFunction() {} //eslint-disable-line no-empty-function
 
-        const wrapper = shallow(
+        const {container} = renderWithIntl(
             <ColorSetting
                 id='id'
                 label='label'
@@ -50,13 +56,16 @@ describe('components/ColorSetting', () => {
                 disabled={true}
             />,
         );
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByTestId('color-inputColorValue')).toBeDisabled();
+        expect(screen.queryByText('helptext')).not.toBeInTheDocument();
+
+        expect(container).toMatchSnapshot();
     });
 
     test('should match snapshot, clicked on color setting', () => {
         function emptyFunction() {} //eslint-disable-line no-empty-function
 
-        const wrapper = shallow(
+        const {container} = renderWithIntl(
             <ColorSetting
                 id='id'
                 label='label'
@@ -66,7 +75,9 @@ describe('components/ColorSetting', () => {
                 disabled={false}
             />,
         );
+        expect(screen.getByTestId('color-inputColorValue')).not.toBeDisabled();
+        expect(screen.queryByText('helptext')).toBeInTheDocument();
 
-        expect(wrapper).toMatchSnapshot();
+        expect(container).toMatchSnapshot();
     });
 });

webapp/channels/src/components/admin_console/text_setting.test.tsx

@@ -2,14 +2,15 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 
 import AdminTextSetting from './text_setting';
+import {renderWithIntl} from 'tests/react_testing_utils';
+import {screen} from '@testing-library/react';
 
 describe('components/admin_console/TextSetting', () => {
     test('render component with required props', () => {
         const onChange = jest.fn();
-        const wrapper = shallow(
+        renderWithIntl(
             <AdminTextSetting
                 id='string.id'
                 label='some label'
@@ -23,19 +24,9 @@ describe('components/admin_console/TextSetting', () => {
                 type='input'
             />,
         );
-        expect(wrapper).toMatchInlineSnapshot(`
+
-            <TextSetting
+        screen.getByText('some label', {exact: false});
-              disabled={false}
+        expect(screen.getByTestId('string.idinput')).toHaveProperty('id', 'string.id');
-              id="string.id"
+        expect(screen.getByTestId('string.idinput')).toHaveValue('some value');
-              inputClassName="col-sm-8"
-              label="some label"
-              labelClassName="col-sm-4"
-              maxLength={-1}
-              onChange={[MockFunction]}
-              resizable={true}
-              type="input"
-              value="some value"
-            />
-        `);
     });
 });

webapp/channels/src/components/color_input.tsx

@@ -146,6 +146,7 @@ export default class ColorInput extends React.PureComponent<Props, State> {
                     onKeyDown={this.onKeyDown}
                     maxLength={7}
                     disabled={this.props.isDisabled}
+                    data-testid='color-inputColorValue'
 
                 />
                 {!this.props.isDisabled &&