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'));
+});