diff --git a/frontend/app/components/comment/comment.test.tsx b/frontend/app/components/comment/comment.test.tsx index b15e0fb6..50560a4a 100644 --- a/frontend/app/components/comment/comment.test.tsx +++ b/frontend/app/components/comment/comment.test.tsx @@ -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'; @@ -30,58 +30,49 @@ const DefaultProps: Partial = { describe('', () => { describe('voting', () => { - let container: HTMLElement; - - createDomContainer(domContainer => { - container = domContainer; - }); - it('disabled on user info widget', () => { - const element = ; - render(element, container); + const element = mount(); - 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( ); - 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 ); - 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( ', () => { } 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 = ; - render(element, container); + const element = mount(); - 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( ); - render(element, container); - const voteButtons = container.querySelectorAll('.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( ); - render(element, container); - const voteButtons = container.querySelectorAll('.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 = ; - render(element, container); + const element = mount( + + ); - 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 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 = ; - render(element, container); + const element = mount( + + ); - 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 = ; - render(element, container); + const element = mount( + + ); - 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( ', () => { } 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); }); }); });