mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tests for comments counter in profile sidebar

Browse Source
This commit is contained in:
esvyridov
2021-10-23 11:39:33 -05:00
committed by Umputun
parent eb941fc095
commit f104c3822f
3 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/profile/components/counter/counter.tsx
+5 -1
View File
@@ -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>
);
};
frontend/app/components/profile/profile.spec.tsx
+17 -9
View File
@@ -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 () => {
frontend/app/components/profile/profile.tsx
+5 -3
View File
@@ -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