Migrated some common components and their dependencies to TS

test/common/AsideMenu.test.tsx

@@ -1,15 +1,17 @@
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
+import { Mock } from 'ts-mockery';
 import asideMenuCreator from '../../src/common/AsideMenu';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<AsideMenu />', () => {
-  let wrapped;
-  const DeleteServerButton = () => '';
+  let wrapped: ShallowWrapper;
+  const DeleteServerButton = () => null;
 
   beforeEach(() => {
     const AsideMenu = asideMenuCreator(DeleteServerButton);
 
-    wrapped = shallow(<AsideMenu selectedServer={{ id: 'abc123' }} />);
+    wrapped = shallow(<AsideMenu selectedServer={Mock.of<ServerWithId>({ id: 'abc123' })} />);
   });
   afterEach(() => wrapped.unmount());
 

test/common/Home.test.tsx

@@ -1,14 +1,16 @@
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
-import Home from '../../src/common/Home';
+import { Mock } from 'ts-mockery';
+import Home, { HomeProps } from '../../src/common/Home';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<Home />', () => {
-  let wrapped;
+  let wrapped: ShallowWrapper;
   const defaultProps = {
     resetSelectedServer: jest.fn(),
     servers: {},
   };
-  const createComponent = (props) => {
+  const createComponent = (props: Partial<HomeProps> = {}) => {
     const actualProps = { ...defaultProps, ...props };
 
     wrapped = shallow(<Home {...actualProps} />);
@@ -16,7 +18,7 @@ describe('<Home />', () => {
     return wrapped;
   };
 
-  afterEach(() => wrapped && wrapped.unmount());
+  afterEach(() => wrapped?.unmount());
 
   it('shows link to create server when no servers exist', () => {
     const wrapped = createComponent();
@@ -26,8 +28,8 @@ describe('<Home />', () => {
 
   it('asks to select a server when servers exist', () => {
     const servers = {
-      1: { name: 'foo', id: '1' },
-      2: { name: 'bar', id: '2' },
+      '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
+      '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
     };
     const wrapped = createComponent({ servers });
     const span = wrapped.find('span');

test/common/NotFound.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { Link } from 'react-router-dom';
 import NotFound from '../../src/common/NotFound';
 
 describe('<NotFound />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
   const createWrapper = (props = {}) => {
     wrapper = shallow(<NotFound {...props} />);
     const content = wrapper.text();
@@ -12,7 +12,7 @@ describe('<NotFound />', () => {
     return { wrapper, content };
   };
 
-  afterEach(() => wrapper && wrapper.unmount());
+  afterEach(() => wrapper?.unmount());
 
   it('shows expected error title', () => {
     const { content } = createWrapper();

test/common/ScrollToTop.test.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import createScrollToTop from '../../src/common/ScrollToTop';
-
-describe('<ScrollToTop />', () => {
-  let wrapper;
-  const window = {
-    scrollTo: jest.fn(),
-  };
-
-  beforeEach(() => {
-    const ScrollToTop = createScrollToTop(window);
-
-    wrapper = shallow(<ScrollToTop locaction={{ href: 'foo' }}>Foobar</ScrollToTop>);
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-    window.scrollTo.mockReset();
-  });
-
-  it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
-});

test/common/ScrollToTop.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { RouteChildrenProps } from 'react-router';
+import createScrollToTop from '../../src/common/ScrollToTop';
+
+describe('<ScrollToTop />', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    const ScrollToTop = createScrollToTop();
+
+    wrapper = shallow(<ScrollToTop {...Mock.all<RouteChildrenProps>()}>Foobar</ScrollToTop>);
+  });
+
+  afterEach(() => wrapper.unmount());
+
+  it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
+});

test/servers/DeleteServerButton.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
 import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
-import DeleteServerModal from '../../src/servers/DeleteServerModal';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<DeleteServerButton />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
+  const DeleteServerModal = () => null;
 
   beforeEach(() => {
     const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
 
-    wrapper = shallow(<DeleteServerButton server={{}} className="button" />);
+    wrapper = shallow(<DeleteServerButton server={Mock.all<ServerWithId>()} className="button" />);
   });
   afterEach(() => wrapper.unmount());
 

test/servers/DeleteServerModal.test.tsx

@@ -1,31 +1,31 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { History } from 'history';
+import { Mock } from 'ts-mockery';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<DeleteServerModal />', () => {
-  let wrapper;
+  let wrapper: ShallowWrapper;
   const deleteServerMock = jest.fn();
-  const historyMock = { push: jest.fn() };
+  const push = jest.fn();
   const toggleMock = jest.fn();
   const serverName = 'the_server_name';
 
   beforeEach(() => {
-    deleteServerMock.mockReset();
-    toggleMock.mockReset();
-    historyMock.push.mockReset();
-
     wrapper = shallow(
       <DeleteServerModal
-        server={{ name: serverName }}
+        server={Mock.of<ServerWithId>({ name: serverName })}
         toggle={toggleMock}
         isOpen={true}
         deleteServer={deleteServerMock}
-        history={historyMock}
+        history={Mock.of<History>({ push })}
       />,
     );
   });
   afterEach(() => wrapper.unmount());
+  afterEach(jest.clearAllMocks);
 
   it('renders a modal window', () => {
     expect(wrapper.find(Modal)).toHaveLength(1);
@@ -49,7 +49,7 @@ describe('<DeleteServerModal />', () => {
 
     expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).not.toHaveBeenCalled();
-    expect(historyMock.push).not.toHaveBeenCalled();
+    expect(push).not.toHaveBeenCalled();
   });
 
   it('deletes server when clicking accept button', () => {
@@ -59,6 +59,6 @@ describe('<DeleteServerModal />', () => {
 
     expect(toggleMock).toHaveBeenCalledTimes(1);
     expect(deleteServerMock).toHaveBeenCalledTimes(1);
-    expect(historyMock.push).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledTimes(1);
   });
 });

test/servers/ServersListGroup.test.tsx

@@ -1,17 +1,19 @@
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 import { ListGroup } from 'reactstrap';
+import { Mock } from 'ts-mockery';
 import ServersListGroup from '../../src/servers/ServersListGroup';
+import { ServerWithId } from '../../src/servers/data';
 
 describe('<ServersListGroup />', () => {
-  let wrapped;
-  const createComponent = (servers) => {
+  let wrapped: ShallowWrapper;
+  const createComponent = (servers: ServerWithId[]) => {
     wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
 
     return wrapped;
   };
 
-  afterEach(() => wrapped && wrapped.unmount());
+  afterEach(() => wrapped?.unmount());
 
   it('Renders title', () => {
     const wrapped = createComponent([]);
@@ -23,8 +25,8 @@ describe('<ServersListGroup />', () => {
 
   it('shows servers list', () => {
     const servers = [
-      { name: 'foo', id: '123' },
-      { name: 'bar', id: '456' },
+      Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
+      Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
     ];
     const wrapped = createComponent(servers);