[pull] master from mattermost:master

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

@@ -1,113 +1,64 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`components/CommercialSupportModal should match snapshot 1`] = `
-<Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  dialogClassName="a11y__modal more-modal more-direct-channels"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  id="commercialSupportModal"
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onExited={[MockFunction]}
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={true}
->
-  <ModalHeader
-    bsClass="modal-header"
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle
-      bsClass="modal-title"
-      componentClass="h4"
-    >
-      <MemoizedFormattedMessage
-        defaultMessage="Commercial Support"
-        id="commercial_support.title"
-      />
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
-  >
-    <div
-      className="CommercialSupportModal"
-    >
-      <MemoizedFormattedMessage
-        defaultMessage="If you're experiencing issues, <supportLink>submit a support ticket</supportLink>. To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment."
-        id="commercial_support_modal.description"
-        values={
-          Object {
-            "supportLink": [Function],
-          }
-        }
-      />
-      <div
-        className="CommercialSupportModal__packet_contents_download"
-      >
-        <strong>
-          <MemoizedFormattedMessage
-            defaultMessage="Select your Support Packet contents to download"
-            id="commercial_support_modal.download_contents"
-          />
-        </strong>
-      </div>
-      <div
-        className="CommercialSupportModal__option"
-        key="basic.server.logs"
-      >
-        <input
-          checked={true}
-          className="CommercialSupportModal__options__checkbox"
-          disabled={true}
-          id="basic.server.logs"
-          name="basic.server.logs"
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <MemoizedFormattedMessage
-          defaultMessage="Server Logs"
-          id="mettormost.plugin.metrics.support.packet"
-        >
-          <Component />
-        </MemoizedFormattedMessage>
+<div>
+  <div>
+    <div>
+      <div>
+        Commercial Support
       </div>
+    </div>
+    <div>
       <div
-        className="CommercialSupportModal__download"
+        class="CommercialSupportModal"
       >
+        If you're experiencing issues, 
         <a
-          className="btn btn-primary DownloadSupportPacket"
-          onClick={[Function]}
-          rel="noopener noreferrer"
+          href="https://support.mattermost.com/hc/en-us/requests/new"
         >
-          <i
-            className="icon icon-download-outline"
-          />
-          <MemoizedFormattedMessage
-            defaultMessage="Download Support Packet"
-            id="commercial_support.download_support_packet"
-          />
+          submit a support ticket
         </a>
+        . To help with troubleshooting, it's recommended to download the Support Packet below that includes more details about your Mattermost environment.
+        <div
+          class="CommercialSupportModal__packet_contents_download"
+        >
+          <strong>
+            Select your Support Packet contents to download
+          </strong>
+        </div>
+        <div
+          class="CommercialSupportModal__option"
+        >
+          <input
+            checked=""
+            class="CommercialSupportModal__options__checkbox"
+            disabled=""
+            id="basic.server.logs"
+            name="basic.server.logs"
+            type="checkbox"
+          />
+          <label
+            class="CommercialSupportModal__options_checkbox_label"
+            for="basic.server.logs"
+          >
+            Server Logs
+          </label>
+        </div>
+        <div
+          class="CommercialSupportModal__download"
+        >
+          <a
+            class="btn btn-primary DownloadSupportPacket"
+            rel="noopener noreferrer"
+          >
+            <i
+              class="icon icon-download-outline"
+            />
+            Download Support Packet
+          </a>
+        </div>
       </div>
     </div>
-  </ModalBody>
-</Modal>
+  </div>
+</div>
 `;

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

@@ -1,15 +1,33 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
 import React from 'react';
 
 import {Client4} from 'mattermost-redux/client';
 
 import CommercialSupportModal from 'components/commercial_support_modal/commercial_support_modal';
 
+import {act, renderWithContext, screen, userEvent, waitFor} from 'tests/react_testing_utils';
 import {TestHelper} from 'utils/test_helper';
 
