Migrated some common components and their dependencies to TS

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);