add comment mod checks

client-admin/src/components/conversation-admin/comment-moderation/comment.js

@@ -25,7 +25,7 @@ class Comment extends React.Component {
 
   render() {
     return (
-      <Card sx={{ mb: [3], minWidth: '35em' }}>
+      <Card sx={{ mb: [3], minWidth: '35em' }} data-test-id="pending-comment">
         <Box>
           <Text sx={{ mb: [3], color: 'red', fontSize: 12 }}>{this.props.comment.active ? null : 'Comment flagged as toxic by Jigsaw Perspective API. Comment not shown to participants. Accept to override.'}</Text>
           <Text sx={{ mb: [3] }}>{this.props.comment.txt}</Text>
@@ -44,7 +44,7 @@ class Comment extends React.Component {
                 </Button>
               ) : null}
               {this.props.rejectButton ? (
-                <Button onClick={this.onRejectClicked.bind(this)}>
+                <Button onClick={this.onRejectClicked.bind(this)} data-test-id="reject-comment">
                   {this.props.rejectButtonText}
                 </Button>
               ) : null}

client-admin/src/components/conversation-admin/comment-moderation/index.js

@@ -69,6 +69,7 @@ class CommentModeration extends React.Component {
         </Heading>
         <Flex sx={{ mb: [4] }}>
           <Link
+            data-test-id="mod-queue"
             sx={{
               mr: [4],
               variant: url ? 'links.nav' : 'links.activeNav'
@@ -80,6 +81,7 @@ class CommentModeration extends React.Component {
               : null}
           </Link>
           <Link
+            data-test-id="filter-approved"
             sx={{
               mr: [4],
               variant: url === 'accepted' ? 'links.activeNav' : 'links.nav'
@@ -91,6 +93,7 @@ class CommentModeration extends React.Component {
               : null}
           </Link>
           <Link
+          data-test-id="filter-rejected"
             sx={{
               mr: [4],
               variant: url === 'rejected' ? 'links.activeNav' : 'links.nav'

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-accepted.js

@@ -38,7 +38,7 @@ class ModerateCommentsAccepted extends React.Component {
 
   render() {
     return (
-      <div>
+      <div data-test-id="approved-comments">
         {this.props.accepted_comments !== null
           ? this.createCommentMarkup()
           : 'Loading accepted comments...'}

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-rejected.js

@@ -38,7 +38,7 @@ class ModerateCommentsRejected extends React.Component {
 
   render() {
     return (
-      <div>
+      <div data-test-id="rejected-comments">
         {this.props.rejected_comments !== null
           ? this.createCommentMarkup()
           : 'Loading rejected comments...'}

client-admin/src/components/conversation-admin/comment-moderation/moderate-comments-todo.js

@@ -48,7 +48,7 @@ class ModerateCommentsTodo extends React.Component {
   render() {
     const max = 100;
     return (
-      <div>
+      <div data-test-id="pending-comment">
         <div>
           <p> Displays maximum {max} comments </p> 
           {this.props.unmoderated_comments !== null

client-admin/src/components/conversation-admin/index.js

@@ -75,6 +75,7 @@ class ConversationAdminContainer extends React.Component {
               sx={{
                 variant: url === 'comments' ? 'links.activeNav' : 'links.nav'
               }}
+              data-test-id="moderate-comments"
               to={`${match.url}/comments`}>
               Moderate
             </Link>

e2e/cypress/e2e/client-admin/comment-moderation.cy.js

@@ -0,0 +1,53 @@
+describe('Comment Moderation', function () {
+  beforeEach(function () {
+    cy.intercept('GET', '/api/v3/conversations*').as('getConversations')
+    cy.intercept('GET', '/api/v3/comments*').as('getComments')
+    cy.intercept('POST', '/api/v3/comments').as('createComment')
+    cy.intercept('PUT', '/api/v3/comments*').as('updateComment')
+    cy.intercept('PUT', '/api/v3/mod/comments*').as('moderateComment')
+
+    // Create a conversation and add some comments
+    cy.createConvo().then(() => {
+      cy.visit('/m/' + this.convoId)
+      cy.wait('@getConversations')
+
+      // Set up initial comments
+      cy.get('textarea[data-test-id="seed_form"]').type('Initial comment for moderation')
+      cy.get('button').contains('Submit').click()
+      cy.wait('@createComment')
+    })
+  })
+
+  describe('Basic Moderation Actions', function () {
+    it('should reject an approved comment', function () {
+      cy.get('[data-test-id="moderate-comments"]').click()
+      cy.get('[data-test-id="filter-approved"]').click()
+      cy.get('[data-test-id="reject-comment"]').click()
+      cy.wait('@updateComment').then(({ response }) => {
+        expect(response.statusCode).to.equal(200)
+      })
+      cy.get('[data-test-id="pending-comment"]').should('not.exist')
+      cy.get('[data-test-id="filter-rejected"]').click()
+      cy.contains('button', 'accept').click()
+      cy.wait('@updateComment').then(({ response }) => {
+        expect(response.statusCode).to.equal(200)
+      })
+    })
+  })
+
+  describe('Moderation Settings', function () {
+    it('should filter comments by moderation status', function () {
+      cy.get('[data-test-id="moderate-comments"]').click()
+
+      // Test different filter options
+      cy.get('[data-test-id="filter-approved"]').click()
+      cy.get('[data-test-id="approved-comments"]').should('be.visible')
+
+      cy.get('[data-test-id="filter-rejected"]').click()
+      cy.get('[data-test-id="rejected-comments"]').should('exist')
+
+      cy.get('[data-test-id="mod-queue"]').click()
+      cy.get('[data-test-id="pending-comment"]').should('exist')
+    })
+  })
+})