Merge pull request #102 from smiclea/tests-fix

Fix stories and failing unit tests

src/components/atoms/ReloadButton/ReloadButton.jsx

@@ -46,6 +46,10 @@ class ReloadButton extends React.Component {
       this.props.onClick()
     }
 
+    if (!this.wrapper) {
+      return
+    }
+
     this.wrapper.className += ' reload-animation'
     this.timeout = setTimeout(() => {
       this.wrapper.className = this.wrapper.className.substr(0, this.wrapper.className.indexOf(' reload-animation'))

src/components/molecules/NotificationDropdown/NotificationDropdown.jsx

@@ -211,7 +211,7 @@ class NotificationDropdown extends React.Component {
 
           return (
             <ListItem
-              key={item.title}
+              key={item.id}
               onMouseDown={() => { this.itemMouseDown = true }}
               onMouseUp={() => { this.itemMouseDown = false }}
               onClick={() => { this.handleItemClick(item) }}

src/components/molecules/NotificationDropdown/story.jsx

@@ -28,20 +28,22 @@ storiesOf('NotificationDropdown', module)
       <NotificationDropdown
         items={[
           {
-            title: 'Migration',
-            time: '12:53 PM',
-            description: 'A full VM migration between two clouds',
-            icon: { info: true },
-          }, {
-            title: 'Replica',
-            time: '12:53 PM',
-            description: 'Incrementally replicate virtual machines',
-            icon: { error: true },
-          }, {
-            title: 'Endpoint',
-            time: '12:53 PM',
-            description: 'A conection to a public or private cloud',
-            icon: { success: true },
+            id: new Date().getTime(),
+            message: 'A full VM migration between two clouds',
+            level: 'success',
+            options: { persistInfo: { title: 'Migration' } },
+          },
+          {
+            id: new Date().getTime(),
+            message: 'Incrementally replicate virtual machines',
+            level: 'error',
+            options: { persistInfo: { title: 'Replica' } },
+          },
+          {
+            id: new Date().getTime(),
+            message: 'A conection to a public or private cloud',
+            level: 'info',
+            options: { persistInfo: { title: 'Endpoint' } },
           },
         ]}
       />

src/components/molecules/NotificationDropdown/test.jsx

@@ -21,47 +21,49 @@ const wrap = props => shallow(<NotificationDropdown {...props} />)
 
 let items = [
   {
-    title: 'Migration',
-    time: '12:53 PM',
-    description: 'A full VM migration between two clouds',
-    icon: { info: true },
-  }, {
-    title: 'Replica',
-    time: '12:53 PM',
-    description: 'Incrementally replicate virtual machines',
-    icon: { error: true },
-  }, {
-    title: 'Endpoint',
-    time: '12:53 PM',
-    description: 'A conection to a public or private cloud',
-    icon: { success: true },
+    id: new Date().getTime() + 1,
+    message: 'A full VM migration between two clouds',
+    level: 'success',
+    options: { persistInfo: { title: 'Migration' } },
+  },
+  {
+    id: new Date().getTime() + 2,
+    message: 'Incrementally replicate virtual machines',
+    level: 'error',
+    options: { persistInfo: { title: 'Replica' } },
+  },
+  {
+    id: new Date().getTime() + 3,
+    message: 'A conection to a public or private cloud',
+    level: 'info',
+    options: { persistInfo: { title: 'Endpoint' } },
   },
 ]
 
 it('renders no items message on click', () => {
-  let wrapper = wrap()
+  let wrapper = wrap({ onClose: () => { } })
   expect(wrapper.children().length).toBe(1)
   wrapper.childAt(0).simulate('click')
   expect(wrapper.childAt(1).html().indexOf('There are no notifications')).toBeGreaterThan(-1)
 })
 
 it('renders items correctly', () => {
-  let wrapper = wrap({ items })
+  let wrapper = wrap({ items, onClose: () => { } })
   expect(wrapper.children().length).toBe(1)
   wrapper.childAt(0).simulate('click')
   let itemsWrapper = wrapper.childAt(1)
-  expect(itemsWrapper.findWhere(w => w.prop('success')).length).toBe(1)
-  expect(itemsWrapper.findWhere(w => w.prop('info')).length).toBe(1)
-  expect(itemsWrapper.findWhere(w => w.prop('error')).length).toBe(1)
+  expect(itemsWrapper.findWhere(w => w.prop('level') === 'success').length).toBe(1)
+  expect(itemsWrapper.findWhere(w => w.prop('level') === 'info').length).toBe(1)
+  expect(itemsWrapper.findWhere(w => w.prop('level') === 'error').length).toBe(1)
   expect(itemsWrapper.childAt(1).html().indexOf('Incrementally replicate virtual machines')).toBeGreaterThan(-1)
 })
 
-it('dispatches item click', () => {
-  let onItemClick = sinon.spy()
-  let wrapper = wrap({ items, onItemClick })
+it('dispatches onClose', () => {
+  let onClose = sinon.spy()
+  let wrapper = wrap({ items, onClose })
   expect(wrapper.children().length).toBe(1)
   wrapper.childAt(0).simulate('click')
   let itemsWrapper = wrapper.childAt(1)
   itemsWrapper.childAt(2).simulate('click')
-  expect(onItemClick.args[0][0].title).toBe('Endpoint')
+  expect(onClose.calledOnce).toBe(true)
 })

src/components/organisms/DetailsPageHeader/DetailsPageHeader.jsx

@@ -51,7 +51,7 @@ const User = styled.div`
   align-items: center;
 `
 
-class DetailsPageHeader extends React.Component {
+export class DetailsPageHeader extends React.Component {
   static propTypes = {
     user: PropTypes.object,
     onUserItemClick: PropTypes.func,

src/components/organisms/DetailsPageHeader/story.jsx

@@ -14,11 +14,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import DetailsPageHeader from './DetailsPageHeader'
+import { DetailsPageHeader } from './DetailsPageHeader'
 
 storiesOf('DetailsPageHeader', module)
   .add('default', () => (
     <div style={{ width: '800px' }}>
-      <DetailsPageHeader user={{ name: 'Name', email: 'email@email.com' }} />
+      <DetailsPageHeader notificationStore={{}} user={{ name: 'Name', email: 'email@email.com' }} />
     </div>
   ))

src/components/organisms/DetailsPageHeader/test.jsx

@@ -15,9 +15,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import DetailsPageHeader from './DetailsPageHeader'
+import { DetailsPageHeader } from './DetailsPageHeader'
 
-const wrap = props => shallow(<DetailsPageHeader {...props} />)
+const wrap = props => shallow(<DetailsPageHeader notificationStore={{}} {...props} />)
 
 let user = {
   name: 'User name',