From 9053668cfef2567b7ac651eb03b8b11fb6624795 Mon Sep 17 00:00:00 2001
From: Paul Mineev <paul@mineev.me>
Date: Tue, 10 May 2022 12:01:47 -0700
Subject: [PATCH] fix editing mode

---
 .../comment/comment-actions.spec.tsx          | 30 +++++++++++++------
 .../components/comment/comment-actions.tsx    |  4 ++-
 frontend/app/components/comment/comment.tsx   |  1 +
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/comment/comment-actions.spec.tsx b/frontend/app/components/comment/comment-actions.spec.tsx
index e9dd25a0..75229111 100644
--- a/frontend/app/components/comment/comment-actions.spec.tsx
+++ b/frontend/app/components/comment/comment-actions.spec.tsx
@@ -2,7 +2,7 @@ import { h } from 'preact';
 import '@testing-library/jest-dom';
 import { CommentActions, Props } from './comment-actions';
 import { render } from 'tests/utils';
-import { screen, waitFor } from '@testing-library/preact';
+import { fireEvent, screen, waitFor } from '@testing-library/preact';
 
 function getProps(): Props {
   return {
@@ -14,14 +14,15 @@ function getProps(): Props {
     readOnly: false,
     editing: false,
     replying: false,
-    onCopy() {},
-    onDelete() {},
-    onTogglePin() {},
-    onToggleReplying() {},
-    onHideUser() {},
-    onBlockUser() {},
-    onUnblockUser() {},
-    onDisableEditing() {},
+    onCopy: jest.fn(),
+    onDelete: jest.fn(),
+    onToggleEditing: jest.fn(),
+    onTogglePin: jest.fn(),
+    onToggleReplying: jest.fn(),
+    onHideUser: jest.fn(),
+    onBlockUser: jest.fn(),
+    onUnblockUser: jest.fn(),
+    onDisableEditing: jest.fn(),
     editable: false,
     editDeadline: undefined,
   };
@@ -32,6 +33,9 @@ describe('<CommentActions/>', () => {
   beforeEach(() => {
     props = getProps();
   });
+  afterEach(() => {
+    jest.resetAllMocks();
+  })
 
   it('should render "Reply"', () => {
     render(<CommentActions {...props} />);
@@ -139,5 +143,13 @@ describe('<CommentActions/>', () => {
       expect(screen.getByTestId('comment-actions-additional').children[3]).toHaveTextContent('Block');
       expect(screen.getByTestId('comment-actions-additional').children[4]).toHaveTextContent('Delete');
     });
+
+    it('calls `onToggleEditing` when edit button is pressed', () => {
+      render(<CommentActions {...props} />);
+      fireEvent(screen.getByText('Edit'), new MouseEvent('click', { bubbles: true }));
+      expect(props.onToggleEditing).toHaveBeenCalledTimes(1);
+      fireEvent(screen.getByText('Cancel'), new MouseEvent('click', { bubbles: true }));
+      expect(props.onToggleEditing).toHaveBeenCalledTimes(2);
+    })
   });
 });
diff --git a/frontend/app/components/comment/comment-actions.tsx b/frontend/app/components/comment/comment-actions.tsx
index a89337cb..fdfa7f01 100644
--- a/frontend/app/components/comment/comment-actions.tsx
+++ b/frontend/app/components/comment/comment-actions.tsx
@@ -22,6 +22,7 @@ export type Props = {
   editable: boolean;
   editDeadline: number | undefined;
   onCopy(): void;
+  onToggleEditing(): void;
   onDelete(): void;
   onTogglePin(): void;
   onToggleReplying(): void;
@@ -43,6 +44,7 @@ export function CommentActions({
   bannedUser,
   editDeadline,
   onCopy,
+  onToggleEditing,
   onDelete,
   onTogglePin,
   onToggleReplying,
@@ -68,7 +70,7 @@ export function CommentActions({
       )}
       {editable && editDeadline && (
         <>
-          <Button kind="link" size="sm">
+          <Button kind="link" size="sm" onClick={onToggleEditing}>
             {intl.formatMessage(editing ? messages.cancel : messages.edit)}
           </Button>
           <span
diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx
index b8439e00..ecf9bff7 100644
--- a/frontend/app/components/comment/comment.tsx
+++ b/frontend/app/components/comment/comment.tsx
@@ -503,6 +503,7 @@ export class Comment extends Component<CommentProps, State> {
               bannedUser={props.isUserBanned}
               onCopy={this.copyComment}
               onTogglePin={this.togglePin}
+              onToggleEditing={this.toggleEditing}
               onDelete={this.deleteComment}
               onHideUser={this.hideUser}
               onBlockUser={this.blockUser}