Skip to content

Commit

Permalink
create tests for PostInfo Component (#612)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OksanLan
OksanLan authored Oct 13, 2021
1 parent de2c205 commit 4e76c0d
Show file tree
Hide file tree
Showing 3 changed files with 325 additions and 5 deletions.
13 changes: 8 additions & 5 deletions src/components/Posts/PostInfo/PostInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,25 @@ export default function PostInfo({ info }: IPostInfo): JSX.Element {

return (
<div className={classes.root}>
<ul className={classes.topics}>
<ul className={classes.topics} data-testid="topics">
{directions &&
directions.map((el) => (
<li
data-testid="direction"
key={el.id}
onClick={() => redirectToMaterialsFiltered(el.id, 'directions')}
>
{el.label}
</li>
))}
</ul>
<ul className={classes.origins}>
<ul className={classes.origins} data-testid="origins">
{origins &&
origins.map(
(el) =>
el.name && (
<li
data-testid="origin"
className={classes.origin}
onClick={() => redirectToMaterialsFiltered(el.id, 'origins')}
key={el.id}
Expand All @@ -58,6 +60,7 @@ export default function PostInfo({ info }: IPostInfo): JSX.Element {
)}
{type && (
<li
data-testid="type"
className={classes.origin}
onClick={() => redirectToMaterialsFiltered(type.id, 'types')}
>
Expand All @@ -67,12 +70,12 @@ export default function PostInfo({ info }: IPostInfo): JSX.Element {
<li className={classes.createdAt}>{publishedAt}</li>
{!mobile && (
<>
<li className={classes.icon}>
<li className={classes.icon} data-testid="icon">
<VisibilityIcon fontSize="small" />
</li>
<li className={classes.counter}>
<li className={classes.counter} data-testid="counter">
{uniqueViewsCounter === undefined ? (
<Skeleton width={40} height={20} />
<Skeleton width={40} height={20} data-testid="skeleton" />
) : (
uniqueViewsCounter
)}
Expand Down
132 changes: 132 additions & 0 deletions src/components/Posts/PostInfo/__tests__/PostInfo.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';
import { ScreenContext } from 'old/provider/MobileProvider/ScreenContext';
import PostInfo, { IPostInfo } from '../PostInfo';

describe('PostInfo tests', () => {
let mocks: IPostInfo;

const renderComponentWithRouter = () => {
const history = createMemoryHistory();

render(
<Router history={history}>
<PostInfo info={mocks.info} />
</Router>,
);

return { history };
};

beforeEach(() => {
mocks = {
info: {
directions: [
{
id: 7,
name: 'pediatrics',
label: 'Педіатрія',
color: '#993333',
hasDoctors: true,
hasPosts: true,
},
{
id: 4,
name: 'therapy',
label: 'Терапія',
color: '#ffee58',
hasDoctors: true,
hasPosts: true,
},
],
origins: [
{
id: 2,
name: 'Медитека',
parameter: null,
},
],
type: {
id: 1,
name: 'Стаття',
},
publishedAt: '05.10.2021',
uniqueViewsCounter: 9,
},
};
});

it('should PostInfo render correctly', () => {
const { asFragment } = render(<PostInfo info={mocks.info} />);

expect(asFragment()).toMatchSnapshot();
});

it('should main blocks be in the component', () => {
render(<PostInfo info={mocks.info} />);

expect(screen.getByTestId('topics')).toBeInTheDocument();
expect(screen.getByTestId('origins')).toBeInTheDocument();
});

it('should onClick handler redirect to directions', () => {
const { history } = renderComponentWithRouter();

const items = screen.getAllByTestId('direction');
expect(items[0]).toBeInTheDocument();

userEvent.click(items[0]);
expect(history.length).toBe(2);
expect(history.location.pathname).toBe('/materials');
expect(history.location.search).toBe('?directions=7');
});

it('should onClick handler redirect to origins', () => {
const { history } = renderComponentWithRouter();

const items = screen.getAllByTestId('origin');
expect(items[0]).toBeInTheDocument();

userEvent.click(items[0]);
expect(history.length).toBe(2);
expect(history.location.pathname).toBe('/materials');
expect(history.location.search).toBe('?origins=2');
});

it('should onClick handler redirect to types', () => {
const { history } = renderComponentWithRouter();

const items = screen.getAllByTestId('type');
expect(items[0]).toBeInTheDocument();

userEvent.click(items[0]);
expect(history.length).toBe(2);
expect(history.location.pathname).toBe('/materials');
expect(history.location.search).toBe('?types=1');
});

it('should mobile be without Views Counter', () => {
const { asFragment } = render(
<ScreenContext.Provider value={{ mobile: true, tablet: null }}>
<PostInfo info={mocks.info} />
</ScreenContext.Provider>,
);

expect(screen.queryByTestId('icon')).not.toBeInTheDocument();
expect(screen.queryByTestId('counter')).not.toBeInTheDocument();

expect(asFragment()).toMatchSnapshot();
});

it('should Skeleton be visible', () => {
delete mocks.info.uniqueViewsCounter;

const { asFragment } = render(<PostInfo info={mocks.info} />);

expect(screen.getByTestId('skeleton')).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
});
185 changes: 185 additions & 0 deletions src/components/Posts/PostInfo/__tests__/__snapshots__/PostInfo.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PostInfo tests should PostInfo render correctly 1`] = `
<DocumentFragment>
<div
class="PostInfo-root-1"
>
<ul
class="PostInfo-topics-2"
data-testid="topics"
>
<li
data-testid="direction"
>
Педіатрія
</li>
<li
data-testid="direction"
>
Терапія
</li>
</ul>
<ul
class="PostInfo-origins-3"
data-testid="origins"
>
<li
class="PostInfo-origin-4"
data-testid="origin"
>
Медитека
</li>
<li
class="PostInfo-origin-4"
data-testid="type"
>
Стаття
</li>
<li
class="PostInfo-createdAt-5"
>
05.10.2021
</li>
<li
class="PostInfo-icon-6"
data-testid="icon"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
/>
</svg>
</li>
<li
class="PostInfo-counter-7"
data-testid="counter"
>
9
</li>
</ul>
</div>
</DocumentFragment>
`;

exports[`PostInfo tests should Skeleton be visible 1`] = `
<DocumentFragment>
<div
class="PostInfo-root-43"
>
<ul
class="PostInfo-topics-44"
data-testid="topics"
>
<li
data-testid="direction"
>
Педіатрія
</li>
<li
data-testid="direction"
>
Терапія
</li>
</ul>
<ul
class="PostInfo-origins-45"
data-testid="origins"
>
<li
class="PostInfo-origin-46"
data-testid="origin"
>
Медитека
</li>
<li
class="PostInfo-origin-46"
data-testid="type"
>
Стаття
</li>
<li
class="PostInfo-createdAt-47"
>
05.10.2021
</li>
<li
class="PostInfo-icon-48"
data-testid="icon"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
/>
</svg>
</li>
<li
class="PostInfo-counter-49"
data-testid="counter"
>
<span
class="MuiSkeleton-root MuiSkeleton-text MuiSkeleton-pulse"
data-testid="skeleton"
style="width: 40px; height: 20px;"
/>
</li>
</ul>
</div>
</DocumentFragment>
`;

exports[`PostInfo tests should mobile be without Views Counter 1`] = `
<DocumentFragment>
<div
class="PostInfo-root-36"
>
<ul
class="PostInfo-topics-37"
data-testid="topics"
>
<li
data-testid="direction"
>
Педіатрія
</li>
<li
data-testid="direction"
>
Терапія
</li>
</ul>
<ul
class="PostInfo-origins-38"
data-testid="origins"
>
<li
class="PostInfo-origin-39"
data-testid="origin"
>
Медитека
</li>
<li
class="PostInfo-origin-39"
data-testid="type"
>
Стаття
</li>
<li
class="PostInfo-createdAt-40"
>
05.10.2021
</li>
</ul>
</div>
</DocumentFragment>
`;

0 comments on commit 4e76c0d

Please sign in to comment.