Migrate multiple enzyme unit test to testing library (#23236)

webapp/channels/src/components/post_view/floating_timestamp/__snapshots__/floating_timestamp.test.tsx.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/FloatingTimestamp should match snapshot 1`] = `
-<div
-  className="post-list__timestamp scrolling toastAdjustment"
-  data-testid="floatingTimestamp"
->
-  <div>
-    <span>
-      <Connect(injectIntl(Timestamp))
-        ranges={
-          Array [
-            Object {
-              "display": <Memo(MemoizedFormattedMessage)
-                defaultMessage="Today"
-                id="date_separator.today"
-              />,
-              "equals": Array [
-                "day",
-                0,
-              ],
-            },
-            Object {
-              "display": <Memo(MemoizedFormattedMessage)
-                defaultMessage="Yesterday"
-                id="date_separator.yesterday"
-              />,
-              "equals": Array [
-                "day",
-                -1,
-              ],
-            },
-          ]
-        }
-        useTime={false}
-        value={1234}
-      />
-    </span>
-  </div>
-</div>
-`;

webapp/channels/src/components/post_view/floating_timestamp/floating_timestamp.test.tsx

@@ -2,9 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 
 import FloatingTimestamp from './floating_timestamp';
+import {screen} from '@testing-library/react';
+import {renderWithIntlAndStore} from 'tests/react_testing_utils';
 
 describe('components/post_view/FloatingTimestamp', () => {
     const baseProps = {
@@ -13,10 +14,27 @@ describe('components/post_view/FloatingTimestamp', () => {
         toastPresent: true,
         isRhsPost: false,
     };
+    const initialState = {
+        entities: {
+            general: {
+                config: {},
+            },
+            preferences: {
+                myPreferences: {},
+            },
+        },
+    };
 
-    test('should match snapshot', () => {
+    test('should match component state with given props', () => {
-        const wrapper = shallow(<FloatingTimestamp {...baseProps}/>);
+        renderWithIntlAndStore(<FloatingTimestamp {...baseProps}/>, initialState);
-        expect(wrapper).toMatchSnapshot();
+
-        expect(wrapper.hasClass('toastAdjustment')).toBe(true);
+        const floatingTimeStamp = screen.getByTestId('floatingTimestamp');
+        const time = screen.getByText('January 01, 1970');
+
+        expect(floatingTimeStamp).toBeInTheDocument();
+        expect(floatingTimeStamp).toHaveClass('post-list__timestamp scrolling toastAdjustment');
+
+        expect(time).toBeInTheDocument();
+        expect(time).toHaveAttribute('datetime', '1970-01-01T00:00:01.234');
     });
 });

webapp/channels/src/components/post_view/message_attachments/action_button/__snapshots__/action_button.test.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/message_attachments/action_button.jsx should match snapshot 1`] = `
-<button
-  data-action-cookie="cookie-contents"
-  data-action-id="action_id_1"
-  key="action_id_1"
-  onClick={[Function]}
->
-  <LoadingWrapper
-    loading={true}
-    text={null}
-  >
-    <Connect(Markdown)
-      message="action_name_1"
-      options={
-        Object {
-          "autolinkedUrlSchemes": Array [],
-          "markdown": false,
-          "mentionHighlight": false,
-        }
-      }
-    />
-  </LoadingWrapper>
-</button>
-`;

webapp/channels/src/components/post_view/message_attachments/action_button/action_button.test.tsx

