[MM-1007]: Web app test cases setup and added web app test cases for some UI components

webapp/.gitignore

@@ -2,3 +2,4 @@
 junit.xml
 node_modules
 .npminstall
+coverage/

webapp/package.json

@@ -70,9 +70,10 @@
     "mattermost-redux": "5.33.1",
     "node-fetch": "2.6.7",
     "prop-types": "15.7.2",
-    "react": "16.13.1",
+    "react": "16.14.0",
     "react-bootstrap": "1.3.0",
     "react-custom-scrollbars": "4.2.1",
+    "react-dom": "16.14.0",
     "react-markdown": "^8.0.5",
     "react-redux": "7.2.1",
     "react-select": "3.1.0",
@@ -115,6 +116,9 @@
     "setupFiles": [
       "jest-canvas-mock"
     ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTest.js"
+    ],
     "testURL": "http://localhost:8065"
   }
 }

webapp/src/components/github_assignee_selector/__snapshots__/github_assignee_selector.test.jsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/GithubAssigneeSelector should match snapshot 1`] = `
+<div
+  className="form-group margin-bottom x3"
+>
+  <label
+    className="control-label margin-bottom x2"
+  >
+    Assignees
+  </label>
+  <IssueAttributeSelector
+    actions={
+      Object {
+        "getAssigneeOptions": [MockFunction],
+      }
+    }
+    isMulti={true}
+    loadOptions={[Function]}
+    onChange={[Function]}
+    repoName="test-repo"
+    selectedAssignees={
+      Array [
+        "user1",
+      ]
+    }
+    selection={
+      Array [
+        "user1",
+      ]
+    }
+    theme={
+      Object {
+        "sidebarBg": "#ffffff",
+        "sidebarText": "#000000",
+      }
+    }
+  />
+</div>
+`;

webapp/src/components/github_assignee_selector/github_assignee_selector.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import IssueAttributeSelector from 'components/issue_attribute_selector';
+
+import GithubAssigneeSelector from './github_assignee_selector';
+
+describe('components/GithubAssigneeSelector', () => {
+    const baseActions = {
+        getAssigneeOptions: jest.fn().mockResolvedValue({data: [{login: 'user1'}, {login: 'user2'}]}),
+    };
+
+    const baseProps = {
+        repoName: 'test-repo',
+        theme: {
+            sidebarBg: '#ffffff',
+            sidebarText: '#000000',
+        },
+        selectedAssignees: ['user1'],
+        onChange: jest.fn(),
+        actions: baseActions,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(<GithubAssigneeSelector {...baseProps}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render IssueAttributeSelector with correct props', () => {
+        const wrapper = shallow(<GithubAssigneeSelector {...baseProps}/>);
+        const issueAttributeSelector = wrapper.find(IssueAttributeSelector);
+
+        expect(issueAttributeSelector.exists()).toBe(true);
+        expect(issueAttributeSelector.prop('isMulti')).toBe(true);
+        expect(issueAttributeSelector.prop('selection')).toEqual(baseProps.selectedAssignees);
+        expect(issueAttributeSelector.prop('loadOptions')).toEqual(wrapper.instance().loadAssignees);
+    });
+
+    test('should call loadAssignees and return correct options', async () => {
+        const wrapper = shallow<GithubAssigneeSelector>(<GithubAssigneeSelector {...baseProps}/>);
+        const options = await wrapper.instance().loadAssignees();
+
+        expect(baseActions.getAssigneeOptions).toHaveBeenCalledWith(baseProps.repoName);
+        expect(options).toEqual([
+            {value: 'user1', label: 'user1'},
+            {value: 'user2', label: 'user2'},
+        ]);
+    });
+
+    test('should handle loadAssignees error gracefully', async () => {
+        const errorActions = {
+            getAssigneeOptions: jest.fn().mockResolvedValue({error: 'Failed to load'}),
+        };
+        const props = {...baseProps, actions: errorActions};
+        const wrapper = shallow<GithubAssigneeSelector>(<GithubAssigneeSelector {...props}/>);
+
+        await expect(wrapper.instance().loadAssignees()).rejects.toThrow('Failed to load assignees');
+    });
+
+    test('should handle empty repoName in loadAssignees', async () => {
+        const props = {...baseProps, repoName: ''};
+        const wrapper = shallow<GithubAssigneeSelector>(<GithubAssigneeSelector {...props}/>);
+        const options = await wrapper.instance().loadAssignees();
+
+        expect(options).toEqual([]);
+        expect(baseActions.getAssigneeOptions).not.toHaveBeenCalled();
+    });
+
+    test('should call onChange with correct values', () => {
+        const wrapper = shallow(<GithubAssigneeSelector {...baseProps}/>);
+        const instance = wrapper.instance();
+        const selection = [{value: 'user1'}, {value: 'user2'}];
+
+        instance.onChange(selection);
+        expect(baseProps.onChange).toHaveBeenCalledWith(['user1', 'user2']);
+    });
+});

webapp/src/components/github_label_selector/__snapshots__/github_label_selector.test.jsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/GithubLabelSelector should match snapshot 1`] = `
+<div
+  className="form-group margin-bottom x3"
+>
+  <label
+    className="control-label margin-bottom x2"
+  >
+    Labels
+  </label>
+  <IssueAttributeSelector
+    actions={
+      Object {
+        "getLabelOptions": [MockFunction],
+      }
+    }
+    isMulti={true}
+    loadOptions={[Function]}
+    onChange={[Function]}
+    repoName="test-repo"
+    selectedLabels={
+      Array [
+        "bug",
+      ]
+    }
+    selection={
+      Array [
+        "bug",
+      ]
+    }
+    theme={
+      Object {
+        "sidebarBg": "#ffffff",
+        "sidebarText": "#000000",
+      }
+    }
+  />
+</div>
+`;

