update data-testid

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

@@ -126,7 +126,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     }
   }, [isForNewComment, onCancelButtonClicked]);
 
-  const postCommentHandler = useCallback(async() => {
+  const postCommentHandler = useCallback(async () => {
     try {
       if (currentCommentId != null) {
         // update current comment
@@ -183,7 +183,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     });
   }, []);
 
-  const uploadHandler = useCallback(async(file) => {
+  const uploadHandler = useCallback(async (file) => {
     if (editorRef.current == null) { return }
 
     const pagePath = currentPagePath;
@@ -230,7 +230,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
             type="button"
             className="btn btn-lg btn-link"
             onClick={() => setIsReadyToUse(true)}
-            data-testid="openCommentEditorButton"
+            data-testid="open-comment-editor-button"
           >
             <i className="icon-bubble"></i> Add Comment
           </button>
@@ -301,9 +301,9 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
         <div className="comment-submit">
           <div className="d-flex">
             <span className="flex-grow-1" />
-            <span className="d-none d-sm-inline">{ errorMessage && errorMessage }</span>
+            <span className="d-none d-sm-inline">{errorMessage && errorMessage}</span>
 
-            { isSlackConfigured && isSlackEnabled != null
+            {isSlackConfigured && isSlackEnabled != null
               && (
                 <div className="form-inline align-self-center mr-md-2">
                   <SlackNotification
@@ -322,7 +322,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           </div>
           <div className="d-block d-sm-none mt-2">
             <div className="d-flex justify-content-end">
-              { error && errorMessage }
+              {error && errorMessage}
               <span className="mr-2">{cancelButton}</span><span>{submitButton}</span>
             </div>
           </div>
@@ -338,7 +338,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           <UserPicture user={currentUser} noLink noTooltip />
         </div>
         <div className="comment-form-main">
-          { isReadyToUse
+          {isReadyToUse
             ? renderReady()
             : renderBeforeReady()
           }

packages/app/src/components/PageSideContents.tsx

@@ -37,7 +37,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
     <>
       {/* Page list */}
       <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
-        { !isSharedUser && (
+        {!isSharedUser && (
           <button
             type="button"
             className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
@@ -50,17 +50,17 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             {t('page_list')}
             <CountBadge count={page?.descendantCount} offset={1} />
           </button>
-        ) }
+        )}
       </div>
 
       {/* Comments */}
-      { !isTopPagePath && (
+      {!isTopPagePath && (
         <div className={`mt-2 grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
           <Link to={'page-comments'} offset={-120}>
             <button
               type="button"
               className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
-              data-testid="pageCommentButton"
+              data-testid="page-comment-button"
             >
               <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>
               <span>Comments</span>
@@ -68,11 +68,11 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
             </button>
           </Link>
         </div>
-      ) }
+      )}
 
       <div className="d-none d-lg-block">
         <TableOfContents />
-        { isUsersHomePagePath && <ContentLinkButtons author={page?.creator} /> }
+        {isUsersHomePagePath && <ContentLinkButtons author={page?.creator} />}
       </div>
     </>
   );

packages/app/test/cypress/integration/20-basic-features/20-basic-features--username-mention.spec.ts

@@ -14,12 +14,12 @@ context('Mention username in comment', () => {
     cy.collapseSidebar(true, true);
 
     // Go to comment page
-    cy.getByTestid('pageCommentButton').click();
+    cy.getByTestid('page-comment-button').click();
 
     // Open comment editor
     cy.waitUntil(() => {
       // do
-      cy.getByTestid('openCommentEditorButton').click();
+      cy.getByTestid('open-comment-editor-button').click();
       // wait until
       return cy.get('.comment-write').then($elem => $elem.is(':visible'));
     });