+
`;
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 1`] = `
-
- }
- disabled={false}
- errorMessage={
- Object {
- "defaultMessage": "Error Message: {error}",
- "id": "error.message",
- }
- }
- helpText={
-
- }
- includeDetailedError={true}
- requestAction={
- [MockFunction] {
- "calls": Array [
- Array [
- [Function],
- [Function],
- ],
- ],
- "results": Array [
- Object {
- "type": "return",
- "value": undefined,
- },
- ],
- }
- }
- saveNeeded={false}
- showSuccessMessage={true}
- successMessage={
- Object {
- "defaultMessage": "Test Successful",
- "id": "admin.requestButton.requestSuccess",
- }
- }
->
+
`;
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 2`] = `
-
- }
- disabled={false}
- errorMessage={
- Object {
- "defaultMessage": "Error Message: {error}",
- "id": "error.message",
- }
- }
- helpText={
-
- }
- includeDetailedError={false}
- requestAction={
- [MockFunction] {
- "calls": Array [
- Array [
- [Function],
- [Function],
- ],
- Array [
- [Function],
- [Function],
- ],
- ],
- "results": Array [
- Object {
- "type": "return",
- "value": undefined,
- },
- Object {
- "type": "return",
- "value": undefined,
- },
- ],
- }
- }
- saveNeeded={false}
- showSuccessMessage={true}
- successMessage={
- Object {
- "defaultMessage": "Test Successful",
- "id": "admin.requestButton.requestSuccess",
- }
- }
->
+
`;
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 1`] = `
-
- }
- disabled={false}
- errorMessage={
- Object {
- "defaultMessage": "Test Failure: {error}",
- "id": "admin.requestButton.requestFailure",
- }
- }
- helpText={
-
- }
- includeDetailedError={false}
- requestAction={
- [MockFunction] {
- "calls": Array [
- Array [
- [Function],
- [Function],
- ],
- ],
- "results": Array [
- Object {
- "type": "return",
- "value": undefined,
- },
- ],
- }
- }
- saveNeeded={false}
- showSuccessMessage={true}
- successMessage={
- Object {
- "defaultMessage": "Success Message",
- "id": "success.message",
- }
- }
->
+
`;
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 2`] = `
-
- }
- disabled={false}
- errorMessage={
- Object {
- "defaultMessage": "Test Failure: {error}",
- "id": "admin.requestButton.requestFailure",
- }
- }
- helpText={
-
- }
- includeDetailedError={false}
- requestAction={
- [MockFunction] {
- "calls": Array [
- Array [
- [Function],
- [Function],
- ],
- Array [
- [Function],
- [Function],
- ],
- ],
- "results": Array [
- Object {
- "type": "return",
- "value": undefined,
- },
- Object {
- "type": "return",
- "value": undefined,
- },
- ],
- }
- }
- saveNeeded={false}
- showSuccessMessage={false}
- successMessage={
- Object {
- "defaultMessage": "Success Message",
- "id": "success.message",
- }
- }
->
+
`;
diff --git a/webapp/channels/src/components/admin_console/request_button/request_button.test.tsx b/webapp/channels/src/components/admin_console/request_button/request_button.test.tsx
index 90c5d72365f..3cbd9b838fb 100644
--- a/webapp/channels/src/components/admin_console/request_button/request_button.test.tsx
+++ b/webapp/channels/src/components/admin_console/request_button/request_button.test.tsx
@@ -1,19 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import {FormattedMessage} from 'react-intl';
import RequestButton from 'components/admin_console/request_button/request_button';
-import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+import {renderWithContext, screen, userEvent} from 'tests/react_testing_utils';
describe('components/admin_console/request_button/request_button.jsx', () => {
test('should match snapshot', () => {
const emptyFunction = jest.fn();
- const wrapper = shallow
(
+ const {container} = renderWithContext(
{
}
/>,
);
- expect(wrapper).toMatchSnapshot();
+ expect(container).toMatchSnapshot();
});
- test('should call saveConfig and request actions when saveNeeded is true', () => {
+ test('should call saveConfig and request actions when saveNeeded is true', async () => {
const requestActionSuccess = jest.fn((success) => success());
const saveConfigActionSuccess = jest.fn((success) => success());
- const wrapper = mountWithIntl(
+ renderWithContext(
{
/>,
);
- wrapper.find('button').first().simulate('click');
+ await userEvent.click(screen.getByRole('button'));
expect(requestActionSuccess.mock.calls.length).toBe(1);
expect(saveConfigActionSuccess.mock.calls.length).toBe(0);
});
- test('should call only request action when saveNeeded is false', () => {
+ test('should call only request action when saveNeeded is false', async () => {
const requestActionSuccess = jest.fn((success) => success());
const saveConfigActionSuccess = jest.fn((success) => success());
- const wrapper = mountWithIntl(
+ renderWithContext(
{
/>,
);
- wrapper.find('button').first().simulate('click');
+ await userEvent.click(screen.getByRole('button'));
expect(requestActionSuccess.mock.calls.length).toBe(1);
expect(saveConfigActionSuccess.mock.calls.length).toBe(1);
});
- test('should match snapshot with successMessage', () => {
+ test('should match snapshot with successMessage', async () => {
const requestActionSuccess = jest.fn((success) => success());
// Success & showSuccessMessage=true
- const wrapper1 = mountWithIntl(
+ const {container: container1} = renderWithContext(
{
/>,
);
- wrapper1.find('button').first().simulate('click');
- expect(wrapper1).toMatchSnapshot();
+ await userEvent.click(screen.getAllByRole('button')[0]);
+ expect(container1).toMatchSnapshot();
// Success & showSuccessMessage=false
- const wrapper2 = mountWithIntl(
+ const {container: container2} = renderWithContext(
{
/>,
);
- wrapper2.find('button').first().simulate('click');
+ await userEvent.click(screen.getAllByRole('button')[1]);
- expect(wrapper2).toMatchSnapshot();
+ expect(container2).toMatchSnapshot();
});
- test('should match snapshot with request error', () => {
+ test('should match snapshot with request error', async () => {
const requestActionFailure = jest.fn((success, error) => error({
message: '__message__',
detailed_error: '__detailed_error__',
}));
// Error & includeDetailedError=true
- const wrapper1 = mountWithIntl(
+ const {container: container1} = renderWithContext(
{
/>,
);
- wrapper1.find('button').first().simulate('click');
- expect(wrapper1).toMatchSnapshot();
+ await userEvent.click(screen.getAllByRole('button')[0]);
+ expect(container1).toMatchSnapshot();
// Error & includeDetailedError=false
- const wrapper2 = mountWithIntl(
+ const {container: container2} = renderWithContext(
{
/>,
);
- wrapper2.find('button').first().simulate('click');
+ await userEvent.click(screen.getAllByRole('button')[1]);
- expect(wrapper2).toMatchSnapshot();
+ expect(container2).toMatchSnapshot();
});
});
diff --git a/webapp/channels/src/components/admin_console/schema_text.test.tsx b/webapp/channels/src/components/admin_console/schema_text.test.tsx
index fc3df8a674f..fdbf52b8e99 100644
--- a/webapp/channels/src/components/admin_console/schema_text.test.tsx
+++ b/webapp/channels/src/components/admin_console/schema_text.test.tsx
@@ -1,9 +1,10 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
+import {renderWithContext} from 'tests/react_testing_utils';
+
import SchemaText from './schema_text';
describe('SchemaText', () => {
@@ -14,9 +15,9 @@ describe('SchemaText', () => {
};
test('should render plain text correctly', () => {
- const wrapper = shallow(a link ',
- });
+ const span = container.querySelector('span');
+ expect(span).toHaveProperty('innerHTML', 'This is a link ');
});
test('should open internal markdown links in the same window', () => {
@@ -83,11 +83,10 @@ describe('SchemaText', () => {
text: 'This is [a link](http://localhost:8065/api/v4/users/src_id)',
};
- const wrapper = shallow(a link ',
- });
+ const span = container.querySelector('span');
+ expect(span).toHaveProperty('innerHTML', 'This is a link ');
});
test('should support explicit external links like FormattedMarkdownMessage', () => {
@@ -97,10 +96,9 @@ describe('SchemaText', () => {
text: 'This is [a link](!https://example.com)',
};
- const wrapper = shallow(a link ',
- });
+ const span = container.querySelector('span');
+ expect(span).toHaveProperty('innerHTML', 'This is a link ');
});
});
diff --git a/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap b/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
index a9b76d767de..a3513c01aa5 100644
--- a/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/user_grid/__snapshots__/user_grid.test.tsx.snap
@@ -1,1120 +1,737 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`components/admin_console/user_grid/UserGrid should match snapshot with 2 users 1`] = `
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ user-1 -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ user-2 -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ user-not-saved -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ user-1 -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ user-2 -
+
+
+
+
+
+
+
+
+
+
-
-
- Child 1
-
-
-
-
- Child 2
-
-
+
+
`;
exports[`components/backstage/components/BackstageHeader should match snapshot without children 1`] = `
-
-
+
+
`;
diff --git a/webapp/channels/src/components/backstage/components/backstage_header.test.tsx b/webapp/channels/src/components/backstage/components/backstage_header.test.tsx
index cc5c14b5995..78a9f181268 100644
--- a/webapp/channels/src/components/backstage/components/backstage_header.test.tsx
+++ b/webapp/channels/src/components/backstage/components/backstage_header.test.tsx
@@ -1,26 +1,27 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import BackstageHeader from 'components/backstage/components/backstage_header';
+import {render} from 'tests/react_testing_utils';
+
describe('components/backstage/components/BackstageHeader', () => {
test('should match snapshot without children', () => {
- const wrapper = shallow(
+ const {container} = render(
,
);
- expect(wrapper).toMatchSnapshot();
+ expect(container).toMatchSnapshot();
});
test('should match snapshot with children', () => {
- const wrapper = shallow(
+ const {container} = render(
{'Child 1'}
{'Child 2'}
,
);
- expect(wrapper).toMatchSnapshot();
+ expect(container).toMatchSnapshot();
});
});
diff --git a/webapp/channels/src/components/backstage/components/backstage_sidebar.test.tsx b/webapp/channels/src/components/backstage/components/backstage_sidebar.test.tsx
index d6c010ea2ed..47bf1f37897 100644
--- a/webapp/channels/src/components/backstage/components/backstage_sidebar.test.tsx
+++ b/webapp/channels/src/components/backstage/components/backstage_sidebar.test.tsx
@@ -1,15 +1,19 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import type {ComponentProps} from 'react';
+import {MemoryRouter} from 'react-router-dom';
+import {renderWithContext, screen} from 'tests/react_testing_utils';
import {TestHelper} from 'utils/test_helper';
-import BackstageCategory from './backstage_category';
import BackstageSidebar from './backstage_sidebar';
+// Mock permission gates to render their children
+jest.mock('components/permissions_gates/team_permission_gate', () => ({children}: {children: React.ReactNode}) => <>{children});
+jest.mock('components/permissions_gates/system_permission_gate', () => ({children}: {children: React.ReactNode}) => <>{children});
+
describe('components/backstage/components/BackstageSidebar', () => {
const defaultProps: ComponentProps
= {
team: TestHelper.getTeamMock({
@@ -26,6 +30,15 @@ describe('components/backstage/components/BackstageSidebar', () => {
enableOutgoingOAuthConnections: false,
};
+ // Helper to render with router at integrations path to show children
+ const renderAtIntegrationsPath = (props: ComponentProps) => {
+ return renderWithContext(
+
+ ,
+ );
+ };
+
describe('custom emoji', () => {
const testCases = [
{enableCustomEmoji: false, canCreateOrDeleteCustomEmoji: false, expectedResult: false},
@@ -41,11 +54,13 @@ describe('components/backstage/components/BackstageSidebar', () => {
enableCustomEmoji: testCase.enableCustomEmoji,
canCreateOrDeleteCustomEmoji: testCase.canCreateOrDeleteCustomEmoji,
};
- const wrapper = shallow(
-
+
`;
exports[`/components/common/InfiniteScroll should not show loading screen if there is no data 1`] = `
-
+
-
+
`;
diff --git a/webapp/channels/src/components/common/__snapshots__/radio_group.test.tsx.snap b/webapp/channels/src/components/common/__snapshots__/radio_group.test.tsx.snap
index 3304b14928e..c5f2f37529a 100644
--- a/webapp/channels/src/components/common/__snapshots__/radio_group.test.tsx.snap
+++ b/webapp/channels/src/components/common/__snapshots__/radio_group.test.tsx.snap
@@ -1,63 +1,54 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`/components/common/RadioButtonGroup should match snapshot 1`] = `
-
`;
diff --git a/webapp/channels/src/components/common/__snapshots__/site_name_and_description.test.tsx.snap b/webapp/channels/src/components/common/__snapshots__/site_name_and_description.test.tsx.snap
index d647e628ff8..1fdfc3ac8a3 100644
--- a/webapp/channels/src/components/common/__snapshots__/site_name_and_description.test.tsx.snap
+++ b/webapp/channels/src/components/common/__snapshots__/site_name_and_description.test.tsx.snap
@@ -1,36 +1,33 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`/components/common/SiteNameAndDescription should match snapshot, default 1`] = `
-
+
Mattermost
-
-
+
`;
exports[`/components/common/SiteNameAndDescription should match snapshot, with custom site name and description 1`] = `
-
+
other_site
custom_description_text
-
+
`;
diff --git a/webapp/channels/src/components/common/accordion/__snapshots__/accordion.test.tsx.snap b/webapp/channels/src/components/common/accordion/__snapshots__/accordion.test.tsx.snap
index b7f7ce5231b..8181205f473 100644
--- a/webapp/channels/src/components/common/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/webapp/channels/src/components/common/accordion/__snapshots__/accordion.test.tsx.snap
@@ -1,51 +1,103 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`/components/common/Accordion should match snapshot 1`] = `
-
-
+
+
+
+
+
First List Item
-
,
+
Second List Item
-
,
- ],
- "title": "First Accordion Item",
- }
- }
- isExpanded={false}
- key="0"
- onButtonClick={[Function]}
- onHeaderClick={[MockFunction]}
- />
-
+
+
+
+
+
+
Third List Item
-
,
- ],
- "title": "Second Accordion Item",
- }
- }
- isExpanded={false}
- key="1"
- onButtonClick={[Function]}
- onHeaderClick={[MockFunction]}
- />
-
+
+
+
+
+
+
diff --git a/webapp/channels/src/components/common/carousel/carousel.test.tsx b/webapp/channels/src/components/common/carousel/carousel.test.tsx
index c5adb3dc9c6..630375970c1 100644
--- a/webapp/channels/src/components/common/carousel/carousel.test.tsx
+++ b/webapp/channels/src/components/common/carousel/carousel.test.tsx
@@ -1,12 +1,11 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import Carousel from 'components/common/carousel/carousel';
-import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+import {renderWithContext, userEvent, waitFor} from 'tests/react_testing_utils';
import {BtnStyle} from './carousel_button';
@@ -43,70 +42,67 @@ describe('/components/common/Carousel', () => {
};
test('should match snapshot', () => {
- const wrapper = shallow(
);
- expect(wrapper).toMatchSnapshot();
+ const {container} = renderWithContext(
);
+ expect(container).toMatchSnapshot();
});
test('test carouse slides lenght is as expected', () => {
- const wrapper = shallow(
);
- const slides = wrapper.find('p.slide');
+ const {container} = renderWithContext(
);
+ const slides = container.querySelectorAll('p.slide');
expect(slides.length).toBe(3);
});
test('test carousel shows next and previous button', () => {
- const wrapper = mountWithIntl(
);
- const buttonNext = wrapper.find('CarouselButton').find('a.next');
- const buttonPrev = wrapper.find('CarouselButton').find('a.prev');
+ const {container} = renderWithContext(
);
+ const buttonNext = container.querySelector('a.next');
+ const buttonPrev = container.querySelector('a.prev');
- expect(buttonNext).toHaveLength(1);
- expect(buttonPrev).toHaveLength(1);
+ expect(buttonNext).toBeInTheDocument();
+ expect(buttonPrev).toBeInTheDocument();
});
test('test carousel shows next and previous chevrons when this option is sent', () => {
- const wrapper = mountWithIntl(
+ const {container} = renderWithContext(
,
);
- const nextButton = wrapper.find(Carousel).find('CarouselButton div.chevron-right');
- const prevButton = wrapper.find(Carousel).find('CarouselButton div.chevron-left');
+ const nextButton = container.querySelector('.chevron-right');
+ const prevButton = container.querySelector('.chevron-left');
- expect(nextButton).toHaveLength(1);
- expect(prevButton).toHaveLength(1);
+ expect(nextButton).toBeInTheDocument();
+ expect(prevButton).toBeInTheDocument();
});
test('test carousel shows first slide as active', () => {
- const wrapper = shallow(
);
- const activeSlide = wrapper.find('div.active-anim');
+ const {container} = renderWithContext(
);
+ const activeSlide = container.querySelector('div.active-anim');
- const slideText = activeSlide.find('p.slide').text();
+ const slideText = activeSlide!.querySelector('p.slide')!.textContent;
expect(slideText).toEqual('First Slide');
});
- test('test carousel moves slides when clicking buttons', (done) => {
- const wrapper = mountWithIntl(
);
- const activeSlide = wrapper.find('div.active-anim');
+ test('test carousel moves slides when clicking buttons', async () => {
+ const {container} = renderWithContext(
);
+ const activeSlide = container.querySelector('div.active-anim');
- const slide1Text = activeSlide.find('p.slide').text();
+ const slide1Text = activeSlide!.querySelector('p.slide')!.textContent;
expect(slide1Text).toEqual('First Slide');
- const buttonNext = wrapper.find('CarouselButton').find('a.next');
+ const buttonNext = container.querySelector('a.next') as HTMLElement;
- buttonNext.simulate('click');
+ await userEvent.click(buttonNext);
- jest.useFakeTimers();
- setTimeout(() => {
- const activeSlide = wrapper.find('div.active-anim');
- const slide1Text = activeSlide.find('p.slide').text();
- expect(slide1Text).toEqual('Second Slide');
- done();
- }, 1000);
- jest.runAllTimers();
+ await waitFor(() => {
+ const activeSlideAfterClick = container.querySelector('div.active-anim');
+ const slideText = activeSlideAfterClick!.querySelector('p.slide')!.textContent;
+ expect(slideText).toEqual('Second Slide');
+ });
});
- test('test carousel executes custom next and prev btn callback functions', () => {
+ test('test carousel executes custom next and prev btn callback functions', async () => {
const onPrevSlideClick = jest.fn();
const onNextSlideClick = jest.fn();
const props = {
@@ -114,12 +110,12 @@ describe('/components/common/Carousel', () => {
onPrevSlideClick,
onNextSlideClick};
- const wrapper = mountWithIntl(
);
- const buttonNext = wrapper.find('CarouselButton').find('a.next');
- const buttonPrev = wrapper.find('CarouselButton').find('a.prev');
+ const {container} = renderWithContext(
);
+ const buttonNext = container.querySelector('a.next') as HTMLElement;
+ const buttonPrev = container.querySelector('a.prev') as HTMLElement;
- buttonNext.simulate('click');
- buttonPrev.simulate('click');
+ await userEvent.click(buttonNext);
+ await userEvent.click(buttonPrev);
expect(onNextSlideClick).toHaveBeenCalledWith(2);
expect(onPrevSlideClick).toHaveBeenCalledWith(1);
diff --git a/webapp/channels/src/components/common/infinite_scroll.test.tsx b/webapp/channels/src/components/common/infinite_scroll.test.tsx
index ec80236dd15..7237085f0c1 100644
--- a/webapp/channels/src/components/common/infinite_scroll.test.tsx
+++ b/webapp/channels/src/components/common/infinite_scroll.test.tsx
@@ -1,13 +1,11 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import type {ReactWrapper} from 'enzyme';
import React from 'react';
import InfiniteScroll from 'components/common/infinite_scroll';
-import {mountWithIntl} from 'tests/helpers/intl-test-helper';
-import {act, waitFor} from 'tests/react_testing_utils';
+import {renderWithContext, fireEvent, waitFor, act} from 'tests/react_testing_utils';
describe('/components/common/InfiniteScroll', () => {
const baseProps = {
@@ -18,83 +16,141 @@ describe('/components/common/InfiniteScroll', () => {
totalItems: 20,
itemsPerPage: 10,
pageNumber: 1,
+ bufferValue: 100,
};
- let wrapper: ReactWrapper
;
-
- beforeEach(() => {
- wrapper = mountWithIntl(
;
- });
-
test('should match snapshot', () => {
- expect(wrapper).toMatchSnapshot();
+ const {container} = renderWithContext(
((resolve) => {
+ resolveCallback = resolve;
+ }));
- act(() => {
- wrapper.setState({isFetching: true});
+ const propsWithSlowCallback = {
+ ...baseProps,
+ callBack: slowCallback,
+ };
+
+ const {container} = renderWithContext(
-
-
-
+
diff --git a/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap b/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
index 515cda38953..e81b93741ed 100644
--- a/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
+++ b/webapp/channels/src/components/create_team/components/__snapshots__/display_name.test.tsx.snap
@@ -2,66 +2,74 @@
exports[`/components/create_team/components/display_name should match snapshot 1`] = `
-
+
+ Name your team in any language. Your team name shows in menus and headings.
+
+
+ Next
+
+
+
`;
diff --git a/webapp/channels/src/components/create_team/components/display_name.test.tsx b/webapp/channels/src/components/create_team/components/display_name.test.tsx
index e57f72f9c9f..02b886ae463 100644
--- a/webapp/channels/src/components/create_team/components/display_name.test.tsx
+++ b/webapp/channels/src/components/create_team/components/display_name.test.tsx
@@ -1,13 +1,11 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
-import type {ReactWrapper} from 'enzyme';
import React from 'react';
import DisplayName from 'components/create_team/components/display_name';
-import {mountWithIntl} from 'tests/helpers/intl-test-helper';
+import {renderWithContext, screen, fireEvent, userEvent} from 'tests/react_testing_utils';
import {cleanUpUrlable} from 'utils/url';
jest.mock('images/logo.png', () => 'logo.png');
@@ -22,50 +20,48 @@ describe('/components/create_team/components/display_name', () => {
};
test('should match snapshot', () => {
- const wrapper = shallow(
);
- expect(wrapper).toMatchSnapshot();
+ const {container} = renderWithContext(
);
+ expect(container).toMatchSnapshot();
});
- test('should run updateParent function', () => {
- const wrapper = mountWithIntl(
);
+ test('should run updateParent function', async () => {
+ renderWithContext(
);
- wrapper.find('button').simulate('click', {
- preventDefault: () => jest.fn(),
- });
+ await userEvent.click(screen.getByRole('button', {name: /next/i}));
- expect(wrapper.prop('updateParent')).toHaveBeenCalled();
+ expect(defaultProps.updateParent).toHaveBeenCalled();
});
- test('should pass state to updateParent function', () => {
- const wrapper = mountWithIntl(
);
+ test('should pass state to updateParent function', async () => {
+ renderWithContext(
);
- wrapper.find('button').simulate('click', {
- preventDefault: () => jest.fn(),
- });
+ await userEvent.click(screen.getByRole('button', {name: /next/i}));
- expect(wrapper.prop('updateParent')).toHaveBeenCalledWith(defaultProps.state);
+ expect(defaultProps.updateParent).toHaveBeenCalledWith(expect.objectContaining({
+ wizard: 'team_url',
+ team: expect.objectContaining({
+ display_name: 'test-team',
+ }),
+ }));
});
- test('should pass updated team name to updateParent function', () => {
- const wrapper = mountWithIntl(
);
+ test('should pass updated team name to updateParent function', async () => {
+ renderWithContext(
);
const teamDisplayName = 'My Test Team';
- const newState = {
- ...defaultProps.state,
- team: {
- ...defaultProps.state.team,
- display_name: teamDisplayName,
- name: cleanUpUrlable(teamDisplayName),
- },
+ const expectedTeam = {
+ ...defaultProps.state.team,
+ display_name: teamDisplayName,
+ name: cleanUpUrlable(teamDisplayName),
};
- (wrapper.find('.form-control') as unknown as ReactWrapper
).instance().value = teamDisplayName;
- wrapper.find('.form-control').simulate('change');
+ const input = screen.getByRole('textbox');
+ fireEvent.change(input, {target: {value: teamDisplayName}});
- wrapper.find('button').simulate('click', {
- preventDefault: () => jest.fn(),
- });
+ await userEvent.click(screen.getByRole('button', {name: /next/i}));
- expect(wrapper.prop('updateParent')).toHaveBeenCalledWith(defaultProps.state);
- expect(wrapper.prop('updateParent').mock.calls[0][0]).toEqual(newState);
+ expect(defaultProps.updateParent).toHaveBeenCalledWith(expect.objectContaining({
+ wizard: 'team_url',
+ team: expectedTeam,
+ }));
});
});
diff --git a/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap b/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap
index 98e0b521df7..dd7ca647781 100644
--- a/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap
+++ b/webapp/channels/src/components/create_team/components/team_url/__snapshots__/team_url.test.tsx.snap
@@ -2,119 +2,88 @@
exports[`/components/create_team/components/display_name should match snapshot 1`] = `
-
-
-
-
-
+ Choose the web address of your new team:
+
+
-
+
`;
exports[`components/MaxLengthInput should match snapshot 2`] = `
-
+
`;
exports[`components/MaxLengthInput should match snapshot 3`] = `
-
+
-
2
-
+
`;
diff --git a/webapp/channels/src/components/quick_input/max_length_input.test.tsx b/webapp/channels/src/components/quick_input/max_length_input.test.tsx
index 0de79a56c06..0116e799fd4 100644
--- a/webapp/channels/src/components/quick_input/max_length_input.test.tsx
+++ b/webapp/channels/src/components/quick_input/max_length_input.test.tsx
@@ -1,11 +1,12 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import {MaxLengthInput} from 'components/quick_input/index';
+import {render, screen} from 'tests/react_testing_utils';
+
describe('components/MaxLengthInput', () => {
const requiredProps = {
className: 'input',
@@ -17,13 +18,13 @@ describe('components/MaxLengthInput', () => {
['less than 20'],
['Where is Jessica Hyde?'],
])('should match snapshot', (defaultValue) => {
- const wrapper = shallow(
+ const {container} = render(
+
From:
-
In:
-
On:
-
Before:
-
After:
-
—
-
""
-
-
+
`;
exports[`components/SearchHint should match snapshot, with title 1`] = `
-
+
-
From:
-
In:
-
On:
-
Before:
-
After:
-
—
-
""
-
-
+
`;
exports[`components/SearchHint should match snapshot, without searchType 1`] = `
-
+
-
-
-
-
-
+
+ Learn about search
+
+
+
-
+
+
+
+
+
From:
-
In:
-
On:
-
Before:
-
After:
-
—
-
""
-
-
+
`;
diff --git a/webapp/channels/src/components/search_hint/search_hint.test.tsx b/webapp/channels/src/components/search_hint/search_hint.test.tsx
index 8b2ad35bf98..2aef1e3edc7 100644
--- a/webapp/channels/src/components/search_hint/search_hint.test.tsx
+++ b/webapp/channels/src/components/search_hint/search_hint.test.tsx
@@ -1,54 +1,51 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
-import {shallow} from 'enzyme';
import React from 'react';
import SearchHint from 'components/search_hint/search_hint';
+import {renderWithContext} from 'tests/react_testing_utils';
import {searchHintOptions} from 'utils/constants';
-let mockState: any;
-
-jest.mock('react-redux', () => ({
- ...jest.requireActual('react-redux') as typeof import('react-redux'),
- useSelector: (selector: (state: typeof mockState) => unknown) => selector(mockState),
-}));
-
describe('components/SearchHint', () => {
const baseProps = {
withTitle: false,
onOptionSelected: jest.fn(),
options: searchHintOptions,
};
- beforeEach(() => {
- mockState = {
- entities: {
- general: {
- config: {
- EnableFileAttachments: 'true',
- },
+
+ const initialState = {
+ entities: {
+ general: {
+ config: {
+ EnableFileAttachments: 'true',
},
},
- };
- });
+ users: {
+ currentUserId: 'currentUserId',
+ },
+ },
+ };
test('should match snapshot, with title', () => {
const props = {
...baseProps,
withTitle: true,
};
- const wrapper = shallow(
+ const {container} = renderWithContext(
-
+
+
+
+
+ Messages
+
+ 5
+
+
+
+ Files
+
+ 10
+
+
+
+
+
+
-
+
+
+
+
+ Messages
+
+ 5
+
+
+
+ Files
+
+ 10
+
+
+
+
+
-
+
+
+
+
+ Messages
+
+ 5
+
+
+
+
+
+
= shallow(
+ const {container} = renderWithContext(
= shallow(
-
- ,
+ const {container} = renderWithContext(
+ = shallow(
+ const props = {
+ ...baseProps,
+ selected: 'files' as 'messages' | 'files',
+ };
-
- ,
+ const {container} = renderWithContext(
+ = shallow(
+ const props = {
+ ...baseProps,
+ selected: 'files' as 'messages' | 'files',
+ isFileAttachmentsEnabled: false,
+ };
-
- ,
+ const {container} = renderWithContext(
+
-
+
- Ctrl
-
-
- Shift
-
-
- F
-
-
+
+ ⌘
+
+
+ F
+
+
+ 
-