create comments test

apps/app/src/components/PageComment.tsx

@@ -191,6 +191,7 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                       <NotAvailableForGuest>
                         <NotAvailableForReadOnlyUser>
                           <Button
+                            data-testid="comemnt-reply-button"
                             outline
                             color="secondary"
                             size="sm"

apps/app/src/components/PageComment/CommentControl.tsx

@@ -16,7 +16,12 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
       <button type="button" className="btn btn-link p-2" onClick={onClickEditBtn}>
         <i className="ti ti-pencil"></i>
       </button>
-      <button type="button" className="btn btn-link p-2 mr-2" onClick={onClickDeleteBtn}>
+      <button
+        data-testid="comment-delete-button"
+        type="button"
+        className="btn btn-link p-2 mr-2"
+        onClick={onClickDeleteBtn}
+      >
         <i className="ti ti-close"></i>
       </button>
     </div>

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -279,6 +279,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     );
     const submitButton = (
       <Button
+        data-testid="commet-submit-button"
         outline
         color="primary"
         className="btn btn-outline-primary rounded-pill"

apps/app/test/cypress/e2e/20-basic-features/20-basic-features--comments.cy.ts

@@ -1,5 +1,6 @@
 context('Comment', () => {
   const ssPrefix = 'comments-';
+  let commentCount = 0;
 
   beforeEach(() => {
     // login
@@ -8,15 +9,33 @@ context('Comment', () => {
     });
 
     // visit page
-    cy.visit('/comments');
+    cy.visit('/comment');
     cy.collapseSidebar(true, true);
+  })
 
-    cy.getByTestid('page-comment-button').click();
+  it('Successfully create comment page', () => {
+    // save page
+    cy.get('#grw-page-editor-mode-manager').as('pageEditorModeManager').should('be.visible');
+    cy.waitUntil(() => {
+      // do
+      cy.get('@pageEditorModeManager').within(() => {
+        cy.get('button:nth-child(2)').click();
+      });
+      // until
+      return cy.get('.layout-root').then($elem => $elem.hasClass('editing'));
+    });
+    cy.get('.CodeMirror').should('be.visible');
+
+    cy.getByTestid('page-editor').should('be.visible');
+    cy.getByTestid('save-page-btn').click();
+    cy.get('.wiki').should('be.visible');
   })
 
   it('Successfully add comments', () => {
     const commetText = 'add comment';
 
+    cy.getByTestid('page-comment-button').click();
+
     // Open comment editor
     cy.waitUntil(() => {
       // do
@@ -25,47 +44,58 @@ context('Comment', () => {
       return cy.get('.comment-write').then($elem => $elem.is(':visible'));
     });
 
-    cy.waitUntil(() => {
-      // do
-      cy.get('.CodeMirror').type(commetText);
-      // wait until
-      return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
-    });
+    cy.get('.CodeMirror').type(commetText);
+    cy.getByTestid("commet-submit-button").eq(0).click();
 
     // Check update comment count
-    cy.getByTestid('page-comment-button').get('span:nth-child(2)').contains(1);
-
+    commentCount += 1
+    cy.getByTestid('page-comment-button').contains(commentCount);
     cy.screenshot(`${ssPrefix}1-add-comments`);
   });
 
   it('Successfully reply comments', () => {
     const commetText = 'reply comment';
 
+    cy.getByTestid('page-comment-button').click();
+
     // Open reply comment editor
     cy.waitUntil(() => {
       // do
-      cy.get('.btn-comment-reply').click();
+      cy.getByTestid('comemnt-reply-button').eq(0).click();
       // wait until
       return cy.get('.comment-write').then($elem => $elem.is(':visible'));
     });
 
-    cy.waitUntil(() => {
-      // do
-      cy.get('.CodeMirror').type(commetText);
-      // wait until
-      return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
-    });
+    cy.get('.CodeMirror').type(commetText);
+    cy.getByTestid("commet-submit-button").eq(0).click();
 
     // Check update comment count
-    cy.getByTestid('page-comment-button').get('span:nth-child(2)').contains(1);
-
+    commentCount += 1
+    cy.getByTestid('page-comment-button').contains(commentCount);
     cy.screenshot(`${ssPrefix}2-reply-comments`);
   });
 
+  it('Successfully delete comments', () => {
+
+    cy.getByTestid('page-comment-button').click();
+
+    cy.get('.page-comments').should('be.visible');
+    cy.getByTestid('comment-delete-button').eq(0).click({force: true});
+    cy.get('.modal-content').then($elem => $elem.is(':visible'));
+    cy.get('.modal-footer > button:nth-child(3)').click();
+
+    // Check update comment count
+    commentCount -= 2
+    cy.getByTestid('page-comment-button').contains(commentCount);
+    cy.screenshot(`${ssPrefix}3-delete-comments`);
+  });
+
   // Mention username in comment
   it('Successfully mention username in comment', () => {
     const username = '@adm';
 
+    cy.getByTestid('page-comment-button').click();
+
     // Open comment editor
     cy.waitUntil(() => {
       // do
@@ -81,15 +111,17 @@ context('Comment', () => {
       return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
     });
 
-    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}3-mention-username-found`) });
+    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}4-mention-username-found`) });
     // Click on mentioned username
     cy.get('.CodeMirror-hints > li').first().click();
-    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}4-mention-username-mentioned`) });
+    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}5-mention-username-mentioned`) });
   });
 
   it('Username not found when mention username in comment', () => {
     const username = '@user';
 
+    cy.getByTestid('page-comment-button').click();
+
     // Open comment editor
     cy.waitUntil(() => {
       // do
@@ -105,10 +137,10 @@ context('Comment', () => {
       return cy.get('.CodeMirror-hints').then($elem => $elem.is(':visible'));
     });
 
-    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}5-mention-username-not-found`) });
+    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}6-mention-username-not-found`) });
     // Click on username not found hint
     cy.get('.CodeMirror-hints > li').first().click();
-    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}6-mention-no-username-mentioned`) });
+    cy.get('#comments-container').within(() => { cy.screenshot(`${ssPrefix}7-mention-no-username-mentioned`) });
   });
 
 })