Add tests for PollFooter
This commit is contained in:
parent
06888b8ebc
commit
a66814d11d
3 changed files with 106 additions and 3 deletions
103
app/soapbox/components/polls/__tests__/poll-footer.test.tsx
Normal file
103
app/soapbox/components/polls/__tests__/poll-footer.test.tsx
Normal file
|
@ -0,0 +1,103 @@
|
|||
import React from 'react';
|
||||
|
||||
import { normalizePoll } from 'soapbox/normalizers/poll';
|
||||
|
||||
import { render, screen } from '../../../jest/test-helpers';
|
||||
import PollFooter from '../poll-footer';
|
||||
|
||||
|
||||
let poll = normalizePoll({
|
||||
options: [{ title: 'Apples', votes_count: 0 }],
|
||||
emojis: [],
|
||||
expired: false,
|
||||
expires_at: '2020-03-24T19:33:06.000Z',
|
||||
multiple: true,
|
||||
voters_count: 0,
|
||||
votes_count: 0,
|
||||
own_votes: null,
|
||||
voted: false,
|
||||
});
|
||||
|
||||
describe('<PollFooter />', () => {
|
||||
describe('with "showResults" enabled', () => {
|
||||
it('renders the Refresh button', () => {
|
||||
render(<PollFooter poll={poll} showResults selected={{}} />);
|
||||
|
||||
expect(screen.getByTestId('poll-footer')).toHaveTextContent('Refresh');
|
||||
});
|
||||
|
||||
it('does not render the Vote button', () => {
|
||||
render(<PollFooter poll={poll} showResults selected={{}} />);
|
||||
|
||||
expect(screen.queryAllByTestId('button')).toHaveLength(0);
|
||||
});
|
||||
|
||||
describe('when the Poll has not expired', () => {
|
||||
beforeEach(() => {
|
||||
poll = normalizePoll({
|
||||
...poll.toJS(),
|
||||
expired: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders time remaining', () => {
|
||||
render(<PollFooter poll={poll} showResults selected={{}} />);
|
||||
|
||||
expect(screen.getByTestId('poll-expiration')).toHaveTextContent('Moments remaining');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the Poll has expired', () => {
|
||||
beforeEach(() => {
|
||||
poll = normalizePoll({
|
||||
...poll.toJS(),
|
||||
expired: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders closed', () => {
|
||||
render(<PollFooter poll={poll} showResults selected={{}} />);
|
||||
|
||||
expect(screen.getByTestId('poll-expiration')).toHaveTextContent('Closed');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with "showResults" disabled', () => {
|
||||
it('does not render the Refresh button', () => {
|
||||
render(<PollFooter poll={poll} showResults={false} selected={{}} />);
|
||||
|
||||
expect(screen.getByTestId('poll-footer')).not.toHaveTextContent('Refresh');
|
||||
});
|
||||
|
||||
describe('when the Poll is multiple', () => {
|
||||
beforeEach(() => {
|
||||
poll = normalizePoll({
|
||||
...poll.toJS(),
|
||||
multiple: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('renders the Vote button', () => {
|
||||
render(<PollFooter poll={poll} showResults={false} selected={{}} />);
|
||||
|
||||
expect(screen.getByTestId('button')).toHaveTextContent('Vote');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the Poll is not multiple', () => {
|
||||
beforeEach(() => {
|
||||
poll = normalizePoll({
|
||||
...poll.toJS(),
|
||||
multiple: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('does not render the Vote button', () => {
|
||||
render(<PollFooter poll={poll} showResults={false} selected={{}} />);
|
||||
|
||||
expect(screen.queryAllByTestId('button')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -37,7 +37,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
|
|||
<RelativeTimestamp weight='medium' timestamp={poll.expires_at} futureDate />;
|
||||
|
||||
return (
|
||||
<Stack space={4}>
|
||||
<Stack space={4} data-testid='poll-footer'>
|
||||
{(!showResults && poll?.multiple) && (
|
||||
<Button onClick={handleVote} theme='primary' block>
|
||||
<FormattedMessage id='poll.vote' defaultMessage='Vote' />
|
||||
|
@ -68,7 +68,7 @@ const PollFooter: React.FC<IPollFooter> = ({ poll, showResults, selected }): JSX
|
|||
{poll.expires_at && (
|
||||
<>
|
||||
<Text theme='muted'>·</Text>
|
||||
<Text weight='medium' theme='muted'>{timeRemaining}</Text>
|
||||
<Text weight='medium' theme='muted' data-testid='poll-expiration'>{timeRemaining}</Text>
|
||||
</>
|
||||
)}
|
||||
</HStack>
|
||||
|
|
|
@ -61,7 +61,7 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
|
|||
return (
|
||||
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<Stack space={4} className={classNames('mt-4', { voted: poll.voted })}>
|
||||
<Stack space={4} className={classNames('mt-4')}>
|
||||
<Stack space={2}>
|
||||
{poll.options.map((option, i) => (
|
||||
<PollOption
|
||||
|
|
Loading…
Reference in a new issue