Extracted servers list group from home component to a reusable component

test/common/Home.test.js

@@ -1,12 +1,11 @@
 import { shallow } from 'enzyme';
-import { values } from 'ramda';
 import React from 'react';
 import Home from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
-    resetSelectedServer: () => '',
+    resetSelectedServer: jest.fn(),
     servers: { loading: false, list: {} },
   };
   const createComponent = (props) => {
@@ -17,12 +16,7 @@ describe('<Home />', () => {
     return wrapped;
   };
 
-  afterEach(() => {
-    if (wrapped !== undefined) {
-      wrapped.unmount();
-      wrapped = undefined;
-    }
-  });
+  afterEach(() => wrapped && wrapped.unmount());
 
   it('resets selected server when mounted', () => {
     const resetSelectedServer = jest.fn();
@@ -36,7 +30,6 @@ describe('<Home />', () => {
     const wrapped = createComponent();
 
     expect(wrapped.find('Link')).toHaveLength(1);
-    expect(wrapped.find('ListGroup')).toHaveLength(0);
   });
 
   it('shows message when loading servers', () => {
@@ -45,21 +38,5 @@ describe('<Home />', () => {
 
     expect(span).toHaveLength(1);
     expect(span.text()).toContain('Trying to load servers...');
-    expect(wrapped.find('ListGroup')).toHaveLength(0);
-  });
-
-  it('shows servers list when list of servers is not empty', () => {
-    const servers = {
-      loading: false,
-      list: {
-        1: { name: 'foo', id: '123' },
-        2: { name: 'bar', id: '456' },
-      },
-    };
-    const wrapped = createComponent({ servers });
-
-    expect(wrapped.find('Link')).toHaveLength(0);
-    expect(wrapped.find('ListGroup')).toHaveLength(1);
-    expect(wrapped.find('ListGroupItem')).toHaveLength(values(servers).length);
   });
 });

test/servers/ServersListGroup.test.js

@@ -0,0 +1,34 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ListGroup } from 'reactstrap';
+import ServersListGroup from '../../src/servers/ServersListGroup';
+
+describe('<ServersListGroup />', () => {
+  let wrapped;
+  const createComponent = (servers) => {
+    wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('Renders title', () => {
+    const wrapped = createComponent([]);
+    const title = wrapped.find('h5');
+
+    expect(title).toHaveLength(1);
+    expect(title.text()).toEqual('The list of servers');
+  });
+
+  it('shows servers list', () => {
+    const servers = [
+      { name: 'foo', id: '123' },
+      { name: 'bar', id: '456' },
+    ];
+    const wrapped = createComponent(servers);
+
+    expect(wrapped.find(ListGroup)).toHaveLength(1);
+    expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
+  });
+});

test/tags/TagsList.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import createTagsList from '../../src/tags/TagsList';
-import MutedMessage from '../../src/utils/MutedMessage';
+import Message from '../../src/utils/Message';
 import SearchField from '../../src/utils/SearchField';
 import { rangeOf } from '../../src/utils/utils';
 
@@ -28,7 +28,7 @@ describe('<TagsList />', () => {
 
   it('shows a loading message when tags are being loaded', () => {
     const wrapper = createWrapper({ loading: true });
-    const loadingMsg = wrapper.find(MutedMessage);
+    const loadingMsg = wrapper.find(Message);
 
     expect(loadingMsg).toHaveLength(1);
     expect(loadingMsg.html()).toContain('Loading...');
@@ -44,7 +44,7 @@ describe('<TagsList />', () => {
 
   it('shows a message when the list of tags is empty', () => {
     const wrapper = createWrapper({ filteredTags: [] });
-    const msg = wrapper.find(MutedMessage);
+    const msg = wrapper.find(Message);
 
     expect(msg).toHaveLength(1);
     expect(msg.html()).toContain('No tags found');

test/visits/ShortUrlVisits.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import { Card } from 'reactstrap';
 import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
-import MutedMessage from '../../src/utils/MutedMessage';
+import Message from '../../src/utils/Message';
 import GraphCard from '../../src/visits/GraphCard';
 import SortableBarGraph from '../../src/visits/SortableBarGraph';
 import DateRangeRow from '../../src/utils/DateRangeRow';
@@ -44,7 +44,7 @@ describe('<ShortUrlVisits />', () => {
 
   it('renders a preloader when visits are loading', () => {
     const wrapper = createComponent({ loading: true });
-    const loadingMessage = wrapper.find(MutedMessage);
+    const loadingMessage = wrapper.find(Message);
 
     expect(loadingMessage).toHaveLength(1);
     expect(loadingMessage.html()).toContain('Loading...');
@@ -52,7 +52,7 @@ describe('<ShortUrlVisits />', () => {
 
   it('renders a warning when loading large amounts of visits', () => {
     const wrapper = createComponent({ loading: true, loadingLarge: true });
-    const loadingMessage = wrapper.find(MutedMessage);
+    const loadingMessage = wrapper.find(Message);
 
     expect(loadingMessage).toHaveLength(1);
     expect(loadingMessage.html()).toContain('This is going to take a while... :S');
@@ -68,7 +68,7 @@ describe('<ShortUrlVisits />', () => {
 
   it('renders a message when visits are loaded but the list is empty', () => {
     const wrapper = createComponent({ loading: false, error: false, visits: [] });
-    const message = wrapper.find(MutedMessage);
+    const message = wrapper.find(Message);
 
     expect(message).toHaveLength(1);
     expect(message.html()).toContain('There are no visits matching current filter  :(');