Added more unit test coverage on the frontend and linted

frontend/src/components/AnalysisView/DiscussionPost.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="discussion-post">
+    <div class="discussion-post" data-test="discussion-post">
         <div class="discussion-header">
             <b>{{ author_name }}</b>
             {{  timestamp  }}
@@ -12,50 +12,50 @@
 
 <script>
 export default {
-    name: "discussion-post",
-    props: {
-        id: {
-            type: String
-        },
-        author_id: {
-            type: String
-        },
-        author_name: {
-            type: String
-        },
-        publish_timestamp: {
-            type: String
-        },
-        content: {
-            type: String
-        },
-        attachments: {
-            type: Array,
-            default: () => {
-                return [];
-            },
-        },
-        thread: {
-            type: Array,
-            default: () => {
-                return [];
-            },
-        },
+  name: 'discussion-post',
+  props: {
+    id: {
+      type: String,
     },
-    computed: {
-        timestamp: function() {
-            return new Date(this.publish_timestamp).toUTCString()
-        }
-    }
-}
+    author_id: {
+      type: String,
+    },
+    author_name: {
+      type: String,
+    },
+    publish_timestamp: {
+      type: String,
+    },
+    content: {
+      type: String,
+    },
+    attachments: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    thread: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  computed: {
+    timestamp: function() {
+      return new Date(this.publish_timestamp).toUTCString();
+    },
+  },
+};
 </script>
 
 <style scoped>
 .discussion-post {
     border-radius: var(--content-border-radius);
     padding: var(--p-8);
     margin-top: var(--p-10);
-    
+
 }
 
 .discussion-post:nth-child(even) {
@@ -75,4 +75,4 @@ export default {
     margin-bottom: var(--p-10);
 }
 
-</style>
+</style>

frontend/src/components/AnalysisView/DiscussionSection.vue

@@ -12,22 +12,23 @@
         <div class="rosalution-section-seperator"></div>
         <div class="section-content">
             <div class="discussion-new-post">
-                <textarea 
-                    contenteditable="plaintext-only" 
+                <textarea
+                    contenteditable="plaintext-only"
                     class="discussion-new-post-text-area"
                     v-model="newPostContent"
                 />
                 <div class="discussion-actions">
-                    <button class="secondary-button" @click="cancelNewDiscussionPost">
+                    <button class="secondary-button" @click="cancelNewDiscussionPost" data-test="new-discussion-cancel">
                         Cancel
                     </button>
-                    <button class="primary-button" @click="newDiscussionPost">
+                    <button class="primary-button" @click="newDiscussionPost" data-test="new-discussion-publish">
                         Publish
                     </button>
                 </div>
             </div>
             <DiscussionPost v-for="discussion in discussions"
                 :id="discussion.post_id"
+                :key="discussion.post_id"
                 :author_id="discussion.author_id"
                 :author_name="discussion.author_fullname"
                 :publish_timestamp="discussion.publish_timestamp"
@@ -46,7 +47,7 @@ export default {
   name: 'discussion-section',
   emits: ['discussion:new-post'],
   components: {
-    DiscussionPost
+    DiscussionPost,
   },
   props: {
     header: {
@@ -61,17 +62,18 @@ export default {
   },
   data: function() {
     return {
-        newPostContent: '',
-    }
+      newPostContent: '',
+    };
   },
   methods: {
     newDiscussionPost() {
-        this.$emit('discussion:new-post', this.newPostContent)
+      this.$emit('discussion:new-post', this.newPostContent);
     },
     cancelNewDiscussionPost() {
-        console.log("Cancelled post");
+      // Currently does nothing, will need to update to turn off the new post text
+      console.log('Cancelled post');
     },
-  }
+  },
 };
 
 </script>

frontend/src/models/analyses.js

@@ -216,12 +216,12 @@ export default {
     const url = `/rosalution/api/analysis/${analysisName}/discussions`;
 
     const attachmentForm = {
-      'discussion_content': postContent
+      'discussion_content': postContent,
     };
 
     const success = await Requests.postForm(url, attachmentForm);
     return success;
-  }
+  },
 };
 
 const annotationRenderingTemporary = [

frontend/src/views/AnalysisView.vue

@@ -611,13 +611,9 @@ export default {
       }
     },
     async addDiscussionPost(newPostContent) {
-      console.log(newPostContent);
-
       const discussions = await Analyses.postNewDiscussionThread(this.analysis['name'], newPostContent);
 
-      console.log(discussions);
-
-      this.analysis['discussions'] = discussions;
+      this.analysis.discussions = discussions;
     },
     copyToClipboard(copiedText) {
       toast.success(`Copied ${copiedText} to clipboard!`);

frontend/test/components/AnalysisView/DiscussionPost.spec.js

@@ -0,0 +1,23 @@
+import {it, expect, describe, beforeEach} from 'vitest';
+import {shallowMount} from '@vue/test-utils';
+
+import DiscussionPost from '../../../src/components/AnalysisView/DiscussionPost.vue';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+
+describe('DiscussionPost.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(DiscussionPost, {
+      global: {
+        components: {
+          'font-awesome-icon': FontAwesomeIcon,
+        },
+      },
+    });
+  });
+
+  it('Vue instance exists and it is an object', () => {
+    expect(typeof wrapper).toBe('object');
+  });
+});

frontend/test/components/AnalysisView/DiscussionSection.spec.js

@@ -1,4 +1,4 @@
-import {it, expect, describe, beforeEach} from 'vitest';
+import {it, expect, describe, beforeEach, vi} from 'vitest';
 import {shallowMount} from '@vue/test-utils';
 
 import DiscussionSection from '../../../src/components/AnalysisView/DiscussionSection.vue';
