added system and unit tests for the discussion section

uab-cgds-worthey · Dec 4, 2023 · ab13d16 · ab13d16
1 parent f78e722
commit ab13d16
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 33 deletions.
diff --git a/frontend/src/components/AnalysisView/DiscussionSection.vue b/frontend/src/components/AnalysisView/DiscussionSection.vue
@@ -4,8 +4,12 @@
         <div class="rosalution-section-header">
             <h2 class="rosalution-section-header-text">Discussion</h2>
             <span class="rosalution-section-center" data-test="header-datasets"/>
-            <button class="primary-button discussion-new-button" @click="this.newDiscussionPostForm">
-                New Discussion
+            <button
+                class="primary-button discussion-new-button"
+                @click="this.newDiscussionPostForm"
+                data-test="new-discussion-button"
+            >
+                    New Discussion
             </button>
             <label class="collapsable-icon" for="discussion_toggle">
                 <font-awesome-icon icon="chevron-down" size="lg"/>
@@ -21,10 +25,19 @@
                     data-test="new-discussion-input"
                 />
                 <div class="discussion-actions">
-                    <button class="secondary-button" @click="cancelNewDiscussionPost" data-test="new-discussion-cancel">
+                    <button
+                        class="secondary-button"
+                        @click="cancelNewDiscussionPost"
+                        data-test="new-discussion-cancel"
+                    >
                         Cancel
                     </button>
-                    <button class="primary-button" @click="newDiscussionPost" data-test="new-discussion-publish">
+                    <button
+                        class="primary-button publish-button"
+                        @click="newDiscussionPost"
+                        data-test="new-discussion-publish"
+                        :disabled="this.checkPostContent"
+                    >
                         Publish
                     </button>
                 </div>
@@ -66,32 +79,28 @@ export default {
   data: function() {
     return {
       newPostContent: '',
-      showNewPost: false
+      showNewPost: false,
     };
   },
+  computed: {
+    checkPostContent() {
+      return this.newPostContent == '';
+    },
+  },
   methods: {
     newDiscussionPostForm() {
-        this.showNewPost = true;
+      this.showNewPost = true;
     },
     newDiscussionPost() {
-        this.$emit('discussion:new-post', this.newPostContent);
-        this.clearNewDiscussionField();
+      this.$emit('discussion:new-post', this.newPostContent);
+      this.clearNewDiscussionField();
     },
     cancelNewDiscussionPost() {
-        this.clearNewDiscussionField();
+      this.clearNewDiscussionField();
     },
     clearNewDiscussionField() {
-        this.newPostContent = '';
-        this.showNewPost = false;
-    }
-  },
-  methods: {
-    newDiscussionPost() {
-      this.$emit('discussion:new-post', this.newPostContent);
-    },
-    cancelNewDiscussionPost() {
-      // Currently does nothing, will need to update to turn off the new post text
-      console.log('Cancelled post');
+      this.newPostContent = '';
+      this.showNewPost = false;
     },
   },
 };
@@ -133,6 +142,10 @@ export default {
     margin-right: var(--p-16);
 }
 
+.publish-button {
+    margin-left: var(--p-8);
+}
+
 .collapsable-icon {
     color: var(--rosalution-grey-200);
     cursor: pointer;

diff --git a/frontend/src/styles/rosalution.css b/frontend/src/styles/rosalution.css
@@ -24,6 +24,10 @@ html {
   cursor: pointer;
 }
 
+.rosalution-button:hover{
+  background-color: var(--rosalution-purple-200);
+}
+
 .primary-button {
   background-color: var(--rosalution-purple-100);
   color: var(--rosalution-purple-300);
@@ -39,13 +43,15 @@ html {
   box-sizing: border-box;
 }
 
-.rosalution-button:hover{
-  background-color: var(--rosalution-purple-200);
+.primary-button:disabled {
+  background-color: var(--rosalution-purple-100);
+  color: var(--rosalution-purple-300);
+  opacity: 50%;
 }
 
-
-.primary-button:hover {
+.primary-button:hover:enabled {
   background-color: var(--rosalution-purple-200);
+  color: var(--rosalution-purple-100);
 }
 
 .secondary-button {

diff --git a/frontend/test/components/AnalysisView/DiscussionPost.spec.js b/frontend/test/components/AnalysisView/DiscussionPost.spec.js
@@ -18,6 +18,6 @@ describe('DiscussionPost.vue', () => {
   });
 
   it('Vue instance exists and it is an object', () => {
-    expect(typeof wrapper).toBe('object');
+    expect(typeof wrapper).to.not.be.undefined;
   });
 });
diff --git a/frontend/test/components/AnalysisView/DiscussionSection.spec.js b/frontend/test/components/AnalysisView/DiscussionSection.spec.js
@@ -1,4 +1,4 @@
-import {it, expect, describe, beforeEach, vi} from 'vitest';
+import {it, expect, describe, beforeEach} from 'vitest';
 import {shallowMount} from '@vue/test-utils';
 
 import DiscussionSection from '../../../src/components/AnalysisView/DiscussionSection.vue';
@@ -24,20 +24,31 @@ describe('DiscussionSection.vue', () => {
   it('Should emit a discussion:new-post event when the publish button is pressed', async () => {
     await wrapper.setData({newPostContent: 'Test post content'});
 
+    const newDiscussionButton = wrapper.find('[data-test=new-discussion-button]');
+    await newDiscussionButton.trigger('click');
+
     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');
+    expect(emittedObjects[0]).to.include('Test post content');
+  });
+
+  it('Should not be able to publish a post if the new post content field is empty', async () => {
+    const newDiscussionButton = wrapper.find('[data-test=new-discussion-button]');
+    await newDiscussionButton.trigger('click');
+
+    const publishNewDiscussionButton = wrapper.find('[data-test=new-discussion-publish]');
+    expect(publishNewDiscussionButton.attributes().disabled).to.not.be.undefined;
   });
 
-  // Placeholder test
-  it('Should print to console when the cancelled button is pressed', async () => {
-    const cancelNewDiscussionButton = wrapper.find('[data-test=new-discussion-cancel]');
+  it('Should close the new discussion post field when the cancel button is pressed', async () => {
+    const newDiscussionButton = wrapper.find('[data-test=new-discussion-button]');
+    await newDiscussionButton.trigger('click');
+
+    const newDiscussionCancelButton = wrapper.find('[data-test=new-discussion-cancel]');
 
-    vi.spyOn(console, 'log');
-    await cancelNewDiscussionButton.trigger('click');
-    expect(console.log).toHaveBeenCalled();
+    await newDiscussionCancelButton.trigger('click');
   });
 });