diff --git a/__tests__/components/Tooltip.test.jsx b/__tests__/components/Tooltip.test.jsx new file mode 100644 index 0000000000..0189080bf7 --- /dev/null +++ b/__tests__/components/Tooltip.test.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Tooltip from '../../src/components/Tooltip'; + +describe('', () => { + let wrapper; + + test('initially renders without crashing', () => { + wrapper = mount(); + expect(wrapper.length).toBe(1); + }); +}); diff --git a/__tests__/pages/Organizations/components/OrganizationBreadcrumb.test.jsx b/__tests__/pages/Organizations/components/OrganizationBreadcrumb.test.jsx index 87066ce32f..bbb222555f 100644 --- a/__tests__/pages/Organizations/components/OrganizationBreadcrumb.test.jsx +++ b/__tests__/pages/Organizations/components/OrganizationBreadcrumb.test.jsx @@ -1,11 +1,18 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationBreadcrumb from '../../../../src/pages/Organizations/components/OrganizationBreadcrumb'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/__tests__/pages/Organizations/components/OrganizationDetail.test.jsx b/__tests__/pages/Organizations/components/OrganizationDetail.test.jsx index 2048e5c4d3..a160ad8773 100644 --- a/__tests__/pages/Organizations/components/OrganizationDetail.test.jsx +++ b/__tests__/pages/Organizations/components/OrganizationDetail.test.jsx @@ -1,11 +1,17 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationDetail from '../../../../src/pages/Organizations/components/OrganizationDetail'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/__tests__/pages/Organizations/components/OrganizationEdit.test.jsx b/__tests__/pages/Organizations/components/OrganizationEdit.test.jsx index 7f6a6a0729..6a99eb2d84 100644 --- a/__tests__/pages/Organizations/components/OrganizationEdit.test.jsx +++ b/__tests__/pages/Organizations/components/OrganizationEdit.test.jsx @@ -1,11 +1,16 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationEdit from '../../../../src/pages/Organizations/components/OrganizationEdit'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/__tests__/pages/Organizations/components/OrganizationListItem.test.jsx b/__tests__/pages/Organizations/components/OrganizationListItem.test.jsx index 244604b2dd..aab249b197 100644 --- a/__tests__/pages/Organizations/components/OrganizationListItem.test.jsx +++ b/__tests__/pages/Organizations/components/OrganizationListItem.test.jsx @@ -1,11 +1,14 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationListItem from '../../../../src/pages/Organizations/components/OrganizationListItem'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/__tests__/pages/Organizations/index.test.jsx b/__tests__/pages/Organizations/index.test.jsx index 40a8066d49..c9fc5359ab 100644 --- a/__tests__/pages/Organizations/index.test.jsx +++ b/__tests__/pages/Organizations/index.test.jsx @@ -8,7 +8,7 @@ describe('', () => { mount( diff --git a/__tests__/pages/Organizations/views/Organization.add.test.jsx b/__tests__/pages/Organizations/views/Organization.add.test.jsx index 5c1290e535..c8822cfc38 100644 --- a/__tests__/pages/Organizations/views/Organization.add.test.jsx +++ b/__tests__/pages/Organizations/views/Organization.add.test.jsx @@ -2,10 +2,13 @@ import React from 'react'; import { mount } from 'enzyme'; import OrganizationAdd from '../../../../src/pages/Organizations/views/Organization.add'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + ); }); }); diff --git a/__tests__/pages/Organizations/views/Organization.view.test.jsx b/__tests__/pages/Organizations/views/Organization.view.test.jsx index 2f5c65e975..c5dff0e2ef 100644 --- a/__tests__/pages/Organizations/views/Organization.view.test.jsx +++ b/__tests__/pages/Organizations/views/Organization.view.test.jsx @@ -1,11 +1,17 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationView from '../../../../src/pages/Organizations/views/Organization.view'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/__tests__/pages/Organizations/views/Organizations.list.test.jsx b/__tests__/pages/Organizations/views/Organizations.list.test.jsx index 2fae7285d0..e26717d554 100644 --- a/__tests__/pages/Organizations/views/Organizations.list.test.jsx +++ b/__tests__/pages/Organizations/views/Organizations.list.test.jsx @@ -1,11 +1,17 @@ import React from 'react'; import { mount } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; import OrganizationsList from '../../../../src/pages/Organizations/views/Organizations.list'; -xdescribe('', () => { +describe('', () => { test('initially renders succesfully', () => { mount( - + + + ); }); }); diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx index f4a3617dff..cc3c1c71c9 100644 --- a/src/components/Tooltip/Tooltip.jsx +++ b/src/components/Tooltip/Tooltip.jsx @@ -3,36 +3,36 @@ import React from 'react'; class Tooltip extends React.Component { transforms = { top: { - bottom: "100%", - left: "50%", - transform: "translate(-50%, -25%)" + bottom: '100%', + left: '50%', + transform: 'translate(-50%, -25%)' }, bottom: { - top: "100%", - left: "50%", - transform: "translate(-50%, 25%)" + top: '100%', + left: '50%', + transform: 'translate(-50%, 25%)' }, left: { - top: "50%", - right: "100%", - transform: "translate(-25%, -50%)" + top: '50%', + right: '100%', + transform: 'translate(-25%, -50%)' }, right: { - bottom: "100%", - left: "50%", - transform: "translate(25%, 50%)" + bottom: '100%', + left: '50%', + transform: 'translate(25%, 50%)' }, }; - constructor(props) { - super(props) + constructor (props) { + super(props); this.state = { isDisplayed: false }; } - render() { + render () { const { children, message, @@ -44,24 +44,30 @@ class Tooltip extends React.Component { return ( this.setState({ isDisplayed: false })}> - { isDisplayed && -
-
-
- { message } + style={{ position: 'relative' }} + onMouseLeave={() => this.setState({ isDisplayed: false })} + > + { isDisplayed + && ( +
+
+
+ { message } +
-
+ ) } this.setState({ isDisplayed: true })}> + onMouseOver={() => this.setState({ isDisplayed: true })} + onFocus={() => this.setState({ isDisplayed: true })} + > { children } - ) + ); } }