improve test coverage

example/src/App.tsx

@@ -30,6 +30,9 @@ const navItems = [
       { to: '/api/AppNavExpandable', title: 'AppNavExpandable' },
       { to: '/api/AppNavGroup', title: 'AppNavGroup' },
       { to: '/api/AppNavItem', title: 'AppNavItem' },
+      { to: '/api/FormatDate', title: 'FormatDate' },
+      { to: '/api/FormatDistance', title: 'FormatDistance' },
+      { to: '/api/FormatRelative', title: 'FormatRelative' },
       { to: '/api/LazyRoute', title: 'LazyRoute' },
       { to: '/api/Loading', title: 'Loading' },
       { to: '/api/NotFound', title: 'NotFound' },

test/FormatDate.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from '@test/setup';
+import { FormatDate } from '@src';
+import it from 'date-fns/locale/it';
+
+const dateISO = '2019-10-14T11:55:39.058Z';
+
+describe('FormatDate tests', () => {
+  test('should render the date string in an human readable way', async () => {
+    const { getByText } = render(<FormatDate date={dateISO} />);
+    getByText('10/14/2019, 1:55 PM');
+  });
+
+  test('should render the date string accordingly to the passed format', async () => {
+    const { getByText } = render(<FormatDate date={dateISO} format={'dMy'} />);
+    getByText('14102019');
+  });
+
+  test('should render the date string respecting the date-fns config object', async () => {
+    const { getByText } = render(
+      <FormatDate date={dateISO} options={{ locale: it }} />
+    );
+    getByText('14/10/2019 13:55');
+  });
+});

test/FormatDistance.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { render } from '@test/setup';
+import { FormatDistance } from '@src';
+import it from 'date-fns/locale/it';
+import { subDays } from 'date-fns';
+
+const dateISO = '2019-10-14T11:55:39.058Z';
+const todayMinusOneDay = subDays(new Date(dateISO), 1);
+const todayMinusTenDays = subDays(new Date(dateISO), 10);
+
+describe('FormatDistance tests', () => {
+  test('should render the date string in an human readable way', async () => {
+    const { getByText } = render(<FormatDistance date={todayMinusOneDay} />);
+    getByText('1 day');
+  });
+
+  test('should render the date string accordingly to the passed format', async () => {
+    const { getByText } = render(
+      <FormatDistance date={todayMinusTenDays} base={todayMinusOneDay} />
+    );
+    getByText('9 days');
+  });
+
+  test('should render the date string respecting the date-fns config object', async () => {
+    const { getByText } = render(
+      <FormatDistance date={todayMinusOneDay} options={{ locale: it }} />
+    );
+    getByText('un giorno');
+  });
+});

test/FormatRelative.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { render } from '@test/setup';
+import { FormatRelative } from '@src';
+import it from 'date-fns/locale/it';
+import { subDays } from 'date-fns';
+
+const dateISO = '2019-10-14T11:55:39.058Z';
+const todayMinusOneDay = subDays(new Date(dateISO), 1);
+
+describe('FormatRelative tests', () => {
+  test('should render the relative time against today', async () => {
+    const { getByText } = render(<FormatRelative date={todayMinusOneDay} />);
+    getByText('yesterday at 1:55 PM');
+  });
+
+  test('should render the relative time using the passed base date', async () => {
+    const { getByText } = render(
+      <FormatRelative date={todayMinusOneDay} base={todayMinusOneDay} />
+    );
+    getByText('today at 1:55 PM');
+  });
+
+  test('should render the relative time against today respecting the date-fns config object', async () => {
+    const { getByText } = render(
+      <FormatRelative date={todayMinusOneDay} options={{ locale: it }} />
+    );
+    getByText('ieri alle 13:55');
+  });
+});