@@ -2,13 +2,14 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
 
 import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 import {Preferences} from 'mattermost-redux/constants';
 
 import ActionButton from 'components/post_view/message_attachments/action_button/action_button';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 describe('components/post_view/message_attachments/action_button.jsx', () => {
     const baseProps = {
@@ -17,15 +18,23 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
         theme: Preferences.THEMES.denim as unknown as Theme,
     };
 
-    test('should match snapshot', () => {
+    test('should match default component state with given props', () => {
-        const wrapper = shallow(<ActionButton {...baseProps}/>);
+        render(<ActionButton {...baseProps}/>);
-        expect(wrapper).toMatchSnapshot();
+
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('data-action-cookie', 'cookie-contents');
+        expect(button).toHaveAttribute('data-action-id', 'action_id_1');
+
+        const loadingIcon = screen.getByTitle('Loading Icon');
+        expect(loadingIcon).toHaveClass('fa fa-spinner fa-fw fa-pulse spinner');
     });
 
     test('should call handleAction on click', () => {
-        const wrapper = shallow(<ActionButton {...baseProps}/>);
+        render(<ActionButton {...baseProps}/>);
 
-        wrapper.find('button').simulate('click');
+        const button = screen.getByRole('button');
+
+        userEvent.click(button);
 
         expect(baseProps.handleAction).toHaveBeenCalledTimes(1);
     });
@@ -36,12 +45,13 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'onlineIndicator'},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
 
-        expect(buttonStyles).toHaveProperty('borderColor', changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25));
+        const button = screen.getByRole('button');
-        expect(buttonStyles).toHaveProperty('borderWidth', 2);
+
-        expect(buttonStyles).toHaveProperty('color', Preferences.THEMES.denim.onlineIndicator);
+        expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25)}`);
+        expect(button).toHaveStyle('borderWidth: 2');
+        expect(button).toHaveStyle(`color: ${Preferences.THEMES.denim.onlineIndicator}`);
     });
 
     test('should have correct styles when provided color from not default theme', () => {
@@ -51,12 +61,13 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'danger'},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
 
-        expect(buttonStyles).toHaveProperty('borderColor', changeOpacity(Preferences.THEMES.indigo.errorTextColor, 0.25));
+        const button = screen.getByRole('button');
-        expect(buttonStyles).toHaveProperty('borderWidth', 2);
+
-        expect(buttonStyles).toHaveProperty('color', Preferences.THEMES.indigo.errorTextColor);
+        expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.indigo.errorTextColor, 0.25)}`);
+        expect(button).toHaveStyle('borderWidth: 2');
+        expect(button).toHaveStyle(`color: ${Preferences.THEMES.indigo.errorTextColor}`);
     });
 
     test('should have correct styles when provided status color', () => {
@@ -65,12 +76,12 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: 'success'},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
+        const button = screen.getByRole('button');
 
-        expect(buttonStyles).toHaveProperty('borderColor', changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25));
+        expect(button).toHaveStyle(`borderColor: ${changeOpacity(Preferences.THEMES.denim.onlineIndicator, 0.25)}`);
-        expect(buttonStyles).toHaveProperty('borderWidth', 2);
+        expect(button).toHaveStyle('borderWidth: 2');
-        expect(buttonStyles).toHaveProperty('color', Preferences.THEMES.denim.onlineIndicator);
+        expect(button).toHaveStyle(`color: ${Preferences.THEMES.denim.onlineIndicator}`);
     });
 
     test('should have correct styles when provided hex color', () => {
@@ -79,12 +90,12 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: '#28a745'},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
+        const button = screen.getByRole('button');
 
-        expect(buttonStyles).toHaveProperty('borderColor', changeOpacity(props.action.style, 0.25));
+        expect(button).toHaveStyle(`borderColor: ${changeOpacity(props.action.style, 0.25)}`);
-        expect(buttonStyles).toHaveProperty('borderWidth', 2);
+        expect(button).toHaveStyle('borderWidth: 2');
-        expect(buttonStyles).toHaveProperty('color', props.action.style);
+        expect(button).toHaveStyle(`color: ${props.action.style}`);
     });
 
     test('should have no styles when provided invalid hex color', () => {
@@ -93,10 +104,10 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: '#wrong'},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
+        const button = screen.getByRole('button');
 
-        expect(buttonStyles).toBeUndefined();
+        expect(button.style.length).toBe(0);
     });
 
     test('should have no styles when provided undefined', () => {
@@ -105,9 +116,9 @@ describe('components/post_view/message_attachments/action_button.jsx', () => {
             action: {...baseProps.action, style: undefined},
         };
 
-        const wrapper = shallow(<ActionButton {...props}/>);
+        render(<ActionButton {...props}/>);
-        const buttonStyles = wrapper.find('button').prop('style');
+        const button = screen.getByRole('button');
 
-        expect(buttonStyles).toBeUndefined();
+        expect(button.style.length).toBe(0);
     });
 });

webapp/channels/src/components/post_view/message_attachments/action_menu/action_menu.test.tsx

