Updated landing page to be vertically aligned on mobile devices

test/app/App.test.tsx

@@ -1,6 +1,8 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Route } from 'react-router-dom';
 import { Mock } from 'ts-mockery';
+import { match } from 'react-router';
+import { History, Location } from 'history';
 import { Settings } from '../../src/settings/reducers/settings';
 import appFactory from '../../src/app/App';
 import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
@@ -9,19 +11,17 @@ describe('<App />', () => {
   let wrapper: ShallowWrapper;
   const MainHeader = () => null;
   const ShlinkVersions = () => null;
-
-  beforeEach(() => {
-    const App = appFactory(
-      MainHeader,
-      () => null,
-      () => null,
-      () => null,
-      () => null,
-      () => null,
-      () => null,
-      ShlinkVersions,
-    );
-
+  const App = appFactory(
+    MainHeader,
+    () => null,
+    () => null,
+    () => null,
+    () => null,
+    () => null,
+    () => null,
+    ShlinkVersions,
+  );
+  const createWrapper = (pathname = '') => {
     wrapper = shallow(
       <App
         fetchServers={() => {}}
@@ -29,18 +29,27 @@ describe('<App />', () => {
         settings={Mock.all<Settings>()}
         appUpdated={false}
         resetAppUpdate={() => {}}
+        match={Mock.all<match>()}
+        history={Mock.all<History>()}
+        location={Mock.of<Location>({ pathname })}
       />,
     );
-  });
+
+    return wrapper;
+  };
+
   afterEach(() => wrapper.unmount());
 
-  it('renders a header', () => expect(wrapper.find(MainHeader)).toHaveLength(1));
+  it('renders children components', () => {
+    const wrapper = createWrapper();
 
-  it('renders versions', () => expect(wrapper.find(ShlinkVersions)).toHaveLength(1));
-
-  it('renders an update banner', () => expect(wrapper.find(AppUpdateBanner)).toHaveLength(1));
+    expect(wrapper.find(MainHeader)).toHaveLength(1);
+    expect(wrapper.find(ShlinkVersions)).toHaveLength(1);
+    expect(wrapper.find(AppUpdateBanner)).toHaveLength(1);
+  });
 
   it('renders app main routes', () => {
+    const wrapper = createWrapper();
     const routes = wrapper.find(Route);
     const expectedPaths = [
       '/',
@@ -57,4 +66,15 @@ describe('<App />', () => {
       expect(routes.at(index).prop('path')).toEqual(path);
     });
   });
+
+  it.each([
+    [ '/foo', 'shlink-wrapper' ],
+    [ '/bar', 'shlink-wrapper' ],
+    [ '/', 'shlink-wrapper d-flex d-md-block align-items-center' ],
+  ])('renders expected classes on shlink-wrapper based on current pathname', (pathname, expectedClasses) => {
+    const wrapper = createWrapper(pathname);
+    const shlinkWrapper = wrapper.find('.shlink-wrapper');
+
+    expect(shlinkWrapper.prop('className')).toEqual(expectedClasses);
+  });
 });