From 5808b848c39fbae74189a2176877de3b848e6b79 Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Thu, 18 May 2023 17:40:12 +0530
Subject: [PATCH] MM-52213 webapp/platform/components : Add unit test framework
 (#23366)

---
 webapp/platform/components/babel.config.js    |  15 ++
 webapp/platform/components/jest.config.js     |  21 ++
 webapp/platform/components/package.json       |   1 +
 .../legacy_generic_modal.test.tsx.snap        | 143 +++++++++++++
 .../footer_pagination.test.tsx.snap           | 201 ++++++++++++++----
 .../footer_content/footer_pagination.test.tsx |  77 ++-----
 .../legacy_generic_modal.test.tsx             |  39 ++++
 webapp/platform/components/src/setupTests.ts  |   4 +
 webapp/platform/components/src/testUtils.tsx  |  13 ++
 .../components/src/tour_tip/tour_tip.tsx      |   1 -
 10 files changed, 414 insertions(+), 101 deletions(-)
 create mode 100644 webapp/platform/components/jest.config.js
 create mode 100644 webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap
 create mode 100644 webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx
 create mode 100644 webapp/platform/components/src/setupTests.ts
 create mode 100644 webapp/platform/components/src/testUtils.tsx

diff --git a/webapp/platform/components/babel.config.js b/webapp/platform/components/babel.config.js
index 641b2cf2e8..06f9099d35 100644
--- a/webapp/platform/components/babel.config.js
+++ b/webapp/platform/components/babel.config.js
@@ -11,6 +11,13 @@ const config = {
                 safari: 12,
             },
             modules: false,
+            corejs: {
+                version: "3.26",
+                proposals: true,
+            },
+            debug: false,
+            shippedProposals: true,
+            useBuiltIns: 'usage',
         }],
         ['@babel/preset-react', {
             useBuiltIns: true,
@@ -39,4 +46,12 @@ const config = {
     ],
 };
 
+config.env = {
+    test: {
+        presets: config.presets,
+        plugins: config.plugins,
+    },
+};
+config.env.test.presets[0][1].modules = 'auto';
+
 module.exports = config;
diff --git a/webapp/platform/components/jest.config.js b/webapp/platform/components/jest.config.js
new file mode 100644
index 0000000000..8c1d80cb89
--- /dev/null
+++ b/webapp/platform/components/jest.config.js
@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+/** @type {import('jest').Config} */
+
+const config = {
+    moduleDirectories: ['src', 'node_modules'],
+    testEnvironment: 'jsdom',
+    testPathIgnorePatterns: ['/node_modules/', '/.rollup.cache/', '/dist/'],
+    clearMocks: true,
+    moduleNameMapper: {
+        '^@mattermost/(components)$': '<rootDir>/../platform/$1/src',
+        '^@mattermost/(client)$': '<rootDir>/../platform/$1/src',
+        '^@mattermost/(types)/(.*)$': '<rootDir>/../platform/$1/src/$2',
+        '^.+\\.(css|scss)$': 'identity-obj-proxy',
+    },
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+};
+
+module.exports = config;
diff --git a/webapp/platform/components/package.json b/webapp/platform/components/package.json
index 0675cc5a53..8324322d63 100644
--- a/webapp/platform/components/package.json
+++ b/webapp/platform/components/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "build": "rollup -c",
     "run": "rollup -c --watch",
+    "test": "cross-env TZ=Etc/UTC jest",
     "clean": "rm -rf dist node_modules tsconfig.tsbuildinfo .rollup.cache"
   },
   "devDependencies": {
diff --git a/webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap b/webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap
new file mode 100644
index 0000000000..c43b2c8d65
--- /dev/null
+++ b/webapp/platform/components/src/legacy_generic_modal/__snapshots__/legacy_generic_modal.test.tsx.snap
@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacyGenericModal should match snapshot for base case 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class="modal-open"
+    style="padding-right: 0px;"
+  >
+    <div
+      aria-hidden="true"
+    />
+    <div
+      role="dialog"
+    >
+      <div
+        class="fade modal-backdrop in"
+      />
+      <div
+        aria-labelledby="genericModalLabel"
+        class="fade in modal"
+        id="genericModal"
+        role="dialog"
+        style="display: block; padding-right: 0px;"
+        tabindex="-1"
+      >
+        <div
+          class="a11y__modal GenericModal modal-dialog"
+        >
+          <div
+            class="modal-content"
+            role="document"
+          >
+            <div
+              data-testid="sentinelStart"
+              tabindex="-1"
+            />
+            <div
+              class="GenericModal__wrapper-enter-key-press-catcher"
+              tabindex="0"
+            >
+              <div
+                class="modal-header"
+              >
+                <button
+                  aria-label="Close"
+                  class="close"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                  >
+                    ×
+                  </span>
+                  <span
+                    class="sr-only"
+                  >
+                    Close
+                  </span>
+                </button>
+              </div>
+              <div
+                class="modal-body"
+              >
+                <div
+                  class="GenericModal__header"
+                >
+                  <h1
+                    id="genericModalLabel"
+                  >
+                    Modal Header Text
+                  </h1>
+                </div>
+                <div
+                  class="GenericModal__body padding"
+                />
+              </div>
+            </div>
+            <div
+              data-testid="sentinelEnd"
+              tabindex="-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+  />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap b/webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap
index 29d49c0a2a..76f7d23abe 100644
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/__snapshots__/footer_pagination.test.tsx.snap
@@ -1,41 +1,170 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/GenericModal/FooterPagination should render default 1`] = `
-<div
-  className="footer-pagination"
->
-  <div
-    className="footer-pagination__legend"
-  />
-  <div
-    className="footer-pagination__button-container"
-  >
-    <button
-      className="footer-pagination__button-container__button disabled"
-      disabled={true}
-      onClick={[MockFunction]}
-      type="button"
+exports[`LegacyGenericModal/FooterPagination should render default 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="footer-pagination"
+      >
+        <div
+          class="footer-pagination__legend"
+        />
+        <div
+          class="footer-pagination__button-container"
+        >
+          <button
+            class="footer-pagination__button-container__button disabled"
+            disabled=""
+            type="button"
+          >
+            <svg
+              fill="currentColor"
+              height="16"
+              version="1.1"
+              viewBox="0 0 24 24"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+              />
+            </svg>
+            <span>
+              Previous
+            </span>
+          </button>
+          <button
+            class="footer-pagination__button-container__button disabled"
+            disabled=""
+            type="button"
+          >
+            <span>
+              Next
+            </span>
+            <svg
+              fill="currentColor"
+              height="16"
+              version="1.1"
+              viewBox="0 0 24 24"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="footer-pagination"
     >
-      <ChevronLeftIcon
-        size={16}
+      <div
+        class="footer-pagination__legend"
       />
-      <span>
-        Previous
-      </span>
-    </button>
-    <button
-      className="footer-pagination__button-container__button disabled"
-      disabled={true}
-      onClick={[MockFunction]}
-      type="button"
-    >
-      <span>
-        Next
-      </span>
-      <ChevronRightIcon
-        size={16}
-      />
-    </button>
-  </div>
-</div>
+      <div
+        class="footer-pagination__button-container"
+      >
+        <button
+          class="footer-pagination__button-container__button disabled"
+          disabled=""
+          type="button"
+        >
+          <svg
+            fill="currentColor"
+            height="16"
+            version="1.1"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+            />
+          </svg>
+          <span>
+            Previous
+          </span>
+        </button>
+        <button
+          class="footer-pagination__button-container__button disabled"
+          disabled=""
+          type="button"
+        >
+          <span>
+            Next
+          </span>
+          <svg
+            fill="currentColor"
+            height="16"
+            version="1.1"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx b/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
index 9b80d2a2fe..206b9cd650 100644
--- a/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
+++ b/webapp/platform/components/src/legacy_generic_modal/footer_content/footer_pagination.test.tsx
@@ -2,11 +2,12 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+import {render, screen} from '@testing-library/react';
 
-import {FooterPagination} from './';
+import {FooterPagination} from './footer_pagination';
+import {wrapIntl} from '../../testUtils'
 
-describe('components/GenericModal/FooterPagination', () => {
+describe('LegacyGenericModal/FooterPagination', () => {
     const baseProps = {
         page: 0,
         total: 0,
@@ -16,73 +17,21 @@ describe('components/GenericModal/FooterPagination', () => {
     };
 
     test('should render default', () => {
-        const wrapper = shallow(
-            <FooterPagination {...baseProps}/>,
-        );
+        const wrapper = render(wrapIntl(<FooterPagination {...baseProps}/>));
 
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should render pagination legend', () => {
-        const wrapper = shallow(
-            <FooterPagination
-                {...baseProps}
-                page={0}
-                total={17}
-                itemsPerPage={10}
-            />,
-        );
+        const props = {
+            ...baseProps,
+            page: 0,
+            total: 17,
+            itemsPerPage: 10,
+        }
 
-        const legend = wrapper.find('.footer-pagination__legend');
+        render(wrapIntl(<FooterPagination {...props}/>));
 
-        expect(legend.length).toEqual(1);
-        expect(legend.at(0).text()).toEqual('Showing 1-10 of 17');
-    });
-
-    test('should render pagination buttons', () => {
-        const wrapper = shallow(
-            <FooterPagination
-                {...baseProps}
-                page={1}
-                total={30}
-                itemsPerPage={10}
-            />,
-        );
-
-        const buttons = wrapper.find('.footer-pagination__button-container__button');
-
-        expect(buttons.length).toEqual(2);
-        expect(buttons.at(0).text()).toEqual('<ChevronLeftIcon />Previous');
-        expect(buttons.at(1).text()).toEqual('Next<ChevronRightIcon />');
-    });
-
-    test('should handle pagination buttons', async () => {
-        const onPreviousPage = jest.fn();
-        const onNextPage = jest.fn();
-
-        const wrapper = shallow(
-            <FooterPagination
-                page={1}
-                total={30}
-                itemsPerPage={10}
-                onPreviousPage={onPreviousPage}
-                onNextPage={onNextPage}
-            />,
-        );
-
-        const buttons = wrapper.find('.footer-pagination__button-container__button');
-        const prevButton = buttons.at(0);
-        const nextButton = buttons.at(1);
-
-        expect(prevButton.hasClass('disabled')).toBeFalsy();
-        expect(nextButton.hasClass('disabled')).toBeFalsy();
-
-        nextButton.simulate('click');
-
-        expect(onNextPage).toHaveBeenCalledTimes(1);
-
-        prevButton.simulate('click');
-
-        expect(onPreviousPage).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Showing 1-10 of 17')).toBeInTheDocument();
     });
 });
diff --git a/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx b/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx
new file mode 100644
index 0000000000..2c832fc82c
--- /dev/null
+++ b/webapp/platform/components/src/legacy_generic_modal/legacy_generic_modal.test.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+
+import {LegacyGenericModal} from './legacy_generic_modal';
+import {wrapIntl} from '../testUtils';
+
+describe('LegacyGenericModal', () => {
+    const baseProps = {
+        onExited: jest.fn(),
+        modalHeaderText: 'Modal Header Text',
+        children: <></>,
+    };
+
+    test('should match snapshot for base case', () => {
+        const wrapper = render(
+            wrapIntl(<LegacyGenericModal {...baseProps}/>),
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should have confirm and cancels buttons when handlers are passed for both buttons', () => {
+        const props = {
+            ...baseProps,
+            handleConfirm: jest.fn(),
+            handleCancel: jest.fn(),
+        };
+
+        render(
+            wrapIntl(<LegacyGenericModal {...props}/>),
+        );
+        
+        expect(screen.getByText('Confirm')).toBeInTheDocument();
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+});
diff --git a/webapp/platform/components/src/setupTests.ts b/webapp/platform/components/src/setupTests.ts
new file mode 100644
index 0000000000..8ec9d636eb
--- /dev/null
+++ b/webapp/platform/components/src/setupTests.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import '@testing-library/jest-dom';
diff --git a/webapp/platform/components/src/testUtils.tsx b/webapp/platform/components/src/testUtils.tsx
new file mode 100644
index 0000000000..f0bf865a40
--- /dev/null
+++ b/webapp/platform/components/src/testUtils.tsx
@@ -0,0 +1,13 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {ReactNode} from 'react'
+import {IntlProvider, createIntl} from 'react-intl'
+
+export const defaultIntl = createIntl({
+    locale: 'en',
+    defaultLocale: 'en',
+    messages: {},
+})
+
+export const wrapIntl = (children?: ReactNode) => <IntlProvider {...defaultIntl}>{children}</IntlProvider>
diff --git a/webapp/platform/components/src/tour_tip/tour_tip.tsx b/webapp/platform/components/src/tour_tip/tour_tip.tsx
index 90cdac6a8f..703af5047f 100644
--- a/webapp/platform/components/src/tour_tip/tour_tip.tsx
+++ b/webapp/platform/components/src/tour_tip/tour_tip.tsx
@@ -8,7 +8,6 @@ import {Placement} from 'tippy.js';
 import classNames from 'classnames';
 
 import {PunchOutCoordsHeightAndWidth} from '../common/hooks/useMeasurePunchouts';
-import {useClickOutsideRef} from '../common/hooks/useClickOutsideRef';
 
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';