fix lint and test

frontend/app/components/comment/comment-actions.spec.tsx

@@ -35,7 +35,7 @@ describe('<CommentActions/>', () => {
   });
   afterEach(() => {
     jest.resetAllMocks();
-  })
+  });
 
   it('should render "Reply"', () => {
     render(<CommentActions {...props} />);
@@ -145,11 +145,11 @@ describe('<CommentActions/>', () => {
     });
 
     it('calls `onToggleEditing` when edit button is pressed', () => {
+      props.editable = true;
+      props.editDeadline = Date.now() + 300 * 1000;
       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);
-    })
+    });
   });
 });

frontend/app/components/comment/comment.test.tsx

@@ -1,15 +1,18 @@
 import { h } from 'preact';
 import '@testing-library/jest-dom';
-import { screen } from '@testing-library/preact';
+import { fireEvent, screen, waitFor } from '@testing-library/preact';
 import { useIntl, IntlShape } from 'react-intl';
 
 import { render } from 'tests/utils';
 import { StaticStore } from 'common/static-store';
 
 import { Comment, CommentProps } from './comment';
+import { CommentMode } from 'common/types';
 
 function CommentWithIntl(props: CommentProps) {
-  return <Comment {...props} intl={useIntl()} />;
+  const intl = useIntl();
+
+  return <Comment {...props} intl={intl} />;
 }
 
 function getProps(): CommentProps {
@@ -230,4 +233,26 @@ describe('<Comment />', () => {
     render(<CommentWithIntl {...props} />);
     expect(screen.queryByRole('timer')).not.toBeInTheDocument();
   });
+
+  it('toggles edit mode', async () => {
+    props = getProps();
+    props.repliesCount = 0;
+    props.data.user = props.user!;
+    props.data.time = new Date().toString();
+    props.setReplyEditState = jest.fn().mockImplementation(() => {
+      props.editMode = props.editMode === undefined ? CommentMode.Edit : CommentMode.None;
+    });
+    StaticStore.config.edit_duration = 300;
+    const { rerender } = render(<CommentWithIntl {...props} />);
+    fireEvent(screen.getByText('Edit'), new MouseEvent('click', { bubbles: true }));
+    rerender(<CommentWithIntl {...props} />);
+    await waitFor(() => {
+      expect(screen.getByText('Cancel')).toBeVisible();
+    });
+    fireEvent(screen.getByText('Cancel'), new MouseEvent('click', { bubbles: true }));
+    rerender(<CommentWithIntl {...props} />);
+    await waitFor(() => {
+      expect(screen.getByText('Edit')).toBeVisible();
+    });
+  });
 });

frontend/app/tests/utils.tsx

@@ -8,9 +8,20 @@ import { mockStore } from '__stubs__/store';
 import { StoreState } from 'store';
 
 export function render(children: ComponentChild, s: Partial<StoreState> = {}) {
-  return originalRender(
+  const props = originalRender(
     <IntlProvider locale="en" messages={en}>
       <Provider store={mockStore(s)}>{children}</Provider>
     </IntlProvider>
   );
+
+  return {
+    ...props,
+    rerender(children: ComponentChild) {
+      props.rerender(
+        <IntlProvider locale="en" messages={en}>
+          <Provider store={mockStore(s)}>{children}</Provider>
+        </IntlProvider>
+      );
+    },
+  };
 }