diff --git a/src/bounties/BountyModalButtonSet.tsx b/src/bounties/BountyModalButtonSet.tsx index 6a2e578b0..25b6e46ba 100644 --- a/src/bounties/BountyModalButtonSet.tsx +++ b/src/bounties/BountyModalButtonSet.tsx @@ -15,6 +15,9 @@ const ButtonSetContainer = styled.div` const ButtonSet = ({ showGithubBtn, ...props }: any) => { const color = colors['light']; + const tribeName = typeof props.tribe === 'string' ? props.tribe.trim() : ''; + const hasTribe = tribeName.length > 0 && tribeName.toLowerCase() !== 'none'; + return ( { )} - {typeof props.tribe === 'string' && props.tribe !== 'None' ? ( + {hasTribe ? ( { @@ -101,7 +104,7 @@ const ButtonSet = ({ showGithubBtn, ...props }: any) => { /> - {props.tribe.slice(0, 14)} {props.tribe.length > 14 && '...'} + {tribeName.slice(0, 14)} {tribeName.length > 14 && '...'}
{
Share to Twitter
+ {hasTribe && ( + props?.tribeFunction?.()} + onKeyDown={(event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + props?.tribeFunction?.(); + } + }} + role="button" + style={{ + color: color.blue1, + cursor: 'pointer', + fontSize: '13px', + fontWeight: 500, + lineHeight: '18px', + marginTop: '16px', + maxWidth: '220px' + }} + tabIndex={0} + > + Interested in seeing more tickets like this? Join the tribe and get notified about new + tickets + + )} {props.isOwner && props.show === false && ( <>
{ const tribeButton = screen.getByText(/kotlin/i); expect(tribeButton).toBeInTheDocument(); }); + + it('renders the ticket tribe notification link and opens the tribe when clicked', () => { + const tribeFunction = jest.fn(); + + render(); + + const joinLink = screen.getByTestId('join-tribe-ticket-link'); + expect(joinLink).toHaveTextContent( + 'Interested in seeing more tickets like this? Join the tribe and get notified about new tickets' + ); + + fireEvent.click(joinLink); + expect(tribeFunction).toHaveBeenCalledTimes(1); + }); + + it('opens the tribe notification link from the keyboard', () => { + const tribeFunction = jest.fn(); + + render(); + + fireEvent.keyDown(screen.getByTestId('join-tribe-ticket-link'), { key: 'Enter' }); + expect(tribeFunction).toHaveBeenCalledTimes(1); + }); + + it('does not render the ticket tribe notification link for missing tribes', () => { + const { rerender } = render(); + expect(screen.queryByTestId('join-tribe-ticket-link')).not.toBeInTheDocument(); + + rerender(); + expect(screen.queryByTestId('join-tribe-ticket-link')).not.toBeInTheDocument(); + }); });