[MI-3825] Add test cases for components (#39)

* [MI-3827]: RTL base setup + downgrade to react 17 * [MI-3827]: Remove error log file & update ui-lib version * [MI-3826]: Reducers and Containers test cases * [MI-3826]: Update mockState * [MI-3825] Add test cases for components * [MI-3826]: Update snapshots * [MI-3825] Remove extra imports and update variable name --------- Co-authored-by: SaurabhSharma-884 <[email protected]>
Brightscout · Dec 13, 2023 · 29506d0 · 29506d0
1 parent 9b437fa
commit 29506d0
Show file tree

Hide file tree

Showing 16 changed files with 1,708 additions and 118 deletions.
diff --git a/webapp/src/components/Dialog/Dialog.test.tsx b/webapp/src/components/Dialog/Dialog.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {render, RenderResult} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {Dialog} from './Dialog.component';
+
+const onCloseHandler = jest.fn();
+const onSubmitHandler = jest.fn();
+
+const dialogProps = {
+    onCloseHandler,
+    onSubmitHandler,
+};
+
+let tree: RenderResult;
+
+describe('Dialog component', () => {
+    beforeEach(() => {
+        tree = render(<Dialog {...dialogProps}/>);
+    });
+
+    it('Should render correctly', () => {
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('Should close the dialog on clicking close button', () => {
+        expect(tree.getAllByRole('button').length).toEqual(2);
+
+        userEvent.click(tree.getAllByRole('button')[1]);
+        expect(onCloseHandler).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/webapp/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/webapp/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog component Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    class="modal-open"
+    style="padding-right: 0px;"
+  >
+    <div
+      aria-hidden="true"
+    />
+    <div
+      class="fade modal-backdrop show"
+    />
+    <div
+      aria-modal="true"
+      class="fade sc-fFSPTT eBIuuG mm-dialog disconnect-dialog modal show"
+      role="dialog"
+      style="display: block;"
+      tabindex="-1"
+    >
+      <div
+        class="modal-dialog"
+      >
+        <div
+          class="modal-content"
+        >
+          <div
+            class="sc-bkbkJK cHKkeq"
+          >
+            <h2
+              class="sc-dIvrsQ iMFmGO"
+            >
+              mockTitle
+            </h2>
+            <button
+              class="sc-fKgJPI dGklgm"
+            >
+              <div
+                class="sc-bdnxRM dOvjAb mm-icon"
+                size="20"
+              >
+                <reactcomponent />
+              </div>
+            </button>
+          </div>
+          <div
+            class="sc-iemWCZ lnrLZX"
+          >
+            
+            <div
+              class="sc-bCwfaz fFyvgR"
+            >
+              <div
+                class="mm-linearProgress  linear_loader  progress"
+              >
+                <div
+                  aria-valuemax="100"
+                  aria-valuemin="0"
+                  class="progress-bar"
+                  role="progressbar"
+                />
+              </div>
+            </div>
+            <div
+              class="sc-dlMDgC fWGLyT"
+            >
+              <button
+                class="sc-kEqXSa cwanGm mm-button "
+                width="fit-content"
+              >
+                Close
+              </button>
+              
+            </div>
+          </div>
+          <div
+            class="sc-kfYoZR gFGGdr"
+          />
+        </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/src/components/Icon/Icon.test.tsx b/webapp/src/components/Icon/Icon.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {render, RenderResult} from '@testing-library/react';
+
+import {Icon} from './Icon.component';
+import {IconProps} from './Icon.types';
+
+const iconProps: IconProps = {
+    iconName: 'close',
+    className: 'mockClassName',
+};
+
+let tree: RenderResult;
+
+describe('Icon component', () => {
+    beforeEach(() => {
+        tree = render(<Icon {...iconProps}/>);
+    });
+
+    it('Should render correctly', () => {
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('Should apply the passed className prop', () => {
+        expect(tree.container.firstChild).toHaveClass(iconProps.className as string, {exact: true});
+    });
+});
diff --git a/webapp/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/webapp/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon component Should render correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span
+        class="mockClassName"
+        style="line-height: 0;"
+      >
+        <svg
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.256 3.80605L9.062 8.00005L13.256 12.194L12.194 13.256L8 9.06205L3.806 13.256L2.744 12.194L6.938 8.00005L2.744 3.80605L3.806 2.74405L8 6.93805L12.194 2.74405L13.256 3.80605Z"
+            fill="#3F4350"
+          />
+        </svg>
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class="mockClassName"
+      style="line-height: 0;"
+    >
+      <svg
+        fill="none"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.256 3.80605L9.062 8.00005L13.256 12.194L12.194 13.256L8 9.06205L3.806 13.256L2.744 12.194L6.938 8.00005L2.744 3.80605L3.806 2.74405L8 6.93805L12.194 2.74405L13.256 3.80605Z"
+          fill="#3F4350"
+        />
+      </svg>
+    </span>
+  </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/src/components/LinkedChannelCard/LinkedChannelCard.test.tsx b/webapp/src/components/LinkedChannelCard/LinkedChannelCard.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {render, RenderResult} from '@testing-library/react';
+
+import {LinkedChannelCard} from './LinkedChannelCard.component';
+import {LinkedChannelCardProps} from './LinkedChannelCard.types';
+
+const linkedChannelCardProps: LinkedChannelCardProps = {
+    channelId: 'mockChannelId',
+    mattermostChannelName: 'mockMattermostChannelName',
+    mattermostTeamName: 'mockMattermostTeamName',
+    msTeamsChannelName: 'mockMSTeamsChannelName',
+    msTeamsTeamName: 'mockMSTeamsTeamName',
+};
+
+let tree: RenderResult;
+
+describe('Linked Channel Card component', () => {
+    beforeEach(() => {
+        tree = render(<LinkedChannelCard {...linkedChannelCardProps}/>);
+    });
+
+    it('Should render correctly', () => {
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('Should show correct linked channel details', () => {
+        expect(tree.getByText(linkedChannelCardProps.mattermostChannelName)).toBeVisible();
+        expect(tree.getByText(linkedChannelCardProps.mattermostTeamName)).toBeVisible();
+        expect(tree.getByText(linkedChannelCardProps.msTeamsChannelName)).toBeVisible();
+        expect(tree.getByText(linkedChannelCardProps.msTeamsTeamName)).toBeVisible();
+    });
+});