diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 94fb0b10..94d63894 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -112,9 +112,9 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
return shortUrlsList.map((shortUrl) => (
diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js
index 9cee6953..914a1ba8 100644
--- a/src/tags/TagsList.js
+++ b/src/tags/TagsList.js
@@ -1,7 +1,7 @@
import React from 'react';
import { splitEvery } from 'ramda';
import PropTypes from 'prop-types';
-import MutedMessage from '../utils/MutedMessage';
+import Message from '../utils/Message';
import SearchField from '../utils/SearchField';
const { ceil } = Math;
@@ -29,7 +29,7 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
const { tagsList, match } = this.props;
if (tagsList.loading) {
- return ;
+ return ;
}
if (tagsList.error) {
@@ -43,7 +43,7 @@ const TagsList = (TagCard) => class TagsList extends React.Component {
const tagsCount = tagsList.filteredTags.length;
if (tagsCount < 1) {
- return No tags found;
+ return No tags found;
}
const tagsGroups = splitEvery(ceil(tagsCount / TAGS_GROUPS_AMOUNT), tagsList.filteredTags);
diff --git a/src/utils/MutedMessage.js b/src/utils/Message.js
similarity index 53%
rename from src/utils/MutedMessage.js
rename to src/utils/Message.js
index 61e5c90c..67b8c087 100644
--- a/src/utils/MutedMessage.js
+++ b/src/utils/Message.js
@@ -5,21 +5,35 @@ import PropTypes from 'prop-types';
import { faCircleNotch as preloader } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const getClassForType = (type) => {
+ const map = {
+ error: 'border-danger',
+ };
+
+ return map[type] || '';
+};
+const getTextClassForType = (type) => {
+ const map = {
+ error: 'text-danger',
+ };
+
+ return map[type] || 'text-muted';
+};
+
const propTypes = {
noMargin: PropTypes.bool,
loading: PropTypes.bool,
children: PropTypes.node,
+ type: PropTypes.oneOf([ 'default', 'error' ]),
};
-const MutedMessage = ({ children, loading = false, noMargin = false }) => {
- const cardClasses = classNames('bg-light', {
- 'mt-4': !noMargin,
- });
+const Message = ({ children, loading = false, noMargin = false, type = 'default' }) => {
+ const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
return (
-
+
{loading && }
{loading && !children && Loading...}
{children}
@@ -29,6 +43,6 @@ const MutedMessage = ({ children, loading = false, noMargin = false }) => {
);
};
-MutedMessage.propTypes = propTypes;
+Message.propTypes = propTypes;
-export default MutedMessage;
+export default Message;
diff --git a/src/utils/mixins/vertical-align.scss b/src/utils/mixins/vertical-align.scss
index 5af5038c..95b5985c 100644
--- a/src/utils/mixins/vertical-align.scss
+++ b/src/utils/mixins/vertical-align.scss
@@ -1,4 +1,4 @@
-@mixin vertical-align($extraTransforms: '') {
+@mixin vertical-align($extraTransforms: null) {
position: absolute;
top: 50%;
transform: translateY(-50%) $extraTransforms;
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index a0875b0b..7330cc12 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -4,7 +4,7 @@ import { Card } from 'reactstrap';
import PropTypes from 'prop-types';
import qs from 'qs';
import DateRangeRow from '../utils/DateRangeRow';
-import MutedMessage from '../utils/MutedMessage';
+import Message from '../utils/Message';
import { formatDate } from '../utils/utils';
import SortableBarGraph from './SortableBarGraph';
import { shortUrlVisitsType } from './reducers/shortUrlVisits';
@@ -64,7 +64,7 @@ const ShortUrlVisits = (
if (loading) {
const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
- return {message};
+ return {message};
}
if (error) {
@@ -76,7 +76,7 @@ const ShortUrlVisits = (
}
if (isEmpty(visits)) {
- return There are no visits matching current filter :(;
+ return There are no visits matching current filter :(;
}
const { os, browsers, referrers, countries, cities, citiesForMap } = processStatsFromVisits(
diff --git a/test/common/Home.test.js b/test/common/Home.test.js
index 249b3e5d..fa6e7993 100644
--- a/test/common/Home.test.js
+++ b/test/common/Home.test.js
@@ -1,12 +1,11 @@
import { shallow } from 'enzyme';
-import { values } from 'ramda';
import React from 'react';
import Home from '../../src/common/Home';
describe('', () => {
let wrapped;
const defaultProps = {
- resetSelectedServer: () => '',
+ resetSelectedServer: jest.fn(),
servers: { loading: false, list: {} },
};
const createComponent = (props) => {
@@ -17,26 +16,12 @@ describe('', () => {
return wrapped;
};
- afterEach(() => {
- if (wrapped !== undefined) {
- wrapped.unmount();
- wrapped = undefined;
- }
- });
-
- it('resets selected server when mounted', () => {
- const resetSelectedServer = jest.fn();
-
- expect(resetSelectedServer).not.toHaveBeenCalled();
- createComponent({ resetSelectedServer });
- expect(resetSelectedServer).toHaveBeenCalled();
- });
+ afterEach(() => wrapped && wrapped.unmount());
it('shows link to create server when no servers exist', () => {
const wrapped = createComponent();
expect(wrapped.find('Link')).toHaveLength(1);
- expect(wrapped.find('ListGroup')).toHaveLength(0);
});
it('shows message when loading servers', () => {
@@ -45,21 +30,17 @@ describe('', () => {
expect(span).toHaveLength(1);
expect(span.text()).toContain('Trying to load servers...');
- expect(wrapped.find('ListGroup')).toHaveLength(0);
});
- it('shows servers list when list of servers is not empty', () => {
- const servers = {
- loading: false,
- list: {
- 1: { name: 'foo', id: '123' },
- 2: { name: 'bar', id: '456' },
- },
- };
- const wrapped = createComponent({ servers });
+ it('Asks to select a server when not loadign and servers exist', () => {
+ const list = [
+ { name: 'foo', id: '1' },
+ { name: 'bar', id: '2' },
+ ];
+ const wrapped = createComponent({ servers: { list } });
+ const span = wrapped.find('span');
- expect(wrapped.find('Link')).toHaveLength(0);
- expect(wrapped.find('ListGroup')).toHaveLength(1);
- expect(wrapped.find('ListGroupItem')).toHaveLength(values(servers).length);
+ expect(span).toHaveLength(1);
+ expect(span.text()).toContain('Please, select a server.');
});
});
diff --git a/test/common/NotFound.test.js b/test/common/NotFound.test.js
index a230cc56..00d3739b 100644
--- a/test/common/NotFound.test.js
+++ b/test/common/NotFound.test.js
@@ -38,7 +38,7 @@ describe('', () => {
});
it('shows a link with provided props', () => {
- const { wrapper } = createWrapper({ to: '/foo/bar', btnText: 'Hello' });
+ const { wrapper } = createWrapper({ to: '/foo/bar', children: 'Hello' });
const link = wrapper.find(Link);
expect(link.prop('to')).toEqual('/foo/bar');
diff --git a/test/servers/ServersListGroup.test.js b/test/servers/ServersListGroup.test.js
new file mode 100644
index 00000000..b2871bbe
--- /dev/null
+++ b/test/servers/ServersListGroup.test.js
@@ -0,0 +1,34 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ListGroup } from 'reactstrap';
+import ServersListGroup from '../../src/servers/ServersListGroup';
+
+describe('', () => {
+ let wrapped;
+ const createComponent = (servers) => {
+ wrapped = shallow(The list of servers);
+
+ return wrapped;
+ };
+
+ afterEach(() => wrapped && wrapped.unmount());
+
+ 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 = [
+ { name: 'foo', id: '123' },
+ { name: 'bar', id: '456' },
+ ];
+ const wrapped = createComponent(servers);
+
+ expect(wrapped.find(ListGroup)).toHaveLength(1);
+ expect(wrapped.find('ServerListItem')).toHaveLength(servers.length);
+ });
+});
diff --git a/test/servers/helpers/ServerError.test.js b/test/servers/helpers/ServerError.test.js
new file mode 100644
index 00000000..1e9d7417
--- /dev/null
+++ b/test/servers/helpers/ServerError.test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { BrowserRouter } from 'react-router-dom';
+import { ServerError } from '../../../src/servers/helpers/ServerError';
+
+describe('', () => {
+ let wrapper;
+
+ afterEach(() => wrapper && wrapper.unmount());
+
+ it.each([
+ [
+ 'not-found',
+ [ 'Could not find this Shlink server.' ],
+ 'These are the Shlink servers',
+ ],
+ [
+ 'not-reachable',
+ [
+ 'Oops! Could not connect to this Shlink server.',
+ 'Make sure you have internet connection, and the server is properly configured and on-line.',
+ ],
+ 'These are the other Shlink servers',
+ ],
+ ])('renders expected information based on type', (type, expectedTitleParts, expectedBody) => {
+ wrapper = shallow();
+ const wrapperText = wrapper.html();
+ const textsToFind = [ ...expectedTitleParts, ...expectedBody ];
+
+ expect.assertions(textsToFind.length);
+ textsToFind.forEach((text) => {
+ expect(wrapperText).toContain(text);
+ });
+ });
+});
diff --git a/test/servers/reducers/selectedServer.test.js b/test/servers/reducers/selectedServer.test.js
index 33728d9f..4cecf8cd 100644
--- a/test/servers/reducers/selectedServer.test.js
+++ b/test/servers/reducers/selectedServer.test.js
@@ -58,9 +58,10 @@ describe('selectedServerReducer', () => {
await selectServer(ServersServiceMock, buildApiClient)(serverId)(dispatch);
- expect(dispatch).toHaveBeenCalledTimes(2);
- expect(dispatch).toHaveBeenNthCalledWith(1, { type: RESET_SHORT_URL_PARAMS });
- expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
+ expect(dispatch).toHaveBeenCalledTimes(3);
+ expect(dispatch).toHaveBeenNthCalledWith(1, { type: RESET_SELECTED_SERVER });
+ expect(dispatch).toHaveBeenNthCalledWith(2, { type: RESET_SHORT_URL_PARAMS });
+ expect(dispatch).toHaveBeenNthCalledWith(3, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
});
it('invokes dependencies', async () => {
@@ -70,17 +71,27 @@ describe('selectedServerReducer', () => {
expect(buildApiClient).toHaveBeenCalledTimes(1);
});
- it('falls back to min version when health endpoint fails', async () => {
- const expectedSelectedServer = {
- ...selectedServer,
- version: MIN_FALLBACK_VERSION,
- };
+ it('dispatches error when health endpoint fails', async () => {
+ const expectedSelectedServer = { serverNotReachable: true };
apiClientMock.health.mockRejectedValue({});
await selectServer(ServersServiceMock, buildApiClient)(serverId)(dispatch);
- expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
+ expect(apiClientMock.health).toHaveBeenCalled();
+ expect(dispatch).toHaveBeenNthCalledWith(3, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
+ });
+
+ it('dispatches error when server is not found', async () => {
+ const expectedSelectedServer = { serverNotFound: true };
+
+ ServersServiceMock.findServerById.mockReturnValue(undefined);
+
+ await selectServer(ServersServiceMock, buildApiClient)(serverId)(dispatch);
+
+ expect(ServersServiceMock.findServerById).toHaveBeenCalled();
+ expect(apiClientMock.health).not.toHaveBeenCalled();
+ expect(dispatch).toHaveBeenNthCalledWith(3, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
});
});
});
diff --git a/test/tags/TagsList.test.js b/test/tags/TagsList.test.js
index 5a2ce549..bba25539 100644
--- a/test/tags/TagsList.test.js
+++ b/test/tags/TagsList.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import createTagsList from '../../src/tags/TagsList';
-import MutedMessage from '../../src/utils/MutedMessage';
+import Message from '../../src/utils/Message';
import SearchField from '../../src/utils/SearchField';
import { rangeOf } from '../../src/utils/utils';
@@ -28,7 +28,7 @@ describe('', () => {
it('shows a loading message when tags are being loaded', () => {
const wrapper = createWrapper({ loading: true });
- const loadingMsg = wrapper.find(MutedMessage);
+ const loadingMsg = wrapper.find(Message);
expect(loadingMsg).toHaveLength(1);
expect(loadingMsg.html()).toContain('Loading...');
@@ -44,7 +44,7 @@ describe('', () => {
it('shows a message when the list of tags is empty', () => {
const wrapper = createWrapper({ filteredTags: [] });
- const msg = wrapper.find(MutedMessage);
+ const msg = wrapper.find(Message);
expect(msg).toHaveLength(1);
expect(msg.html()).toContain('No tags found');
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
index 004019cf..785f216a 100644
--- a/test/visits/ShortUrlVisits.test.js
+++ b/test/visits/ShortUrlVisits.test.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { identity } from 'ramda';
import { Card } from 'reactstrap';
import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
-import MutedMessage from '../../src/utils/MutedMessage';
+import Message from '../../src/utils/Message';
import GraphCard from '../../src/visits/GraphCard';
import SortableBarGraph from '../../src/visits/SortableBarGraph';
import DateRangeRow from '../../src/utils/DateRangeRow';
@@ -44,7 +44,7 @@ describe('', () => {
it('renders a preloader when visits are loading', () => {
const wrapper = createComponent({ loading: true });
- const loadingMessage = wrapper.find(MutedMessage);
+ const loadingMessage = wrapper.find(Message);
expect(loadingMessage).toHaveLength(1);
expect(loadingMessage.html()).toContain('Loading...');
@@ -52,7 +52,7 @@ describe('', () => {
it('renders a warning when loading large amounts of visits', () => {
const wrapper = createComponent({ loading: true, loadingLarge: true });
- const loadingMessage = wrapper.find(MutedMessage);
+ const loadingMessage = wrapper.find(Message);
expect(loadingMessage).toHaveLength(1);
expect(loadingMessage.html()).toContain('This is going to take a while... :S');
@@ -68,7 +68,7 @@ describe('', () => {
it('renders a message when visits are loaded but the list is empty', () => {
const wrapper = createComponent({ loading: false, error: false, visits: [] });
- const message = wrapper.find(MutedMessage);
+ const message = wrapper.find(Message);
expect(message).toHaveLength(1);
expect(message.html()).toContain('There are no visits matching current filter :(');