Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/containers/shared/EmptyMessageTableRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const EmptyMessageTableRow = ({
colSpan,
}: EmptyMessageTableRowProps) => (
<tr>
<td colSpan={colSpan} className="empty-message">
<td colSpan={colSpan} data-testid="empty-message" className="empty-message">
{children}
</td>
</tr>
Expand Down
2 changes: 2 additions & 0 deletions src/containers/shared/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const Dropdown = ({
expanded && 'dropdown-expanded',
className,
)}
data-testid="dropdown"
>
<button
className="btn dropdown-toggle"
Expand All @@ -84,6 +85,7 @@ export const Dropdown = ({
role="menu"
tabIndex={0}
aria-hidden={!expanded}
data-testid="dropdown-menu"
>
{children}
</div>
Expand Down
1 change: 1 addition & 0 deletions src/containers/shared/components/Dropdown/DropdownItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const DropdownItem = ({
return (
<Tag
className={classnames(`dropdown-item`, className)}
data-testid={className ? `dropdown-item-${className}` : 'dropdown-item'}
role="menuitem"
onClick={handler}
onKeyUp={handler}
Expand Down
80 changes: 40 additions & 40 deletions src/containers/shared/components/Dropdown/test/Dropdown.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mount } from 'enzyme'
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { Dropdown } from '../Dropdown'

describe('Dropdown', () => {
Expand All @@ -9,6 +9,8 @@ describe('Dropdown', () => {
document.body.appendChild(sandbox)
})

afterEach(cleanup)

afterAll(() => {
if (sandbox) {
document.body.removeChild(sandbox)
Expand All @@ -18,42 +20,43 @@ describe('Dropdown', () => {
describe('prop: title', () => {
it('renders when it is jsx', () => {
const title = <span className="title-component">Woo</span>
const wrapper = mount(<Dropdown title={title}>Menu Contents</Dropdown>)
expect(wrapper.find('.title-component')).toExist()
expect(wrapper.find('.title-component')).toHaveText('Woo')
wrapper.unmount()
render(<Dropdown title={title}>Menu Contents</Dropdown>)

const button = screen.getByRole('button')
expect(button).toHaveTextContent('Woo')
})
it('renders when it is a string', () => {
const title = 'Woo'
const wrapper = mount(<Dropdown title={title}>Menu Contents</Dropdown>)
expect(wrapper.find('.dropdown-toggle')).toIncludeText(title)
wrapper.unmount()
render(<Dropdown title={title}>Menu Contents</Dropdown>)

const button = screen.getByRole('button')
expect(button).toHaveTextContent('Woo')
})
})

describe(`prop: className`, () => {
it('renders with custom className', () => {
const wrapper = mount(
render(
<Dropdown title="Woo" className="dropdown-custom">
Menu Contents
</Dropdown>,
)
expect(wrapper.find('.dropdown')).toHaveClassName('dropdown-custom')
wrapper.unmount()
expect(screen.getByTestId('dropdown')).toHaveClass('dropdown-custom')
})
})

it('shows menu when clicking toggle', () => {
const wrapper = mount(<Dropdown title="Woo">Menu Contents</Dropdown>)
expect(wrapper.find('.dropdown')).not.toHaveClassName('dropdown-expanded')
wrapper.find('.dropdown-toggle').simulate('click')
expect(wrapper.find('.dropdown')).toHaveClassName('dropdown-expanded')
wrapper.find('.dropdown-toggle').simulate('click')
expect(wrapper.find('.dropdown')).not.toHaveClassName('dropdown-expanded')
wrapper.unmount()
render(<Dropdown title="Woo">Menu Contents</Dropdown>)
expect(screen.getByTestId('dropdown')).not.toHaveClass('dropdown-expanded')
const button = screen.getByRole('button')
fireEvent.click(button)
expect(screen.getByTestId('dropdown')).toHaveClass('dropdown-expanded')
fireEvent.click(button)
expect(screen.getByTestId('dropdown')).not.toHaveClass('dropdown-expanded')
})

it('hides menu when clicking toggle outside the component', () => {
const wrapper = mount(
render(
<div className="container">
<Dropdown title="Woo">
<div className="child">Menu Contents</div>
Expand All @@ -62,30 +65,27 @@ describe('Dropdown', () => {
Outside
</button>
</div>,
{ attachTo: sandbox },
)
expect(wrapper.find('.dropdown')).not.toHaveClassName('dropdown-expanded')
wrapper.find('.dropdown-toggle').simulate('click')
expect(wrapper.find('.dropdown')).toHaveClassName('dropdown-expanded')
wrapper.find('.child').getDOMNode<HTMLElement>().click() // simulate does not bubble
wrapper.update()
expect(wrapper.find('.dropdown')).toHaveClassName('dropdown-expanded')
wrapper.find('.outside').getDOMNode<HTMLElement>().click() // simulate does not bubble
wrapper.update()
expect(wrapper.find('.dropdown')).not.toHaveClassName('dropdown-expanded')
wrapper.unmount()
expect(screen.getByTestId('dropdown')).not.toHaveClass('dropdown-expanded')

const child = screen.getAllByRole('button')[0]
const outside = screen.getAllByRole('button')[1]
fireEvent.click(child)
expect(screen.getByTestId('dropdown')).toHaveClass('dropdown-expanded')
fireEvent.click(outside)
expect(screen.getByTestId('dropdown')).not.toHaveClass('dropdown-expanded')
})

it('adds aria roles', () => {
const wrapper = mount(<Dropdown title="Woo">Menu Contents</Dropdown>)
const toggle = wrapper.find('.dropdown-toggle')
const menu = wrapper.find('.dropdown-menu')
expect(toggle).toHaveProp('aria-haspopup', 'true')
expect(toggle).toHaveProp('tabIndex', 0)
expect(menu).toHaveProp('role', 'menu')
expect(menu).toHaveProp('tabIndex', 0)
toggle.simulate('click')
expect(wrapper.find('.dropdown-toggle')).toHaveProp('aria-expanded', true)
expect(wrapper.find('.dropdown-menu')).toHaveProp('aria-hidden', false)
render(<Dropdown title="Woo">Menu Contents</Dropdown>)
const toggle = screen.getByRole('button')
const menu = screen.getByTestId('dropdown-menu')
expect(toggle).toHaveAttribute('aria-haspopup', 'true')
expect(toggle).toHaveAttribute('tabIndex', '0')
expect(menu).toHaveAttribute('role', 'menu')
expect(menu).toHaveAttribute('tabIndex', '0')
fireEvent.click(toggle)
expect(toggle).toHaveAttribute('aria-expanded', 'true')
expect(menu).toHaveAttribute('aria-hidden', 'false')
})
})
Original file line number Diff line number Diff line change
@@ -1,64 +1,66 @@
import { mount } from 'enzyme'
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { DropdownItem } from '../DropdownItem'

describe('DropdownItem', () => {
afterEach(cleanup)
describe(`prop: className`, () => {
it('renders with custom className', () => {
const wrapper = mount(
<DropdownItem className="custom">Hello</DropdownItem>,
)
expect(wrapper.find('.dropdown-item')).toHaveClassName('custom')
render(<DropdownItem className="custom">Hello</DropdownItem>)
const item = screen.getByText('Hello')
expect(item).toHaveClass('custom')
})
})

describe('prop: handler', () => {
let wrapper
let item
const handler = jest.fn()

beforeEach(() => {
wrapper = mount(<DropdownItem handler={handler}>Hello</DropdownItem>)
render(<DropdownItem handler={handler}>Hello</DropdownItem>)
item = screen.getByText('Hello')
})

it('renders as an anchor tag', () => {
expect(wrapper.find('.dropdown-item')).toHaveDisplayName('a')
expect(item.tagName).toBe('A')
})

it('executes handler on click', () => {
wrapper.find('.dropdown-item').simulate('click')
fireEvent.click(item)
expect(handler).toHaveBeenCalled()
})

it('executes handler on keyup', () => {
wrapper.find('.dropdown-item').simulate('click')
fireEvent.click(item)
expect(handler).toHaveBeenCalled()
})
})

describe('prop: href', () => {
let wrapper
let item

beforeEach(() => {
wrapper = mount(
<DropdownItem href="http://google.com">Hello</DropdownItem>,
)
render(<DropdownItem href="http://google.com">Hello</DropdownItem>)
item = screen.getByText('Hello')
})

it('renders as an anchor tag', () => {
expect(wrapper.find('.dropdown-item')).toHaveDisplayName('a')
expect(item.tagName).toBe('A')
})

it('renders href attribute on anchor', () => {
expect(wrapper.find('.dropdown-item')).toHaveProp('href')
expect(item.tagName).toBe('A')
})
})

it('renders as div without handler or href', () => {
const wrapper = mount(<DropdownItem>Hello</DropdownItem>)
expect(wrapper.find('.dropdown-item')).toHaveDisplayName('div')
render(<DropdownItem>Hello</DropdownItem>)
const item = screen.getByText('Hello')
expect(item.tagName).toBe('DIV')
})

it('adds aria roles', () => {
const wrapper = mount(<DropdownItem>Hello</DropdownItem>)
expect(wrapper.find('.dropdown-item')).toHaveProp('role', 'menuitem')
render(<DropdownItem>Hello</DropdownItem>)
const item = screen.getByText('Hello')
expect(item).toHaveAttribute('role', 'menuitem')
})
})
4 changes: 2 additions & 2 deletions src/containers/shared/components/Loader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import '../css/loader.scss'
export const Loader: FC<{ className?: string }> = ({ className }) => {
const { t } = useTranslation()
return (
<div className={`loader ${className}`}>
<img src={LoaderPath} alt={t('loading')} />
<div className={`loader ${className}`} data-testid="loader">
<img src={LoaderPath} alt={t('loading')} title="loader" />
</div>
)
}
2 changes: 1 addition & 1 deletion src/containers/shared/components/Notification/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const Notification = ({
' ',
)
return !dismissed ? (
<div className={classNames}>
<div className={classNames} data-testid="notification">
<span>{message}</span>
{action}
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import { cleanup, render, screen } from '@testing-library/react'
import { Notification } from '../index'

/* eslint-disable react/jsx-props-no-spreading */
const VALID_USAGES = [
'default',
'success',
'warning',
'danger',
'dark',
'light',
'dark50',
]
const notificationLevels = ['primary', 'secondary', 'ghost']
const message = 'A catchy message'

const renderComponent = (props) => render(<Notification {...props} />)

describe('<Notification />', () => {
afterEach(cleanup)

it('renders without crashing', () => {
render(<Notification key="key" usage="danger" message="boo!" />)
})

it('should render with custom className', () => {
const className = 'test-class'
renderComponent({
message,
className,
})
expect(screen.getByText(message).parentElement).toHaveClass(className)
})

it('should render the action button', () => {
const action = <button type="button" />
renderComponent({
message,
action,
})

expect(screen.getByRole('button')).toBeDefined()
})

it('should render its message', () => {
const { container } = renderComponent({
message,
})

expect(container).toHaveTextContent(message)
})

// test all notification levels
notificationLevels.map((level) => {
it(`should accept level prop of ${level}`, () => {
renderComponent({
level,
message,
})
expect(screen.getByText(message).parentElement).toHaveClass(
`notification default ${level}-theme`,
)
})

return false
})

// test all notification usages
VALID_USAGES.map((usage) => {
it(`should render with usage prop of ${usage}`, () => {
renderComponent({
usage,
message,
})
expect(screen.getByText(message).parentElement).toHaveClass(usage)
})

return false
})

it('disappears', (done) => {
const { container } = render(
<Notification
key="key"
usage="danger"
message="boo!"
autoDismiss
delay={100}
/>,
)
expect(container.innerHTML).toBe(
'<div class="notification danger primary-theme " data-testid="notification"><span>boo!</span></div>',
)

setTimeout(() => {
expect(container.innerHTML).toBe('')
done()
}, 200)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ export const TransactionActionIcon = ({
type,
}: TransactionActionIconProps) => {
const icons: Record<TransactionAction, ReactElement> = {
[TransactionAction.CANCEL]: <TransactionCancelIcon />,
[TransactionAction.CREATE]: <TransactionCreateIcon />,
[TransactionAction.FINISH]: <TransactionFinishIcon />,
[TransactionAction.MODIFY]: <TransactionModifyIcon />,
[TransactionAction.SEND]: <TransactionSendIcon />,
[TransactionAction.UNKNOWN]: <TransactionUnknownIcon />,
[TransactionAction.CANCEL]: <TransactionCancelIcon title="tx-cancel" />,
[TransactionAction.CREATE]: <TransactionCreateIcon title="tx-create" />,
[TransactionAction.FINISH]: <TransactionFinishIcon title="tx-finish" />,
[TransactionAction.MODIFY]: <TransactionModifyIcon title="tx-modify" />,
[TransactionAction.SEND]: <TransactionSendIcon title="tx-send" />,
[TransactionAction.UNKNOWN]: <TransactionUnknownIcon title="tx-unknown" />,
}

let icon = type && icons[getAction(type)]
Expand Down
Loading
Loading