cypress/integration/comments/comment-threads.spec.js

+import generateRandomId from '../../support/utilities';
+
 /**
  * @author Ben Hayward  
  * @create date 2019-08-09 14:42:51
@@ -6,6 +8,9 @@
  */
 context('Comment Threads', () => {
   
+  const testUsername = generateRandomId();
+  const testPassword = generateRandomId() + 'rR.7';
+
   const testMessage = {
     1: 'test tier 1',
     2: 'test tier 2',
@@ -17,8 +22,6 @@ context('Comment Threads', () => {
   const deletePostButton = ".m-modal-confirm-buttons > button:contains('Delete')";
   
   const postCommentButton = 'm-comment__poster > div > div.minds-body > div > div > a.m-post-button';
-  const thumbsUpCounters = '.m-comment__toolbar > div > minds-button-thumbs-up > a > span';
-  const thumbsDownCounters = '.m-comment__toolbar > div > minds-button-thumbs-down > a > span';
 
   // pass in tier / tree depth.
   const replyButton = `minds-activity:first .m-comment__toolbar > div > span`;
@@ -26,6 +29,11 @@ context('Comment Threads', () => {
   const commentInput = `minds-activity:first m-text-input--autocomplete-container > minds-textarea > div`;
   const commentContent = `minds-activity:first m-comments__tree .m-comment__bubble > p`; 
 
+  const thumbsUpCounters = '[data-cy=data-minds-thumbs-up-counter]' //'minds-button-thumbs-up > a > span';
+  const thumbsDownCounters = '[data-cy=data-minds-thumbs-down-counter]';
+
+  const thumbsUpButton = '[data-cy=data-minds-thumbs-up-button]'
+  const thumbsDownButton = '[data-cy=data-minds-thumbs-down-button]'
   before(() => {
     //make a post new.
     cy.getCookie('minds_sess')
@@ -44,6 +52,10 @@ context('Comment Threads', () => {
 
   beforeEach(()=> {
     cy.preserveCookies();
+    cy.server();
+    cy.route('GET', '**/api/v2/comments/**').as('commentsOpen');
+    cy.route('POST', '**/api/v1/comments/**').as('postComment');
+    cy.route('PUT', '**/api/v1/thumbs/**').as('thumbsPut');
   });
 
   after(() => {
@@ -63,13 +75,21 @@ context('Comment Threads', () => {
     cy.get(commentContent).contains(testMessage[1]);
 
     //Add the second level of comments
-    cy.get(replyButton).click();
+    cy.get(replyButton)
+      .click()
+      .wait('@commentsOpen')
+      .then(xhr => {
+        expect(xhr.status).to.equal(200);
+      });
+
     cy.get(commentInput)
       .first()
       .type(testMessage[2]);
+
     cy.get(postCommentButton)
       .first()
       .click();
+
     cy.get(commentContent).contains(testMessage[2]);
     
 
@@ -78,30 +98,108 @@ context('Comment Threads', () => {
       .find('m-comments__tree m-comments__thread m-comment')
       .find('m-comments__thread m-comment:nth-child(2) .m-comment__toolbar > div > span')
       .last()
-      .click();
+      .click()
+      .wait('@commentsOpen')
+      .then(xhr => {
+        expect(xhr.status).to.equal(200);
+      });
 
     cy.get(commentInput)
       .first()
       .type(testMessage[3]);
+  
     cy.get(postCommentButton)
       .first()
       .click();
-    cy.get(commentContent).contains(testMessage[3]);
 
-    //click thumbs up and down
-    cy.get('.m-comment__toolbar')
-      .find('minds-button-thumbs-up')
-      .click({multiple: true});
+    cy.get(commentContent).contains(testMessage[3]);
+    
+    // Waiting on component init here.
+    // If still not fully loaded will not break,
+    // but may mean some of the buttons aren't tested.
+    cy.wait(1000);
+    
+    // scope further get requests down to within the comments toolbar
+    // avoids clicking thumbs in activity feed.
+    cy.get('.m-comment__toolbar').within(($list) => {
 
-    cy.get('.m-comment__toolbar')
-      .find('minds-button-thumbs-down')
+    // thumbs up and down
+    cy.get(thumbsUpButton)
       .click({multiple: true});
     
-    // check the values
+    cy.get(thumbsDownButton)
+      .click({multiple: true});
+
+    // check counters  
     cy.get(thumbsUpCounters)
-      .each((counter) => expect(counter.context.innerHTML).to.eql('1'));
+        .each((counter) => {
+          expect(counter[0].innerHTML).to.eql('1');
+        });
+    });
+
     cy.get(thumbsDownCounters)
-      .each((counter) => expect(counter.context.innerHTML).to.eql('1'));
+      .each((counter) => {
+        expect(counter[0].innerHTML).to.eql('1');
+      });
+  });
+
+  it('should allow the user to make a mature comment', () => {
+    // type message
+    cy.get('minds-textarea')
+      .last()
+      .type("naughty message");
+
+    // click mature
+    cy.get('.m-mature-button')
+      .last()
+      .click();
+
+    // post and await response
+    cy.get('.m-post-button')
+      .last()
+      .click()
+      .wait('@postComment')
+      .then(xhr => {
+        expect(xhr.status).to.equal(200);
+      });
+    
+    // Making sure we don't act upon other comments
+    cy.get('.m-comment__bubble').parent().within($list => {
+
+      cy.contains('naughty message')
+        .should('not.have.class', 'm-mature-text');
+
+      cy.get('.m-redButton')
+        .click();
+      
+      cy.contains('naughty message')
+        .should('have.class', 'm-mature-text');
+    });
+    
+    // get share link
+    cy.get(postMenu).click();
+    cy.contains('Share').click();
+    
+    // store share link
+     cy.get('.m-share__copyableLinkText')
+      .invoke('val')
+      .then(val => {
+        // log out
+        cy.logout();
+
+        // visit link
+        cy.visit(val);
+        
+        // assert toggle works.
+        cy.contains('naughty message')
+          .should('have.class', 'm-mature-text');
+
+        cy.get('.m-mature-text-toggle')
+          .click();
+        
+        cy.contains('naughty message')
+          .should('not.have.class', 'm-mature-text');
+      });
   });
 
 })

src/app/common/components/thumbs/thumbs-down.component.ts

@@ -15,11 +15,18 @@ import { SignupModalService } from '../../../modules/modals/signup/service';
   inputs: ['_object: object'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <a (click)="thumb()" [ngClass]="{ selected: has() }">
+    <a
+      (click)="thumb()"
+      [ngClass]="{ selected: has() }"
+      data-cy="data-minds-thumbs-down-button"
+    >
       <i class="material-icons">thumb_down</i>
-      <span class="minds-counter" *ngIf="object['thumbs:down:count'] > 0">{{
-        object['thumbs:down:count'] | number
-      }}</span>
+      <span
+        class="minds-counter"
+        *ngIf="object['thumbs:down:count'] > 0"
+        data-cy="data-minds-thumbs-down-counter"
+        >{{ object['thumbs:down:count'] | number }}</span
+      >
     </a>
   `,
   styles: [

src/app/common/components/thumbs/thumbs-up.component.ts

@@ -16,11 +16,18 @@ import { SignupModalService } from '../../../modules/modals/signup/service';
   inputs: ['_object: object'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <a (click)="thumb()" [ngClass]="{ selected: has() }">
+    <a
+      (click)="thumb()"
+      [ngClass]="{ selected: has() }"
+      data-cy="data-minds-thumbs-up-button"
+    >
       <i class="material-icons">thumb_up</i>
-      <span class="minds-counter" *ngIf="object['thumbs:up:count'] > 0">{{
-        object['thumbs:up:count'] | number
-      }}</span>
+      <span
+        class="minds-counter"
+        *ngIf="object['thumbs:up:count'] > 0"
+        data-cy="data-minds-thumbs-up-counter"
+        >{{ object['thumbs:up:count'] | number }}</span
+      >
     </a>
   `,
   styles: [

src/app/modules/comments/comment/comment.component.html

@@ -27,10 +27,21 @@
           ></m-channel--badges>
         </a>
       </div>
+      <a
+        class="m-mature-text-toggle"
+        (click)="toggleMatureVisibility()"
+        *ngIf="comment.mature"
+        [ngClass]="{ 'm-redButton': showMature }"
+      >
+        <i class="material-icons m-material-icons-inline">explicit</i>
+      </a>
+
       <p
         [hidden]="editing"
-        class="m-commentBubble__message"
+        class="m-commentBubble__message m-mature-message-content"
         [innerHtml]="comment.description || '' | tags"
+        [ngClass]="{ 'm-mature-text': comment.mature && !showMature }"
+        (click)="!showMature ? toggleMatureVisibility() : null"
       ></p>
 
       <p class="m-comment--error-label" *ngIf="error">

src/app/modules/comments/comment/comment.component.scss

@@ -22,6 +22,13 @@
   @include m-theme() {
     background-color: rgba(themed($m-grey-50), 0.7);
   }
+
+  .m-mature-text-toggle {
+    i {
+      vertical-align: middle;
+      padding-right: 8px;
+    }
+  }
 }
 
 .m-commentBubble__username {
@@ -261,3 +268,9 @@
     white-space: nowrap;
   }
 }
+
+.m-redButton {
+  @include m-theme() {
+    color: themed($m-red);
+  }
+}

src/app/modules/comments/comment/comment.component.ts

@@ -64,6 +64,7 @@ export class CommentComponentV2
   error: string = '';
   @Input() showReplies: boolean = false;
   changesDetected: boolean = false;
+  showMature: boolean = false;
 
   _delete: EventEmitter<any> = new EventEmitter();
   _saved: EventEmitter<any> = new EventEmitter();
@@ -112,6 +113,10 @@ export class CommentComponentV2
         return (this.comment.time_created - secondsElapsed * 0.01) * 1000;
       })
     );
+
+    if (this.minds.user.guid === this.comment.ownerObj.guid) {
+      this.showMature = true;
+    }
   }
 
   ngAfterViewInit() {
@@ -384,4 +389,11 @@ export class CommentComponentV2
       )
       .present();
   }
+
+  /**
+   * Toggles mature visibility.
+   */
+  toggleMatureVisibility() {
+    this.showMature = !this.showMature;
+  }
 }