[MM-770]: Added webapp testcase for create issue modal

webapp/package.json

@@ -27,6 +27,7 @@
     "@emotion/babel-preset-css-prop": "10.0.27",
     "@emotion/core": "10.0.35",
     "@types/enzyme": "3.10.6",
+    "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/jest": "26.0.14",
     "@types/node": "14.11.1",
     "@types/react": "16.9.49",
@@ -115,6 +116,9 @@
     "setupFiles": [
       "jest-canvas-mock"
     ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/setup.tsx"
+    ],
     "testURL": "http://localhost:8065"
   }
 }

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>
+`;

webapp/src/components/modals/create_issue/create_issue.test.jsx

@@ -0,0 +1,112 @@
+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,
+        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: jest.fn()});
+        expect(defaultProps.create).toHaveBeenCalled();
+    });
+
+    it('should display error message when create returns an error', async () => {
+        const mockCreateFunction = jest.fn().mockResolvedValue({error: {message: 'Some error'}});
+        const errorProps = {
+            ...defaultProps,
+            create: mockCreateFunction,
+        };
+
+        const wrapper = shallow(<CreateIssueModal {...errorProps}/>);
+        wrapper.setState({issueTitle: 'Test Issue'});
+
+        await wrapper.instance().handleCreate({preventDefault: jest.fn()});
+        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: jest.fn()});
+        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();
+    });
+});

webapp/tests/setup.tsx

@@ -0,0 +1,4 @@
+import Adapter from 'enzyme-adapter-react-16';
+import {configure} from 'enzyme';
+
+configure({adapter: new Adapter()});