Merge pull request #8908 from weseek/support/148652-replace-tests-with-playwright

support: Replace tests with Playwright (20-basic-features/20-basic-features--comments)

apps/app/playwright/20-basic-features/comments.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test('Create comment page', async({ page }) => {
+  await page.goto('/comment');
+  await page.getByTestId('editor-button').click();
+  await page.getByTestId('save-page-btn').click();
+  await expect(page.locator('.page-meta')).toBeVisible();
+});
+
+test('Successfully add comments', async({ page }) => {
+  const commentText = 'add comment';
+  await page.goto('/comment');
+
+  // Add comment
+  await page.getByTestId('page-comment-button').click();
+  await page.getByTestId('open-comment-editor-button').click();
+  await page.locator('.cm-content').fill(commentText);
+  await page.getByTestId('comment-submit-button').first().click();
+
+  await expect(page.locator('.page-comment-body')).toHaveText(commentText);
+  await expect(page.getByTestId('page-comment-button').locator('.grw-count-badge')).toHaveText('1');
+});
+
+test('Successfully reply comments', async({ page }) => {
+  const commentText = 'reply comment';
+  await page.goto('/comment');
+
+  // Reply comment
+  await page.getByTestId('page-comment-button').click();
+  await page.getByTestId('comment-reply-button').click();
+  await page.locator('.cm-content').fill(commentText);
+  await page.getByTestId('comment-submit-button').first().click();
+
+  await expect(page.locator('.page-comment-body').nth(1)).toHaveText(commentText);
+  await expect(page.getByTestId('page-comment-button').locator('.grw-count-badge')).toHaveText('2');
+});
+
+// test('Successfully delete comments', async({ page }) => {
+//   await page.goto('/comment');
+
+//   await page.getByTestId('page-comment-button').click();
+//   await page.getByTestId('comment-delete-button').first().click({ force: true });
+//   await expect(page.getByTestId('page-comment-delete-modal')).toBeVisible();
+//   await page.getByTestId('delete-comment-button').click();
+
+//   await expect(page.getByTestId('page-comment-button').locator('.grw-count-badge')).toHaveText('0');
+// });
+
+// TODO: https://redmine.weseek.co.jp/issues/139520

apps/app/src/components/PageComment.tsx

@@ -179,7 +179,7 @@ export const PageComment: FC<PageCommentProps> = memo((props: PageCommentProps):
                       <NotAvailableForReadOnlyUser>
                         <button
                           type="button"
-                          id="comment-reply-button"
+                          data-testid="comment-reply-button"
                           className="btn btn-secondary btn-comment-reply text-start w-100 ms-5"
                           onClick={() => onReplyButtonClickHandler(comment._id)}
                         >

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

@@ -75,7 +75,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
       <>
         <span className="text-danger">{errorMessage}</span>&nbsp;
         <Button onClick={cancelToDelete}>{t('Cancel')}</Button>
-        <Button color="danger" onClick={confirmToDelete}>
+        <Button data-testid="delete-comment-button" color="danger" onClick={confirmToDelete}>
           <span className="material-symbols-outlined">delete_forever</span>
           {t('Delete')}
         </Button>
@@ -84,7 +84,7 @@ export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element
   };
 
   return (
-    <Modal isOpen={isShown} toggle={cancelToDelete} className={`${styles['page-comment-delete-modal']}`}>
+    <Modal data-testid="page-comment-delete-modal" isOpen={isShown} toggle={cancelToDelete} className={`${styles['page-comment-delete-modal']}`}>
       <ModalHeader tag="h4" toggle={cancelToDelete} className="text-danger">
         {headerContent()}
       </ModalHeader>

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

@@ -1,140 +0,0 @@
-context('Comment', () => {
-  const ssPrefix = 'comments-';
-  let commentCount = 0;
-
-  beforeEach(() => {
-    // login
-    cy.fixture("user-admin.json").then(user => {
-      cy.login(user.username, user.password);
-    });
-
-    // visit page
-    cy.visit('/comment');
-    cy.collapseSidebar(true, true);
-  })
-
-  it('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('.cm-content').should('be.visible');
-
-    cy.getByTestid('page-editor').should('be.visible');
-    cy.getByTestid('save-page-btn').click();
-  })
-
-  it('Successfully add comments', () => {
-    const commetText = 'add comment';
-
-    cy.getByTestid('page-comment-button').click();
-
-    // Open comment editor
-    cy.waitUntil(() => {
-      // do
-      cy.getByTestid('open-comment-editor-button').click();
-      // wait until
-      return cy.get('.comment-write').then($elem => $elem.is(':visible'));
-    });
-
-    cy.get('.cm-content').type(commetText);
-    cy.getByTestid("comment-submit-button").eq(0).click();
-
-    // Check update comment count
-    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.getByTestid('comment-reply-button').eq(0).click();
-      // wait until
-      return cy.get('.comment-write').then($elem => $elem.is(':visible'));
-    });
-
-    cy.get('.cm-content').type(commetText);
-    cy.getByTestid("comment-submit-button").eq(0).click();
-
-    // TODO : https://redmine.weseek.co.jp/issues/139431
-    // Check update comment count
-    // commentCount += 1
-    // cy.getByTestid('page-comment-button').contains(commentCount);
-    // cy.screenshot(`${ssPrefix}2-reply-comments`);
-  });
-
-  // TODO:https://redmine.weseek.co.jp/issues/139467
-  // 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`);
-  // });
-
-
-  // TODO: https://redmine.weseek.co.jp/issues/139520
-  // // 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
-  //     cy.getByTestid('open-comment-editor-button').click();
-  //     // wait until
-  //     return cy.get('.comment-write').then($elem => $elem.is(':visible'));
-  //   });
-
-  //   cy.appendTextToEditorUntilContains(username);
-
-  //   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}5-mention-username-mentioned`) });
-  // });
-
-  // TODO: https://redmine.weseek.co.jp/issues/139520
-  // it('Username not found when mention username in comment', () => {
-  //   const username = '@user';
-
-  //   cy.getByTestid('page-comment-button').click();
-
-  //   // Open comment editor
-  //   cy.waitUntil(() => {
-  //     // do
-  //     cy.getByTestid('open-comment-editor-button').click();
-  //     // wait until
-  //     return cy.get('.comment-write').then($elem => $elem.is(':visible'));
-  //   });
-
-  //   cy.appendTextToEditorUntilContains(username);
-
-  //   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}7-mention-no-username-mentioned`) });
-  // });
-
-})