Restore list item title attributes (#8858)

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={<h3>{secondary}</h3>}
+      subtitle={<h3 title={secondary}>{secondary}</h3>}
       onClick={onClick}
       icon={(
         <Identicon

ui/app/components/app/transaction-list-item/transaction-list-item.component.js

@@ -132,7 +132,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
               date={date}
               status={status}
             />
-            <span className={subtitleContainsOrigin ? 'transaction-list-item__origin' : 'transaction-list-item__address'}>
+            <span className={subtitleContainsOrigin ? 'transaction-list-item__origin' : 'transaction-list-item__address'} title={subtitle}>
               {subtitle}
             </span>
           </h3>

ui/app/components/ui/list-item/list-item.component.js

@@ -23,7 +23,7 @@ export default function ListItem ({
           {icon}
         </div>
       )}
-      <div className="list-item__heading">
+      <div className="list-item__heading" title={title}>
         <h2>{ title }</h2>
         {titleIcon && (
           <div className="list-item__heading-wrap">

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 = <p>I am a list item</p>
+const CLASSNAME = 'list-item-test'
+const RIGHT_CONTENT = <p>Content rendered to the right</p>
+const CHILDREN = <button>I am a button</button>
+const MID_CONTENT = <p>Content rendered in the middle</p>
+
+describe('ListItem', function () {
+  let wrapper
+  let clickHandler
+  before(function () {
+    clickHandler = Sinon.fake()
+    wrapper = shallow(
+      <ListItem
+        className={CLASSNAME}
+        title={TITLE}
+        data-testid="test-id"
+        subtitle={SUBTITLE}
+        rightContent={RIGHT_CONTENT}
+        midContent={MID_CONTENT}
+        icon={<Send />}
+        titleIcon={<Preloader />}
+        onClick={clickHandler}
+      >
+        {CHILDREN}
+      </ListItem>
+    )
+  })
+  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()
+  })
+})