From f8092fea7be211449402de364f4486ac126c99c6 Mon Sep 17 00:00:00 2001
From: kshitij katiyar <kshitij.katiyar@brightscout.com>
Date: Wed, 18 Sep 2024 19:47:17 +0530
Subject: [PATCH] [MM-770]: Added webapp testcase for create issue modal

---
 webapp/package.json                           |   3 +
 .../__snapshots__/create_issue.test.jsx.snap  | 105 +++++++
 .../modals/create_issue/create_issue.test.jsx | 295 ++++++++++++++++++
 webapp/tests/setup.tsx                        |   7 +
 4 files changed, 410 insertions(+)
 create mode 100644 webapp/src/components/modals/create_issue/__snapshots__/create_issue.test.jsx.snap
 create mode 100644 webapp/src/components/modals/create_issue/create_issue.test.jsx
 create mode 100644 webapp/tests/setup.tsx

diff --git a/webapp/package.json b/webapp/package.json
index 5446b233d..3cdb8e8bf 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -115,6 +115,9 @@
     "setupFiles": [
       "jest-canvas-mock"
     ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/setup.tsx"
+    ],
     "testURL": "http://localhost:8065"
   }
 }
diff --git a/webapp/src/components/modals/create_issue/__snapshots__/create_issue.test.jsx.snap b/webapp/src/components/modals/create_issue/__snapshots__/create_issue.test.jsx.snap
new file mode 100644
index 000000000..d277fc594
--- /dev/null
+++ b/webapp/src/components/modals/create_issue/__snapshots__/create_issue.test.jsx.snap
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreateIssueModal should render correctly with default props 1`] = `
+<Modal
+  animation={true}
+  autoFocus={true}
+  backdrop="static"
+  bsSize="large"
+  dialogAs={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "displayName": "ModalDialog",
+      "render": [Function],
+    }
+  }
+  dialogClassName="modal--scroll"
+  enforceFocus={true}
+  keyboard={true}
+  onExited={[Function]}
+  onHide={[Function]}
+  restoreFocus={true}
+  show={true}
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Create GitHub Issue
+    </ModalTitle>
+  </ModalHeader>
+  <form
+    onSubmit={[Function]}
+    role="form"
+  >
+    <ModalBody
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "color": "#000",
+          "padding": "2em 2em 3em",
+        }
+      }
+    >
+      <div>
+        <Connect(GithubRepoSelector)
+          addValidate={[Function]}
+          onChange={[Function]}
+          removeValidate={[Function]}
+          required={true}
+          theme={
+            Object {
+              "centerChannelBg": "#fff",
+              "centerChannelColor": "#000",
+            }
+          }
+          value={null}
+        />
+        <Input
+          disabled={false}
+          id="title"
+          label="Title for the GitHub Issue"
+          maxLength={256}
+          onChange={[Function]}
+          readOnly={false}
+          required={true}
+          type="input"
+          value=""
+        />
+        <Input
+          label="Description for the GitHub Issue"
+          maxLength={null}
+          onChange={[Function]}
+          readOnly={false}
+          required={false}
+          type="textarea"
+          value=""
+        />
+      </div>
+    </ModalBody>
+    <ModalFooter>
+      <FormButton
+        btnClass="btn-link"
+        defaultMessage="Cancel"
+        disabled={false}
+        extraClasses=""
+        onClick={[Function]}
+        savingMessage="Creating"
+        type="button"
+      />
+      <FormButton
+        btnClass="btn btn-primary"
+        defaultMessage="Submit"
+        disabled={false}
+        extraClasses=""
+        saving={false}
+        savingMessage="Submitting"
+        type="submit"
+      >
+        Submit
+      </FormButton>
+    </ModalFooter>
+  </form>
+</Modal>
+`;
diff --git a/webapp/src/components/modals/create_issue/create_issue.test.jsx b/webapp/src/components/modals/create_issue/create_issue.test.jsx
new file mode 100644
index 000000000..79da1234d
--- /dev/null
+++ b/webapp/src/components/modals/create_issue/create_issue.test.jsx
@@ -0,0 +1,295 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CreateIssueModal from './create_issue';
+
+jest.mock('utils/user_utils', () => ({
+    getErrorMessage: jest.fn(() => 'Error occurred'),
+}));
+
+describe('CreateIssueModal', () => {
+    const defaultProps = {
+        close: jest.fn(),
+        create: jest.fn(() => Promise.resolve({})),
+        post: null,
+        title: '',
+        channelId: '',
+        theme: {
+            centerChannelColor: '#000',
+            centerChannelBg: '#fff'
+        },
+        visible: true,
+    };
+
+    it('should render correctly with default props', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should call close prop when handleClose is called', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        wrapper.instance().handleClose();
+        expect(defaultProps.close).toHaveBeenCalled();
+    });
+
+    it('should call create prop when form is submitted with valid data', async () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        wrapper.setState({ issueTitle: 'Test Issue' });
+
+        await wrapper.instance().handleCreate({ preventDefault: () => {} });
+        expect(defaultProps.create).toHaveBeenCalled();
+    });
+
+    it('should display error message when create returns an error', async () => {
+        const errorProps = {
+            ...defaultProps,
+            create: jest.fn(() => Promise.resolve({ error: { message: 'Some error' } })),
+        };
+
+        const wrapper = shallow(<CreateIssueModal {...errorProps} />);
+        wrapper.setState({ issueTitle: 'Test Issue' });
+
+        await wrapper.instance().handleCreate({ preventDefault: () => {} });
+        wrapper.update();
+
+        expect(wrapper.find('.help-text.error-text').text()).toEqual('Error occurred');
+    });
+
+    it('should show validation error when issueTitle is empty', async () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        wrapper.setState({ issueTitle: '' });
+
+        await wrapper.instance().handleCreate({ preventDefault: () => {} });
+        expect(wrapper.state('issueTitleValid')).toBe(false);
+        expect(wrapper.state('showErrors')).toBe(true);
+    });
+
+    it('should update repo state when handleRepoChange is called', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        const repo = { name: 'repo-name' };
+
+        wrapper.instance().handleRepoChange(repo);
+        expect(wrapper.state('repo')).toEqual(repo);
+    });
+
+    it('should update labels state when handleLabelsChange is called', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        const labels = ['label1', 'label2'];
+
+        wrapper.instance().handleLabelsChange(labels);
+        expect(wrapper.state('labels')).toEqual(labels);
+    });
+
+    it('should update assignees state when handleAssigneesChange is called', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        const assignees = ['user1', 'user2'];
+
+        wrapper.instance().handleAssigneesChange(assignees);
+        expect(wrapper.state('assignees')).toEqual(assignees);
+    });
+
+    it('should set issueDescription state when post prop is updated', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        const post = { message: 'test post' };
+        wrapper.setProps({ post });
+
+        expect(wrapper.state('issueDescription')).toEqual(post.message);
+    });
+
+    it('should not display attribute selectors when repo does not have push permissions', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        wrapper.setState({ repo: { name: 'repo-name', permissions: { push: false } } });
+
+        expect(wrapper.instance().renderIssueAttributeSelectors()).toBeNull();
+    });
+
+    it('should display attribute selectors when repo has push permissions', () => {
+        const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+        wrapper.setState({ repo: { name: 'repo-name', permissions: { push: true } } });
+
+        const selectors = wrapper.instance().renderIssueAttributeSelectors();
+        expect(selectors).not.toBeNull();
+    });
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// import React from 'react';
+// import { shallow } from 'enzyme';
+// import CreateIssueModal from './create_issue';
+
+// jest.mock('utils/user_utils', () => ({
+//     getErrorMessage: jest.fn(() => 'Error occurred'),
+// }));
+
+// describe('CreateIssueModal', () => {
+//     const defaultProps = {
+//         close: jest.fn(),
+//         create: jest.fn(() => Promise.resolve({})),
+//         post: null,
+//         title: '',
+//         channelId: '',
+//         theme: {
+//             centerChannelColor: '#000',
+//             centerChannelBg: '#fff'
+//         },
+//         visible: true,
+//     };
+
+//     it('should render correctly with default props', () => {
+//         const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//         expect(wrapper).toMatchSnapshot();
+//     });
+
+//     it('should call close prop when handleClose is called', () => {
+//         const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//         wrapper.instance().handleClose();
+//         expect(defaultProps.close).toHaveBeenCalled();
+//     });
+
+//     it('should call create prop when form is submitted with valid data', async () => {
+//         const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//         wrapper.setState({ issueTitle: 'Test Issue' });
+
+//         await wrapper.instance().handleCreate({ preventDefault: () => {} });
+//         expect(defaultProps.create).toHaveBeenCalled();
+//     });
+
+//     it('should display error message when create returns an error', async () => {
+//         const errorProps = {
+//             ...defaultProps,
+//             create: jest.fn(() => Promise.resolve({ error: { message: 'Some error' } })),
+//         };
+
+//         const wrapper = shallow(<CreateIssueModal {...errorProps} />);
+//         wrapper.setState({ issueTitle: 'Test Issue' });
+
+//         await wrapper.instance().handleCreate({ preventDefault: () => {} });
+//         wrapper.update();
+
+//         expect(wrapper.find('.help-text.error-text').text()).toEqual('Error occurred');
+//     });
+// });
+
+
+
+///// IN ONE ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// import React from 'react';
+// import { shallow } from 'enzyme';
+// import CreateIssueModal from './create_issue';
+
+// describe('CreateIssueModal', () => {
+//     const defaultProps = {
+    //     close: jest.fn(),
+    //     create: jest.fn(),
+    //     post: { message: 'Post message' },
+    //     title: 'Initial Title',
+    //     channelId: 'channel-123',
+    //     theme: {
+    //         centerChannelColor: '#000',
+    //         centerChannelBg: '#fff'
+    //     },
+    //     visible: true,
+    // };
+
+//     // it('should initialize state correctly from props', () => {
+//     //     const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//     //     expect(wrapper.state('issueDescription')).toBe('Post message');
+//     //     expect(wrapper.state('issueTitle')).toBe('Initial Title');
+//     // });
+
+//     // it('should update state when post prop changes', () => {
+//     //     const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//     //     expect(wrapper.state('issueDescription')).toBe('Post message');
+
+//     //     // Update props
+//     //     wrapper.setProps({ post: { message: 'New post message' } });
+//     //     wrapper.update(); // Force re-render to make sure `componentDidUpdate` runs
+//     //     expect(wrapper.state('issueDescription')).toBe('New post message');
+//     // });
+
+//     it('should update state when channelId or title props change', () => {
+//         const wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//         expect(wrapper.state('issueTitle')).toBe('Initial Title');
+
+//         // Update props
+//         wrapper.setProps({ title: 'New Title', channelId: 'channel-456' });
+//         wrapper.update();
+//         expect(wrapper.state('issueTitle')).toBe('New Title');
+//     });
+// });
+
+
+//c -------------------------------------------------------
+
+
+
+// import React from 'react';
+// import { shallow } from 'enzyme';
+// import CreateIssueModal from './create_issue';
+
+// describe('CreateIssueModal', () => {
+//     let wrapper;
+//     const defaultProps = {
+//         close: jest.fn(),
+//         create: jest.fn(),
+//         post: null,
+//         title: '',
+//         channelId: '',
+//         theme: {
+//             centerChannelColor: '#000',
+//             centerChannelBg: '#fff'
+//         },
+//         visible: true,
+//     };
+
+//     beforeEach(() => {
+//         wrapper = shallow(<CreateIssueModal {...defaultProps} />);
+//         wrapper.setState({ repo: { name: 'test-repo', permissions: { push: true } } });
+//         wrapper.update();
+//     });
+
+//     it('should render issue attribute selectors when repo is selected', () => {
+//         expect(wrapper.find('GithubLabelSelector').exists()).toBe(true);
+//         // expect(wrapper.find('GithubAssigneeSelector').exists()).toBe(true);
+//         // expect(wrapper.find('GithubMilestoneSelector').exists()).toBe(true);
+//     });
+// });
diff --git a/webapp/tests/setup.tsx b/webapp/tests/setup.tsx
new file mode 100644
index 000000000..7848cb867
--- /dev/null
+++ b/webapp/tests/setup.tsx
@@ -0,0 +1,7 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import Adapter from 'enzyme-adapter-react-16';
+import {configure} from 'enzyme';
+
+configure({adapter: new Adapter()});