diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js index 3737698d1..bacae2d3a 100644 --- a/ui/app/components/app/asset-list-item/asset-list-item.js +++ b/ui/app/components/app/asset-list-item/asset-list-item.js @@ -97,7 +97,7 @@ const AssetListItem = ({ data-testid={dataTestId} title={primary} titleIcon={titleIcon} - subtitle={

{secondary}

} + subtitle={

{secondary}

} onClick={onClick} icon={( - + {subtitle} diff --git a/ui/app/components/ui/list-item/list-item.component.js b/ui/app/components/ui/list-item/list-item.component.js index 7481d45db..11a722d7c 100644 --- a/ui/app/components/ui/list-item/list-item.component.js +++ b/ui/app/components/ui/list-item/list-item.component.js @@ -23,7 +23,7 @@ export default function ListItem ({ {icon} )} -
+

{ title }

{titleIcon && (
diff --git a/ui/app/components/ui/list-item/tests/list-item.test.js b/ui/app/components/ui/list-item/tests/list-item.test.js new file mode 100644 index 000000000..fdd0c587c --- /dev/null +++ b/ui/app/components/ui/list-item/tests/list-item.test.js @@ -0,0 +1,75 @@ +import { shallow } from 'enzyme' +import React from 'react' +import ListItem from '../list-item.component' +import assert from 'assert' +import Sinon from 'sinon' +import Preloader from '../../icon/preloader/preloader-icon.component' +import Send from '../../icon/send-icon.component' + +const TITLE = 'Hello World' +const SUBTITLE =

I am a list item

+const CLASSNAME = 'list-item-test' +const RIGHT_CONTENT =

Content rendered to the right

+const CHILDREN = +const MID_CONTENT =

Content rendered in the middle

+ +describe('ListItem', function () { + let wrapper + let clickHandler + before(function () { + clickHandler = Sinon.fake() + wrapper = shallow( + } + titleIcon={} + onClick={clickHandler} + > + {CHILDREN} + + ) + }) + it('includes the data-testid', function () { + assert.equal(wrapper.props()['data-testid'], 'test-id') + }) + it(`renders "${TITLE}" title`, function () { + assert.equal(wrapper.find('.list-item__heading h2').text(), TITLE) + }) + it('adds html title to heading element', function () { + assert.equal(wrapper.find('.list-item__heading').props().title, TITLE) + }) + it(`renders "I am a list item" subtitle`, function () { + assert.equal(wrapper.find('.list-item__subheading').text(), 'I am a list item') + }) + it('attaches external className', function () { + assert(wrapper.props().className.includes(CLASSNAME)) + }) + it('renders content on the right side of the list item', function () { + assert.equal(wrapper.find('.list-item__right-content p').text(), 'Content rendered to the right') + }) + it('renders content in the middle of the list item', function () { + assert.equal(wrapper.find('.list-item__mid-content p').text(), 'Content rendered in the middle') + }) + it('renders list item actions', function () { + assert.equal(wrapper.find('.list-item__actions button').text(), 'I am a button') + }) + it('renders the title icon', function () { + assert(wrapper.find(Preloader)) + }) + it('renders the list item icon', function () { + assert(wrapper.find(Send)) + }) + it('handles click action and fires onClick', function () { + wrapper.simulate('click') + assert.equal(clickHandler.callCount, 1) + }) + + after(function () { + Sinon.restore() + }) +})