diff --git a/webapp/channels/package.json b/webapp/channels/package.json index d33b6e0d89..b948c1d924 100644 --- a/webapp/channels/package.json +++ b/webapp/channels/package.json @@ -116,6 +116,7 @@ "@redux-devtools/extension": "3.2.3", "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "12.1.4", + "@testing-library/user-event": "12.1.4", "@types/bootstrap": "4.5.0", "@types/country-list": "2.1.0", "@types/enzyme": "3.10.11", diff --git a/webapp/channels/src/components/about_build_modal/__snapshots__/about_build_modal.test.tsx.snap b/webapp/channels/src/components/about_build_modal/__snapshots__/about_build_modal.test.tsx.snap deleted file mode 100644 index aad61ae4ed..0000000000 --- a/webapp/channels/src/components/about_build_modal/__snapshots__/about_build_modal.test.tsx.snap +++ /dev/null @@ -1,980 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/AboutBuildModal should match snapshot for cloud edition 1`] = ` - - - -`; - -exports[`components/AboutBuildModal should match snapshot for enterprise edition 1`] = ` - - - - - - - -
-
- -
-
-

- - Mattermost - - - -

-

- -

-
-
- - -  3.6.2 - -
-
- - -  77 - -
-
- -  Postgres -
-
-
- - - Mattermost Inc -
-
-
-
-
- - - mattermost.com - -
-
-
- -
-
- - - - - - - - -
-
-
-
-

- -

-
-
-

- - - abcdef1234567890 -
- - - 0123456789abcdef -

-

- - - 21 January 2017 -

-
- - -`; - -exports[`components/AboutBuildModal should match snapshot for team edition 1`] = ` - - - - - - - -
-
- -
-
-

- - Mattermost - - - -

-

- -

-
-
- - -  3.6.2 - -
-
- - -  77 - -
-
- -  Postgres -
-
-
-
-
-
- - - mattermost.com/community/ - -
-
-
- -
-
- - - - - - - - -
-
-
-
-

- -

-
-
-

- - - abcdef1234567890 -
- - -

-

- - - 21 January 2017 -

-
- - -`; - -exports[`components/AboutBuildModal should show ci if a ci build 1`] = ` - - - - - - - -
-
- -
-
-

- - Mattermost - - - -

-

- -

-
-
- - -  ci - -
-
- - -  77 - -
-
- - -  123 - -
-
- -  Postgres -
-
-
-
-
-
- - - mattermost.com/community/ - -
-
-
- -
-
- - - - - - - - -
-
-
-
-

- -

-
-
-

- - - abcdef1234567890 -
- - -

-

- - - 21 January 2017 -

-
- - -`; - -exports[`components/AboutBuildModal should show dev if this is a dev build 1`] = ` - - - - - - - -
-
- -
-
-

- - Mattermost - - - -

-

- -

-
-
- - -  dev - -
-
- - -  77 - -
-
- -  Postgres -
-
-
-
-
-
- - - mattermost.com/community/ - -
-
-
- -
-
- - - - - - - - -
-
-
-
-

- -

-
-
-

- - - abcdef1234567890 -
- - -

-

- - - 21 January 2017 -

