Reintroduced maturity selector for activity comments. #2392

Summary

Closes #2392 (closed)

I've re-enabled the maturity filter for comments here, in the same style as we handle it in activities.

Steps to test

Note: if you are the owner, your text is in the show state by default.

1. Login.
2. post a non-mature comment on a post.
3. post a mature comment.
4. Repeat steps 2 and 3, nesting into the comment tree so that you have 3 tiers of mature and non-mature comments.
5. Refresh, the posts, they should all be visible as you are the logged-in user.
6. You should be able to click on the red E icon to blur mature the posts.
7. Copy the link to the post.

Then,

1. Log out
2. Go to the post you made above.
3. Check the mature text is all blurred.
4. Click on the text, not the E button to ensure it gets rid of the blur,
5. Click the text again, it should do nothing.
6. Click the button again, it should re-blur.
7. Cycle the button on and off to check it works properly.

Estimated Regression Scope

This change effects comments.

The html-template changes should be self-contained; I don't think they'd affect anything outside of their lines of code by themselves, the only bit of code that really touched anything is in the ngOnInit(), where I check the users guid, and set the content to show if they are the owner of the comment. So, as a worst-case scenario, maybe it would show by default for everybody.

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');
+      });
   });
 
 })