From 8176053d24d87f9bc7cc1628a3292e6ed492798c Mon Sep 17 00:00:00 2001
From: jamaljsr <1356600+jamaljsr@users.noreply.github.com>
Date: Sat, 14 Sep 2019 17:13:20 -0400
Subject: [PATCH] test(designer): add and fix unit tests for NetworkView

---
 src/components/network/NetworkView.spec.tsx | 29 ++++++++++++--------
 src/store/models/network.spec.ts            | 30 +++++++++++++++++++++
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/src/components/network/NetworkView.spec.tsx b/src/components/network/NetworkView.spec.tsx
index f3f8030..2a2aacd 100644
--- a/src/components/network/NetworkView.spec.tsx
+++ b/src/components/network/NetworkView.spec.tsx
@@ -1,30 +1,37 @@
 import React from 'react';
-import { Route } from 'react-router';
 import { fireEvent } from '@testing-library/dom';
+import { createMemoryHistory } from 'history';
 import { Status } from 'types';
 import { getNetwork, injections, renderWithProviders } from 'utils/tests';
 import NetworkView from './NetworkView';
 
 describe('NetworkView Component', () => {
-  const renderComponent = (route = '/network/1', status?: Status) => {
+  const renderComponent = (id: string | undefined, status?: Status) => {
     const initialState = {
       network: {
         networks: [getNetwork(1, 'test network', status)],
       },
     };
-    // NetworkView needs to be rendered by a route due to
-    // RouteComponentProps not being easily mockable
-    const cmp = <Route path="/network/:id" component={NetworkView} />;
+    const route = `/network/${id}`;
+    const history = createMemoryHistory({ initialEntries: [route] });
+    const location = { pathname: route, search: '', hash: '', state: undefined };
+    const match = { params: { id }, isExact: true, path: '', url: route };
+    const cmp = <NetworkView history={history} location={location} match={match} />;
     return renderWithProviders(cmp, { initialState, route });
   };
 
   it('should not render if the network is not found', () => {
-    const { queryByText } = renderComponent('/network/99');
+    const { queryByText } = renderComponent('99');
+    expect(queryByText('test network')).toBeNull();
+  });
+
+  it('should not render if the network id is not provided', () => {
+    const { queryByText } = renderComponent(undefined);
     expect(queryByText('test network')).toBeNull();
   });
 
   it('should render the name', () => {
-    const { getByText } = renderComponent();
+    const { getByText } = renderComponent('1');
     expect(getByText('test network')).toBeInTheDocument();
   });
 
@@ -33,13 +40,13 @@ describe('NetworkView Component', () => {
     // mock dockerService.start to throw an error
     const mockDockerStart = injections.dockerService.start as jest.Mock;
     mockDockerStart.mockRejectedValueOnce(new Error(errorMsg));
-    const { getByText, findByText } = renderComponent('/network/1');
+    const { getByText, findByText } = renderComponent('1');
     fireEvent.click(getByText('cmps.network-actions.primary-btn-start'));
     expect(await findByText(errorMsg)).toBeInTheDocument();
   });
 
   it('should change UI when network is started', async () => {
-    const { getByText, findByText } = renderComponent();
+    const { getByText, findByText } = renderComponent('1');
     expect(getByText('cmps.status-tag.status-stopped')).toBeInTheDocument();
     fireEvent.click(getByText('cmps.network-actions.primary-btn-start'));
     // should switch to starting immediately
@@ -49,7 +56,7 @@ describe('NetworkView Component', () => {
   });
 
   it('should change UI when network is stopped', async () => {
-    const { getByText, findByText } = renderComponent('/network/1', Status.Started);
+    const { getByText, findByText } = renderComponent('1', Status.Started);
     expect(getByText('cmps.status-tag.status-started')).toBeInTheDocument();
     fireEvent.click(getByText('cmps.network-actions.primary-btn-stop'));
     // should switch to stopping immediately
@@ -59,7 +66,7 @@ describe('NetworkView Component', () => {
   });
 
   it('should do nothing when network is starting', async () => {
-    const { getByText } = renderComponent('/network/1', Status.Starting);
+    const { getByText } = renderComponent('1', Status.Starting);
     expect(getByText('cmps.status-tag.status-starting')).toBeInTheDocument();
     fireEvent.click(getByText('cmps.network-actions.primary-btn-starting'));
     // should switch to stopping immediately
diff --git a/src/store/models/network.spec.ts b/src/store/models/network.spec.ts
index c255a56..516d87e 100644
--- a/src/store/models/network.spec.ts
+++ b/src/store/models/network.spec.ts
@@ -1,5 +1,6 @@
 import { createStore } from 'easy-peasy';
 import { Network, Status } from 'types';
+import { initChartFromNetwork } from 'utils/chart';
 import { getNetwork, injections } from 'utils/tests';
 import networkModel from './network';
 
@@ -250,5 +251,34 @@ describe('Network model', () => {
       await toggle(id);
       expect(firstNetwork().status).toBe(Status.Stopping);
     });
+
+    it('should fail to toggle a network with an invalid id', async () => {
+      const { toggle } = store.getActions();
+      await expect(toggle(10)).rejects.toThrow();
+    });
+  });
+
+  describe('Other actions', () => {
+    it('should fail to set the status with an invalid id', () => {
+      const { setNetworkStatus } = store.getActions();
+      expect(() => setNetworkStatus({ id: 10, status: Status.Starting })).toThrow();
+    });
+
+    it('should set the network design correctly', () => {
+      const { add, setNetworkDesign } = store.getActions();
+      add(addNetworkArgs);
+      const network = firstNetwork();
+      const chart = initChartFromNetwork(network);
+      setNetworkDesign({ id: network.id, chart });
+      expect(firstNetwork().design).toEqual(chart);
+    });
+
+    it('should fail to set the network design with an invalid id', () => {
+      const { add, setNetworkDesign } = store.getActions();
+      add(addNetworkArgs);
+      const network = firstNetwork();
+      const chart = initChartFromNetwork(network);
+      expect(() => setNetworkDesign({ id: 10, chart })).toThrow();
+    });
   });
 });