Skip to content

Commit

Permalink
Comment test: replace inhouse test renderer with enzyme
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reeywhaar @umputun
Reeywhaar authored and umputun committed Jul 26, 2019
1 parent a17204f commit e1e1fdf
Showing 1 changed file with 89 additions and 86 deletions.
175 changes: 89 additions & 86 deletions frontend/app/components/comment/comment.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/** @jsx h */
import { h, render } from 'preact';
import { h } from 'preact';
import { mount } from 'enzyme';
import { Props, Comment } from './comment';
import { createDomContainer } from '../../testUtils';
import { User, Comment as CommentType, PostInfo } from '@app/common/types';
import { delay } from '@app/store/comments/utils';

Expand Down Expand Up @@ -30,58 +30,49 @@ const DefaultProps: Partial<Props> = {

describe('<Comment />', () => {
describe('voting', () => {
let container: HTMLElement;

createDomContainer(domContainer => {
container = domContainer;
});

it('disabled on user info widget', () => {
const element = <Comment {...({ ...DefaultProps, view: 'user' } as Props)} />;
render(element, container);
const element = mount(<Comment {...({ ...DefaultProps, view: 'user' } as Props)} />);

const voteButtons = container.querySelectorAll('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

for (const b of voteButtons as any) {
expect(b.getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getAttribute('title')).toStrictEqual("Voting allowed only on post's page");
}
voteButtons.forEach(b => {
expect(b.getDOMNode().getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getDOMNode().getAttribute('title')).toStrictEqual("Voting allowed only on post's page");
});
});

it('disabled on read only post', () => {
const element = (
const element = mount(
<Comment {...({ ...DefaultProps, post_info: { ...DefaultProps.post_info, read_only: true } } as Props)} />
);
render(element, container);

const voteButtons = container.querySelectorAll('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

for (const b of voteButtons as any) {
expect(b.getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getAttribute('title')).toStrictEqual("Can't vote on read-only topics");
}
voteButtons.forEach(b => {
expect(b.getDOMNode().getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getDOMNode().getAttribute('title')).toStrictEqual("Can't vote on read-only topics");
});
});

it('disabled for deleted comment', () => {
const element = (
const element = mount(
// ahem
<Comment {...({ ...DefaultProps, data: { ...DefaultProps.data, delete: true } } as Props)} />
);
render(element, container);

const voteButtons = container.querySelectorAll('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

for (const b of voteButtons as any) {
expect(b.getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getAttribute('title')).toStrictEqual("Can't vote for deleted comment");
}
voteButtons.forEach(b => {
expect(b.getDOMNode().getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getDOMNode().getAttribute('title')).toStrictEqual("Can't vote for deleted comment");
});
});

it('disabled for guest', () => {
const element = (
const element = mount(
<Comment
{...({
...DefaultProps,
Expand All @@ -92,131 +83,143 @@ describe('<Comment />', () => {
} as Props)}
/>
);
render(element, container);

const voteButtons = container.querySelectorAll('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

for (const b of voteButtons as any) {
expect(b.getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getAttribute('title')).toStrictEqual("Can't vote for your own comment");
}
voteButtons.forEach(b => {
expect(b.getDOMNode().getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getDOMNode().getAttribute('title')).toStrictEqual("Can't vote for your own comment");
});
});

it('disabled for own comment', () => {
const element = <Comment {...({ ...DefaultProps, user: null } as Props)} />;
render(element, container);
const element = mount(<Comment {...({ ...DefaultProps, user: null } as Props)} />);

const voteButtons = container.querySelectorAll('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

for (const b of voteButtons as any) {
expect(b.getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getAttribute('title')).toStrictEqual('Sign in to vote');
}
voteButtons.forEach(b => {
expect(b.getDOMNode().getAttribute('aria-disabled')).toStrictEqual('true');
expect(b.getDOMNode().getAttribute('title')).toStrictEqual('Sign in to vote');
});
});

it('disabled for already upvoted comment', async () => {
const voteSpy = jest.fn(async () => {});
const element = (
const element = mount(
<Comment
{...(DefaultProps as Props)}
data={{ ...DefaultProps.data, vote: +1 } as Props['data']}
putCommentVote={voteSpy}
/>
);
render(element, container);

const voteButtons = container.querySelectorAll<HTMLSpanElement>('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

expect(voteButtons[0].getAttribute('aria-disabled')).toStrictEqual('true');
voteButtons[0].click();
expect(
voteButtons
.at(0)
.getDOMNode()
.getAttribute('aria-disabled')
).toStrictEqual('true');
voteButtons.at(0).simulate('click');
await delay(100);
expect(voteSpy).not.toBeCalled();

expect(voteButtons[1].getAttribute('aria-disabled')).toStrictEqual('false');
voteButtons[1].click();
expect(
voteButtons
.at(1)
.getDOMNode()
.getAttribute('aria-disabled')
).toStrictEqual('false');
voteButtons.at(1).simulate('click');
await delay(100);
expect(voteSpy).toBeCalled();
}, 30000);

it('disabled for already downvoted comment', async () => {
const voteSpy = jest.fn(async () => {});
const element = (
const element = mount(
<Comment
{...(DefaultProps as Props)}
data={{ ...DefaultProps.data, vote: -1 } as Props['data']}
putCommentVote={voteSpy}
/>
);
render(element, container);

const voteButtons = container.querySelectorAll<HTMLSpanElement>('.comment__vote');
const voteButtons = element.find('.comment__vote');
expect(voteButtons.length).toStrictEqual(2);

expect(voteButtons[1].getAttribute('aria-disabled')).toStrictEqual('true');
voteButtons[1].click();
expect(
voteButtons
.at(1)
.getDOMNode()
.getAttribute('aria-disabled')
).toStrictEqual('true');
voteButtons.at(1).simulate('click');
await delay(100);
expect(voteSpy).not.toBeCalled();

expect(voteButtons[0].getAttribute('aria-disabled')).toStrictEqual('false');
voteButtons[0].click();
expect(
voteButtons
.at(0)
.getDOMNode()
.getAttribute('aria-disabled')
).toStrictEqual('false');
voteButtons.at(0).simulate('click');
await delay(100);
expect(voteSpy).toBeCalled();
}, 30000);
});

describe('admin controls', () => {
let container: HTMLElement;

createDomContainer(domContainer => {
container = domContainer;
});

it('for admin if shows admin controls', () => {
const element = <Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as Props)} />;
render(element, container);

const controls = container.querySelectorAll('.comment__controls > span');
expect(controls!.length).toBe(5);
expect(controls![0].textContent).toBe('Copy');
expect(controls![1].textContent).toBe('Pin');
expect(controls![2].textContent).toBe('Hide');
expect(controls![3].childNodes[0].textContent).toBe('Block');
expect(controls![4].textContent).toBe('Delete');
const element = mount(
<Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as Props)} />
);

const controls = element.find('.comment__controls > span');
expect(controls.length).toBe(5);
expect(controls.at(0).text()).toEqual('Copy');
expect(controls.at(1).text()).toEqual('Pin');
expect(controls.at(2).text()).toEqual('Hide');
expect(controls.at(3).getDOMNode().childNodes[0].textContent).toEqual('Block');
expect(controls.at(4).text()).toEqual('Delete');
});

it('for regular user it shows only "hide"', () => {
const element = <Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: false } } as Props)} />;
render(element, container);
const element = mount(
<Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: false } } as Props)} />
);

const controls = container.querySelectorAll('.comment__controls > span');
expect(controls!.length).toBe(1);
expect(controls![0].textContent).toBe('Hide');
const controls = element.find('.comment__controls > span');
expect(controls.length).toBe(1);
expect(controls.at(0).text()).toEqual('Hide');
});

it('verification badge clickable for admin', () => {
const element = <Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as Props)} />;
render(element, container);
const element = mount(
<Comment {...({ ...DefaultProps, user: { ...DefaultProps.user, admin: true } } as Props)} />
);

const controls = container.querySelector('.comment__verification')!;
expect(controls.classList.contains('comment__verification_clickable')).toBe(true);
const controls = element.find('.comment__verification').first();
expect(controls.hasClass('comment__verification_clickable')).toEqual(true);
});

it('verification badge not clickable for regular user', () => {
const element = (
const element = mount(
<Comment
{...({
...DefaultProps,
data: { ...DefaultProps.data, user: { ...DefaultProps.data!.user, verified: true } },
} as Props)}
/>
);
render(element, container);

const controls = container.querySelector('.comment__verification')!;
expect(controls.classList.contains('comment__verification_clickable')).toBe(false);
const controls = element.find('.comment__verification').first();
expect(controls.hasClass('comment__verification_clickable')).toEqual(false);
});
});
});

0 comments on commit e1e1fdf

Please sign in to comment.