Improved welcome screen

test/common/Home.test.tsx

@@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import Home, { HomeProps } from '../../src/common/Home';
 import { ServerWithId } from '../../src/servers/data';
+import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
 
 describe('<Home />', () => {
   let wrapped: ShallowWrapper;
@@ -19,21 +20,26 @@ describe('<Home />', () => {
 
   afterEach(() => wrapped?.unmount());
 
-  it('shows link to create server when no servers exist', () => {
+  it('renders logo and title', () => {
     const wrapped = createComponent();
 
-    expect(wrapped.find('Link')).toHaveLength(1);
+    expect(wrapped.find(ShlinkLogo)).toHaveLength(1);
+    expect(wrapped.find('.home__title')).toHaveLength(1);
   });
 
-  it('asks to select a server when servers exist', () => {
-    const servers = {
-      '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
-      '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
-    };
+  it.each([
+    [
+      {
+        '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
+        '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
+      },
+      0,
+    ],
+    [{}, 3 ],
+  ])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
     const wrapped = createComponent({ servers });
-    const span = wrapped.find('span');
+    const p = wrapped.find('p');
 
-    expect(span).toHaveLength(1);
-    expect(span.text()).toContain('Please, select a server.');
+    expect(p).toHaveLength(expectedParagraphs);
   });
 });

test/common/img/ShlinkLogo.test.tsx

@@ -0,0 +1,34 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { ShlinkLogo, ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
+import { MAIN_COLOR } from '../../../src/utils/theme';
+
+describe('<ShlinkLogo />', () => {
+  let wrapper: ShallowWrapper;
+  const createWrapper = (props: ShlinkLogoProps) => {
+    wrapper = shallow(<ShlinkLogo {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ undefined, MAIN_COLOR ],
+    [ 'red', 'red' ],
+    [ 'white', 'white' ],
+  ])('renders expected color', (color, expectedColor) => {
+    const wrapper = createWrapper({ color });
+
+    expect(wrapper.find('g').prop('fill')).toEqual(expectedColor);
+  });
+
+  it.each([
+    [ undefined, undefined ],
+    [ 'foo', 'foo' ],
+    [ 'bar', 'bar' ],
+  ])('renders expected class', (className, expectedClassName) => {
+    const wrapper = createWrapper({ className });
+
+    expect(wrapper.prop('className')).toEqual(expectedClassName);
+  });
+});