diff --git a/webapp/channels/src/components/__snapshots__/color_input.test.tsx.snap b/webapp/channels/src/components/__snapshots__/color_input.test.tsx.snap index cfb98a0d16..c4b1f18067 100644 --- a/webapp/channels/src/components/__snapshots__/color_input.test.tsx.snap +++ b/webapp/channels/src/components/__snapshots__/color_input.test.tsx.snap @@ -6,6 +6,7 @@ exports[`components/ColorInput should match snapshot, click on picker 1`] = ` > -`; - -exports[`components/AdminConsole should redirect to town-square when not system admin 1`] = ` - -`; diff --git a/webapp/channels/src/components/admin_console/__snapshots__/color_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/color_setting.test.tsx.snap index 33293141ec..aef81b7b05 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/color_setting.test.tsx.snap +++ b/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`] = ` - - - +
+
+ +
+
+ + + + +
+
+ helptext +
+
+
+
`; exports[`components/ColorSetting should match snapshot, clicked on color setting 1`] = ` - - - +
+
+ +
+
+ + + + +
+
+ helptext +
+
+
+
`; exports[`components/ColorSetting should match snapshot, disabled 1`] = ` - - - +
+
+ +
+
+ +
+
+
+
+
`; exports[`components/ColorSetting should match snapshot, no help text 1`] = ` - - - +
+
+ +
+
+ + + + +
+
+
+
+
`; diff --git a/webapp/channels/src/components/admin_console/admin_console.test.tsx b/webapp/channels/src/components/admin_console/admin_console.test.tsx deleted file mode 100644 index f4874317bb..0000000000 --- a/webapp/channels/src/components/admin_console/admin_console.test.tsx +++ /dev/null @@ -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, - 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( - , - ); - 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( - , - ); - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/webapp/channels/src/components/admin_console/admin_navbar_dropdown/menu_item_blockable_link.test.tsx b/webapp/channels/src/components/admin_console/admin_navbar_dropdown/menu_item_blockable_link.test.tsx index 3b8fdc3c2b..44ba1e94d4 100644 --- a/webapp/channels/src/components/admin_console/admin_navbar_dropdown/menu_item_blockable_link.test.tsx +++ b/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', () => { - const wrapper = shallow( - , + test('should render my link', () => { + renderWithIntl( + + + + + , ); - expect(wrapper).toMatchInlineSnapshot(` - - Whatever - -`); + screen.getByText('Whatever'); + expect((screen.getByRole('link') as HTMLAnchorElement).href).toContain('/wherever'); }); }); diff --git a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap index c1bd5f5728..e0df87ae87 100644 --- a/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap +++ b/webapp/channels/src/components/admin_console/admin_user_card/__snapshots__/admin_user_card.test.tsx.snap @@ -1,349 +1,232 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/admin_console/admin_user_card/admin_user_card should match default snapshot 1`] = ` -
+
- + + + + +
+ User ID: + + 1234 +
+
+
- - Jim - - Halpert - - - - Big Tuna - -
-
- User ID: - - 1234 -
+ class="AdminUserCard__footer" + />
-
-
`; exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no first/last name is defined 1`] = ` -
+
- + + + + +
+ User ID: + + 1234 +
+
+
- - - - - - Big Tuna - -
-
- User ID: - - 1234 -
+ class="AdminUserCard__footer" + />
-
-
`; exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no first/last name or nickname is defined 1`] = ` -
+
- + + + + +
+ User ID: + + 1234 +
+
+
- - - - - -
-
- User ID: - - 1234 -
+ class="AdminUserCard__footer" + />
-
-
`; exports[`components/admin_console/admin_user_card/admin_user_card should match snapshot if no nickname is defined 1`] = ` -
+
- + + + + +
+ User ID: + + 1234 +
+
+
- - Jim - - Halpert - - - -
-
- User ID: - - 1234 -
+ class="AdminUserCard__footer" + />
-
-
`; diff --git a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.test.tsx b/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.test.tsx index abb0c13921..b8deff6cb1 100644 --- a/webapp/channels/src/components/admin_console/admin_user_card/admin_user_card.test.tsx +++ b/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(); - expect(wrapper).toMatchSnapshot(); + const {container} = renderWithIntl(); + 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(); - expect(wrapper).toMatchSnapshot(); + const {container} = renderWithIntl(); + 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(); - expect(wrapper).toMatchSnapshot(); + const {container} = renderWithIntl(); + 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(); - expect(wrapper).toMatchSnapshot(); + const {container} = renderWithIntl(); + 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(); }); }); diff --git a/webapp/channels/src/components/admin_console/color_setting.test.tsx b/webapp/channels/src/components/admin_console/color_setting.test.tsx index c74d0162c4..5b18ceb6de 100644 --- a/webapp/channels/src/components/admin_console/color_setting.test.tsx +++ b/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( { 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( { 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( { 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( { disabled={false} />, ); + expect(screen.getByTestId('color-inputColorValue')).not.toBeDisabled(); + expect(screen.queryByText('helptext')).toBeInTheDocument(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/webapp/channels/src/components/admin_console/text_setting.test.tsx b/webapp/channels/src/components/admin_console/text_setting.test.tsx index 6693cb72c2..3e68110712 100644 --- a/webapp/channels/src/components/admin_console/text_setting.test.tsx +++ b/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( { type='input' />, ); - expect(wrapper).toMatchInlineSnapshot(` - - `); + + screen.getByText('some label', {exact: false}); + expect(screen.getByTestId('string.idinput')).toHaveProperty('id', 'string.id'); + expect(screen.getByTestId('string.idinput')).toHaveValue('some value'); }); }); diff --git a/webapp/channels/src/components/color_input.tsx b/webapp/channels/src/components/color_input.tsx index 05ce57e9b5..0ef04654a9 100644 --- a/webapp/channels/src/components/color_input.tsx +++ b/webapp/channels/src/components/color_input.tsx @@ -146,6 +146,7 @@ export default class ColorInput extends React.PureComponent { onKeyDown={this.onKeyDown} maxLength={7} disabled={this.props.isDisabled} + data-testid='color-inputColorValue' /> {!this.props.isDisabled &&