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
{children}
;
+ return (
+
+ {children}
+
+ );
};
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('', () => {
it('should render preloader', () => {
jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub }));
- const { queryByLabelText, queryByRole } = render();
+ const { queryByLabelText, queryByRole, queryByTestId } = render();
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('', () => {
jest.spyOn(api, 'getUserComments').mockImplementation(async () => {
throw new Error('error');
});
- const { queryByLabelText, queryByRole, findByRole } = render();
+ const { queryByLabelText, queryByRole, findByRole, queryByTestId } = render();
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('', () => {
.spyOn(api, 'getUserComments')
.mockImplementation(async () => ({ comments: [], count: 0 }));
- const { findByText, queryByLabelText, queryByRole } = render();
+ const { findByText, queryByLabelText, queryByRole, queryByTestId } = render();
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('', () => {
.spyOn(api, 'getUserComments')
.mockImplementation(async () => ({ comments: commentsStub, count: commentsStub.length }));
- const { findByText, queryByLabelText, queryByRole } = render();
+ const { findByText, queryByLabelText, queryByRole, queryByTestId } = render();
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('', () => {
jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub, current: '1' }));
jest.spyOn(api, 'getUserComments').mockImplementation(async () => ({ comments: [], count: 0 }));
- const { getByText, getByTitle, findByText } = render();
+ const { getByText, getByTitle, findByText, queryByTestId } = render();
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('', () => {
.spyOn(api, 'getUserComments')
.mockImplementation(async () => ({ comments: commentsStub, count: commentsStub.length }));
- const { findByText, queryByTitle, queryByText } = render();
+ const { findByText, queryByTitle, queryByText, queryByTestId } = render();
+ 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() {
)}
-
- {commentsCounts}
-
+ {commentsCounts !== 0 && (
+
+ {commentsCounts}
+
+ )}
{comments.map((comment) => (