+jest.mock('react-bootstrap', () => {
+    const Modal = ({children, show}: {children: React.ReactNode; show: boolean}) => (show ? <div>{children}</div> : null);
+    Modal.Header = ({children}: {children: React.ReactNode}) => <div>{children}</div>;
+    Modal.Body = ({children}: {children: React.ReactNode}) => <div>{children}</div>;
+    Modal.Title = ({children}: {children: React.ReactNode}) => <div>{children}</div>;
+    return {Modal};
+});
+
+jest.mock('components/alert_banner', () => (props: {message: React.ReactNode}) => (
+    <div>{props.message}</div>
+));
+
+jest.mock('components/external_link', () => ({children, href}: {children: React.ReactNode; href: string}) => (
+    <a href={href}>{children}</a>
+));
+
+jest.mock('components/widgets/loading/loading_spinner', () => () => <div>{'Loading...'}</div>);
+
 describe('components/CommercialSupportModal', () => {
     beforeAll(() => {
         // Mock getSystemRoute to return a valid URL
@@ -37,8 +55,8 @@ describe('components/CommercialSupportModal', () => {
     };
 
     test('should match snapshot', () => {
-        const wrapper = shallow(<CommercialSupportModal {...baseProps}/>);
-        expect(wrapper).toMatchSnapshot();
+        const {container} = renderWithContext(<CommercialSupportModal {...baseProps}/>);
+        expect(container).toMatchSnapshot();
     });
 
     test('should show error message when download fails', async () => {
@@ -56,20 +74,17 @@ describe('components/CommercialSupportModal', () => {
             }),
         );
 
-        const wrapper = shallow<CommercialSupportModal>(<CommercialSupportModal {...baseProps}/>);
+        renderWithContext(<CommercialSupportModal {...baseProps}/>);
 
-        // Trigger download
-        const instance = wrapper.instance();
-        await instance.downloadSupportPacket();
-        wrapper.update();
+        const user = userEvent.setup();
+        const downloadLink = screen.getByText('Download Support Packet').closest('a');
+        if (!downloadLink) {
+            throw new Error('Download Support Packet link not found');
+        }
+        await user.click(downloadLink);
 
         // Verify error message is shown
-        const errorDiv = wrapper.find('.CommercialSupportModal__error');
-        expect(errorDiv.exists()).toBe(true);
-        expect(errorDiv.find('.error-text').text()).toBe(`${errorMessage}: ${detailedError}`);
-
-        // Verify loading state is reset
-        expect(wrapper.state('loading')).toBe(false);
+        expect(await screen.findByText(`${errorMessage}: ${detailedError}`)).toBeInTheDocument();
     });
 
     test('should clear error when starting new download', async () => {
@@ -82,16 +97,30 @@ describe('components/CommercialSupportModal', () => {
             }),
         );
 
-        const wrapper = shallow<CommercialSupportModal>(<CommercialSupportModal {...baseProps}/>);
+        const ref = React.createRef<CommercialSupportModal>();
+        renderWithContext(
+            <CommercialSupportModal
+                {...baseProps}
+                ref={ref}
+            />,
+        );
 
-        // Set initial error state
-        wrapper.setState({error: 'Previous error'});
+        act(() => {
+            ref.current?.setState({error: 'Previous error'});
+        });
+        expect(screen.getByText('Previous error')).toBeInTheDocument();
 
         // Start download
-        const instance = wrapper.instance();
-        await instance.downloadSupportPacket();
+        const user = userEvent.setup();
+        const downloadLink = screen.getByText('Download Support Packet').closest('a');
+        if (!downloadLink) {
+            throw new Error('Download Support Packet link not found');
+        }
+        await user.click(downloadLink);
 
         // Verify error is cleared
-        expect(wrapper.state('error')).toBeUndefined();
+        await waitFor(() => {
+            expect(screen.queryByText('Previous error')).not.toBeInTheDocument();
+        });
     });
 });