@@ -1,10 +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 ActionMenu from './action_menu';
+import {screen} from '@testing-library/react';
+import {renderWithIntlAndStore} from 'tests/react_testing_utils';
 
 describe('components/post_view/message_attachments/ActionMenu', () => {
     const baseProps = {
@@ -30,13 +31,20 @@ describe('components/post_view/message_attachments/ActionMenu', () => {
         selectAttachmentMenuAction: jest.fn(),
     };
 
-    test('should start with nothing selected', () => {
+    test('should start with nothing selected', async () => {
-        const wrapper = shallow(<ActionMenu {...baseProps}/>);
+        renderWithIntlAndStore(<ActionMenu {...baseProps}/>, {});
 
-        expect(wrapper.state()).toMatchObject({
+        const autoCompleteSelector = screen.getByTestId('autoCompleteSelector');
-            selected: undefined,
+        const input = screen.getByPlaceholderText('action');
-            value: '',
+
-        });
+        expect(autoCompleteSelector).toBeInTheDocument();
+        expect(autoCompleteSelector).toHaveClass('form-group');
+
+        //if nothing is selected or selected is undefined, baseProps.selectAttachmentMenuAction should not be called
+        expect(baseProps.selectAttachmentMenuAction).not.toHaveBeenCalled();
+
+        expect(input).toHaveClass('form-control');
+        expect(input).toHaveAttribute('value', '');
     });
 
     test('should set selected based on default option', () => {
@@ -47,14 +55,11 @@ describe('components/post_view/message_attachments/ActionMenu', () => {
                 default_option: '2',
             },
         };
-        const wrapper = shallow(<ActionMenu {...props}/>);
+        renderWithIntlAndStore(<ActionMenu {...props}/>, {});
 
-        expect(wrapper.state()).toMatchObject({
+        const input = screen.getByPlaceholderText('action');
-            selected: {
+
-                text: 'Two',
+        //default_option is given in props
-                value: '2',
+        expect(input).toHaveAttribute('value', 'Two');
-            },
-            value: 'Two',
-        });
     });
 });

webapp/channels/src/components/post_view/new_message_separator/__snapshots__/new_message_separator.test.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/post_view/new_message_separator should render new_message_separator 1`] = `
-<div
-  className="new-separator"
->
-  <NotificationSeparator
-    id="1234"
-  >
-    <MemoizedFormattedMessage
-      defaultMessage="New Messages"
-      id="posts_view.newMsg"
-    />
-  </NotificationSeparator>
-</div>
-`;

webapp/channels/src/components/post_view/new_message_separator/new_message_separator.test.tsx

@@ -1,16 +1,25 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
 import NewMessageSeparator from './new_message_separator';
+import {screen} from '@testing-library/react';
+import {renderWithIntl} from 'tests/react_testing_utils';
 
 describe('components/post_view/new_message_separator', () => {
     test('should render new_message_separator', () => {
-        const wrapper = shallow(
+        renderWithIntl(
             <NewMessageSeparator separatorId='1234'/>,
         );
-        expect(wrapper).toMatchSnapshot();
+
+        const newMessage = screen.getByText('New Messages');
+        const separator = screen.getByTestId('NotificationSeparator');
+
+        expect(newMessage).toBeInTheDocument();
+        expect(newMessage).toHaveClass('separator__text');
+
+        expect(separator).toBeInTheDocument();
+        expect(separator).toHaveClass('Separator NotificationSeparator');
     });
 });

webapp/channels/src/components/post_view/post_attachment_container/__snapshots__/post_attachment_container.test.tsx.snap

@@ -1,44 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PostAttachmentContainer should render correctly 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": Subscription {
-        "handleChangeWrapper": [Function],
-        "listeners": Object {
-          "notify": [Function],
-        },
-        "onStateChange": [Function],
-        "parentSub": undefined,
-        "store": Object {
-          "clearActions": [Function],
-          "dispatch": [Function],
-          "getActions": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-        },
-        "unsubscribe": null,
-      },
-    }
-  }
->
-  <PostAttachmentContainer
-    className="permalink"
-    link="/test/pl/1"
-  >
-    <p>
-      some children
-    </p>
-  </PostAttachmentContainer>
-</ContextProvider>
-`;

webapp/channels/src/components/post_view/post_attachment_container/post_attachment_container.test.tsx

@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
-
 import React from 'react';
-import {Provider} from 'react-redux';
-
-import {mockStore} from 'tests/test_store';
 
 import PostAttachmentContainer, {Props} from './post_attachment_container';
+import {screen} from '@testing-library/react';
+import {renderWithIntlAndStore} from 'tests/react_testing_utils';
+import {DeepPartial} from '@mattermost/types/utilities';
+import {GlobalState} from '@mattermost/types/store';
 
 describe('PostAttachmentContainer', () => {
     const baseProps: Props = {
@@ -17,24 +16,34 @@ describe('PostAttachmentContainer', () => {
         link: '/test/pl/1',
     };
 
-    const initialState = {
+    const initialState: DeepPartial<GlobalState> = {
         entities: {
+            general: {config: {}},
             users: {
                 currentUserId: 'user1',
                 profiles: {},
             },
+            teams: {
+                currentTeamId: 'current_team_id',
+                teams: {},
             },
+            posts: {posts: {}},
+            preferences: {myPreferences: {}},
+
+        },
+
     };
 
-    test('should render correctly', async () => {
+    test('should render correctly', () => {
-        const store = await mockStore(initialState);
+        renderWithIntlAndStore(
-
+            <PostAttachmentContainer {...baseProps}/>, initialState,
-        const wrapper = shallow(
-            <Provider store={store.store}>
-                <PostAttachmentContainer {...baseProps}/>
-            </Provider>,
         );
 
-        expect(wrapper).toMatchSnapshot();
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('attachment attachment--permalink');
+        expect(button.children[0]).toHaveClass('attachment__content attachment__content--permalink');
+
+        expect(screen.getByText('some children')).toBeInTheDocument();
     });
 });

webapp/channels/src/components/post_view/post_list_virtualized/latest_post_reader.test.tsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {mount} from 'enzyme';
 import React from 'react';
 import {createIntl, useIntl} from 'react-intl';
 
@@ -13,6 +12,9 @@ import {mockStore} from 'tests/test_store';
 import {TestHelper} from 'utils/test_helper';
 
 import LatestPostReader from './latest_post_reader';
+import {render, screen} from '@testing-library/react';
+import {renderWithIntlAndStore} from 'tests/react_testing_utils';
+import {Provider} from 'react-redux';
 
 jest.mock('react-intl', () => ({
     ...jest.requireActual('react-intl'),
@@ -59,36 +61,40 @@ describe('LatestPostReader', () => {
     };
 
     test('should render aria-label as a child in the given locale', () => {
-        const {mountOptions} = mockStore(baseState);
+        const store = mockStore(baseState);
 
         (useIntl as jest.Mock).mockImplementation(() => createIntl({locale: 'en', messages: enMessages, defaultLocale: 'en'}));
 
-        let wrapper = mount(<LatestPostReader {...baseProps}/>, mountOptions);
+        const {rerender} = render(
-        let span = wrapper.childAt(0);
+            <Provider store={store.store}>
+                <LatestPostReader {...baseProps}/>
+            </Provider>,
+        );
 
-        expect(span.prop('children')).toContain(author.username);
+        const prevMessage = screen.getByText(`January 1, ${author.username} wrote, This is a test`, {exact: false});
-        expect(span.prop('children')).toContain('January');
+        expect(prevMessage).toBeInTheDocument();
+        expect(prevMessage).toHaveClass('sr-only');
 
         (useIntl as jest.Mock).mockImplementation(() => createIntl({locale: 'es', messages: esMessages, defaultLocale: 'es'}));
 
-        wrapper = mount(<LatestPostReader {...baseProps}/>, mountOptions);
+        rerender(<Provider store={store.store}> <LatestPostReader {...baseProps}/></Provider>);
-        span = wrapper.childAt(0);
+        const januaryInSpanish = 'enero';
+        const message = screen.getByText(`${januaryInSpanish}, ${author.username} wrote, This is a test`, {exact: false});
 
-        expect(span.prop('children')).toContain(author.username);
+        expect(message).toBeInTheDocument();
-        expect(span.prop('children')).toContain('enero');
+        expect(message).toHaveClass('sr-only');
     });
 
     test('should be able to handle an empty post array', () => {
-        const {mountOptions} = mockStore(baseState);
-
         const props = {
             ...baseProps,
             postIds: [],
         };
 
-        const wrapper = mount(<LatestPostReader {...props}/>, mountOptions);
+        renderWithIntlAndStore(<LatestPostReader {...props}/>, baseState);
-        const span = wrapper.childAt(0);
 
-        expect(span.prop('children')).toEqual('');
+        // body should be empty
+        const message = screen.queryByText('This is a test');
+        expect(message).not.toBeInTheDocument();
     });
 });