Add frontend tests for comments

src-ui/cypress/e2e/documents/document-detail.cy.ts

@@ -17,6 +17,32 @@ describe('document-detail', () => {
       req.reply({ result: 'OK' })
     }).as('saveDoc')
 
+    cy.fixture('documents/1/comments.json').then((commentsJson) => {
+      cy.intercept(
+        'GET',
+        'http://localhost:8000/api/documents/1/comments/',
+        (req) => {
+          req.reply(commentsJson.filter((c) => c.id != 10)) // 3
+        }
+      )
+
+      cy.intercept(
+        'DELETE',
+        'http://localhost:8000/api/documents/1/comments/?id=9',
+        (req) => {
+          req.reply(commentsJson.filter((c) => c.id != 9 && c.id != 10)) // 2
+        }
+      )
+
+      cy.intercept(
+        'POST',
+        'http://localhost:8000/api/documents/1/comments/',
+        (req) => {
+          req.reply(commentsJson) // 4
+        }
+      )
+    })
+
     cy.viewport(1024, 1024)
     cy.visit('/documents/1/')
   })
@@ -39,4 +65,30 @@ describe('document-detail', () => {
     cy.contains('button', 'Save').click().wait('@saveDoc').wait(2000) // navigates away after saving
     cy.contains('You have unsaved changes').should('not.exist')
   })
+
+  it('should show a list of comments', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 3)
+  })
+
+  it('should support comment deletion', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments')
+      .find('.card')
+      .first()
+      .find('button')
+      .click({ force: true })
+      .wait(500)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 2)
+  })
+
+  it('should support comment insertion', () => {
+    cy.wait(1000).get('a').contains('Comments').click().wait(1000)
+    cy.get('app-document-comments')
+      .find('form textarea')
+      .type('Testing new comment')
+      .wait(500)
+    cy.get('app-document-comments').find('form button').click().wait(1500)
+    cy.get('app-document-comments').find('.card').its('length').should('eq', 4)
+  })
 })

src-ui/cypress/fixtures/documents/1/comments.json

@@ -0,0 +1,46 @@
+[
+    {
+        "id": 10,
+        "comment": "Testing new comment",
+        "created": "2022-08-08T04:24:55.176008Z",
+        "user": {
+            "id": 1,
+            "username": "user2",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 9,
+        "comment": "Testing one more time",
+        "created": "2022-02-18T04:24:55.176008Z",
+        "user": {
+            "id": 2,
+            "username": "user1",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 8,
+        "comment": "Another comment",
+        "created": "2021-11-08T04:24:47.925042Z",
+        "user": {
+            "id": 2,
+            "username": "user33",
+            "firstname": "",
+            "lastname": ""
+        }
+    },
+    {
+        "id": 7,
+        "comment": "Cupcake ipsum dolor sit amet cheesecake candy cookie tiramisu. Donut chocolate chupa chups macaroon brownie halvah pie cheesecake gummies. Sweet chocolate bar candy donut gummi bears bear claw liquorice bonbon shortbread.\n\nDonut chocolate bar candy wafer wafer tiramisu. Gummies chocolate cake muffin toffee carrot cake macaroon. Toffee toffee jelly beans danish lollipop cake.",
+        "created": "2021-02-08T02:37:49.724132Z",
+        "user": {
+            "id": 3,
+            "username": "admin",
+            "firstname": "",
+            "lastname": ""
+        }
+    }
+]

src-ui/src/app/components/document-comments/document-comments.component.html

@@ -17,11 +17,11 @@
         </div>
         <div class="d-flex card-footer small bg-light text-primary justify-content-between align-items-center">
             <span>{{displayName(comment)}} - {{ comment.created | customDate}}</span>
-            <btn class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
+            <button type="button" class="btn btn-link btn-sm p-0 fade" (click)="deleteComment(comment.id)">
                 <svg width="13" height="13" fill="currentColor">
                     <use xlink:href="assets/bootstrap-icons.svg#trash" />
                 </svg>
-            </btn>
+            </button>
         </div>
     </div>
 </div>