-
- - -`; diff --git a/webapp/channels/src/components/about_build_modal/about_build_modal.test.tsx b/webapp/channels/src/components/about_build_modal/about_build_modal.test.tsx index 33241a3b7b..bff5e106b5 100644 --- a/webapp/channels/src/components/about_build_modal/about_build_modal.test.tsx +++ b/webapp/channels/src/components/about_build_modal/about_build_modal.test.tsx @@ -2,8 +2,6 @@ // See LICENSE.txt for license information. import React from 'react'; -import {Modal} from 'react-bootstrap'; -import {shallow} from 'enzyme'; import {Provider} from 'react-redux'; import mockStore from 'tests/test_store'; @@ -12,11 +10,13 @@ import {ClientConfig, ClientLicense} from '@mattermost/types/config'; import AboutBuildModal from 'components/about_build_modal/about_build_modal'; -import {mountWithIntl} from 'tests/helpers/intl-test-helper'; - import {AboutLinks} from 'utils/constants'; import AboutBuildModalCloud from './about_build_modal_cloud/about_build_modal_cloud'; +import {screen} from '@testing-library/react'; +import {renderWithIntl} from 'tests/react_testing_utils'; +import store from 'stores/redux_store'; +import userEvent from '@testing-library/user-event'; describe('components/AboutBuildModal', () => { const RealDate: DateConstructor = Date; @@ -60,10 +60,17 @@ describe('components/AboutBuildModal', () => { }); test('should match snapshot for enterprise edition', () => { - const wrapper = shallowAboutBuildModal({config, license}); - expect(wrapper.find('#versionString').text()).toBe('\u00a03.6.2'); - expect(wrapper.find('#dbversionString').text()).toBe('\u00a077'); - expect(wrapper).toMatchSnapshot(); + renderAboutBuildModal({config, license}); + expect(screen.getByTestId('aboutModalVersion')).toHaveTextContent('Mattermost Version: 3.6.2'); + expect(screen.getByTestId('aboutModalDBVersionString')).toHaveTextContent('Database Schema Version: 77'); + expect(screen.getByText('Mattermost Enterprise Edition')).toBeInTheDocument(); + expect(screen.getByText('Modern communication from behind your firewall.')).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'mattermost.com'})).toHaveAttribute('href', 'https://mattermost.com/?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=&sid='); + expect(screen.getByText('EE Build Hash: 0123456789abcdef', {exact: false})).toBeInTheDocument(); + + expect(screen.getByRole('link', {name: 'server'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-server/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'desktop'})).toHaveAttribute('href', 'https://github.com/mattermost/desktop/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'mobile'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-mobile/blob/master/NOTICE.txt'); }); test('should match snapshot for team edition', () => { @@ -73,19 +80,25 @@ describe('components/AboutBuildModal', () => { BuildHashEnterprise: '', }; - const wrapper = shallowAboutBuildModal({config: teamConfig, license: {}}); - expect(wrapper.find('#versionString').text()).toBe('\u00a03.6.2'); - expect(wrapper.find('#dbversionString').text()).toBe('\u00a077'); - expect(wrapper).toMatchSnapshot(); + renderAboutBuildModal({config: teamConfig, license: {}}); + expect(screen.getByTestId('aboutModalVersion')).toHaveTextContent('Mattermost Version: 3.6.2'); + expect(screen.getByTestId('aboutModalDBVersionString')).toHaveTextContent('Database Schema Version: 77'); + expect(screen.getByText('Mattermost Team Edition')).toBeInTheDocument(); + expect(screen.getByText('All your team communication in one place, instantly searchable and accessible anywhere.')).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'mattermost.com/community/'})).toHaveAttribute('href', 'https://mattermost.com/community/?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=&sid='); + expect(screen.queryByText('EE Build Hash: 0123456789abcdef')).not.toBeInTheDocument(); + + expect(screen.getByRole('link', {name: 'server'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-server/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'desktop'})).toHaveAttribute('href', 'https://github.com/mattermost/desktop/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'mobile'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-mobile/blob/master/NOTICE.txt'); }); test('should match snapshot for cloud edition', () => { if (license !== null) { license.Cloud = 'true'; } - const store = mockStore(); - const wrapper = shallow( + renderWithIntl( { /> , ); - expect(wrapper).toMatchSnapshot(); + + expect(screen.getByText('Mattermost Cloud')).toBeInTheDocument(); + expect(screen.getByText('High trust messaging for the enterprise')).toBeInTheDocument(); + + expect(screen.getByText('0123456789abcdef', {exact: false})).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'server'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-server/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'desktop'})).toHaveAttribute('href', 'https://github.com/mattermost/desktop/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'mobile'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-mobile/blob/master/NOTICE.txt'); }); test('should show dev if this is a dev build', () => { @@ -109,10 +129,18 @@ describe('components/AboutBuildModal', () => { BuildNumber: 'dev', }; - const wrapper = shallowAboutBuildModal({config: sameBuildConfig, license: {}}); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('#versionString').text()).toBe('\u00a0dev'); - expect(wrapper.find('#dbversionString').text()).toBe('\u00a077'); + renderAboutBuildModal({config: sameBuildConfig, license: {}}); + + expect(screen.getByTestId('aboutModalVersion')).toHaveTextContent('Mattermost Version: dev'); + expect(screen.getByTestId('aboutModalDBVersionString')).toHaveTextContent('Database Schema Version: 77'); + expect(screen.getByText('Mattermost Team Edition')).toBeInTheDocument(); + expect(screen.getByText('All your team communication in one place, instantly searchable and accessible anywhere.')).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'mattermost.com/community/'})).toHaveAttribute('href', 'https://mattermost.com/community/?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=&sid='); + expect(screen.queryByText('EE Build Hash: 0123456789abcdef')).not.toBeInTheDocument(); + + expect(screen.getByRole('link', {name: 'server'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-server/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'desktop'})).toHaveAttribute('href', 'https://github.com/mattermost/desktop/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'mobile'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-mobile/blob/master/NOTICE.txt'); }); test('should show ci if a ci build', () => { @@ -125,11 +153,19 @@ describe('components/AboutBuildModal', () => { BuildNumber: '123', }; - const wrapper = shallowAboutBuildModal({config: differentBuildConfig, license: {}}); - expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('#versionString').text()).toBe('\u00a0ci'); - expect(wrapper.find('#dbversionString').text()).toBe('\u00a077'); - expect(wrapper.find('#buildnumberString').text()).toBe('\u00a0123'); + renderAboutBuildModal({config: differentBuildConfig, license: {}}); + + expect(screen.getByTestId('aboutModalVersion')).toHaveTextContent('Mattermost Version: ci'); + expect(screen.getByTestId('aboutModalDBVersionString')).toHaveTextContent('Database Schema Version: 77'); + expect(screen.getByTestId('aboutModalBuildNumber')).toHaveTextContent('Build Number: 123'); + expect(screen.getByText('Mattermost Team Edition')).toBeInTheDocument(); + expect(screen.getByText('All your team communication in one place, instantly searchable and accessible anywhere.')).toBeInTheDocument(); + expect(screen.getByRole('link', {name: 'mattermost.com/community/'})).toHaveAttribute('href', 'https://mattermost.com/community/?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=&sid='); + expect(screen.queryByText('EE Build Hash: 0123456789abcdef')).not.toBeInTheDocument(); + + expect(screen.getByRole('link', {name: 'server'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-server/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'desktop'})).toHaveAttribute('href', 'https://github.com/mattermost/desktop/blob/master/NOTICE.txt'); + expect(screen.getByRole('link', {name: 'mobile'})).toHaveAttribute('href', 'https://github.com/mattermost/mattermost-mobile/blob/master/NOTICE.txt'); }); test('should call onExited callback when the modal is hidden', () => { @@ -148,7 +184,7 @@ describe('components/AboutBuildModal', () => { }, }); - const wrapper = mountWithIntl( + renderWithIntl( { , ); - wrapper.find(Modal).first().props().onExited?.(document.createElement('div')); + userEvent.click(screen.getByText('Close')); expect(onExited).toHaveBeenCalledTimes(1); }); @@ -176,7 +212,7 @@ describe('components/AboutBuildModal', () => { }, }, }); - const wrapper = mountWithIntl( + renderWithIntl( { , ); - expect( - wrapper.find(AboutBuildModal).find('a#tosLink').props().href, - ).toBe( - AboutLinks.TERMS_OF_SERVICE + - '?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=', - ); - expect( - wrapper.find(AboutBuildModal).find('a#privacyLink').props().href, - ).toBe( - AboutLinks.PRIVACY_POLICY + - '?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=', - ); + expect(screen.getByRole('link', {name: 'Terms of Use'})).toHaveAttribute('href', `${AboutLinks.TERMS_OF_SERVICE}?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=`); - expect(wrapper.find(AboutBuildModal).find('a#tosLink').props().href).not.toBe(config?.TermsOfServiceLink); - expect(wrapper.find(AboutBuildModal).find('a#privacyLink').props().href).not.toBe(config?.PrivacyPolicyLink); + expect(screen.getByRole('link', {name: 'Privacy Policy'})).toHaveAttribute('href', `${AboutLinks.PRIVACY_POLICY}?utm_source=mattermost&utm_medium=in-product&utm_content=about_build_modal&uid=currentUserId&sid=`); + + expect(screen.getByRole('link', {name: 'Terms of Use'})).not.toHaveAttribute('href', config?.TermsOfServiceLink); + expect(screen.getByRole('link', {name: 'Privacy Policy'})).not.toHaveAttribute('href', config?.PrivacyPolicyLink); }); - function shallowAboutBuildModal(props = {}) { + function renderAboutBuildModal(props = {}) { const onExited = jest.fn(); const show = true; @@ -215,6 +242,6 @@ describe('components/AboutBuildModal', () => { ...props, }; - return shallow(); + return renderWithIntl(); } }); diff --git a/webapp/channels/src/components/about_build_modal/about_build_modal.tsx b/webapp/channels/src/components/about_build_modal/about_build_modal.tsx index ff7c7bd6ab..69ef4a84ea 100644 --- a/webapp/channels/src/components/about_build_modal/about_build_modal.tsx +++ b/webapp/channels/src/components/about_build_modal/about_build_modal.tsx @@ -49,6 +49,7 @@ export default class AboutBuildModal extends React.PureComponent { doHide = () => { this.setState({show: false}); + this.props.onExited(); }; render() { @@ -172,7 +173,7 @@ export default class AboutBuildModal extends React.PureComponent { // Only show build number if it's a number (so only builds from Jenkins) let buildnumber: JSX.Element | null = ( -
+
{ {subTitle}

-
+
{ {'\u00a0' + mmversion}
-
+
=10", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "channels/node_modules/@types/react-select": { "version": "3.0.19", "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.19.tgz", @@ -54422,6 +54439,7 @@ "@stripe/stripe-js": "1.41.0", "@testing-library/jest-dom": "5.16.4", "@testing-library/react": "12.1.4", + "@testing-library/user-event": "12.1.4", "@tippyjs/react": "4.2.6", "@types/bootstrap": "4.5.0", "@types/color-hash": "1.0.2", @@ -54668,6 +54686,15 @@ "typescript": "^4.7" } }, + "@testing-library/user-event": { + "version": "12.1.4", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.1.4.tgz", + "integrity": "sha512-vd5s43lNfyq/JEr8ndQmS+An6dEVUmjW9zqtpmMHU+rrPMaHLrUIlWZ9wDE8ALS/dFMsu6U00A5X/7Dv/2tWnw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.10.2" + } + }, "@types/react-select": { "version": "3.0.19", "resolved": "https://registry.npmjs.org/@types/react-select/-/react-select-3.0.19.tgz",