@@ -20,4 +20,24 @@ describe('DiscussionSection.vue', () => {
   it('Vue instance exists and it is an object', () => {
     expect(typeof wrapper).toBe('object');
   });
+
+  it('Should emit a discussion:new-post event when the publish button is pressed', async () => {
+    await wrapper.setData({newPostContent: 'Test post content'});
+
+    const publishNewDiscussionButton = wrapper.find('[data-test=new-discussion-publish]');
+    await publishNewDiscussionButton.trigger('click');
+
+    const emittedObjects = wrapper.emitted()['discussion:new-post'][0];
+
+    expect(emittedObjects[0]).toBe('Test post content');
+  });
+
+  // Placeholder test
+  it('Should print to console when the cancelled button is pressed', async () => {
+    const cancelNewDiscussionButton = wrapper.find('[data-test=new-discussion-cancel]');
+
+    vi.spyOn(console, 'log');
+    await cancelNewDiscussionButton.trigger('click');
+    expect(console.log).toHaveBeenCalled();
+  });
 });

frontend/test/views/AnalysisView.spec.js

@@ -7,6 +7,7 @@ import Analyses from '@/models/analyses.js';
 import GeneBox from '@/components/AnalysisView/GeneBox.vue';
 import InputDialog from '@/components/Dialogs/InputDialog.vue';
 import NotificationDialog from '@/components/Dialogs/NotificationDialog.vue';
+import DiscussionSection from '@/components/AnalysisView/DiscussionSection.vue';
 import SupplementalFormList from '@/components/AnalysisView/SupplementalFormList.vue';
 import SaveModal from '@/components/AnalysisView/SaveModal.vue';
 
@@ -89,6 +90,7 @@ describe('AnalysisView', () => {
   let mockedAttachThirdPartyLink;
   let markReadyMock;
   let updateAnalysisSectionsMock;
+  let postNewDiscussionThreadMock;
   let mockAuthWritePermissions;
   let mockedAttachSectionSupportingEvidence;
   let mockedRemoveSectionSupportingEvidenceFile;
@@ -115,6 +117,8 @@ describe('AnalysisView', () => {
 
     updateAnalysisSectionsMock = sandbox.stub(Analyses, 'updateAnalysisSections');
 
+    postNewDiscussionThreadMock = sandbox.stub(Analyses, 'postNewDiscussionThread');
+
     mockAuthWritePermissions = sandbox.stub(authStore, 'hasWritePermissions');
     mockAuthWritePermissions.returns(true);
 
@@ -314,6 +318,46 @@ describe('AnalysisView', () => {
     });
   });
 
+  describe('discussions', () => {
+    it('Should display a discussion section with three posts', () => {
+      const discussionSectionComponent = wrapper.getComponent(DiscussionSection);
+
+      expect(typeof discussionSectionComponent).toBe('object');
+
+      expect(discussionSectionComponent.props('discussions').length).to.equal(3);
+    });
+
+    it('Should recieve an new post publish emit and add a new discussion post', async () => {
+      const discussionSectionComponent = wrapper.getComponent(DiscussionSection);
+      const newPostContent = 'Hello world';
+
+      const discussionFixtureData = fixtureData()['discussions'];
+
+      const newDiscussionPost = {
+        post_id: 'e60239a34-h941-44aa-912e-912a993255fe',
+        author_id: 'exqkhvidr7uh2ndslsdymbzfbmqjlunk',
+        author_fullname: 'Variant Review Report Preparer Person',
+        publish_timestamp: '2023-11-01T21:13:22.687000',
+        content: newPostContent,
+        attachments: [],
+        thread: [],
+      };
+
+      discussionFixtureData.push(newDiscussionPost);
+
+      postNewDiscussionThreadMock.returns(discussionFixtureData);
+
+      expect(discussionSectionComponent.props('discussions').length).to.equal(3);
+
+      discussionSectionComponent.vm.$emit('discussion:new-post', newPostContent);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(discussionSectionComponent.props('discussions').length).to.equal(4);
+    });
+  });
+
   describe('supporting evidence', () => {
     describe('when adding supporting evidence as an attachment', () => {
       it('displays the attachment modal when the supplemental form list requests dialog', async () => {
@@ -843,6 +887,35 @@ function fixtureData() {
         ],
       },
     ],
+    discussions: [
+      {
+        'post_id': '9027ec8d-6298-4afb-add5-6ef710eb5e98',
+        'author_id': '3bghhsmnyqi6uxovazy07ryn9q1tqbnt',
+        'author_fullname': 'Developer Person',
+        'publish_timestamp': '2023-10-09T21:13:22.687000',
+        'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+        'attachments': [],
+        'thread': [],
+      },
+      {
+        'post_id': 'a677bb36-acf8-4ff9-a406-b113a7952f7e',
+        'author_id': 'kw0g790fdx715xsr1ead2jk0pqubtlyz',
+        'author_fullname': 'Researcher Person',
+        'publish_timestamp': '2023-10-10T21:13:22.687000',
+        'content': 'Mauris at mauris eu neque varius suscipit.',
+        'attachments': [],
+        'thread': [],
+      },
+      {
+        'post_id': 'e6023fa7-b598-416a-9f42-862c826255ef',
+        'author_id': 'exqkhvidr7uh2ndslsdymbzfbmqjlunk',
+        'author_fullname': 'Variant Review Report Preparer Person',
+        'publish_timestamp': '2023-10-13T21:13:22.687000',
+        'content': 'Mauris at mauris eu neque varius suscipit.',
+        'attachments': [],
+        'thread': [],
+      },
+    ],
     supporting_evidence_files: [
       {
         name: 'fake.txt',