Added tests for new use cases

src/common/Home.js

@@ -28,7 +28,7 @@ export default class Home extends React.Component {
         <h5 className="home__intro">
           {!loading && hasServers && <span>Please, select a server.</span>}
           {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-          {loading && <span>Trying to load servers....</span>}
+          {loading && <span>Trying to load servers...</span>}
         </h5>
 
         {!loading && hasServers && (

src/servers/reducers/server.js

@@ -13,7 +13,7 @@ const initialState = {
   loading: false,
 };
 
-const assocId = (server) => assoc('id', uuid(), server);
+const assocId = (server) => assoc('id', server.id || uuid(), server);
 
 export default handleActions({
   [FETCH_SERVERS_START]: (state) => ({ ...state, loading: true }),
@@ -22,8 +22,6 @@ export default handleActions({
 
 export const listServers = ({ listServers, createServers }, { get }) => () => async (dispatch) => {
   dispatch({ type: FETCH_SERVERS_START });
-
-  // Fetch list from local storage.
   const localList = listServers();
 
   if (!isEmpty(localList)) {
@@ -32,12 +30,12 @@ export const listServers = ({ listServers, createServers }, { get }) => () => as
     return;
   }
 
-  // If local list is empty, try to fetch it remotely, calculate IDs for every server, and use it
+  // If local list is empty, try to fetch it remotely and calculate IDs for every server
   const { data: remoteList } = await get(`${homepage}/servers.json`);
   const listWithIds = map(assocId, remoteList);
 
   createServers(listWithIds);
-  dispatch({ type: FETCH_SERVERS, list: listWithIds });
+  dispatch({ type: FETCH_SERVERS, list: listWithIds.reduce((map, server) => ({ ...map, [server.id]: server }), {}) });
 };
 
 export const createServer = ({ createServer }, listServersAction) => pipe(createServer, listServersAction);

src/servers/services/ServersService.js

@@ -1,11 +1,10 @@
-import { assoc, curry, dissoc, reduce } from 'ramda';
+import { assoc, dissoc, reduce } from 'ramda';
 
 const SERVERS_STORAGE_KEY = 'servers';
 
 export default class ServersService {
   constructor(storage) {
     this.storage = storage;
-    this.setServers = curry(this.storage.set)(SERVERS_STORAGE_KEY);
   }
 
   listServers = () => this.storage.get(SERVERS_STORAGE_KEY) || {};
@@ -21,9 +20,9 @@ export default class ServersService {
       servers
     );
 
-    this.setServers(allServers);
+    this.storage.set(SERVERS_STORAGE_KEY, allServers);
   };
 
   deleteServer = ({ id }) =>
-    this.setServers(dissoc(id, this.listServers()));
+    this.storage.set(SERVERS_STORAGE_KEY, dissoc(id, this.listServers()));
 }

test/common/Home.test.js

@@ -6,10 +6,8 @@ import Home from '../../src/common/Home';
 describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
-    resetSelectedServer() {
-      return '';
-    },
-    servers: {},
+    resetSelectedServer: () => '',
+    servers: { loading: false, list: {} },
   };
   const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
@@ -41,10 +39,22 @@ describe('<Home />', () => {
     expect(wrapped.find('ListGroup')).toHaveLength(0);
   });
 
+  it('shows message when loading servers', () => {
+    const wrapped = createComponent({ servers: { loading: true } });
+    const span = wrapped.find('span');
+
+    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 = {
-      1: { name: 'foo', id: '123' },
-      2: { name: 'bar', id: '456' },
+      loading: false,
+      list: {
+        1: { name: 'foo', id: '123' },
+        2: { name: 'bar', id: '456' },
+      },
     };
     const wrapped = createComponent({ servers });
 

test/servers/ServersDropdown.test.js

@@ -8,9 +8,12 @@ describe('<ServersDropdown />', () => {
   let wrapped;
   let ServersDropdown;
   const servers = {
-    '1a': { name: 'foo', id: 1 },
-    '2b': { name: 'bar', id: 2 },
-    '3c': { name: 'baz', id: 3 },
+    list: {
+      '1a': { name: 'foo', id: 1 },
+      '2b': { name: 'bar', id: 2 },
+      '3c': { name: 'baz', id: 3 },
+    },
+    loading: false,
   };
 
   beforeEach(() => {
@@ -20,7 +23,7 @@ describe('<ServersDropdown />', () => {
   afterEach(() => wrapped.unmount());
 
   it('contains the list of servers', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers).length));
+    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers.list).length));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -32,12 +35,21 @@ describe('<ServersDropdown />', () => {
     expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
-  it('contains a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={{}} listServers={identity} />);
+  it('shows a message when no servers exist yet', () => {
+    wrapped = shallow(<ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} />);
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
     expect(item.prop('disabled')).toEqual(true);
     expect(item.find('i').text()).toEqual('Add a server first...');
   });
+
+  it('shows a message when loading', () => {
+    wrapped = shallow(<ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} />);
+    const item = wrapped.find(DropdownItem);
+
+    expect(item).toHaveLength(1);
+    expect(item.prop('disabled')).toEqual(true);
+    expect(item.find('i').text()).toEqual('Trying to load servers...');
+  });
 });

test/servers/reducers/server.test.js

@@ -4,17 +4,17 @@ import reducer, {
   deleteServer,
   listServers,
   createServers,
-  FETCH_SERVERS,
+  FETCH_SERVERS, FETCH_SERVERS_START,
 } from '../../../src/servers/reducers/server';
 
 describe('serverReducer', () => {
-  const payload = {
+  const list = {
     abc123: { id: 'abc123' },
     def456: { id: 'def456' },
   };
-  const expectedFetchServersResult = { type: FETCH_SERVERS, payload };
+  const expectedFetchServersResult = { type: FETCH_SERVERS, list };
   const ServersServiceMock = {
-    listServers: jest.fn(() => payload),
+    listServers: jest.fn(() => list),
     createServer: jest.fn(),
     deleteServer: jest.fn(),
     createServers: jest.fn(),
@@ -22,7 +22,7 @@ describe('serverReducer', () => {
 
   describe('reducer', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reducer({}, { type: FETCH_SERVERS, payload })).toEqual(payload));
+      expect(reducer({}, { type: FETCH_SERVERS, list })).toEqual({ loading: false, list }));
   });
 
   describe('action creators', () => {
@@ -34,14 +34,40 @@ describe('serverReducer', () => {
     });
 
     describe('listServers', () => {
-      it('fetches servers and returns them as part of the action', () => {
-        const result = listServers(ServersServiceMock)();
+      const axios = { get: jest.fn().mockResolvedValue({ data: [] }) };
+      const dispatch = jest.fn();
 
-        expect(result).toEqual(expectedFetchServersResult);
+      beforeEach(() => {
+        axios.get.mockClear();
+        dispatch.mockReset();
+      });
+
+      it('fetches servers from local storage when found', async () => {
+        await listServers(ServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, expectedFetchServersResult);
         expect(ServersServiceMock.listServers).toHaveBeenCalledTimes(1);
         expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
         expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
         expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
+        expect(axios.get).not.toHaveBeenCalled();
+      });
+
+      it('tries to fetch servers from remote when not found locally', async () => {
+        const NoListServersServiceMock = { ...ServersServiceMock, listServers: jest.fn(() => ({})) };
+
+        await listServers(NoListServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, { type: FETCH_SERVERS, list: {} });
+        expect(NoListServersServiceMock.listServers).toHaveBeenCalledTimes(1);
+        expect(NoListServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.createServers).toHaveBeenCalledTimes(1);
+        expect(axios.get).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -75,7 +101,7 @@ describe('serverReducer', () => {
 
     describe('createServer', () => {
       it('creates multiple servers and then fetches servers again', () => {
-        const serversToCreate = values(payload);
+        const serversToCreate = values(list);
         const result = createServers(ServersServiceMock, () => expectedFetchServersResult)(serversToCreate);
 
         expect(result).toEqual(expectedFetchServersResult);