webapp/src/components/github_label_selector/github_label_selector.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import IssueAttributeSelector from 'components/issue_attribute_selector';
+
+import GithubLabelSelector from './github_label_selector';
+
+describe('components/GithubLabelSelector', () => {
+    const baseActions = {
+        getLabelOptions: jest.fn().mockResolvedValue({data: [{name: 'bug'}, {name: 'enhancement'}]}),
+    };
+
+    const baseProps = {
+        repoName: 'test-repo',
+        theme: {
+            sidebarBg: '#ffffff',
+            sidebarText: '#000000',
+        },
+        selectedLabels: ['bug'],
+        onChange: jest.fn(),
+        actions: baseActions,
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(<GithubLabelSelector {...baseProps}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render IssueAttributeSelector with correct props', () => {
+        const wrapper = shallow(<GithubLabelSelector {...baseProps}/>);
+        const issueAttributeSelector = wrapper.find(IssueAttributeSelector);
+
+        expect(issueAttributeSelector.exists()).toBe(true);
+        expect(issueAttributeSelector.prop('isMulti')).toBe(true);
+        expect(issueAttributeSelector.prop('selection')).toEqual(baseProps.selectedLabels);
+        expect(issueAttributeSelector.prop('loadOptions')).toEqual(wrapper.instance().loadLabels);
+    });
+
+    test('should call loadLabels and return correct options', async () => {
+        const wrapper = shallow(<GithubLabelSelector {...baseProps}/>);
+        const options = await wrapper.instance().loadLabels();
+
+        expect(baseActions.getLabelOptions).toHaveBeenCalledWith(baseProps.repoName);
+        expect(options).toEqual([
+            {value: 'bug', label: 'bug'},
+            {value: 'enhancement', label: 'enhancement'},
+        ]);
+    });
+
+    test('should handle loadLabels error gracefully', async () => {
+        const errorActions = {
+            getLabelOptions: jest.fn().mockResolvedValue({error: 'Failed to load'}),
+        };
+        const props = {...baseProps, actions: errorActions};
+        const wrapper = shallow(<GithubLabelSelector {...props}/>);
+
+        await expect(wrapper.instance().loadLabels()).rejects.toThrow('Failed to load labels');
+    });
+
+    test('should handle empty repoName in loadLabels', async () => {
+        const props = {...baseProps, repoName: ''};
+        const wrapper = shallow(<GithubLabelSelector {...props}/>);
+        const options = await wrapper.instance().loadLabels();
+
+        expect(options).toEqual([]);
+        expect(baseActions.getLabelOptions).not.toHaveBeenCalled();
+    });
+
+    test('should call onChange with correct values', () => {
+        const wrapper = shallow(<GithubLabelSelector {...baseProps}/>);
+        const instance = wrapper.instance();
+        const selection = [{value: 'bug'}, {value: 'enhancement'}];
+
+        instance.onChange(selection);
+        expect(baseProps.onChange).toHaveBeenCalledWith(['bug', 'enhancement']);
+    });
+});

webapp/src/components/github_milestone_selector/__snapshots__/github_milestone_selector.test.jsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/GithubMilestoneSelector should match snapshot 1`] = `
+<div
+  className="form-group margin-bottom x3"
+>
+  <label
+    className="control-label margin-bottom x2"
+  >
+    Milestone
+  </label>
+  <IssueAttributeSelector
+    actions={
+      Object {
+        "getMilestoneOptions": [MockFunction],
+      }
+    }
+    isMulti={false}
+    loadOptions={[Function]}
+    onChange={[MockFunction]}
+    repoName="test-repo"
+    selectedMilestone={
+      Object {
+        "label": "Milestone 1",
+        "value": 1,
+      }
+    }
+    selection={
+      Object {
+        "label": "Milestone 1",
+        "value": 1,
+      }
+    }
+    theme={
+      Object {
+        "sidebarBg": "#ffffff",
+        "sidebarText": "#000000",
+      }
+    }
+  />
+</div>
+`;