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

test/servers/ServersListGroup.test.tsx

@@ -5,31 +5,58 @@ import ServersListGroup from '../../src/servers/ServersListGroup';
 import { ServerWithId } from '../../src/servers/data';
 
 describe('<ServersListGroup />', () => {
+  const servers = [
+    Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
+    Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
+  ];
   let wrapped: ShallowWrapper;
-  const createComponent = (servers: ServerWithId[]) => {
-    wrapped = shallow(<ServersListGroup servers={servers}>The list of servers</ServersListGroup>);
+  const createComponent = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
+    const { servers = [], withChildren = true, embedded } = params;
+
+    wrapped = shallow(
+      <ServersListGroup servers={servers} embedded={embedded}>
+        {withChildren ? 'The list of servers' : undefined}
+      </ServersListGroup>,
+    );
 
     return wrapped;
   };
 
   afterEach(() => wrapped?.unmount());
 
-  it('Renders title', () => {
-    const wrapped = createComponent([]);
+  it('renders title', () => {
+    const wrapped = createComponent({});
     const title = wrapped.find('h5');
 
     expect(title).toHaveLength(1);
     expect(title.text()).toEqual('The list of servers');
   });
 
-  it('shows servers list', () => {
-    const servers = [
-      Mock.of<ServerWithId>({ name: 'foo', id: '123' }),
-      Mock.of<ServerWithId>({ name: 'bar', id: '456' }),
-    ];
-    const wrapped = createComponent(servers);
+  it('does not render title when children is not provided', () => {
+    const wrapped = createComponent({ withChildren: false });
+    const title = wrapped.find('h5');
 
-    expect(wrapped.find(ListGroup)).toHaveLength(1);
+    expect(title).toHaveLength(0);
+  });
+
+  it.each([
+    [ servers ],
+    [[]],
+  ])('shows servers list', (servers) => {
+    const wrapped = createComponent({ servers });
+
+    expect(wrapped.find(ListGroup)).toHaveLength(servers.length ? 1 : 0);
     expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
   });
+
+  it.each([
+    [ true, 'servers-list__list-group servers-list__list-group--embedded' ],
+    [ false, 'servers-list__list-group' ],
+    [ undefined, 'servers-list__list-group' ],
+  ])('renders proper classes for embedded', (embedded, expectedClasses) => {
+    const wrapped = createComponent({ servers, embedded });
+    const listGroup = wrapped.find(ListGroup);
+
+    expect(listGroup.prop('className')).toEqual(expectedClasses);
+  });
 });

test/visits/helpers/DefaultChart.test.tsx

@@ -3,6 +3,7 @@ import { Doughnut, HorizontalBar } from 'react-chartjs-2';
 import { keys, values } from 'ramda';
 import DefaultChart from '../../../src/visits/helpers/DefaultChart';
 import { prettify } from '../../../src/utils/helpers/numbers';
+import { MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../../src/utils/theme';
 
 describe('<DefaultChart />', () => {
   let wrapper: ShallowWrapper;
@@ -62,8 +63,8 @@ describe('<DefaultChart />', () => {
     const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data') as any;
     const { legend, legendCallback, scales } = horizontal.prop('options') ?? {};
 
-    expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
-    expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
+    expect(backgroundColor).toEqual(MAIN_COLOR_ALPHA);
+    expect(borderColor).toEqual(MAIN_COLOR);
     expect(legend).toEqual({ display: false });
     expect(legendCallback).toEqual(false);
     expect(scales).toEqual({