From f104c3822fb9a26038f72c312cdde83bea80b40a Mon Sep 17 00:00:00 2001
From: esvyridov <eugene.svyridov@gmail.com>
Date: Thu, 21 Oct 2021 23:58:25 +0200
Subject: [PATCH] Add tests for comments counter in profile sidebar

---
 .../profile/components/counter/counter.tsx    |  6 ++++-
 .../app/components/profile/profile.spec.tsx   | 26 ++++++++++++-------
 frontend/app/components/profile/profile.tsx   |  8 +++---
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/profile/components/counter/counter.tsx b/frontend/app/components/profile/components/counter/counter.tsx
index c0f70ad4..054e38e5 100644
--- a/frontend/app/components/profile/components/counter/counter.tsx
+++ b/frontend/app/components/profile/components/counter/counter.tsx
@@ -2,5 +2,9 @@ import { h } from 'preact';
 import styles from './counter.module.css';
 
 export const Counter: React.FC = ({ children }) => {
-  return <div className={styles.container}>{children}</div>;
+  return (
+    <div className={styles.container} data-testid="comments-counter">
+      {children}
+    </div>
+  );
 };
diff --git a/frontend/app/components/profile/profile.spec.tsx b/frontend/app/components/profile/profile.spec.tsx
index 3c8e82d8..3dcdbe9c 100644
--- a/frontend/app/components/profile/profile.spec.tsx
+++ b/frontend/app/components/profile/profile.spec.tsx
@@ -42,11 +42,13 @@ const commentsStub = [commentStub, commentStub, commentStub];
 describe('<Profile />', () => {
   it('should render preloader', () => {
     jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub }));
-    const { queryByLabelText, queryByRole } = render(<Profile />);
+    const { queryByLabelText, queryByRole, queryByTestId } = render(<Profile />);
 
     expect(queryByLabelText('Loading...')).toBeInTheDocument();
     expect(queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
-    expect(queryByRole('heading', { name: /recent comments/i })).not.toBeInTheDocument();
+    expect(queryByRole('heading', { name: /my comments/i })).not.toBeInTheDocument();
+    expect(queryByRole('heading', { name: /comments/i })).not.toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).not.toBeInTheDocument();
   });
 
   it('should render error', async () => {
@@ -54,11 +56,13 @@ describe('<Profile />', () => {
     jest.spyOn(api, 'getUserComments').mockImplementation(async () => {
       throw new Error('error');
     });
-    const { queryByLabelText, queryByRole, findByRole } = render(<Profile />);
+    const { queryByLabelText, queryByRole, findByRole, queryByTestId } = render(<Profile />);
 
     expect(await findByRole('button', { name: /retry/i })).toBeInTheDocument();
     expect(queryByLabelText('Loading...')).not.toBeInTheDocument();
-    expect(queryByRole('heading', { name: /recent comments/i })).not.toBeInTheDocument();
+    expect(queryByRole('heading', { name: /my comments/i })).not.toBeInTheDocument();
+    expect(queryByRole('heading', { name: /comments/i })).not.toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).not.toBeInTheDocument();
   });
 
   it('should render user without comments', async () => {
@@ -67,10 +71,11 @@ describe('<Profile />', () => {
       .spyOn(api, 'getUserComments')
       .mockImplementation(async () => ({ comments: [], count: 0 }));
 
-    const { findByText, queryByLabelText, queryByRole } = render(<Profile />);
+    const { findByText, queryByLabelText, queryByRole, queryByTestId } = render(<Profile />);
 
     expect(getUserComments).toHaveBeenCalledWith('1');
     expect(await findByText("Don't have comments yet")).toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).not.toBeInTheDocument();
     expect(queryByLabelText('Loading...')).not.toBeInTheDocument();
     expect(queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
   });
@@ -81,9 +86,10 @@ describe('<Profile />', () => {
       .spyOn(api, 'getUserComments')
       .mockImplementation(async () => ({ comments: commentsStub, count: commentsStub.length }));
 
-    const { findByText, queryByLabelText, queryByRole } = render(<Profile />);
+    const { findByText, queryByLabelText, queryByRole, queryByTestId } = render(<Profile />);
 
     expect(await findByText('Comments')).toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).toHaveTextContent(commentsStub.length.toString());
     expect(queryByLabelText('Loading...')).not.toBeInTheDocument();
     expect(queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
   });
@@ -92,11 +98,12 @@ describe('<Profile />', () => {
     jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub, current: '1' }));
     jest.spyOn(api, 'getUserComments').mockImplementation(async () => ({ comments: [], count: 0 }));
 
-    const { getByText, getByTitle, findByText } = render(<Profile />);
+    const { getByText, getByTitle, findByText, queryByTestId } = render(<Profile />);
 
     expect(getByTitle('Sign Out')).toBeInTheDocument();
     expect(getByText('Request my data removal')).toBeInTheDocument();
     expect(await findByText("Don't have comments yet")).toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).not.toBeInTheDocument();
   });
 
   it('should render current user with comments', async () => {
@@ -105,11 +112,12 @@ describe('<Profile />', () => {
       .spyOn(api, 'getUserComments')
       .mockImplementation(async () => ({ comments: commentsStub, count: commentsStub.length }));
 
-    const { findByText, queryByTitle, queryByText } = render(<Profile />);
+    const { findByText, queryByTitle, queryByText, queryByTestId } = render(<Profile />);
 
+    expect(await findByText('My comments')).toBeInTheDocument();
+    expect(queryByTestId('comments-counter')).toHaveTextContent(commentsStub.length.toString());
     expect(queryByTitle('Sign Out')).toBeInTheDocument();
     expect(queryByText('Request my data removal')).toBeInTheDocument();
-    expect(await findByText('My comments')).toBeInTheDocument();
   });
 
   it('should render user without footer', async () => {
diff --git a/frontend/app/components/profile/profile.tsx b/frontend/app/components/profile/profile.tsx
index 12ec2590..8233cea4 100644
--- a/frontend/app/components/profile/profile.tsx
+++ b/frontend/app/components/profile/profile.tsx
@@ -127,9 +127,11 @@ export function Profile() {
             <FormattedMessage key="user.comments" id="user.comments" defaultMessage="Comments" />
           )}
         </h3>
-        <div className={styles.counterWrapper}>
-          <Counter>{commentsCounts}</Counter>
-        </div>
+        {commentsCounts !== 0 && (
+          <div className={styles.counterWrapper}>
+            <Counter>{commentsCounts}</Counter>
+          </div>
+        )}
       </div>
       {comments.map((comment) => (
         <Comment