Merge pull request #168 from acelaya-forks/feature/default-servers-issue

Feature/default servers issue

.dockerignore

@@ -1,3 +1,4 @@
+./.github
 ./build
 ./coverage
 ./dist

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://acel.me/donate']

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,6 @@
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+-->

.github/ISSUE_TEMPLATE/Bug.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Something on shlink is broken or not working as documented?
+labels: bug
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
+
+#### Summary
+
+<!-- Provide a summary describing the problem you are experiencing. -->
+
+#### Current behavior
+
+<!-- How is it actually behaving (and it shouldn't)? -->
+
+#### Expected behavior
+
+<!-- How did you expected to behave? -->
+
+#### How to reproduce
+
+<!-- Provide steps to reproduce the bug. -->

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Do you find shlink is missing some important feature that would make it more useful?
+labels: feature
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Summary
+
+<!-- Describe the new feature you would like to request. -->

.github/ISSUE_TEMPLATE/Question_Support.md

@@ -0,0 +1,23 @@
+---
+name: Question - Support
+about: Do you have a problem setting up or using shlink?
+labels: question
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge open source project.
+I'm always happy to help and provide support, but some understanding will be required.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
+
+#### Summary
+
+<!-- Describe the issue you are facing here. -->

.gitignore

@@ -3,18 +3,14 @@
 
 # testing
 /coverage
+/.stryker-tmp
+/reports
 
 # production
 /build
 
-# misc
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 docker-compose.override.yml
+home
+public/servers.json*

.scrutinizer.yml

@@ -1,5 +1,6 @@
 build:
   environment:
-    node: v10.4.1
+    node: v12.11.0
 tools:
-  external_code_coverage: true
+  external_code_coverage:
+    timeout: 1200

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
 
 node_js:
-  - "10.15.3"
+  - "12.11.0"
 
 cache:
-  yarn: true
   directories:
     - node_modules
 
@@ -12,19 +11,24 @@ services:
   - docker
 
 install:
-  - yarn install
+  - npm ci
+
+before_script:
+  - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
+  - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/master} --name-only | grep -E 'src\/(.*).(js|ts|jsx|tsx)' | paste -sd ",")
 
 script:
-  - yarn lint
-  - yarn test:ci
-  - if [[ -z $TRAVIS_TAG ]]; then docker build -t shlink-web-client:test . ; fi # Test docker image build only when no tag is present
+  - npm run lint
+  - npm run test:ci
+  - if [[ -z $TRAVIS_TAG ]]; then docker build -t shlink-web-client:test . ; fi
+  - if [[ -z $TRAVIS_TAG ]]; then npm run mutate:ci ; fi
 
 after_success:
-  - yarn ocular coverage/clover.xml
+  - node_modules/.bin/ocular coverage/clover.xml
 
 # Before deploying, build dist file for current travis tag
 before_deploy:
-  - yarn build ${TRAVIS_TAG#?}
+  - npm run build ${TRAVIS_TAG#?}
 
 deploy:
   provider: releases

CHANGELOG.md

@@ -4,6 +4,126 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## 2.2.2 - 2019-10-21
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#167](https://github.com/shlinkio/shlink-web-client/issues/167) Fixed `/servers.json` path not being ignored when returning something other than an array.
+
+
+## 2.2.1 - 2019-10-18
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* *Nothing*
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#165](https://github.com/shlinkio/shlink-web-client/issues/165) Fixed error thrown when opening "create" page while using a Shlink version which does not return a valid SemVer version (like `latest` docker image, or any development instance).
+
+
+## 2.2.0 - 2019-10-05
+
+#### Added
+
+* [#144](https://github.com/shlinkio/shlink-web-client/issues/144) Added domain input to create domain page.
+
+#### Changed
+
+* [#140](https://github.com/shlinkio/shlink-web-client/issues/140) Updated project dependencies.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
+## 2.1.1 - 2019-09-22
+
+#### Added
+
+* *Nothing*
+
+#### Changed
+
+* [#142](https://github.com/shlinkio/shlink-web-client/issues/142) Updated to newer versions of base docker images for dev and production.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* [#151](https://github.com/shlinkio/shlink-web-client/issues/151) Fixed "order by" indicator (caret) still indicate ASC on column header when no order is specified.
+* [#157](https://github.com/shlinkio/shlink-web-client/issues/157) Fixed pagination control on graphs expanding too much when lots of pages need to be rendered.
+* [#155](https://github.com/shlinkio/shlink-web-client/issues/155) Fixed client-side paths resolve to 404 when served from nginx in docker image instead of falling back to `index.html`.
+
+
+## 2.1.0 - 2019-05-19
+
+#### Added
+
+* [#101](https://github.com/shlinkio/shlink-web-client/issues/101) Added checkbox to short URL creation form that allows to determine the value of the `findIfExists` flag introduced in Shlink v1.16.0.
+* [#105](https://github.com/shlinkio/shlink-web-client/issues/105) Added support to pre-configure servers. See [how to pre-configure servers](README.md#pre-configuring-servers) to get more details on how to do it.
+
+#### Changed
+
+* [#125](https://github.com/shlinkio/shlink-web-client/issues/125) Refactored reducers to replace `switch` statements by `handleActions` from [redux-actions](https://github.com/redux-utilities/redux-actions).
+* [#116](https://github.com/shlinkio/shlink-web-client/issues/116) Removed sinon in favor of jest mocks.
+* [#72](https://github.com/shlinkio/shlink-web-client/issues/72) Increased code coverage up to 80%.
+
+#### Deprecated
+
+* *Nothing*
+
+#### Removed
+
+* *Nothing*
+
+#### Fixed
+
+* *Nothing*
+
+
 ## 2.0.3 - 2019-03-16
 
 #### Added

Dockerfile

@@ -1,8 +1,9 @@
-FROM node:10.15.3-alpine as node
+FROM node:12.11.0-alpine as node
 COPY . /shlink-web-client
-RUN cd /shlink-web-client && yarn install && yarn build
+RUN cd /shlink-web-client && npm install && npm run build
 
-FROM nginx:1.15.9-alpine
+FROM nginx:1.17.4-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
-RUN rm -r /usr/share/nginx/html
+RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
+COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html

README.md

@@ -14,9 +14,9 @@ A ReactJS-based progressive web application for [Shlink](https://shlink.io).
 
 There are three ways in which you can use this application.
 
-* The easiest way to use shlink-web-client is by just going to https://app.shlink.io.
+* The easiest way to use shlink-web-client is by just going to <https://app.shlink.io>.
 
-    The application runs 100% in the browser, so you can use that instance and access any shlink instance from it.
+    The application runs 100% in the browser, so you can safely access any shlink instance from there.
 
 * Self hosting the application yourself.
 
@@ -24,28 +24,60 @@ There are three ways in which you can use this application.
 
     The package contains static files only, so just put it in a folder and serve it with the web server of your choice.
 
-    Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these simple steps](#serve-shlink-in-subpath).
+    Provided dist files are configured to be served from the root of your domain. If you need to serve shlink-web-client from a subpath, you will have to build it yourself following [these steps](#serve-shlink-in-subpath).
 
-* Use the official [docker image](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+* Using the official [docker image](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 
-    If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the image and do it.
+    If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the `shlinkio/shlink-web-client` image and do it.
 
-    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the assets on port 80.
+    It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
+
+## Pre-configuring servers
+
+The first time you access shlink-web-client from a browser, you will have to configure the list of shlink servers you want to manage, and they will be saved in the local storage.
+
+Those servers can be exported and imported in other browsers, but if for some reason you need some servers to be there from the beginning, starting with shlink-web-client 2.1.0, you can provide a `servers.json` file in the project root folder (the same containing the `index.html`, `favicon.ico`, etc) with a structure like this:
+
+```json
+[
+  {
+    "name": "Main server",
+    "url": "https://doma.in",
+    "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
+  },
+  {
+    "name": "Local",
+    "url": "http://localhost:8080",
+    "apiKey": "580d0b42-4dea-419a-96bf-6c876b901451"
+  }
+]
+```
+
+> The list can contain as many servers as you need.
+
+If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
+
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
 
 ## Serve project in subpath
 
-Official distributable files have been build so that they are served from the root of a domain.
+Official distributable files have been built so that they are served from the root of a domain.
 
 If you need to host shlink-web-client yourself and serve it from a subpath, follow these steps:
 
-* Download [node](https://nodejs.org/en/download/package-manager/) 10.4 or later (if you don't have it yet).
-* Download [yarn](https://yarnpkg.com/en/docs/install) package manager.
-* Download shlink-web-client source files for the version you want to build.
+* Download shlink-web-client source code for the version you want to build.
     * For example, if you want to build `v1.0.1`, use this link https://github.com/shlinkio/shlink-web-client/archive/v1.0.1.zip
     * Replace the `v1.0.1` part in the link with the one of the version you want to build.
 * Decompress the file and `cd` into the resulting folder.
-* Install project dependencies by running `yarn install`.
 * Open the `package.json` file in the root of the project, locate the `homepage` property and replace the value (which should be an empty string) by the path from which you want to serve shlink-web-client.
     * For example: `"homepage": "/my-projects/shlink-web-client",`.
-* Build the distributable contents by running `yarn build`.
-* Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+* Build the project:
+    * For classic hosting:
+        * Download [node](https://nodejs.org/en/download/package-manager/) 10.15 or later.
+        * Install project dependencies by running `npm install`.
+        * Build the project by running `npm run build`.
+        * Once the command finishes, you will have a `build` folder with all the static assets you need to run shlink-web-client. Just place them wherever you want them to be served from.
+    * For docker image:
+        * Download [docker](https://docs.docker.com/install/).
+        * Build the docker image by running `docker build . -t shlink-web-client`.
+        * Once the command finishes, you will have an image with the name `shlink-web-client`.

config/docker/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen 80 default_server;
+    charset utf-8;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # When requesting static paths with extension, try them, and return a 404 if not found
+    location ~ .+\.(css|js|html|png|jpg|jpeg|gif|bmp|ico|json|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) {
+        try_files $uri $uri/ =404;
+    }
+
+    # When requesting a path without extension, try it, and return the index if not found
+    # This allows HTML5 history paths to be handled by the client application
+    location / {
+        try_files $uri $uri/ /index.html$is_args$args;
+    }
+}

docker-compose.override.yml.dist

@@ -6,3 +6,4 @@ services:
     volumes:
       - /etc/passwd:/etc/passwd:ro
       - /etc/group:/etc/group:ro
+      - ./home:/home/alejandro

docker-compose.yml

@@ -3,8 +3,8 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:10.15.0-alpine
-    command: /bin/sh -c "cd /home/shlink/www && yarn install && yarn start"
+    image: node:12.11.0-alpine
+    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www
     ports:

package.json

@@ -1,132 +1,144 @@
 {
-  "name": "shlink-web-client-react",
+  "name": "shlink-web-client",
   "description": "A React-based progressive web application for shlink",
-  "version": "1.0.0",
+  "version": "2.3.0",
   "private": false,
   "homepage": "",
+  "repository": "https://github.com/shlinkio/shlink-web-client",
+  "license": "MIT",
   "scripts": {
-    "lint": "yarn lint:js && yarn lint:css",
+    "lint": "npm run lint:js && npm run lint:css",
     "lint:js": "eslint src test scripts config",
-    "lint:js:fix": "yarn lint:js --fix",
+    "lint:js:fix": "npm run lint:js -- --fix",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
-    "lint:css:fix": "yarn lint:css --fix",
+    "lint:css:fix": "npm run lint:css -- --fix",
     "start": "node scripts/start.js",
-    "serve:build": "yarn serve ./build",
+    "serve:build": "serve ./build",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom --colors",
-    "test:ci": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
-    "test:pretty": "yarn test --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html"
+    "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
+    "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
+    "mutate": "./node_modules/.bin/stryker run",
+    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.6.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@fortawesome/free-regular-svg-icons": "^5.6.3",
-    "@fortawesome/free-solid-svg-icons": "^5.6.3",
-    "@fortawesome/react-fontawesome": "^0.1.3",
+    "@fortawesome/fontawesome-free": "^5.11.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-regular-svg-icons": "^5.11.2",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.5",
     "array-filter": "^1.0.0",
     "array-map": "^0.0.0",
     "array-reduce": "^0.0.0",
-    "axios": "^0.18.0",
+    "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
-    "bottlejs": "^1.7.1",
-    "chart.js": "^2.7.2",
+    "bottlejs": "^1.7.2",
+    "chart.js": "^2.8.0",
     "classnames": "^2.2.6",
+    "compare-versions": "^3.5.1",
     "csvjson": "^5.1.0",
-    "leaflet": "^1.4.0",
-    "moment": "^2.22.2",
-    "promise": "^8.0.1",
-    "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
+    "leaflet": "^1.5.1",
+    "moment": "^2.24.0",
+    "promise": "^8.0.3",
+    "prop-types": "^15.7.2",
+    "qs": "^6.9.0",
     "ramda": "^0.26.1",
-    "react": "^16.8.0",
-    "react-autosuggest": "^9.4.0",
-    "react-chartjs-2": "^2.7.4",
-    "react-color": "^2.14.1",
+    "react": "^16.10.2",
+    "react-autosuggest": "^9.4.3",
+    "react-chartjs-2": "^2.8.0",
+    "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "~1.5.0",
-    "react-dom": "^16.8.0",
-    "react-leaflet": "^2.2.1",
-    "react-moment": "^0.7.6",
-    "react-redux": "^5.0.7",
-    "react-router-dom": "^4.2.2",
-    "react-swipeable": "^4.3.0",
+    "react-dom": "^16.10.2",
+    "react-external-link": "^1.0.0",
+    "react-leaflet": "^2.4.0",
+    "react-moment": "^0.9.5",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.1.2",
+    "react-swipeable": "^5.4.0",
     "react-tagsinput": "^3.19.0",
-    "reactstrap": "^6.0.1",
-    "redux": "^4.0.0",
+    "reactstrap": "^8.0.1",
+    "redux": "^4.0.4",
+    "redux-actions": "^2.6.5",
     "redux-thunk": "^2.3.0",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@svgr/webpack": "^2.4.1",
-    "adm-zip": "0.4.11",
-    "autoprefixer": "^7.1.6",
+    "@babel/core": "^7.6.2",
+    "@stryker-mutator/core": "^2.1.0",
+    "@stryker-mutator/html-reporter": "^2.1.0",
+    "@stryker-mutator/javascript-mutator": "^2.1.0",
+    "@stryker-mutator/jest-runner": "^2.1.0",
+    "@svgr/webpack": "^4.3.3",
+    "adm-zip": "^0.4.13",
+    "autoprefixer": "^9.6.3",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-named-asset-import": "^0.3.0",
-    "babel-preset-react-app": "^7.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-named-asset-import": "^0.3.4",
+    "babel-preset-react-app": "^9.0.2",
     "babel-runtime": "^6.26.0",
-    "bfj": "^6.1.1",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
-    "chalk": "^2.4.1",
-    "css-loader": "^1.0.0",
-    "dotenv": "^6.0.0",
-    "dotenv-expand": "^4.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "bfj": "^7.0.1",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "chalk": "^2.4.2",
+    "css-loader": "^3.2.0",
+    "dotenv": "^8.1.0",
+    "dotenv-expand": "^5.1.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^5.11.1",
     "eslint-config-adidas-babel": "^1.1.0",
     "eslint-config-adidas-env": "^1.1.0",
     "eslint-config-adidas-es6": "^1.2.0",
     "eslint-config-adidas-react": "^1.1.1",
-    "eslint-loader": "^2.1.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^2.0.0",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jest": "^22.17.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.16.0",
+    "file-loader": "^4.2.0",
     "fork-ts-checker-webpack-plugin-alt": "^0.4.14",
-    "fs-extra": "^7.0.0",
-    "html-webpack-plugin": "^4.0.0-alpha.2",
+    "fs-extra": "^8.1.0",
+    "html-webpack-plugin": "^4.0.0-beta.8",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-pnp-resolver": "^1.0.1",
-    "jest-resolve": "^23.6.0",
-    "mini-css-extract-plugin": "^0.4.3",
-    "node-sass": "^4.9.0",
+    "jest": "^24.9.0",
+    "jest-each": "^24.9.0",
+    "jest-pnp-resolver": "^1.2.1",
+    "jest-resolve": "^24.9.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
     "object-assign": "^4.1.1",
     "ocular.js": "^0.1.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "pnp-webpack-plugin": "^1.1.0",
-    "postcss": "^7.0.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "pnp-webpack-plugin": "^1.5.0",
+    "postcss": "^7.0.18",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.3.1",
+    "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.1",
-    "raf": "^3.4.0",
-    "react-app-polyfill": "^0.2.0",
-    "react-dev-utils": "^7.0.1",
-    "resolve": "^1.8.1",
-    "sass-loader": "^7.1.0",
-    "serve": "^10.0.0",
-    "sinon": "^6.1.5",
-    "style-loader": "^0.23.0",
-    "stylelint": "^9.9.0",
+    "raf": "^3.4.1",
+    "react-app-polyfill": "^1.0.4",
+    "react-dev-utils": "^9.1.0",
+    "resolve": "^1.12.0",
+    "sass-loader": "^8.0.0",
+    "serve": "^11.2.0",
+    "stryker-cli": "^1.0.0",
+    "style-loader": "^1.0.0",
+    "stylelint": "^9.10.1",
     "stylelint-config-adidas": "^1.2.1",
     "stylelint-config-adidas-bem": "^1.2.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.3.0",
-    "sw-precache-webpack-plugin": "^0.11.4",
-    "terser-webpack-plugin": "^1.1.0",
-    "url-loader": "^1.1.1",
-    "webpack": "^4.19.1",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-manifest-plugin": "^2.0.4",
-    "whatwg-fetch": "^2.0.3",
-    "workbox-webpack-plugin": "^3.6.3"
+    "stylelint-config-recommended-scss": "^4.0.0",
+    "stylelint-scss": "^3.11.1",
+    "sw-precache-webpack-plugin": "^0.11.5",
+    "terser-webpack-plugin": "^2.1.2",
+    "url-loader": "^2.2.0",
+    "webpack": "^4.41.0",
+    "webpack-dev-server": "^3.8.2",
+    "webpack-manifest-plugin": "^2.2.0",
+    "whatwg-fetch": "^3.0.0",
+    "workbox-webpack-plugin": "^4.3.1"
   },
   "babel": {
     "presets": [

scripts/start.js

@@ -81,7 +81,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const urls = prepareUrls(protocol, HOST, port);
 
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
 
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;

src/common/Home.js

@@ -18,18 +18,20 @@ export default class Home extends React.Component {
   }
 
   render() {
-    const servers = values(this.props.servers);
+    const { servers: { list, loading } } = this.props;
+    const servers = values(list);
     const hasServers = !isEmpty(servers);
 
     return (
       <div className="home">
         <h1 className="home__title">Welcome to Shlink</h1>
         <h5 className="home__intro">
-          {hasServers && <span>Please, select a server.</span>}
-          {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+          {!loading && hasServers && <span>Please, select a server.</span>}
+          {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+          {loading && <span>Trying to load servers...</span>}
         </h5>
 
-        {hasServers && (
+        {!loading && hasServers && (
           <ListGroup className="home__servers-list">
             {servers.map(({ name, id }) => (
               <ListGroupItem

src/common/MenuLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import Swipeable from 'react-swipeable';
+import { Swipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
@@ -20,9 +20,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
 
     state = { showSideBar: false };
 
-    // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
-    /* eslint react/no-deprecated: "off" */
-    componentWillMount() {
+    componentDidMount() {
       const { match, selectServer } = this.props;
       const { params: { serverId } } = match;
 

src/common/SimplePaginator.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { range, max, min } from 'ramda';
+import './SimplePaginator.scss';
+
+const propTypes = {
+  pagesCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  setCurrentPage: PropTypes.func.isRequired,
+};
+
+export const ellipsis = '...';
+
+const pagination = (currentPage, pageCount) => {
+  const delta = 2;
+  const pages = range(
+    max(delta, currentPage - delta),
+    min(pageCount - 1, currentPage + delta) + 1
+  );
+
+  if (currentPage - delta > delta) {
+    pages.unshift(ellipsis);
+  }
+  if (currentPage + delta < pageCount - 1) {
+    pages.push(ellipsis);
+  }
+
+  pages.unshift(1);
+  pages.push(pageCount);
+
+  return pages;
+};
+
+const SimplePaginator = ({ pagesCount, currentPage, setCurrentPage }) => {
+  if (pagesCount < 2) {
+    return null;
+  }
+
+  const onClick = (page) => () => setCurrentPage(page);
+
+  return (
+    <Pagination listClassName="flex-wrap justify-content-center mb-0 simple-paginator">
+      <PaginationItem disabled={currentPage <= 1}>
+        <PaginationLink previous tag="span" onClick={onClick(currentPage - 1)} />
+      </PaginationItem>
+      {pagination(currentPage, pagesCount).map((page, index) => (
+        <PaginationItem
+          key={page !== ellipsis ? page : `${page}_${index}`}
+          active={page === currentPage}
+          disabled={page === ellipsis}
+        >
+          <PaginationLink tag="span" onClick={onClick(page)}>{page}</PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag="span" onClick={onClick(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};
+
+SimplePaginator.propTypes = propTypes;
+
+export default SimplePaginator;

src/common/SimplePaginator.scss

@@ -0,0 +1,3 @@
+.simple-paginator {
+  user-select: none;
+}

src/servers/ServersDropdown.js

@@ -1,6 +1,5 @@
 import { isEmpty, values } from 'ramda';
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { serverType } from './prop-types';
@@ -11,10 +10,24 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     selectedServer: serverType,
     selectServer: PropTypes.func,
     listServers: PropTypes.func,
+    history: PropTypes.shape({
+      push: PropTypes.func,
+    }),
   };
 
   renderServers = () => {
-    const { servers, selectedServer, selectServer } = this.props;
+    const { servers: { list, loading }, selectedServer, selectServer } = this.props;
+    const servers = values(list);
+    const { push } = this.props.history;
+    const loadServer = (id) => {
+      selectServer(id)
+        .then(() => push(`/server/${id}/list-short-urls/1`))
+        .catch(() => {});
+    };
+
+    if (loading) {
+      return <DropdownItem disabled><i>Trying to load servers...</i></DropdownItem>;
+    }
 
     if (isEmpty(servers)) {
       return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
@@ -22,16 +35,8 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
 
     return (
       <React.Fragment>
-        {values(servers).map(({ name, id }) => (
-          <DropdownItem
-            key={id}
-            tag={Link}
-            to={`/server/${id}/list-short-urls/1`}
-            active={selectedServer && selectedServer.id === id}
-
-            // FIXME This should be implicit
-            onClick={() => selectServer(id)}
-          >
+        {servers.map(({ name, id }) => (
+          <DropdownItem key={id} active={selectedServer && selectedServer.id === id} onClick={() => loadServer(id)}>
             {name}
           </DropdownItem>
         ))}
@@ -46,18 +51,14 @@ const ServersDropdown = (serversExporter) => class ServersDropdown extends React
     );
   };
 
-  componentDidMount() {
-    this.props.listServers();
-  }
+  componentDidMount = this.props.listServers;
 
-  render() {
-    return (
-      <UncontrolledDropdown nav inNavbar>
-        <DropdownToggle nav caret>Servers</DropdownToggle>
-        <DropdownMenu right>{this.renderServers()}</DropdownMenu>
-      </UncontrolledDropdown>
-    );
-  }
+  render = () => (
+    <UncontrolledDropdown nav inNavbar>
+      <DropdownToggle nav caret>Servers</DropdownToggle>
+      <DropdownMenu right>{this.renderServers()}</DropdownMenu>
+    </UncontrolledDropdown>
+  );
 };
 
 export default ServersDropdown;

src/servers/helpers/ImportServersBtn.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { assoc, map } from 'ramda';
-import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
 const ImportServersBtn = (serversImporter) => class ImportServersBtn extends React.Component {
@@ -22,10 +20,8 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
   render() {
     const { importServersFromFile } = serversImporter;
     const { onImport, createServers } = this.props;
-    const assocId = (server) => assoc('id', uuid(), server);
     const onChange = ({ target }) =>
       importServersFromFile(target.files[0])
-        .then(map(assocId))
         .then(createServers)
         .then(onImport)
         .then(() => {

src/servers/reducers/selectedServer.js

@@ -1,32 +1,40 @@
+import { createAction, handleActions } from 'redux-actions';
 import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListParams';
+import { versionIsValidSemVer } from '../../utils/utils';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
 export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
-/* eslint-enable padding-line-between-statements, newline-after-var */
 
-const defaultState = null;
+export const MIN_FALLBACK_VERSION = '1.0.0';
+export const MAX_FALLBACK_VERSION = '999.999.999';
+export const LATEST_VERSION_CONSTRAINT = 'latest';
+/* eslint-enable padding-line-between-statements */
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case SELECT_SERVER:
-      return action.selectedServer;
-    case RESET_SELECTED_SERVER:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+const initialState = null;
 
-export const resetSelectedServer = () => ({ type: RESET_SELECTED_SERVER });
+export const resetSelectedServer = createAction(RESET_SELECTED_SERVER);
 
-export const selectServer = (serversService) => (serverId) => (dispatch) => {
+export const selectServer = ({ findServerById }, buildShlinkApiClient) => (serverId) => async (dispatch) => {
   dispatch(resetShortUrlParams());
 
-  const selectedServer = serversService.findServerById(serverId);
+  const selectedServer = findServerById(serverId);
+  const { health } = await buildShlinkApiClient(selectedServer);
+  const version = await health()
+    .then(({ version }) => version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version)
+    .then((version) => !versionIsValidSemVer(version) ? MIN_FALLBACK_VERSION : version)
+    .catch(() => MIN_FALLBACK_VERSION);
 
   dispatch({
     type: SELECT_SERVER,
-    selectedServer,
+    selectedServer: {
+      ...selectedServer,
+      version,
+    },
   });
 };
+
+export default handleActions({
+  [RESET_SELECTED_SERVER]: () => initialState,
+  [SELECT_SERVER]: (state, { selectedServer }) => selectedServer,
+}, initialState);

src/servers/reducers/server.js

@@ -1,33 +1,61 @@
+import { handleActions } from 'redux-actions';
+import { pipe, isEmpty, assoc, map, prop } from 'ramda';
+import { v4 as uuid } from 'uuid';
+import { homepage } from '../../../package.json';
+
+/* eslint-disable padding-line-between-statements */
+export const FETCH_SERVERS_START = 'shlink/servers/FETCH_SERVERS_START';
 export const FETCH_SERVERS = 'shlink/servers/FETCH_SERVERS';
+/* eslint-enable padding-line-between-statements */
 
-export default function reducer(state = {}, action) {
-  switch (action.type) {
-    case FETCH_SERVERS:
-      return action.servers;
-    default:
-      return state;
+const initialState = {
+  list: {},
+  loading: false,
+};
+
+const assocId = (server) => assoc('id', server.id || uuid(), server);
+
+export default handleActions({
+  [FETCH_SERVERS_START]: (state) => ({ ...state, loading: true }),
+  [FETCH_SERVERS]: (state, { list }) => ({ list, loading: false }),
+}, initialState);
+
+export const listServers = ({ listServers, createServers }, { get }) => () => async (dispatch) => {
+  dispatch({ type: FETCH_SERVERS_START });
+  const localList = listServers();
+
+  if (!isEmpty(localList)) {
+    dispatch({ type: FETCH_SERVERS, list: localList });
+
+    return;
   }
-}
 
-export const listServers = (serversService) => () => ({
-  type: FETCH_SERVERS,
-  servers: serversService.listServers(),
-});
+  // If local list is empty, try to fetch it remotely (making sure it's an array) and calculate IDs for every server
+  const getDataAsArrayWithIds = pipe(
+    prop('data'),
+    (value) => {
+      if (!Array.isArray(value)) {
+        throw new Error('Value is not an array');
+      }
 
-export const createServer = (serversService, listServers) => (server) => {
-  serversService.createServer(server);
+      return value;
+    },
+    map(assocId),
+  );
+  const remoteList = await get(`${homepage}/servers.json`)
+    .then(getDataAsArrayWithIds)
+    .catch(() => []);
 
-  return listServers();
+  createServers(remoteList);
+  dispatch({ type: FETCH_SERVERS, list: remoteList.reduce((map, server) => ({ ...map, [server.id]: server }), {}) });
 };
 
-export const deleteServer = (serversService, listServers) => (server) => {
-  serversService.deleteServer(server);
+export const createServer = ({ createServer }, listServersAction) => pipe(createServer, listServersAction);
 
-  return listServers();
-};
+export const deleteServer = ({ deleteServer }, listServersAction) => pipe(deleteServer, listServersAction);
 
-export const createServers = (serversService, listServers) => (servers) => {
-  serversService.createServers(servers);
-
-  return listServers();
-};
+export const createServers = ({ createServers }, listServersAction) => pipe(
+  map(assocId),
+  createServers,
+  listServersAction
+);

src/servers/services/ServersImporter.js

@@ -1,9 +1,3 @@
-import PropTypes from 'prop-types';
-
-export const serversImporterType = PropTypes.shape({
-  importServersFromFile: PropTypes.func,
-});
-
 export default class ServersImporter {
   constructor(csvjson) {
     this.csvjson = csvjson;

src/servers/services/ServersService.js

@@ -23,9 +23,6 @@ export default class ServersService {
     this.storage.set(SERVERS_STORAGE_KEY, allServers);
   };
 
-  deleteServer = (server) =>
-    this.storage.set(
-      SERVERS_STORAGE_KEY,
-      dissoc(server.id, this.listServers())
-    );
+  deleteServer = ({ id }) =>
+    this.storage.set(SERVERS_STORAGE_KEY, dissoc(id, this.listServers()));
 }

src/servers/services/provideServices.js

@@ -16,6 +16,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
+  bottle.decorator('ServersDropdown', withRouter);
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers', 'selectServer' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
@@ -34,11 +35,11 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.service('ServersExporter', ServersExporter, 'ServersService', 'window', 'csvjson');
 
   // Actions
-  bottle.serviceFactory('selectServer', selectServer, 'ServersService');
+  bottle.serviceFactory('selectServer', selectServer, 'ServersService', 'buildShlinkApiClient');
   bottle.serviceFactory('createServer', createServer, 'ServersService', 'listServers');
   bottle.serviceFactory('createServers', createServers, 'ServersService', 'listServers');
   bottle.serviceFactory('deleteServer', deleteServer, 'ServersService', 'listServers');
-  bottle.serviceFactory('listServers', listServers, 'ServersService');
+  bottle.serviceFactory('listServers', listServers, 'ServersService', 'axios');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
 };

src/short-urls/CreateShortUrl.js

@@ -1,11 +1,16 @@
 import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { assoc, dissoc, isNil, pipe, replace, trim } from 'ramda';
+import { assoc, dissoc, isEmpty, isNil, pipe, replace, trim } from 'ramda';
 import React from 'react';
 import { Collapse } from 'reactstrap';
 import * as PropTypes from 'prop-types';
 import DateInput from '../utils/DateInput';
+import Checkbox from '../utils/Checkbox';
+import ForVersion from '../utils/ForVersion';
+import { serverType } from '../servers/prop-types';
+import { compareVersions } from '../utils/utils';
 import { createShortUrlResultType } from './reducers/shortUrlCreation';
+import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 
 const normalizeTag = pipe(trim, replace(/ /g, '-'));
 const formatDate = (date) => isNil(date) ? date : date.format();
@@ -15,15 +20,18 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
     createShortUrl: PropTypes.func,
     shortUrlCreationResult: createShortUrlResultType,
     resetCreateShortUrl: PropTypes.func,
+    selectedServer: serverType,
   };
 
   state = {
     longUrl: '',
     tags: [],
     customSlug: undefined,
+    domain: undefined,
     validSince: undefined,
     validUntil: undefined,
     maxVisits: undefined,
+    findIfExists: false,
     moreOptionsVisible: false,
   };
 
@@ -63,6 +71,8 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
         assoc('validUntil', formatDate(this.state.validUntil))
       )(this.state));
     };
+    const currentServerVersion = this.props.selectedServer ? this.props.selectedServer.version : '';
+    const disableDomain = isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', '1.19.0-beta.1');
 
     return (
       <div className="shlink-container">
@@ -86,19 +96,45 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
             <div className="row">
               <div className="col-sm-6">
                 {renderOptionalInput('customSlug', 'Custom slug')}
-                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
               </div>
               <div className="col-sm-6">
+                {renderOptionalInput('domain', 'Domain', 'text', {
+                  disabled: disableDomain,
+                  ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
+                })}
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="col-sm-6">
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+              </div>
+              <div className="col-sm-3">
                 {renderDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
+              </div>
+              <div className="col-sm-3">
                 {renderDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
               </div>
             </div>
+
+            <ForVersion minVersion="1.16.0" currentServerVersion={currentServerVersion}>
+              <div className="mb-4 text-right">
+                <Checkbox
+                  className="mr-2"
+                  checked={this.state.findIfExists}
+                  onChange={(findIfExists) => this.setState({ findIfExists })}
+                >
+                  Use existing URL if found
+                </Checkbox>
+                <UseExistingIfFoundInfoIcon />
+              </div>
+            </ForVersion>
           </Collapse>
 
           <div>
             <button
               type="button"
-              className="btn btn-outline-secondary create-short-url__btn"
+              className="btn btn-outline-secondary"
               onClick={() => this.setState(({ moreOptionsVisible }) => ({ moreOptionsVisible: !moreOptionsVisible }))}
             >
               <FontAwesomeIcon icon={this.state.moreOptionsVisible ? upIcon : downIcon} />
@@ -106,8 +142,8 @@ const CreateShortUrl = (TagsSelector, CreateShortUrlResult) => class CreateShort
               {this.state.moreOptionsVisible ? 'Less' : 'More'} options
             </button>
             <button
-              className="btn btn-outline-primary create-short-url__btn float-right"
-              disabled={shortUrlCreationResult.loading}
+              className="btn btn-outline-primary float-right"
+              disabled={shortUrlCreationResult.loading || isEmpty(this.state.longUrl)}
             >
               {shortUrlCreationResult.loading ? 'Creating...' : 'Create'}
             </button>

src/short-urls/ShortUrlsList.js

@@ -11,7 +11,7 @@ import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
 
-const SORTABLE_FIELDS = {
+export const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
@@ -50,6 +50,10 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
       return null;
     }
 
+    if (!this.state.orderDir) {
+      return null;
+    }
+
     return (
       <FontAwesomeIcon
         icon={this.state.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}

src/short-urls/UseExistingIfFoundInfoIcon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import './UseExistingIfFoundInfoIcon.scss';
+import { useToggle } from '../utils/utils';
+
+const renderInfoModal = (isOpen, toggle) => (
+  <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+    <ModalHeader toggle={toggle}>Info</ModalHeader>
+    <ModalBody>
+      <p>
+        When the&nbsp;
+        <b><i>&quot;Use existing URL if found&quot;</i></b>
+        &nbsp;checkbox is checked, the server will return an existing short URL if it matches provided params.
+      </p>
+      <p>
+        These are the checks performed by Shlink in order to determine if an existing short URL should be returned:
+      </p>
+      <ul>
+        <li>
+          When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
+          if none is found.
+        </li>
+        <li>
+          When long URL and custom slug and/or domain are provided: Same as in previous case, but it will try to match
+          the short URL using both the long URL and the slug, the long URL and the domain, or the three of them.
+          <br />
+          If the slug is being used by another long URL, an error will be returned.
+        </li>
+        <li>
+          When other params are provided: Same as in previous cases, but it will try to match existing short URLs with
+          all provided data. If any of them does not match, a new short URL will be created
+        </li>
+      </ul>
+    </ModalBody>
+  </Modal>
+);
+
+const UseExistingIfFoundInfoIcon = () => {
+  const [ isModalOpen, toggleModal ] = useToggle(false);
+
+  return (
+    <React.Fragment>
+      <span title="What does this mean?">
+        <FontAwesomeIcon icon={infoIcon} style={{ cursor: 'pointer' }} onClick={toggleModal} />
+      </span>
+      {renderInfoModal(isModalOpen, toggleModal)}
+    </React.Fragment>
+  );
+};
+
+export default UseExistingIfFoundInfoIcon;

src/short-urls/UseExistingIfFoundInfoIcon.scss

@@ -0,0 +1,7 @@
+.use-existing-if-found-info-icon__modal-quote {
+  margin-bottom: 0;
+  padding: 10px 15px;
+  font-size: 17.5px;
+  border-left: 5px solid #eee;
+  background-color: #f9f9f9;
+}

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -35,7 +35,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
   toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
 
   render() {
-    const { onCopyToClipboard, shortUrl, selectedServer: { id } } = this.props;
+    const { onCopyToClipboard, shortUrl, selectedServer } = this.props;
     const completeShortUrl = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
     const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] }));
     const toggleQrCode = toggleModal('isQrModalOpen');
@@ -49,7 +49,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
           &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
         </DropdownToggle>
         <DropdownMenu right>
-          <DropdownItem tag={Link} to={`/server/${id}/short-code/${shortUrl.shortCode}/visits`}>
+          <DropdownItem tag={Link} to={`/server/${selectedServer ? selectedServer.id : ''}/short-code/${shortUrl.shortCode}/visits`}>
             <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats
           </DropdownItem>
 

src/short-urls/reducers/shortUrlCreation.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
+import { createAction, handleActions } from 'redux-actions';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
 export const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
 export const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
 export const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const createShortUrlResultType = PropTypes.shape({
   result: PropTypes.shape({
@@ -15,47 +16,26 @@ export const createShortUrlResultType = PropTypes.shape({
   error: PropTypes.bool,
 });
 
-const defaultState = {
+const initialState = {
   result: null,
   saving: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case CREATE_SHORT_URL_START:
-      return {
-        ...state,
-        saving: true,
-        error: false,
-      };
-    case CREATE_SHORT_URL_ERROR:
-      return {
-        ...state,
-        saving: false,
-        error: true,
-      };
-    case CREATE_SHORT_URL:
-      return {
-        result: action.result,
-        saving: false,
-        error: false,
-      };
-    case RESET_CREATE_SHORT_URL:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [CREATE_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
+  [CREATE_SHORT_URL_ERROR]: (state) => ({ ...state, saving: false, error: true }),
+  [CREATE_SHORT_URL]: (state, { result }) => ({ result, saving: false, error: false }),
+  [RESET_CREATE_SHORT_URL]: () => initialState,
+}, initialState);
 
 export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatch, getState) => {
   dispatch({ type: CREATE_SHORT_URL_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { createShortUrl } = await buildShlinkApiClient(getState);
 
   try {
-    const result = await shlinkApiClient.createShortUrl(data);
+    const result = await createShortUrl(data);
 
     dispatch({ type: CREATE_SHORT_URL, result });
   } catch (e) {
@@ -63,4 +43,4 @@ export const createShortUrl = (buildShlinkApiClient) => (data) => async (dispatc
   }
 };
 
-export const resetCreateShortUrl = () => ({ type: RESET_CREATE_SHORT_URL });
+export const resetCreateShortUrl = createAction(RESET_CREATE_SHORT_URL);

src/short-urls/reducers/shortUrlDeletion.js

@@ -1,12 +1,13 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const DELETE_SHORT_URL_START = 'shlink/deleteShortUrl/DELETE_SHORT_URL_START';
 export const DELETE_SHORT_URL_ERROR = 'shlink/deleteShortUrl/DELETE_SHORT_URL_ERROR';
 export const DELETE_SHORT_URL = 'shlink/deleteShortUrl/DELETE_SHORT_URL';
 export const RESET_DELETE_SHORT_URL = 'shlink/deleteShortUrl/RESET_DELETE_SHORT_URL';
 export const SHORT_URL_DELETED = 'shlink/deleteShortUrl/SHORT_URL_DELETED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlDeletionType = PropTypes.shape({
   shortCode: PropTypes.string.isRequired,
@@ -18,47 +19,24 @@ export const shortUrlDeletionType = PropTypes.shape({
   }).isRequired,
 });
 
-const defaultState = {
+const initialState = {
   shortCode: '',
   loading: false,
   error: false,
   errorData: {},
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case DELETE_SHORT_URL_START:
-      return {
-        ...state,
-        loading: true,
-        error: false,
-      };
-    case DELETE_SHORT_URL_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-        errorData: action.errorData,
-      };
-    case DELETE_SHORT_URL:
-      return {
-        ...state,
-        shortCode: action.shortCode,
-        loading: false,
-        error: false,
-      };
-    case RESET_DELETE_SHORT_URL:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [DELETE_SHORT_URL_START]: (state) => ({ ...state, loading: true, error: false }),
+  [DELETE_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, errorData, loading: false, error: true }),
+  [DELETE_SHORT_URL]: (state, { shortCode }) => ({ ...state, shortCode, loading: false, error: false }),
+  [RESET_DELETE_SHORT_URL]: () => initialState,
+}, initialState);
 
 export const deleteShortUrl = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
   dispatch({ type: DELETE_SHORT_URL_START });
 
-  const { selectedServer } = getState();
-  const { deleteShortUrl } = buildShlinkApiClient(selectedServer);
+  const { deleteShortUrl } = await buildShlinkApiClient(getState);
 
   try {
     await deleteShortUrl(shortCode);
@@ -70,6 +48,6 @@ export const deleteShortUrl = (buildShlinkApiClient) => (shortCode) => async (di
   }
 };
 
-export const resetDeleteShortUrl = () => ({ type: RESET_DELETE_SHORT_URL });
+export const resetDeleteShortUrl = createAction(RESET_DELETE_SHORT_URL);
 
 export const shortUrlDeleted = (shortCode) => ({ type: SHORT_URL_DELETED, shortCode });

src/short-urls/reducers/shortUrlTags.js

@@ -1,13 +1,13 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
-import { pick } from 'ramda';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
 export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
 export const EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS';
 export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
 export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlTagsType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -16,47 +16,26 @@ export const shortUrlTagsType = PropTypes.shape({
   error: PropTypes.bool.isRequired,
 });
 
-const defaultState = {
+const initialState = {
   shortCode: null,
   tags: [],
   saving: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case EDIT_SHORT_URL_TAGS_START:
-      return {
-        ...state,
-        saving: true,
-        error: false,
-      };
-    case EDIT_SHORT_URL_TAGS_ERROR:
-      return {
-        ...state,
-        saving: false,
-        error: true,
-      };
-    case EDIT_SHORT_URL_TAGS:
-      return {
-        ...pick([ 'shortCode', 'tags' ], action),
-        saving: false,
-        error: false,
-      };
-    case RESET_EDIT_SHORT_URL_TAGS:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [EDIT_SHORT_URL_TAGS_START]: (state) => ({ ...state, saving: true, error: false }),
+  [EDIT_SHORT_URL_TAGS_ERROR]: (state) => ({ ...state, saving: false, error: true }),
+  [EDIT_SHORT_URL_TAGS]: (state, { shortCode, tags }) => ({ shortCode, tags, saving: false, error: false }),
+  [RESET_EDIT_SHORT_URL_TAGS]: () => initialState,
+}, initialState);
 
 export const editShortUrlTags = (buildShlinkApiClient) => (shortCode, tags) => async (dispatch, getState) => {
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { updateShortUrlTags } = await buildShlinkApiClient(getState);
 
   try {
-    const normalizedTags = await shlinkApiClient.updateShortUrlTags(shortCode, tags);
+    const normalizedTags = await updateShortUrlTags(shortCode, tags);
 
     dispatch({ tags: normalizedTags, shortCode, type: EDIT_SHORT_URL_TAGS });
   } catch (e) {
@@ -66,7 +45,7 @@ export const editShortUrlTags = (buildShlinkApiClient) => (shortCode, tags) => a
   }
 };
 
-export const resetShortUrlsTags = () => ({ type: RESET_EDIT_SHORT_URL_TAGS });
+export const resetShortUrlsTags = createAction(RESET_EDIT_SHORT_URL_TAGS);
 
 export const shortUrlTagsEdited = (shortCode, tags) => ({
   tags,

src/short-urls/reducers/shortUrlsList.js

@@ -1,13 +1,14 @@
+import { handleActions } from 'redux-actions';
 import { assoc, assocPath, propEq, reject } from 'ramda';
 import PropTypes from 'prop-types';
 import { SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { SHORT_URL_DELETED } from './shortUrlDeletion';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
 export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR';
 export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlType = PropTypes.shape({
   shortCode: PropTypes.string,
@@ -22,45 +23,29 @@ const initialState = {
   error: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case LIST_SHORT_URLS_START:
-      return { ...state, loading: true, error: false };
-    case LIST_SHORT_URLS:
-      return {
-        loading: false,
-        error: false,
-        shortUrls: action.shortUrls,
-      };
-    case LIST_SHORT_URLS_ERROR:
-      return {
-        loading: false,
-        error: true,
-        shortUrls: {},
-      };
-    case SHORT_URL_TAGS_EDITED:
-      const { data } = state.shortUrls;
+export default handleActions({
+  [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
+  [LIST_SHORT_URLS]: (state, { shortUrls }) => ({ loading: false, error: false, shortUrls }),
+  [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true, shortUrls: {} }),
+  [SHORT_URL_TAGS_EDITED]: (state, action) => { // eslint-disable-line object-shorthand
+    const { data } = state.shortUrls;
 
-      return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
-        shortUrl.shortCode === action.shortCode
-          ? assoc('tags', action.tags, shortUrl)
-          : shortUrl), state);
-    case SHORT_URL_DELETED:
-      return assocPath(
-        [ 'shortUrls', 'data' ],
-        reject(propEq('shortCode', action.shortCode), state.shortUrls.data),
-        state,
-      );
-    default:
-      return state;
-  }
-}
+    return assocPath([ 'shortUrls', 'data' ], data.map((shortUrl) =>
+      shortUrl.shortCode === action.shortCode
+        ? assoc('tags', action.tags, shortUrl)
+        : shortUrl), state);
+  },
+  [SHORT_URL_DELETED]: (state, action) => assocPath(
+    [ 'shortUrls', 'data' ],
+    reject(propEq('shortCode', action.shortCode), state.shortUrls.data),
+    state,
+  ),
+}, initialState);
 
 export const listShortUrls = (buildShlinkApiClient) => (params = {}) => async (dispatch, getState) => {
   dispatch({ type: LIST_SHORT_URLS_START });
 
-  const { selectedServer = {} } = getState();
-  const { listShortUrls } = buildShlinkApiClient(selectedServer);
+  const { listShortUrls } = await buildShlinkApiClient(getState);
 
   try {
     const shortUrls = await listShortUrls(params);

src/short-urls/reducers/shortUrlsListParams.js

@@ -1,3 +1,4 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { LIST_SHORT_URLS } from './shortUrlsList';
 
@@ -9,17 +10,11 @@ export const shortUrlsListParamsType = PropTypes.shape({
   searchTerm: PropTypes.string,
 });
 
-const defaultState = { page: '1' };
+const initialState = { page: '1' };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case LIST_SHORT_URLS:
-      return { ...state, ...action.params };
-    case RESET_SHORT_URL_PARAMS:
-      return defaultState;
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [LIST_SHORT_URLS]: (state, { params }) => ({ ...state, ...params }),
+  [RESET_SHORT_URL_PARAMS]: () => initialState,
+}, initialState);
 
-export const resetShortUrlParams = () => ({ type: RESET_SHORT_URL_PARAMS });
+export const resetShortUrlParams = createAction(RESET_SHORT_URL_PARAMS);

src/short-urls/services/provideServices.js

@@ -39,7 +39,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'TagsSelector', 'CreateShortUrlResult');
   bottle.decorator(
     'CreateShortUrl',
-    connect([ 'shortUrlCreationResult' ], [ 'createShortUrl', 'resetCreateShortUrl' ])
+    connect([ 'shortUrlCreationResult', 'selectedServer' ], [ 'createShortUrl', 'resetCreateShortUrl' ])
   );
 
   bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);

src/tags/reducers/tagDelete.js

@@ -1,52 +1,36 @@
+import { handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const DELETE_TAG_START = 'shlink/deleteTag/DELETE_TAG_START';
 export const DELETE_TAG_ERROR = 'shlink/deleteTag/DELETE_TAG_ERROR';
 export const DELETE_TAG = 'shlink/deleteTag/DELETE_TAG';
 export const TAG_DELETED = 'shlink/deleteTag/TAG_DELETED';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const tagDeleteType = PropTypes.shape({
   deleting: PropTypes.bool,
   error: PropTypes.bool,
 });
 
-const defaultState = {
+const initialState = {
   deleting: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case DELETE_TAG_START:
-      return {
-        deleting: true,
-        error: false,
-      };
-    case DELETE_TAG_ERROR:
-      return {
-        deleting: false,
-        error: true,
-      };
-    case DELETE_TAG:
-      return {
-        deleting: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [DELETE_TAG_START]: () => ({ deleting: true, error: false }),
+  [DELETE_TAG_ERROR]: () => ({ deleting: false, error: true }),
+  [DELETE_TAG]: () => ({ deleting: false, error: false }),
+}, initialState);
 
 export const deleteTag = (buildShlinkApiClient) => (tag) => async (dispatch, getState) => {
   dispatch({ type: DELETE_TAG_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { deleteTags } = await buildShlinkApiClient(getState);
 
   try {
-    await shlinkApiClient.deleteTags([ tag ]);
+    await deleteTags([ tag ]);
     dispatch({ type: DELETE_TAG });
   } catch (e) {
     dispatch({ type: DELETE_TAG_ERROR });

src/tags/reducers/tagEdit.js

@@ -1,44 +1,30 @@
 import { pick } from 'ramda';
+import { handleActions } from 'redux-actions';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const EDIT_TAG_START = 'shlink/editTag/EDIT_TAG_START';
 export const EDIT_TAG_ERROR = 'shlink/editTag/EDIT_TAG_ERROR';
 export const EDIT_TAG = 'shlink/editTag/EDIT_TAG';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const TAG_EDITED = 'shlink/editTag/TAG_EDITED';
 
-const defaultState = {
+const initialState = {
   oldName: '',
   newName: '',
   editing: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case EDIT_TAG_START:
-      return {
-        ...state,
-        editing: true,
-        error: false,
-      };
-    case EDIT_TAG_ERROR:
-      return {
-        ...state,
-        editing: false,
-        error: true,
-      };
-    case EDIT_TAG:
-      return {
-        ...pick([ 'oldName', 'newName' ], action),
-        editing: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [EDIT_TAG_START]: (state) => ({ ...state, editing: true, error: false }),
+  [EDIT_TAG_ERROR]: (state) => ({ ...state, editing: false, error: true }),
+  [EDIT_TAG]: (state, action) => ({
+    ...pick([ 'oldName', 'newName' ], action),
+    editing: false,
+    error: false,
+  }),
+}, initialState);
 
 export const editTag = (buildShlinkApiClient, colorGenerator) => (oldName, newName, color) => async (
   dispatch,
@@ -46,11 +32,10 @@ export const editTag = (buildShlinkApiClient, colorGenerator) => (oldName, newNa
 ) => {
   dispatch({ type: EDIT_TAG_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { editTag } = await buildShlinkApiClient(getState);
 
   try {
-    await shlinkApiClient.editTag(oldName, newName);
+    await editTag(oldName, newName);
     colorGenerator.setColorForKey(newName, color);
     dispatch({ type: EDIT_TAG, oldName, newName });
   } catch (e) {

src/tags/reducers/tagsList.js

@@ -1,73 +1,47 @@
+import { handleActions } from 'redux-actions';
 import { isEmpty, reject } from 'ramda';
-import { buildShlinkApiClientWithAxios as buildShlinkApiClient } from '../../utils/services/ShlinkApiClientBuilder';
 import { TAG_DELETED } from './tagDelete';
 import { TAG_EDITED } from './tagEdit';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
-const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
-const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
-const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
-const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
+export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
+export const LIST_TAGS_ERROR = 'shlink/tagsList/LIST_TAGS_ERROR';
+export const LIST_TAGS = 'shlink/tagsList/LIST_TAGS';
+export const FILTER_TAGS = 'shlink/tagsList/FILTER_TAGS';
+/* eslint-enable padding-line-between-statements */
 
-const defaultState = {
+const initialState = {
   tags: [],
   filteredTags: [],
   loading: false,
   error: false,
 };
 
-export default function reducer(state = defaultState, action) {
-  switch (action.type) {
-    case LIST_TAGS_START:
-      return {
-        ...state,
-        loading: true,
-        error: false,
-      };
-    case LIST_TAGS_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case LIST_TAGS:
-      return {
-        tags: action.tags,
-        filteredTags: action.tags,
-        loading: false,
-        error: false,
-      };
-    case TAG_DELETED:
-      return {
-        ...state,
+const renameTag = (oldName, newName) => (tag) => tag === oldName ? newName : tag;
+const rejectTag = (tags, tagToReject) => reject((tag) => tag === tagToReject, tags);
 
-        // FIXME This should be optimized somehow...
-        tags: reject((tag) => tag === action.tag, state.tags),
-        filteredTags: reject((tag) => tag === action.tag, state.filteredTags),
-      };
-    case TAG_EDITED:
-      const renameTag = (tag) => tag === action.oldName ? action.newName : tag;
+export default handleActions({
+  [LIST_TAGS_START]: (state) => ({ ...state, loading: true, error: false }),
+  [LIST_TAGS_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+  [LIST_TAGS]: (state, { tags }) => ({ tags, filteredTags: tags, loading: false, error: false }),
+  [TAG_DELETED]: (state, { tag }) => ({
+    ...state,
+    tags: rejectTag(state.tags, tag),
+    filteredTags: rejectTag(state.filteredTags, tag),
+  }),
+  [TAG_EDITED]: (state, { oldName, newName }) => ({
+    ...state,
+    tags: state.tags.map(renameTag(oldName, newName)).sort(),
+    filteredTags: state.filteredTags.map(renameTag(oldName, newName)).sort(),
+  }),
+  [FILTER_TAGS]: (state, { searchTerm }) => ({
+    ...state,
+    filteredTags: state.tags.filter((tag) => tag.toLowerCase().match(searchTerm)),
+  }),
+}, initialState);
 
-      return {
-        ...state,
-
-        // FIXME This should be optimized somehow...
-        tags: state.tags.map(renameTag).sort(),
-        filteredTags: state.filteredTags.map(renameTag).sort(),
-      };
-    case FILTER_TAGS:
-      return {
-        ...state,
-        filteredTags: state.tags.filter((tag) => tag.toLowerCase().match(action.searchTerm)),
-      };
-    default:
-      return state;
-  }
-}
-
-export const _listTags = (buildShlinkApiClient, force = false) => async (dispatch, getState) => {
-  const { tagsList, selectedServer } = getState();
+export const listTags = (buildShlinkApiClient, force = true) => () => async (dispatch, getState) => {
+  const { tagsList } = getState();
 
   if (!force && (tagsList.loading || !isEmpty(tagsList.tags))) {
     return;
@@ -76,8 +50,8 @@ export const _listTags = (buildShlinkApiClient, force = false) => async (dispatc
   dispatch({ type: LIST_TAGS_START });
 
   try {
-    const shlinkApiClient = buildShlinkApiClient(selectedServer);
-    const tags = await shlinkApiClient.listTags();
+    const { listTags } = await buildShlinkApiClient(getState);
+    const tags = await listTags();
 
     dispatch({ tags, type: LIST_TAGS });
   } catch (e) {
@@ -85,10 +59,6 @@ export const _listTags = (buildShlinkApiClient, force = false) => async (dispatc
   }
 };
 
-export const listTags = () => _listTags(buildShlinkApiClient);
-
-export const forceListTags = () => _listTags(buildShlinkApiClient, true);
-
 export const filterTags = (searchTerm) => ({
   type: FILTER_TAGS,
   searchTerm,

src/tags/services/provideServices.js

@@ -3,7 +3,7 @@ import TagCard from '../TagCard';
 import DeleteTagConfirmModal from '../helpers/DeleteTagConfirmModal';
 import EditTagModal from '../helpers/EditTagModal';
 import TagsList from '../TagsList';
-import { filterTags, forceListTags, listTags } from '../reducers/tagsList';
+import { filterTags, listTags } from '../reducers/tagsList';
 import { deleteTag, tagDeleted } from '../reducers/tagDelete';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 
@@ -24,9 +24,11 @@ const provideServices = (bottle, connect) => {
   bottle.decorator('TagsList', connect([ 'tagsList' ], [ 'forceListTags', 'filterTags' ]));
 
   // Actions
+  const listTagsActionFactory = (force) => ({ buildShlinkApiClient }) => listTags(buildShlinkApiClient, force);
+
+  bottle.factory('listTags', listTagsActionFactory(false));
+  bottle.factory('forceListTags', listTagsActionFactory(true));
   bottle.serviceFactory('filterTags', () => filterTags);
-  bottle.serviceFactory('forceListTags', () => forceListTags);
-  bottle.serviceFactory('listTags', () => listTags);
   bottle.serviceFactory('tagDeleted', () => tagDeleted);
   bottle.serviceFactory('tagEdited', () => tagEdited);
 

src/utils/Checkbox.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { v4 as uuid } from 'uuid';
+
+const propTypes = {
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
+  className: PropTypes.string,
+};
+
+const Checkbox = ({ checked, onChange, className, children }) => {
+  const id = uuid();
+  const onChecked = (e) => onChange(e.target.checked, e);
+
+  return (
+    <span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
+      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
+      <label className="custom-control-label" htmlFor={id}>{children}</label>
+    </span>
+  );
+};
+
+Checkbox.propTypes = propTypes;
+
+export default Checkbox;

src/utils/ExternalLink.js

@@ -1,19 +1,3 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
 
-const propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.node,
-};
-
-export default function ExternalLink(props) {
-  const { href, children, ...rest } = props;
-
-  return (
-    <a target="_blank" rel="noopener noreferrer" href={href} {...rest}>
-      {children || href}
-    </a>
-  );
-}
-
-ExternalLink.propTypes = propTypes;
+export default ExternalLink;

src/utils/ForVersion.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'ramda';
+import { compareVersions } from './utils';
+
+const propTypes = {
+  minVersion: PropTypes.string.isRequired,
+  currentServerVersion: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+const ForVersion = ({ minVersion, currentServerVersion, children }) =>
+  isEmpty(currentServerVersion) || compareVersions(currentServerVersion, '<', minVersion)
+    ? null
+    : <React.Fragment>{children}</React.Fragment>;
+
+ForVersion.propTypes = propTypes;
+
+export default ForVersion;

src/utils/services/ShlinkApiClient.js

@@ -2,12 +2,13 @@ import qs from 'qs';
 import { isEmpty, isNil, reject } from 'ramda';
 
 const API_VERSION = '1';
-const buildRestUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
+
+export const buildShlinkBaseUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
 
 export default class ShlinkApiClient {
   constructor(axios, baseUrl, apiKey) {
     this.axios = axios;
-    this._baseUrl = buildRestUrl(baseUrl);
+    this._baseUrl = buildShlinkBaseUrl(baseUrl);
     this._apiKey = apiKey || '';
   }
 
@@ -50,6 +51,8 @@ export default class ShlinkApiClient {
     this._performRequest('/tags', 'PUT', {}, { oldName, newName })
       .then(() => ({ oldName, newName }));
 
+  health = () => this._performRequest('/health', 'GET').then((resp) => resp.data);
+
   _performRequest = async (url, method = 'GET', query = {}, body = {}) =>
     await this.axios({
       method,

src/utils/services/ShlinkApiClientBuilder.js

@@ -1,9 +1,22 @@
-import * as axios from 'axios';
+import { wait } from '../utils';
 import ShlinkApiClient from './ShlinkApiClient';
 
 const apiClients = {};
 
-const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
+const getSelectedServerFromState = async (getState) => {
+  const { selectedServer } = getState();
+
+  if (!selectedServer) {
+    return wait(250).then(() => getSelectedServerFromState(getState));
+  }
+
+  return selectedServer;
+};
+
+const buildShlinkApiClient = (axios) => async (getStateOrSelectedServer) => {
+  const { url, apiKey } = typeof getStateOrSelectedServer === 'function'
+    ? await getSelectedServerFromState(getStateOrSelectedServer)
+    : getStateOrSelectedServer;
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {
@@ -14,5 +27,3 @@ const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
 };
 
 export default buildShlinkApiClient;
-
-export const buildShlinkApiClientWithAxios = buildShlinkApiClient(axios);

src/utils/utils.js

@@ -3,6 +3,8 @@ import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
 import marker from 'leaflet/dist/images/marker-icon.png';
 import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 import { range } from 'ramda';
+import { useState } from 'react';
+import { compare } from 'compare-versions';
 
 const TEN_ROUNDING_NUMBER = 10;
 const DEFAULT_TIMEOUT_DELAY = 2000;
@@ -44,3 +46,25 @@ export const fixLeafletIcons = () => {
 export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
 
 export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
+
+export const useToggle = (initialValue = false) => {
+  const [ flag, setFlag ] = useState(initialValue);
+
+  return [ flag, () => setFlag(!flag) ];
+};
+
+export const wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+export const compareVersions = (firstVersion, operator, secondVersion) => compare(
+  firstVersion,
+  secondVersion,
+  operator
+);
+
+export const versionIsValidSemVer = (version) => {
+  try {
+    return compareVersions(version, '=', version);
+  } catch (e) {
+    return false;
+  }
+};

src/visits/SortableBarGraph.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type } from 'ramda';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import SortingDropdown from '../utils/SortingDropdown';
 import PaginationDropdown from '../utils/PaginationDropdown';
 import { rangeOf, roundTen } from '../utils/utils';
+import SimplePaginator from '../common/SimplePaginator';
 import GraphCard from './GraphCard';
 
 const { max } = Math;
@@ -66,22 +66,9 @@ export default class SortableBarGraph extends React.Component {
 
   renderPagination(pagesCount) {
     const { currentPage } = this.state;
+    const setCurrentPage = (currentPage) => this.setState({ currentPage });
 
-    return (
-      <Pagination listClassName="flex-wrap mb-0">
-        <PaginationItem disabled={currentPage === 1}>
-          <PaginationLink previous tag="span" onClick={() => this.setState({ currentPage: currentPage - 1 })} />
-        </PaginationItem>
-        {rangeOf(pagesCount, (page) => (
-          <PaginationItem key={page} active={page === currentPage}>
-            <PaginationLink tag="span" onClick={() => this.setState({ currentPage: page })}>{page}</PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem disabled={currentPage >= pagesCount}>
-          <PaginationLink next tag="span" onClick={() => this.setState({ currentPage: currentPage + 1 })} />
-        </PaginationItem>
-      </Pagination>
-    );
+    return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
   }
 
   render() {

src/visits/reducers/shortUrlDetail.js

@@ -1,11 +1,12 @@
+import { handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { shortUrlType } from '../../short-urls/reducers/shortUrlsList';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
 export const GET_SHORT_URL_DETAIL_ERROR = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_ERROR';
 export const GET_SHORT_URL_DETAIL = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlDetailType = PropTypes.shape({
   shortUrl: shortUrlType,
@@ -19,38 +20,19 @@ const initialState = {
   error: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case GET_SHORT_URL_DETAIL_START:
-      return {
-        ...state,
-        loading: true,
-      };
-    case GET_SHORT_URL_DETAIL_ERROR:
-      return {
-        ...state,
-        loading: false,
-        error: true,
-      };
-    case GET_SHORT_URL_DETAIL:
-      return {
-        shortUrl: action.shortUrl,
-        loading: false,
-        error: false,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [GET_SHORT_URL_DETAIL_START]: (state) => ({ ...state, loading: true }),
+  [GET_SHORT_URL_DETAIL_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+  [GET_SHORT_URL_DETAIL]: (state, { shortUrl }) => ({ shortUrl, loading: false, error: false }),
+}, initialState);
 
 export const getShortUrlDetail = (buildShlinkApiClient) => (shortCode) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_DETAIL_START });
 
-  const { selectedServer } = getState();
-  const shlinkApiClient = buildShlinkApiClient(selectedServer);
+  const { getShortUrl } = await buildShlinkApiClient(getState);
 
   try {
-    const shortUrl = await shlinkApiClient.getShortUrl(shortCode);
+    const shortUrl = await getShortUrl(shortCode);
 
     dispatch({ shortUrl, type: GET_SHORT_URL_DETAIL });
   } catch (e) {

src/visits/reducers/shortUrlVisits.js

@@ -1,13 +1,14 @@
+import { createAction, handleActions } from 'redux-actions';
 import PropTypes from 'prop-types';
 import { flatten, prop, range, splitEvery } from 'ramda';
 
-/* eslint-disable padding-line-between-statements, newline-after-var */
+/* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START';
 export const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_ERROR';
 export const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
 export const GET_SHORT_URL_VISITS_LARGE = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_LARGE';
 export const GET_SHORT_URL_VISITS_CANCEL = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_CANCEL';
-/* eslint-enable padding-line-between-statements, newline-after-var */
+/* eslint-enable padding-line-between-statements */
 
 export const shortUrlVisitsType = PropTypes.shape({
   visits: PropTypes.array,
@@ -23,51 +24,35 @@ const initialState = {
   cancelLoad: false,
 };
 
-export default function reducer(state = initialState, action) {
-  switch (action.type) {
-    case GET_SHORT_URL_VISITS_START:
-      return {
-        ...state,
-        loading: true,
-        loadingLarge: false,
-        cancelLoad: false,
-      };
-    case GET_SHORT_URL_VISITS_ERROR:
-      return {
-        ...state,
-        loading: false,
-        loadingLarge: false,
-        error: true,
-        cancelLoad: false,
-      };
-    case GET_SHORT_URL_VISITS:
-      return {
-        visits: action.visits,
-        loading: false,
-        loadingLarge: false,
-        error: false,
-        cancelLoad: false,
-      };
-    case GET_SHORT_URL_VISITS_LARGE:
-      return {
-        ...state,
-        loadingLarge: true,
-      };
-    case GET_SHORT_URL_VISITS_CANCEL:
-      return {
-        ...state,
-        cancelLoad: true,
-      };
-    default:
-      return state;
-  }
-}
+export default handleActions({
+  [GET_SHORT_URL_VISITS_START]: (state) => ({
+    ...state,
+    loading: true,
+    loadingLarge: false,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS_ERROR]: (state) => ({
+    ...state,
+    loading: false,
+    loadingLarge: false,
+    error: true,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS]: (state, { visits }) => ({
+    visits,
+    loading: false,
+    loadingLarge: false,
+    error: false,
+    cancelLoad: false,
+  }),
+  [GET_SHORT_URL_VISITS_LARGE]: (state) => ({ ...state, loadingLarge: true }),
+  [GET_SHORT_URL_VISITS_CANCEL]: (state) => ({ ...state, cancelLoad: true }),
+}, initialState);
 
 export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) => async (dispatch, getState) => {
   dispatch({ type: GET_SHORT_URL_VISITS_START });
 
-  const { selectedServer } = getState();
-  const { getShortUrlVisits } = buildShlinkApiClient(selectedServer);
+  const { getShortUrlVisits } = await buildShlinkApiClient(getState);
   const itemsPerPage = 5000;
   const isLastPage = ({ currentPage, pagesCount }) => currentPage >= pagesCount;
 
@@ -124,4 +109,4 @@ export const getShortUrlVisits = (buildShlinkApiClient) => (shortCode, dates) =>
   }
 };
 
-export const cancelGetShortUrlVisits = () => ({ type: GET_SHORT_URL_VISITS_CANCEL });
+export const cancelGetShortUrlVisits = createAction(GET_SHORT_URL_VISITS_CANCEL);

stryker.conf.js

@@ -0,0 +1,22 @@
+const jestConfig = require(`${__dirname}/jest.config.js`);
+
+module.exports = (config) => config.set({
+  mutate: jestConfig.collectCoverageFrom,
+  mutator: 'javascript',
+  testRunner: 'jest',
+  reporters: [ 'progress', 'clear-text' ],
+  coverageAnalysis: 'off',
+  jest: {
+    projectType: 'custom',
+    config: jestConfig,
+    enableFindRelatedTests: true,
+  },
+  thresholds: {
+    high: 80,
+    low: 60,
+    break: null,
+  },
+  clearTextReporter: {
+    logTests: false,
+  },
+});

test/App.test.js

@@ -19,7 +19,6 @@ describe('<App />', () => {
 
   it('renders app main routes', () => {
     const routes = wrapper.find(Route);
-    const expectedRoutesCount = 4;
     const expectedPaths = [
       '/server/create',
       '/',
@@ -27,7 +26,7 @@ describe('<App />', () => {
     ];
 
     expect.assertions(expectedPaths.length + 1);
-    expect(routes).toHaveLength(expectedRoutesCount);
+    expect(routes).toHaveLength(4);
     expectedPaths.forEach((path, index) => {
       expect(routes.at(index).prop('path')).toEqual(path);
     });

test/common/AsideMenu.test.js

@@ -16,9 +16,8 @@ describe('<AsideMenu />', () => {
 
   it('contains links to different sections', () => {
     const links = wrapped.find(NavLink);
-    const expectedLength = 3;
 
-    expect(links).toHaveLength(expectedLength);
+    expect(links).toHaveLength(3);
     links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
   });
 

test/common/Home.test.js

@@ -1,16 +1,13 @@
 import { shallow } from 'enzyme';
 import { values } from 'ramda';
 import React from 'react';
-import * as sinon from 'sinon';
 import Home from '../../src/common/Home';
 
 describe('<Home />', () => {
   let wrapped;
   const defaultProps = {
-    resetSelectedServer() {
-      return '';
-    },
-    servers: {},
+    resetSelectedServer: () => '',
+    servers: { loading: false, list: {} },
   };
   const createComponent = (props) => {
     const actualProps = { ...defaultProps, ...props };
@@ -28,11 +25,11 @@ describe('<Home />', () => {
   });
 
   it('resets selected server when mounted', () => {
-    const resetSelectedServer = sinon.spy();
+    const resetSelectedServer = jest.fn();
 
-    expect(resetSelectedServer.called).toEqual(false);
+    expect(resetSelectedServer).not.toHaveBeenCalled();
     createComponent({ resetSelectedServer });
-    expect(resetSelectedServer.called).toEqual(true);
+    expect(resetSelectedServer).toHaveBeenCalled();
   });
 
   it('shows link to create server when no servers exist', () => {
@@ -42,10 +39,22 @@ describe('<Home />', () => {
     expect(wrapped.find('ListGroup')).toHaveLength(0);
   });
 
+  it('shows message when loading servers', () => {
+    const wrapped = createComponent({ servers: { loading: true } });
+    const span = wrapped.find('span');
+
+    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 = {
-      1: { name: 'foo', id: '123' },
-      2: { name: 'bar', id: '456' },
+      loading: false,
+      list: {
+        1: { name: 'foo', id: '123' },
+        2: { name: 'bar', id: '456' },
+      },
     };
     const wrapped = createComponent({ servers });
 

test/common/ScrollToTop.test.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import createScrollToTop from '../../src/common/ScrollToTop';
 
 describe('<ScrollToTop />', () => {
   let wrapper;
   const window = {
-    scrollTo: sinon.spy(),
+    scrollTo: jest.fn(),
   };
 
   beforeEach(() => {
@@ -17,13 +16,13 @@ describe('<ScrollToTop />', () => {
 
   afterEach(() => {
     wrapper.unmount();
-    window.scrollTo.resetHistory();
+    window.scrollTo.mockReset();
   });
 
   it('just renders children', () => expect(wrapper.text()).toEqual('Foobar'));
 
   it('scrolls to top when location changes', () => {
     wrapper.instance().componentDidUpdate({ location: { href: 'bar' } });
-    expect(window.scrollTo.calledOnce).toEqual(true);
+    expect(window.scrollTo).toHaveBeenCalledTimes(1);
   });
 });

test/common/SimplePaginator.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity } from 'ramda';
+import each from 'jest-each';
+import { PaginationItem } from 'reactstrap';
+import SimplePaginator, { ellipsis } from '../../src/common/SimplePaginator';
+
+describe('<SimplePaginator />', () => {
+  let wrapper;
+  const createWrapper = (pagesCount, currentPage = 1) => {
+    wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  each([ -3, -2, 0, 1 ]).it('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
+    expect(createWrapper(pagesCount).text()).toEqual('');
+  });
+
+  describe('ellipsis are rendered where expected', () => {
+    const getItemsForPages = (pagesCount, currentPage) => {
+      const paginator = createWrapper(pagesCount, currentPage);
+      const items = paginator.find(PaginationItem);
+      const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ellipsis));
+
+      return { items, itemsWithEllipsis };
+    };
+
+    it('renders first ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
+
+      expect(items.at(2).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(1);
+    });
+
+    it('renders last ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
+
+      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(1);
+    });
+
+    it('renders both ellipsis', () => {
+      const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
+
+      expect(items.at(2).html()).toContain(ellipsis);
+      expect(items.at(items.length - 3).html()).toContain(ellipsis);
+      expect(itemsWithEllipsis).toHaveLength(2);
+    });
+  });
+});

test/servers/CreateServer.test.js

@@ -1,20 +1,18 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import sinon from 'sinon';
 import createServerConstruct from '../../src/servers/CreateServer';
 
 describe('<CreateServer />', () => {
   let wrapper;
   const ImportServersBtn = () => '';
-  const createServerMock = sinon.fake();
+  const createServerMock = jest.fn();
   const historyMock = {
-    push: sinon.fake(),
+    push: jest.fn(),
   };
 
   beforeEach(() => {
-    createServerMock.resetHistory();
-    historyMock.push.resetHistory();
+    createServerMock.mockReset();
 
     const CreateServer = createServerConstruct(ImportServersBtn);
 
@@ -44,8 +42,8 @@ describe('<CreateServer />', () => {
       return '';
     } });
 
-    expect(createServerMock.callCount).toEqual(1);
-    expect(historyMock.push.callCount).toEqual(1);
+    expect(createServerMock).toHaveBeenCalledTimes(1);
+    expect(historyMock.push).toHaveBeenCalledTimes(1);
   });
 
   it('updates state when inputs are changed', () => {

test/servers/DeleteServerModal.test.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import DeleteServerModal from '../../src/servers/DeleteServerModal';
 
 describe('<DeleteServerModal />', () => {
   let wrapper;
-  const deleteServerMock = sinon.fake();
-  const historyMock = { push: sinon.fake() };
-  const toggleMock = sinon.fake();
+  const deleteServerMock = jest.fn();
+  const historyMock = { push: jest.fn() };
+  const toggleMock = jest.fn();
   const serverName = 'the_server_name';
 
   beforeEach(() => {
-    toggleMock.resetHistory();
-    deleteServerMock.resetHistory();
-    historyMock.push.resetHistory();
+    deleteServerMock.mockReset();
+    toggleMock.mockReset();
+    historyMock.push.mockReset();
 
     wrapper = shallow(
       <DeleteServerModal
@@ -48,9 +47,9 @@ describe('<DeleteServerModal />', () => {
 
     cancelBtn.simulate('click');
 
-    expect(toggleMock.callCount).toEqual(1);
-    expect(deleteServerMock.callCount).toEqual(0);
-    expect(historyMock.push.callCount).toEqual(0);
+    expect(toggleMock).toHaveBeenCalledTimes(1);
+    expect(deleteServerMock).not.toHaveBeenCalled();
+    expect(historyMock.push).not.toHaveBeenCalled();
   });
 
   it('deletes server when clicking accept button', () => {
@@ -58,8 +57,8 @@ describe('<DeleteServerModal />', () => {
 
     acceptBtn.simulate('click');
 
-    expect(toggleMock.callCount).toEqual(1);
-    expect(deleteServerMock.callCount).toEqual(1);
-    expect(historyMock.push.callCount).toEqual(1);
+    expect(toggleMock).toHaveBeenCalledTimes(1);
+    expect(deleteServerMock).toHaveBeenCalledTimes(1);
+    expect(historyMock.push).toHaveBeenCalledTimes(1);
   });
 });

test/servers/ServersDropdown.test.js

@@ -8,19 +8,25 @@ describe('<ServersDropdown />', () => {
   let wrapped;
   let ServersDropdown;
   const servers = {
-    '1a': { name: 'foo', id: 1 },
-    '2b': { name: 'bar', id: 2 },
-    '3c': { name: 'baz', id: 3 },
+    list: {
+      '1a': { name: 'foo', id: 1 },
+      '2b': { name: 'bar', id: 2 },
+      '3c': { name: 'baz', id: 3 },
+    },
+    loading: false,
+  };
+  const history = {
+    push: jest.fn(),
   };
 
   beforeEach(() => {
     ServersDropdown = serversDropdownCreator({});
-    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} />);
+    wrapped = shallow(<ServersDropdown servers={servers} listServers={identity} history={history} />);
   });
   afterEach(() => wrapped.unmount());
 
-  it('contains the list of servers', () =>
-    expect(wrapped.find(DropdownItem).filter('[to]')).toHaveLength(values(servers).length));
+  it('contains the list of servers, the divider and the export button', () =>
+    expect(wrapped.find(DropdownItem)).toHaveLength(values(servers.list).length + 2));
 
   it('contains a toggle with proper title', () =>
     expect(wrapped.find(DropdownToggle)).toHaveLength(1));
@@ -32,12 +38,25 @@ describe('<ServersDropdown />', () => {
     expect(items.filter('.servers-dropdown__export-item')).toHaveLength(1);
   });
 
-  it('contains a message when no servers exist yet', () => {
-    wrapped = shallow(<ServersDropdown servers={{}} listServers={identity} />);
+  it('shows a message when no servers exist yet', () => {
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: false, list: {} }} listServers={identity} history={history} />
+    );
     const item = wrapped.find(DropdownItem);
 
     expect(item).toHaveLength(1);
     expect(item.prop('disabled')).toEqual(true);
     expect(item.find('i').text()).toEqual('Add a server first...');
   });
+
+  it('shows a message when loading', () => {
+    wrapped = shallow(
+      <ServersDropdown servers={{ loading: true, list: {} }} listServers={identity} history={history} />
+    );
+    const item = wrapped.find(DropdownItem);
+
+    expect(item).toHaveLength(1);
+    expect(item.prop('disabled')).toEqual(true);
+    expect(item.find('i').text()).toEqual('Trying to load servers...');
+  });
 });

test/servers/helpers/ImportServersBtn.test.js

@@ -1,25 +1,24 @@
 import React from 'react';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import importServersBtnConstruct from '../../../src/servers/helpers/ImportServersBtn';
 
 describe('<ImportServersBtn />', () => {
   let wrapper;
-  const onImportMock = sinon.fake();
-  const createServersMock = sinon.fake();
+  const onImportMock = jest.fn();
+  const createServersMock = jest.fn();
   const serversImporterMock = {
-    importServersFromFile: sinon.fake.returns(Promise.resolve([])),
+    importServersFromFile: jest.fn().mockResolvedValue([]),
   };
   const fileRef = {
-    current: { click: sinon.fake() },
+    current: { click: jest.fn() },
   };
 
   beforeEach(() => {
-    onImportMock.resetHistory();
-    createServersMock.resetHistory();
-    serversImporterMock.importServersFromFile.resetHistory();
-    fileRef.current.click.resetHistory();
+    onImportMock.mockReset();
+    createServersMock.mockReset();
+    serversImporterMock.importServersFromFile.mockClear();
+    fileRef.current.click.mockReset();
 
     const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
 
@@ -40,7 +39,7 @@ describe('<ImportServersBtn />', () => {
 
     btn.simulate('click');
 
-    expect(fileRef.current.click.callCount).toEqual(1);
+    expect(fileRef.current.click).toHaveBeenCalledTimes(1);
   });
 
   it('imports servers when file input changes', (done) => {
@@ -49,9 +48,9 @@ describe('<ImportServersBtn />', () => {
     file.simulate('change', { target: { files: [ '' ] } });
 
     setImmediate(() => {
-      expect(serversImporterMock.importServersFromFile.callCount).toEqual(1);
-      expect(createServersMock.callCount).toEqual(1);
-      expect(onImportMock.callCount).toEqual(1);
+      expect(serversImporterMock.importServersFromFile).toHaveBeenCalledTimes(1);
+      expect(createServersMock).toHaveBeenCalledTimes(1);
+      expect(onImportMock).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/servers/reducers/selectedServer.test.js

@@ -1,17 +1,16 @@
-import * as sinon from 'sinon';
+import each from 'jest-each';
 import reducer, {
   selectServer,
   resetSelectedServer,
   RESET_SELECTED_SERVER,
   SELECT_SERVER,
+  MAX_FALLBACK_VERSION,
+  MIN_FALLBACK_VERSION,
 } from '../../../src/servers/reducers/selectedServer';
 import { RESET_SHORT_URL_PARAMS } from '../../../src/short-urls/reducers/shortUrlsListParams';
 
 describe('selectedServerReducer', () => {
   describe('reducer', () => {
-    it('returns default when action is not handled', () =>
-      expect(reducer(null, { type: 'unknown' })).toEqual(null));
-
     it('returns default when action is RESET_SELECTED_SERVER', () =>
       expect(reducer(null, { type: RESET_SELECTED_SERVER })).toEqual(null));
 
@@ -33,32 +32,55 @@ describe('selectedServerReducer', () => {
     const selectedServer = {
       id: serverId,
     };
+    const version = '1.19.0';
     const ServersServiceMock = {
-      findServerById: sinon.fake.returns(selectedServer),
+      findServerById: jest.fn(() => selectedServer),
     };
+    const apiClientMock = {
+      health: jest.fn(),
+    };
+    const buildApiClient = jest.fn().mockResolvedValue(apiClientMock);
+    const dispatch = jest.fn();
 
-    afterEach(() => {
-      ServersServiceMock.findServerById.resetHistory();
+    afterEach(jest.clearAllMocks);
+
+    each([
+      [ version, version ],
+      [ 'latest', MAX_FALLBACK_VERSION ],
+      [ '%invalid_semver%', MIN_FALLBACK_VERSION ],
+    ]).it('dispatches proper actions', async (serverVersion, expectedVersion) => {
+      const expectedSelectedServer = {
+        ...selectedServer,
+        version: expectedVersion,
+      };
+
+      apiClientMock.health.mockResolvedValue({ version: serverVersion });
+
+      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 });
     });
 
-    it('dispatches proper actions', () => {
-      const dispatch = sinon.spy();
-      const expectedDispatchCalls = 2;
+    it('invokes dependencies', async () => {
+      await selectServer(ServersServiceMock, buildApiClient)(serverId)(() => {});
 
-      selectServer(ServersServiceMock)(serverId)(dispatch);
-
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.firstCall.calledWith({ type: RESET_SHORT_URL_PARAMS })).toEqual(true);
-      expect(dispatch.secondCall.calledWith({
-        type: SELECT_SERVER,
-        selectedServer,
-      })).toEqual(true);
+      expect(ServersServiceMock.findServerById).toHaveBeenCalledTimes(1);
+      expect(buildApiClient).toHaveBeenCalledTimes(1);
     });
 
-    it('invokes dependencies', () => {
-      selectServer(ServersServiceMock)(serverId)(() => {});
+    it('falls back to min version when health endpoint fails', async () => {
+      const expectedSelectedServer = {
+        ...selectedServer,
+        version: MIN_FALLBACK_VERSION,
+      };
 
-      expect(ServersServiceMock.findServerById.callCount).toEqual(1);
+      apiClientMock.health.mockRejectedValue({});
+
+      await selectServer(ServersServiceMock, buildApiClient)(serverId)(dispatch);
+
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, selectedServer: expectedSelectedServer });
     });
   });
 });

test/servers/reducers/server.test.js

@@ -1,51 +1,100 @@
-import * as sinon from 'sinon';
 import { values } from 'ramda';
+import each from 'jest-each';
 import reducer, {
   createServer,
   deleteServer,
   listServers,
   createServers,
-  FETCH_SERVERS,
+  FETCH_SERVERS, FETCH_SERVERS_START,
 } from '../../../src/servers/reducers/server';
 
 describe('serverReducer', () => {
-  const servers = {
+  const list = {
     abc123: { id: 'abc123' },
     def456: { id: 'def456' },
   };
-  const expectedFetchServersResult = { type: FETCH_SERVERS, servers };
+  const expectedFetchServersResult = { type: FETCH_SERVERS, list };
   const ServersServiceMock = {
-    listServers: sinon.fake.returns(servers),
-    createServer: sinon.fake(),
-    deleteServer: sinon.fake(),
-    createServers: sinon.fake(),
+    listServers: jest.fn(() => list),
+    createServer: jest.fn(),
+    deleteServer: jest.fn(),
+    createServers: jest.fn(),
   };
 
+  afterEach(jest.clearAllMocks);
+
   describe('reducer', () => {
     it('returns servers when action is FETCH_SERVERS', () =>
-      expect(reducer({}, { type: FETCH_SERVERS, servers })).toEqual(servers));
-
-    it('returns default when action is unknown', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
+      expect(reducer({}, { type: FETCH_SERVERS, list })).toEqual({ loading: false, list }));
   });
 
   describe('action creators', () => {
-    beforeEach(() => {
-      ServersServiceMock.listServers.resetHistory();
-      ServersServiceMock.createServer.resetHistory();
-      ServersServiceMock.deleteServer.resetHistory();
-      ServersServiceMock.createServers.resetHistory();
-    });
-
     describe('listServers', () => {
-      it('fetches servers and returns them as part of the action', () => {
-        const result = listServers(ServersServiceMock)();
+      const axios = { get: jest.fn() };
+      const dispatch = jest.fn();
+      const NoListServersServiceMock = { ...ServersServiceMock, listServers: jest.fn(() => ({})) };
 
-        expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
+      it('fetches servers from local storage when found', async () => {
+        await listServers(ServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, expectedFetchServersResult);
+        expect(ServersServiceMock.listServers).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
+        expect(axios.get).not.toHaveBeenCalled();
+      });
+
+      each([
+        [
+          Promise.resolve({
+            data: [
+              {
+                id: '111',
+                name: 'acel.me from servers.json',
+                url: 'https://acel.me',
+                apiKey: '07fb8a96-8059-4094-a24c-80a7d5e7e9b0',
+              },
+              {
+                id: '222',
+                name: 'Local from servers.json',
+                url: 'http://localhost:8000',
+                apiKey: '7a531c75-134e-4d5c-86e0-a71b7167b57a',
+              },
+            ],
+          }),
+          {
+            111: {
+              id: '111',
+              name: 'acel.me from servers.json',
+              url: 'https://acel.me',
+              apiKey: '07fb8a96-8059-4094-a24c-80a7d5e7e9b0',
+            },
+            222: {
+              id: '222',
+              name: 'Local from servers.json',
+              url: 'http://localhost:8000',
+              apiKey: '7a531c75-134e-4d5c-86e0-a71b7167b57a',
+            },
+          },
+        ],
+        [ Promise.resolve('<html></html>'), {}],
+        [ Promise.reject({}), {}],
+      ]).it('tries to fetch servers from remote when not found locally', async (mockedValue, expectedList) => {
+        axios.get.mockReturnValue(mockedValue);
+
+        await listServers(NoListServersServiceMock, axios)()(dispatch);
+
+        expect(dispatch).toHaveBeenCalledTimes(2);
+        expect(dispatch).toHaveBeenNthCalledWith(1, { type: FETCH_SERVERS_START });
+        expect(dispatch).toHaveBeenNthCalledWith(2, { type: FETCH_SERVERS, list: expectedList });
+        expect(NoListServersServiceMock.listServers).toHaveBeenCalledTimes(1);
+        expect(NoListServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(NoListServersServiceMock.createServers).toHaveBeenCalledTimes(1);
+        expect(axios.get).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -55,11 +104,11 @@ describe('serverReducer', () => {
         const result = createServer(ServersServiceMock, () => expectedFetchServersResult)(serverToCreate);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.createServer.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServer.firstCall.calledWith(serverToCreate)).toEqual(true);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
+        expect(ServersServiceMock.createServer).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServer).toHaveBeenCalledWith(serverToCreate);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
       });
     });
 
@@ -69,25 +118,25 @@ describe('serverReducer', () => {
         const result = deleteServer(ServersServiceMock, () => expectedFetchServersResult)(serverToDelete);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.called).toEqual(false);
-        expect(ServersServiceMock.deleteServer.calledOnce).toEqual(true);
-        expect(ServersServiceMock.deleteServer.firstCall.calledWith(serverToDelete)).toEqual(true);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.deleteServer).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.deleteServer).toHaveBeenCalledWith(serverToDelete);
       });
     });
 
     describe('createServer', () => {
       it('creates multiple servers and then fetches servers again', () => {
-        const serversToCreate = values(servers);
+        const serversToCreate = values(list);
         const result = createServers(ServersServiceMock, () => expectedFetchServersResult)(serversToCreate);
 
         expect(result).toEqual(expectedFetchServersResult);
-        expect(ServersServiceMock.listServers.called).toEqual(false);
-        expect(ServersServiceMock.createServer.called).toEqual(false);
-        expect(ServersServiceMock.createServers.calledOnce).toEqual(true);
-        expect(ServersServiceMock.createServers.firstCall.calledWith(serversToCreate)).toEqual(true);
-        expect(ServersServiceMock.deleteServer.called).toEqual(false);
+        expect(ServersServiceMock.listServers).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServer).not.toHaveBeenCalled();
+        expect(ServersServiceMock.createServers).toHaveBeenCalledTimes(1);
+        expect(ServersServiceMock.createServers).toHaveBeenCalledWith(serversToCreate);
+        expect(ServersServiceMock.deleteServer).not.toHaveBeenCalled();
       });
     });
   });

test/servers/services/ServersExporter.test.js

@@ -1,26 +1,25 @@
-import sinon from 'sinon';
 import ServersExporter from '../../../src/servers/services/ServersExporter';
 
 describe('ServersExporter', () => {
   const createLinkMock = () => ({
-    setAttribute: sinon.fake(),
-    click: sinon.fake(),
+    setAttribute: jest.fn(),
+    click: jest.fn(),
     style: {},
   });
   const createWindowMock = (isIe10 = true) => ({
     navigator: {
-      msSaveBlob: isIe10 ? sinon.fake() : undefined,
+      msSaveBlob: isIe10 ? jest.fn() : undefined,
     },
     document: {
-      createElement: sinon.fake.returns(createLinkMock()),
+      createElement: jest.fn(() => createLinkMock()),
       body: {
-        appendChild: sinon.fake(),
-        removeChild: sinon.fake(),
+        appendChild: jest.fn(),
+        removeChild: jest.fn(),
       },
     },
   });
   const serversServiceMock = {
-    listServers: sinon.fake.returns({
+    listServers: jest.fn(() => ({
       abc123: {
         id: 'abc123',
         name: 'foo',
@@ -29,10 +28,16 @@ describe('ServersExporter', () => {
         id: 'def456',
         name: 'bar',
       },
-    }),
+    })),
   };
   const createCsvjsonMock = (throwError = false) => ({
-    toCSV: throwError ? sinon.fake.throws('') : sinon.fake.returns(''),
+    toCSV: jest.fn(() => {
+      if (throwError) {
+        throw new Error('');
+      }
+
+      return '';
+    }),
   });
 
   describe('exportServers', () => {
@@ -40,10 +45,10 @@ describe('ServersExporter', () => {
 
     beforeEach(() => {
       originalConsole = global.console;
-      global.console = { error: sinon.fake() };
+      global.console = { error: jest.fn() };
       global.Blob = class Blob {};
       global.URL = { createObjectURL: () => '' };
-      serversServiceMock.listServers.resetHistory();
+      serversServiceMock.listServers.mockReset();
     });
     afterEach(() => {
       global.console = originalConsole;
@@ -59,8 +64,8 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(global.console.error.callCount).toEqual(1);
-      expect(csvjsonMock.toCSV.callCount).toEqual(1);
+      expect(global.console.error).toHaveBeenCalledTimes(1);
+      expect(csvjsonMock.toCSV).toHaveBeenCalledTimes(1);
     });
 
     it('makes use of msSaveBlob API when available', () => {
@@ -73,9 +78,9 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(serversServiceMock.listServers.callCount).toEqual(1);
-      expect(windowMock.navigator.msSaveBlob.callCount).toEqual(1);
-      expect(windowMock.document.createElement.callCount).toEqual(0);
+      expect(serversServiceMock.listServers).toHaveBeenCalledTimes(1);
+      expect(windowMock.navigator.msSaveBlob).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.createElement).not.toHaveBeenCalled();
     });
 
     it('makes use of download link API when available', () => {
@@ -88,10 +93,10 @@ describe('ServersExporter', () => {
 
       exporter.exportServers();
 
-      expect(serversServiceMock.listServers.callCount).toEqual(1);
-      expect(windowMock.document.createElement.callCount).toEqual(1);
-      expect(windowMock.document.body.appendChild.callCount).toEqual(1);
-      expect(windowMock.document.body.removeChild.callCount).toEqual(1);
+      expect(serversServiceMock.listServers).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.createElement).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.body.appendChild).toHaveBeenCalledTimes(1);
+      expect(windowMock.document.body.removeChild).toHaveBeenCalledTimes(1);
     });
   });
 });

test/servers/services/ServersImporter.test.js

@@ -1,14 +1,13 @@
-import sinon from 'sinon';
 import ServersImporter from '../../../src/servers/services/ServersImporter';
 
 describe('ServersImporter', () => {
   const servers = [{ name: 'foo' }, { name: 'bar' }];
   const csvjsonMock = {
-    toObject: sinon.fake.returns(servers),
+    toObject: jest.fn(() => servers),
   };
   const importer = new ServersImporter(csvjsonMock);
 
-  beforeEach(() => csvjsonMock.toObject.resetHistory());
+  beforeEach(() => csvjsonMock.toObject.mockClear());
 
   describe('importServersFromFile', () => {
     it('rejects with error if no file was provided', async () => {
@@ -28,7 +27,7 @@ describe('ServersImporter', () => {
     });
 
     it('reads file when a CSV is provided', async () => {
-      const readAsText = sinon.fake.returns('');
+      const readAsText = jest.fn(() => '');
 
       global.FileReader = class FileReader {
         constructor() {
@@ -40,8 +39,8 @@ describe('ServersImporter', () => {
 
       await importer.importServersFromFile({ type: 'text/csv' });
 
-      expect(readAsText.callCount).toEqual(1);
-      expect(csvjsonMock.toObject.callCount).toEqual(1);
+      expect(readAsText).toHaveBeenCalledTimes(1);
+      expect(csvjsonMock.toObject).toHaveBeenCalledTimes(1);
     });
   });
 });

test/servers/services/ServersService.test.js

@@ -1,5 +1,3 @@
-import sinon from 'sinon';
-import { last } from 'ramda';
 import ServersService from '../../../src/servers/services/ServersService';
 
 describe('ServersService', () => {
@@ -8,8 +6,8 @@ describe('ServersService', () => {
     def456: { id: 'def456' },
   };
   const createStorageMock = (returnValue) => ({
-    set: sinon.fake(),
-    get: sinon.fake.returns(returnValue),
+    set: jest.fn(),
+    get: jest.fn(() => returnValue),
   });
 
   describe('listServers', () => {
@@ -20,8 +18,8 @@ describe('ServersService', () => {
       const result = service.listServers();
 
       expect(result).toEqual({});
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
 
     it('returns value from storage when found', () => {
@@ -31,8 +29,8 @@ describe('ServersService', () => {
       const result = service.listServers();
 
       expect(result).toEqual(servers);
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
   });
 
@@ -44,8 +42,8 @@ describe('ServersService', () => {
       const result = service.findServerById('ghi789');
 
       expect(result).toBeUndefined();
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
 
     it('returns server from list when found', () => {
@@ -55,8 +53,8 @@ describe('ServersService', () => {
       const result = service.findServerById('abc123');
 
       expect(result).toEqual({ id: 'abc123' });
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(0);
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).not.toHaveBeenCalled();
     });
   });
 
@@ -67,9 +65,9 @@ describe('ServersService', () => {
 
       service.createServer({ id: 'ghi789' });
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         abc123: { id: 'abc123' },
         def456: { id: 'def456' },
         ghi789: { id: 'ghi789' },
@@ -84,9 +82,9 @@ describe('ServersService', () => {
 
       service.createServers([{ id: 'ghi789' }, { id: 'jkl123' }]);
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         abc123: { id: 'abc123' },
         def456: { id: 'def456' },
         ghi789: { id: 'ghi789' },
@@ -102,9 +100,9 @@ describe('ServersService', () => {
 
       service.deleteServer({ id: 'abc123' });
 
-      expect(storageMock.get.callCount).toEqual(1);
-      expect(storageMock.set.callCount).toEqual(1);
-      expect(last(storageMock.set.lastCall.args)).toEqual({
+      expect(storageMock.get).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledTimes(1);
+      expect(storageMock.set).toHaveBeenCalledWith(expect.anything(), {
         def456: { id: 'def456' },
       });
     });

test/short-urls/CreateShortUrl.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import moment from 'moment';
-import * as sinon from 'sinon';
 import { identity } from 'ramda';
 import createShortUrlsCreator from '../../src/short-urls/CreateShortUrl';
 import DateInput from '../../src/utils/DateInput';
@@ -12,7 +11,7 @@ describe('<CreateShortUrl />', () => {
   const shortUrlCreationResult = {
     loading: false,
   };
-  const createShortUrl = sinon.spy();
+  const createShortUrl = jest.fn();
 
   beforeEach(() => {
     const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => '');
@@ -23,7 +22,7 @@ describe('<CreateShortUrl />', () => {
   });
   afterEach(() => {
     wrapper.unmount();
-    createShortUrl.resetHistory();
+    createShortUrl.mockReset();
   });
 
   it('saves short URL with data set in form controls', (done) => {
@@ -33,6 +32,7 @@ describe('<CreateShortUrl />', () => {
     const urlInput = wrapper.find('.form-control-lg');
     const tagsInput = wrapper.find(TagsSelector);
     const customSlugInput = wrapper.find('#customSlug');
+    const domain = wrapper.find('#domain');
     const maxVisitsInput = wrapper.find('#maxVisits');
     const dateInputs = wrapper.find(DateInput);
     const validSinceInput = dateInputs.at(0);
@@ -41,6 +41,7 @@ describe('<CreateShortUrl />', () => {
     urlInput.simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
     tagsInput.simulate('change', [ 'tag_foo', 'tag_bar' ]);
     customSlugInput.simulate('change', { target: { value: 'my-slug' } });
+    domain.simulate('change', { target: { value: 'example.com' } });
     maxVisitsInput.simulate('change', { target: { value: '20' } });
     validSinceInput.simulate('change', validSince);
     validUntilInput.simulate('change', validUntil);
@@ -49,19 +50,17 @@ describe('<CreateShortUrl />', () => {
       const form = wrapper.find('form');
 
       form.simulate('submit', { preventDefault: identity });
-      expect(createShortUrl.callCount).toEqual(1);
-      expect(createShortUrl.getCall(0).args).toEqual(
-        [
-          {
-            longUrl: 'https://long-domain.com/foo/bar',
-            tags: [ 'tag_foo', 'tag_bar' ],
-            customSlug: 'my-slug',
-            validSince: validSince.format(),
-            validUntil: validUntil.format(),
-            maxVisits: '20',
-          },
-        ]
-      );
+      expect(createShortUrl).toHaveBeenCalledTimes(1);
+      expect(createShortUrl).toHaveBeenCalledWith({
+        longUrl: 'https://long-domain.com/foo/bar',
+        tags: [ 'tag_foo', 'tag_bar' ],
+        customSlug: 'my-slug',
+        domain: 'example.com',
+        validSince: validSince.format(),
+        validUntil: validUntil.format(),
+        maxVisits: '20',
+        findIfExists: false,
+      });
       done();
     });
   });

test/short-urls/SearchBar.test.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
 import searchBarCreator from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
 
 describe('<SearchBar />', () => {
   let wrapper;
-  const listShortUrlsMock = sinon.spy();
+  const listShortUrlsMock = jest.fn();
   const SearchBar = searchBarCreator({});
 
   afterEach(() => {
-    listShortUrlsMock.resetHistory();
-
-    if (wrapper) {
-      wrapper.unmount();
-    }
+    listShortUrlsMock.mockReset();
+    wrapper && wrapper.unmount();
   });
 
   it('renders a SearchField', () => {
@@ -42,9 +38,9 @@ describe('<SearchBar />', () => {
     wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
     const searchField = wrapper.find(SearchField);
 
-    expect(listShortUrlsMock.callCount).toEqual(0);
+    expect(listShortUrlsMock).not.toHaveBeenCalled();
     searchField.simulate('change');
-    expect(listShortUrlsMock.callCount).toEqual(1);
+    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 
   it('updates short URLs list when a tag is removed', () => {
@@ -53,8 +49,8 @@ describe('<SearchBar />', () => {
     );
     const tag = wrapper.find(Tag).first();
 
-    expect(listShortUrlsMock.callCount).toEqual(0);
+    expect(listShortUrlsMock).not.toHaveBeenCalled();
     tag.simulate('close');
-    expect(listShortUrlsMock.callCount).toEqual(1);
+    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/ShortUrlsList.test.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
+import shortUrlsListCreator, { SORTABLE_FIELDS } from '../../src/short-urls/ShortUrlsList';
+
+describe('<ShortUrlsList />', () => {
+  let wrapper;
+  const ShortUrlsRow = () => '';
+  const listShortUrlsMock = jest.fn();
+  const resetShortUrlParamsMock = jest.fn();
+
+  const ShortUrlsList = shortUrlsListCreator(ShortUrlsRow);
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlsList
+        listShortUrls={listShortUrlsMock}
+        resetShortUrlParams={resetShortUrlParamsMock}
+        shortUrlsListParams={{
+          page: '1',
+          tags: [ 'test tag' ],
+          searchTerm: 'example.com',
+        }}
+        match={{ params: {} }}
+        location={{}}
+        loading={false}
+        error={false}
+        shortUrlsList={
+          [
+            {
+              shortCode: 'testShortCode',
+              shortUrl: 'https://www.example.com/testShortUrl',
+              longUrl: 'https://www.example.com/testLongUrl',
+              tags: [ 'test tag' ],
+            },
+          ]
+        }
+      />
+    );
+  });
+
+  afterEach(() => {
+    listShortUrlsMock.mockReset();
+    resetShortUrlParamsMock.mockReset();
+    wrapper && wrapper.unmount();
+  });
+
+  it('wraps a ShortUrlsList with 1 ShortUrlsRow', () => {
+    expect(wrapper.find(ShortUrlsRow)).toHaveLength(1);
+  });
+
+  it('should render inner table by default', () => {
+    expect(wrapper.find('table')).toHaveLength(1);
+  });
+
+  it('should render table header by default', () => {
+    expect(wrapper.find('table').shallow().find('thead')).toHaveLength(1);
+  });
+
+  it('should render 6 table header cells by default', () => {
+    expect(wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th')).toHaveLength(6);
+  });
+
+  it('should render 6 table header cells without order by icon by default', () => {
+    const thElements = wrapper.find('table').shallow()
+      .find('thead').shallow()
+      .find('tr').shallow()
+      .find('th').map((e) => e.shallow());
+
+    for (const thElement of thElements) {
+      expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
+    }
+  });
+
+  it('should render 6 table header cells with conditional order by icon', () => {
+    const orderDirOptionToIconMap = {
+      ASC: caretUpIcon,
+      DESC: caretDownIcon,
+    };
+
+    for (const sortableField of Object.getOwnPropertyNames(SORTABLE_FIELDS)) {
+      wrapper.setState({ orderField: sortableField, orderDir: undefined });
+      const [ sortableThElement ] = wrapper.find('table').shallow()
+        .find('thead').shallow()
+        .find('tr').shallow()
+        .find('th')
+        .filterWhere(
+          (e) =>
+            e.text().includes(SORTABLE_FIELDS[sortableField])
+        );
+
+      const sortableThElementWrapper = shallow(sortableThElement);
+
+      expect(sortableThElementWrapper.find(FontAwesomeIcon)).toHaveLength(0);
+
+      for (const orderDir of Object.getOwnPropertyNames(orderDirOptionToIconMap)) {
+        wrapper.setState({ orderField: sortableField, orderDir });
+        const [ sortableThElement ] = wrapper.find('table').shallow()
+          .find('thead').shallow()
+          .find('tr').shallow()
+          .find('th')
+          .filterWhere(
+            (e) =>
+              e.text().includes(SORTABLE_FIELDS[sortableField])
+          );
+
+        const sortableThElementWrapper = shallow(sortableThElement);
+
+        expect(sortableThElementWrapper.find(FontAwesomeIcon)).toHaveLength(1);
+        expect(
+          sortableThElementWrapper.find(FontAwesomeIcon).prop('icon')
+        ).toEqual(orderDirOptionToIconMap[orderDir]);
+      }
+    }
+  });
+});

test/short-urls/UseExistingIfFoundInfoIcon.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Modal } from 'reactstrap';
+import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
+
+describe('<UseExistingIfFoundInfoIcon />', () => {
+  let wrapped;
+
+  beforeEach(() => {
+    wrapped = mount(<UseExistingIfFoundInfoIcon />);
+  });
+
+  afterEach(() => wrapped.unmount());
+
+  it('shows modal when icon is clicked', () => {
+    const icon = wrapped.find(FontAwesomeIcon);
+
+    expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
+    icon.simulate('click');
+    expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
+  });
+});

test/short-urls/helpers/CreateShortUrlResult.test.js

@@ -3,12 +3,11 @@ import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { Tooltip } from 'reactstrap';
-import * as sinon from 'sinon';
 import createCreateShortUrlResult from '../../../src/short-urls/helpers/CreateShortUrlResult';
 
 describe('<CreateShortUrlResult />', () => {
   let wrapper;
-  const stateFlagTimeout = sinon.spy();
+  const stateFlagTimeout = jest.fn();
   const createWrapper = (result, error = false) => {
     const CreateShortUrlResult = createCreateShortUrlResult(stateFlagTimeout);
 
@@ -18,7 +17,7 @@ describe('<CreateShortUrlResult />', () => {
   };
 
   afterEach(() => {
-    stateFlagTimeout.resetHistory();
+    stateFlagTimeout.mockReset();
     wrapper && wrapper.unmount();
   });
 
@@ -48,8 +47,8 @@ describe('<CreateShortUrlResult />', () => {
     const wrapper = createWrapper({ shortUrl: 'https://doma.in/abc123' });
     const copyBtn = wrapper.find(CopyToClipboard);
 
-    expect(stateFlagTimeout.callCount).toEqual(0);
+    expect(stateFlagTimeout).not.toHaveBeenCalled();
     copyBtn.simulate('copy');
-    expect(stateFlagTimeout.callCount).toEqual(1);
+    expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/helpers/DeleteShortUrlModal.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import * as sinon from 'sinon';
 import DeleteShortUrlModal from '../../../src/short-urls/helpers/DeleteShortUrlModal';
 
 describe('<DeleteShortUrlModal />', () => {
@@ -11,7 +10,7 @@ describe('<DeleteShortUrlModal />', () => {
     shortCode: 'abc123',
     originalUrl: 'https://long-domain.com/foo/bar',
   };
-  const deleteShortUrl = sinon.fake.returns(Promise.resolve());
+  const deleteShortUrl = jest.fn(() => Promise.resolve());
   const createWrapper = (shortUrlDeletion) => {
     wrapper = shallow(
       <DeleteShortUrlModal
@@ -30,7 +29,7 @@ describe('<DeleteShortUrlModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    deleteShortUrl.resetHistory();
+    deleteShortUrl.mockClear();
   });
 
   it('shows threshold error message when threshold error occurs', () => {
@@ -106,9 +105,9 @@ describe('<DeleteShortUrlModal />', () => {
     setImmediate(() => {
       const form = wrapper.find('form');
 
-      expect(deleteShortUrl.callCount).toEqual(0);
+      expect(deleteShortUrl).not.toHaveBeenCalled();
       form.simulate('submit', { preventDefault: identity });
-      expect(deleteShortUrl.callCount).toEqual(1);
+      expect(deleteShortUrl).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/short-urls/helpers/EditTagsModal.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { Modal } from 'reactstrap';
 import createEditTagsModal from '../../../src/short-urls/helpers/EditTagsModal';
 
@@ -8,10 +7,10 @@ describe('<EditTagsModal />', () => {
   let wrapper;
   const shortCode = 'abc123';
   const TagsSelector = () => '';
-  const editShortUrlTags = sinon.fake.resolves();
-  const shortUrlTagsEdited = sinon.fake();
-  const resetShortUrlsTags = sinon.fake();
-  const toggle = sinon.fake();
+  const editShortUrlTags = jest.fn(() => Promise.resolve());
+  const shortUrlTagsEdited = jest.fn();
+  const resetShortUrlsTags = jest.fn();
+  const toggle = jest.fn();
   const createWrapper = (shortUrlTags) => {
     const EditTagsModal = createEditTagsModal(TagsSelector);
 
@@ -37,10 +36,10 @@ describe('<EditTagsModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    editShortUrlTags.resetHistory();
-    shortUrlTagsEdited.resetHistory();
-    resetShortUrlsTags.resetHistory();
-    toggle.resetHistory();
+    editShortUrlTags.mockClear();
+    shortUrlTagsEdited.mockReset();
+    resetShortUrlsTags.mockReset();
+    toggle.mockReset();
   });
 
   it('resets tags when component is mounted', () => {
@@ -51,7 +50,7 @@ describe('<EditTagsModal />', () => {
       error: false,
     });
 
-    expect(resetShortUrlsTags.callCount).toEqual(1);
+    expect(resetShortUrlsTags).toHaveBeenCalledTimes(1);
   });
 
   it('renders tags selector and save button when loaded', () => {
@@ -92,12 +91,12 @@ describe('<EditTagsModal />', () => {
 
     saveBtn.simulate('click');
 
-    expect(editShortUrlTags.callCount).toEqual(1);
-    expect(editShortUrlTags.getCall(0).args).toEqual([ shortCode, []]);
+    expect(editShortUrlTags).toHaveBeenCalledTimes(1);
+    expect(editShortUrlTags).toHaveBeenCalledWith(shortCode, []);
 
     // Wrap this expect in a setImmediate since it is called as a result of an inner promise
     setImmediate(() => {
-      expect(toggle.callCount).toEqual(1);
+      expect(toggle).toHaveBeenCalledTimes(1);
       done();
     });
   });
@@ -112,7 +111,7 @@ describe('<EditTagsModal />', () => {
     const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
-    expect(shortUrlTagsEdited.callCount).toEqual(0);
+    expect(shortUrlTagsEdited).not.toHaveBeenCalled();
   });
 
   it('notifies tags have been edited when window is closed after saving', (done) => {
@@ -130,8 +129,8 @@ describe('<EditTagsModal />', () => {
     // Wrap this expect in a setImmediate since it is called as a result of an inner promise
     setImmediate(() => {
       modal.simulate('closed');
-      expect(shortUrlTagsEdited.callCount).toEqual(1);
-      expect(shortUrlTagsEdited.getCall(0).args).toEqual([ shortCode, []]);
+      expect(shortUrlTagsEdited).toHaveBeenCalledTimes(1);
+      expect(shortUrlTagsEdited).toHaveBeenCalledWith(shortCode, []);
       done();
     });
   });
@@ -146,6 +145,6 @@ describe('<EditTagsModal />', () => {
     const cancelBtn = wrapper.find('.btn-link');
 
     cancelBtn.simulate('click');
-    expect(toggle.callCount).toEqual(1);
+    expect(toggle).toHaveBeenCalledTimes(1);
   });
 });

test/short-urls/helpers/ShortUrlsRow.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import moment from 'moment';
 import Moment from 'react-moment';
 import { assoc, toString } from 'ramda';
-import * as sinon from 'sinon';
 import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
 import ExternalLink from '../../../src/utils/ExternalLink';
 import Tag from '../../../src/tags/helpers/Tag';
@@ -12,7 +11,7 @@ describe('<ShortUrlsRow />', () => {
   let wrapper;
   const mockFunction = () => '';
   const ShortUrlsRowMenu = mockFunction;
-  const stateFlagTimeout = sinon.spy();
+  const stateFlagTimeout = jest.fn();
   const colorGenerator = {
     getColorForKey: mockFunction,
     setColorForKey: mockFunction,
@@ -92,9 +91,9 @@ describe('<ShortUrlsRow />', () => {
     const menu = col.find(ShortUrlsRowMenu);
 
     expect(menu).toHaveLength(1);
-    expect(stateFlagTimeout.called).toEqual(false);
+    expect(stateFlagTimeout).not.toHaveBeenCalled();
     menu.simulate('copyToClipboard');
-    expect(stateFlagTimeout.calledOnce).toEqual(true);
+    expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
   });
 
   it('shows copy hint when state prop is true', () => {

test/short-urls/helpers/ShortUrlsRowMenu.test.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { ButtonDropdown, DropdownItem } from 'reactstrap';
 import createShortUrlsRowMenu from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
 import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
@@ -10,7 +9,7 @@ describe('<ShortUrlsRowMenu />', () => {
   let wrapper;
   const DeleteShortUrlModal = () => '';
   const EditTagsModal = () => '';
-  const onCopyToClipboard = sinon.spy();
+  const onCopyToClipboard = jest.fn();
   const selectedServer = { id: 'abc123' };
   const shortUrl = {
     shortCode: 'abc123',

test/short-urls/reducers/shortUrlCreation.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   CREATE_SHORT_URL_START,
   CREATE_SHORT_URL_ERROR,
@@ -39,9 +38,6 @@ describe('shortUrlCreationReducer', () => {
         error: false,
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('resetCreateShortUrl', () => {
@@ -51,30 +47,27 @@ describe('shortUrlCreationReducer', () => {
 
   describe('createShortUrl', () => {
     const createApiClientMock = (result) => ({
-      createShortUrl: sinon.fake.returns(result),
+      createShortUrl: jest.fn(() => result),
     });
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
-    afterEach(() => dispatch.resetHistory());
+    afterEach(() => dispatch.mockReset());
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const result = 'foo';
       const apiClientMock = createApiClientMock(Promise.resolve(result));
       const dispatchable = createShortUrl(() => apiClientMock)({});
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.createShortUrl.callCount).toEqual(1);
-
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: CREATE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: CREATE_SHORT_URL, result }]);
+      expect(apiClientMock.createShortUrl).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: CREATE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: CREATE_SHORT_URL, result });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const apiClientMock = createApiClientMock(Promise.reject(error));
       const dispatchable = createShortUrl(() => apiClientMock)({});
@@ -85,11 +78,10 @@ describe('shortUrlCreationReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.createShortUrl.callCount).toEqual(1);
-
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: CREATE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: CREATE_SHORT_URL_ERROR }]);
+      expect(apiClientMock.createShortUrl).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: CREATE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: CREATE_SHORT_URL_ERROR });
     });
   });
 });

test/short-urls/reducers/shortUrlDeletion.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   DELETE_SHORT_URL, DELETE_SHORT_URL_ERROR,
   DELETE_SHORT_URL_START,
@@ -45,12 +44,6 @@ describe('shortUrlDeletionReducer', () => {
         errorData,
       });
     });
-
-    it('returns provided state as is on unknown action', () => {
-      const state = { foo: 'bar' };
-
-      expect(reducer(state, { type: 'unknown' })).toEqual(state);
-    });
   });
 
   describe('resetDeleteShortUrl', () => {
@@ -64,39 +57,37 @@ describe('shortUrlDeletionReducer', () => {
   });
 
   describe('deleteShortUrl', () => {
-    const dispatch = sinon.spy();
-    const getState = sinon.fake.returns({ selectedServer: {} });
+    const dispatch = jest.fn();
+    const getState = jest.fn().mockReturnValue({ selectedServer: {} });
 
     afterEach(() => {
-      dispatch.resetHistory();
-      getState.resetHistory();
+      dispatch.mockReset();
+      getState.mockClear();
     });
 
     it('dispatches proper actions if API client request succeeds', async () => {
       const apiClientMock = {
-        deleteShortUrl: sinon.fake.resolves(''),
+        deleteShortUrl: jest.fn(() => ''),
       };
       const shortCode = 'abc123';
-      const expectedDispatchCalls = 2;
 
       await deleteShortUrl(() => apiClientMock)(shortCode)(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_SHORT_URL, shortCode }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_SHORT_URL, shortCode });
 
-      expect(apiClientMock.deleteShortUrl.callCount).toEqual(1);
-      expect(apiClientMock.deleteShortUrl.getCall(0).args).toEqual([ shortCode ]);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledWith(shortCode);
     });
 
     it('dispatches proper actions if API client request fails', async () => {
       const data = { foo: 'bar' };
       const error = { response: { data } };
       const apiClientMock = {
-        deleteShortUrl: sinon.fake.returns(Promise.reject(error)),
+        deleteShortUrl: jest.fn(() => Promise.reject(error)),
       };
       const shortCode = 'abc123';
-      const expectedDispatchCalls = 2;
 
       try {
         await deleteShortUrl(() => apiClientMock)(shortCode)(dispatch, getState);
@@ -104,12 +95,12 @@ describe('shortUrlDeletionReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_SHORT_URL_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_SHORT_URL_ERROR, errorData: data }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_SHORT_URL_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_SHORT_URL_ERROR, errorData: data });
 
-      expect(apiClientMock.deleteShortUrl.callCount).toEqual(1);
-      expect(apiClientMock.deleteShortUrl.getCall(0).args).toEqual([ shortCode ]);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteShortUrl).toHaveBeenCalledWith(shortCode);
     });
   });
 });

test/short-urls/reducers/shortUrlTags.test.js

@@ -0,0 +1,106 @@
+import reducer, {
+  EDIT_SHORT_URL_TAGS,
+  EDIT_SHORT_URL_TAGS_ERROR,
+  EDIT_SHORT_URL_TAGS_START, editShortUrlTags,
+  RESET_EDIT_SHORT_URL_TAGS,
+  resetShortUrlsTags,
+  SHORT_URL_TAGS_EDITED,
+  shortUrlTagsEdited,
+} from '../../../src/short-urls/reducers/shortUrlTags';
+
+describe('shortUrlTagsReducer', () => {
+  const tags = [ 'foo', 'bar', 'baz' ];
+  const shortCode = 'abc123';
+
+  describe('reducer', () => {
+    it('returns loading on EDIT_SHORT_URL_TAGS_START', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS_START })).toEqual({
+        saving: true,
+        error: false,
+      });
+    });
+
+    it('returns error on EDIT_SHORT_URL_TAGS_ERROR', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS_ERROR })).toEqual({
+        saving: false,
+        error: true,
+      });
+    });
+
+    it('returns provided tags and shortCode on EDIT_SHORT_URL_TAGS', () => {
+      expect(reducer({}, { type: EDIT_SHORT_URL_TAGS, tags, shortCode })).toEqual({
+        tags,
+        shortCode,
+        saving: false,
+        error: false,
+      });
+    });
+
+    it('goes back to initial state on RESET_EDIT_SHORT_URL_TAGS', () => {
+      expect(reducer({}, { type: RESET_EDIT_SHORT_URL_TAGS })).toEqual({
+        tags: [],
+        shortCode: null,
+        saving: false,
+        error: false,
+      });
+    });
+  });
+
+  describe('resetShortUrlsTags', () => {
+    it('creates expected action', () => expect(resetShortUrlsTags()).toEqual({ type: RESET_EDIT_SHORT_URL_TAGS }));
+  });
+
+  describe('shortUrlTagsEdited', () => {
+    it('creates expected action', () => expect(shortUrlTagsEdited(shortCode, tags)).toEqual({
+      tags,
+      shortCode,
+      type: SHORT_URL_TAGS_EDITED,
+    }));
+  });
+
+  describe('editShortUrlTags', () => {
+    const updateShortUrlTags = jest.fn();
+    const buildShlinkApiClient = jest.fn().mockResolvedValue({ updateShortUrlTags });
+    const dispatch = jest.fn();
+
+    afterEach(() => {
+      updateShortUrlTags.mockReset();
+      buildShlinkApiClient.mockClear();
+      dispatch.mockReset();
+    });
+
+    it('dispatches normalized tags on success', async () => {
+      const normalizedTags = [ 'bar', 'foo' ];
+
+      updateShortUrlTags.mockResolvedValue(normalizedTags);
+
+      await editShortUrlTags(buildShlinkApiClient)(shortCode, tags)(dispatch);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledWith(shortCode, tags);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_SHORT_URL_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_SHORT_URL_TAGS, tags: normalizedTags, shortCode });
+    });
+
+    it('dispatches error on failure', async () => {
+      const error = new Error();
+
+      updateShortUrlTags.mockRejectedValue(error);
+
+      try {
+        await editShortUrlTags(buildShlinkApiClient)(shortCode, tags)(dispatch);
+      } catch (e) {
+        expect(e).toBe(error);
+      }
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledTimes(1);
+      expect(updateShortUrlTags).toHaveBeenCalledWith(shortCode, tags);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_SHORT_URL_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_SHORT_URL_TAGS_ERROR });
+    });
+  });
+});

test/short-urls/reducers/shortUrlsList.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   LIST_SHORT_URLS,
   LIST_SHORT_URLS_ERROR,
@@ -70,51 +69,43 @@ describe('shortUrlsListReducer', () => {
         },
       });
     });
-
-    it('returns provided state as is on unknown action', () => {
-      const state = { foo: 'bar' };
-
-      expect(reducer(state, { type: 'unknown' })).toEqual(state);
-    });
   });
 
   describe('listShortUrls', () => {
-    const dispatch = sinon.spy();
-    const getState = sinon.fake.returns({ selectedServer: {} });
+    const dispatch = jest.fn();
+    const getState = jest.fn().mockReturnValue({ selectedServer: {} });
 
     afterEach(() => {
-      dispatch.resetHistory();
-      getState.resetHistory();
+      dispatch.mockReset();
+      getState.mockClear();
     });
 
     it('dispatches proper actions if API client request succeeds', async () => {
       const apiClientMock = {
-        listShortUrls: sinon.fake.resolves([]),
+        listShortUrls: jest.fn().mockResolvedValue([]),
       };
-      const expectedDispatchCalls = 2;
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: LIST_SHORT_URLS_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: LIST_SHORT_URLS, shortUrls: [], params: {} }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS, shortUrls: [], params: {} });
 
-      expect(apiClientMock.listShortUrls.callCount).toEqual(1);
+      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches proper actions if API client request fails', async () => {
       const apiClientMock = {
-        listShortUrls: sinon.fake.rejects(),
+        listShortUrls: jest.fn().mockRejectedValue(),
       };
-      const expectedDispatchCalls = 2;
 
       await listShortUrls(() => apiClientMock)()(dispatch, getState);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: LIST_SHORT_URLS_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: LIST_SHORT_URLS_ERROR, params: {} }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_SHORT_URLS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_SHORT_URLS_ERROR, params: {} });
 
-      expect(apiClientMock.listShortUrls.callCount).toEqual(1);
+      expect(apiClientMock.listShortUrls).toHaveBeenCalledTimes(1);
     });
   });
 });

test/short-urls/reducers/shortUrlsListParams.test.js

@@ -8,9 +8,6 @@ describe('shortUrlsListParamsReducer', () => {
   describe('reducer', () => {
     const defaultState = { page: '1' };
 
-    it('returns default value when action is unknown', () =>
-      expect(reducer(defaultState, { type: 'unknown' })).toEqual(defaultState));
-
     it('returns params when action is LIST_SHORT_URLS', () =>
       expect(reducer(defaultState, { type: LIST_SHORT_URLS, params: { searchTerm: 'foo' } })).toEqual({
         ...defaultState,

test/tags/TagsList.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import * as sinon from 'sinon';
 import createTagsList from '../../src/tags/TagsList';
 import MuttedMessage from '../../src/utils/MuttedMessage';
 import SearchField from '../../src/utils/SearchField';
@@ -9,7 +8,7 @@ import { rangeOf } from '../../src/utils/utils';
 
 describe('<TagsList />', () => {
   let wrapper;
-  const filterTags = sinon.spy();
+  const filterTags = jest.fn();
   const TagCard = () => '';
   const createWrapper = (tagsList) => {
     const params = { serverId: '1' };
@@ -24,7 +23,7 @@ describe('<TagsList />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    filterTags.resetHistory();
+    filterTags.mockReset();
   });
 
   it('shows a loading message when tags are being loaded', () => {
@@ -67,11 +66,11 @@ describe('<TagsList />', () => {
     const searchField = wrapper.find(SearchField);
 
     expect(searchField).toHaveLength(1);
-    expect(filterTags.callCount).toEqual(0);
+    expect(filterTags).not.toHaveBeenCalled();
     searchField.simulate('change');
 
     setImmediate(() => {
-      expect(filterTags.callCount).toEqual(1);
+      expect(filterTags).toHaveBeenCalledTimes(1);
       done();
     });
   });

test/tags/helpers/DeleteTagConfirmModal.test.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as sinon from 'sinon';
 import { Modal, ModalBody, ModalFooter } from 'reactstrap';
 import DeleteTagConfirmModal from '../../../src/tags/helpers/DeleteTagConfirmModal';
 
 describe('<DeleteTagConfirmModal />', () => {
   let wrapper;
   const tag = 'nodejs';
-  const deleteTag = sinon.spy();
-  const tagDeleted = sinon.spy();
+  const deleteTag = jest.fn();
+  const tagDeleted = jest.fn();
   const createWrapper = (tagDelete) => {
     wrapper = shallow(
       <DeleteTagConfirmModal
@@ -26,8 +25,8 @@ describe('<DeleteTagConfirmModal />', () => {
 
   afterEach(() => {
     wrapper && wrapper.unmount();
-    deleteTag.resetHistory();
-    tagDeleted.resetHistory();
+    deleteTag.mockReset();
+    tagDeleted.mockReset();
   });
 
   it('asks confirmation for provided tag to be deleted', () => {
@@ -63,8 +62,8 @@ describe('<DeleteTagConfirmModal />', () => {
     const delBtn = footer.find('.btn-danger');
 
     delBtn.simulate('click');
-    expect(deleteTag.calledOnce).toEqual(true);
-    expect(deleteTag.calledWith(tag)).toEqual(true);
+    expect(deleteTag).toHaveBeenCalledTimes(1);
+    expect(deleteTag).toHaveBeenCalledWith(tag);
   });
 
   it('does no further actions when modal is closed without deleting tag', () => {
@@ -72,7 +71,7 @@ describe('<DeleteTagConfirmModal />', () => {
     const modal = wrapper.find(Modal);
 
     modal.simulate('closed');
-    expect(tagDeleted.called).toEqual(false);
+    expect(tagDeleted).not.toHaveBeenCalled();
   });
 
   it('notifies tag to be deleted when modal is closed after deleting tag', () => {
@@ -81,7 +80,7 @@ describe('<DeleteTagConfirmModal />', () => {
 
     wrapper.instance().tagWasDeleted = true;
     modal.simulate('closed');
-    expect(tagDeleted.calledOnce).toEqual(true);
-    expect(tagDeleted.calledWith(tag)).toEqual(true);
+    expect(tagDeleted).toHaveBeenCalledTimes(1);
+    expect(tagDeleted).toHaveBeenCalledWith(tag);
   });
 });

test/tags/reducers/tagDelete.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   DELETE_TAG_START,
   DELETE_TAG_ERROR,
@@ -30,9 +29,6 @@ describe('tagDeleteReducer', () => {
         error: false,
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('tagDeleted', () => {
@@ -45,31 +41,29 @@ describe('tagDeleteReducer', () => {
 
   describe('deleteTag', () => {
     const createApiClientMock = (result) => ({
-      deleteTags: sinon.fake.returns(result),
+      deleteTags: jest.fn(() => result),
     });
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
-    afterEach(() => dispatch.resetHistory());
+    afterEach(() => dispatch.mockReset());
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const tag = 'foo';
       const apiClientMock = createApiClientMock(Promise.resolve());
       const dispatchable = deleteTag(() => apiClientMock)(tag);
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.deleteTags.callCount).toEqual(1);
-      expect(apiClientMock.deleteTags.getCall(0).args).toEqual([[ tag ]]);
+      expect(apiClientMock.deleteTags).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteTags).toHaveBeenNthCalledWith(1, [ tag ]);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_TAG }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_TAG });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const tag = 'foo';
       const apiClientMock = createApiClientMock(Promise.reject(error));
@@ -81,12 +75,12 @@ describe('tagDeleteReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.deleteTags.callCount).toEqual(1);
-      expect(apiClientMock.deleteTags.getCall(0).args).toEqual([[ tag ]]);
+      expect(apiClientMock.deleteTags).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.deleteTags).toHaveBeenNthCalledWith(1, [ tag ]);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: DELETE_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: DELETE_TAG_ERROR }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: DELETE_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: DELETE_TAG_ERROR });
     });
   });
 });

test/tags/reducers/tagEdit.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   EDIT_TAG_START,
   EDIT_TAG_ERROR,
@@ -32,9 +31,6 @@ describe('tagEditReducer', () => {
         newName: 'bar',
       });
     });
-
-    it('returns provided state on unknown action', () =>
-      expect(reducer({}, { type: 'unknown' })).toEqual({}));
   });
 
   describe('tagEdited', () => {
@@ -49,21 +45,20 @@ describe('tagEditReducer', () => {
 
   describe('editTag', () => {
     const createApiClientMock = (result) => ({
-      editTag: sinon.fake.returns(result),
+      editTag: jest.fn(() => result),
     });
     const colorGenerator = {
-      setColorForKey: sinon.spy(),
+      setColorForKey: jest.fn(),
     };
-    const dispatch = sinon.spy();
+    const dispatch = jest.fn();
     const getState = () => ({});
 
     afterEach(() => {
-      colorGenerator.setColorForKey.resetHistory();
-      dispatch.resetHistory();
+      colorGenerator.setColorForKey.mockReset();
+      dispatch.mockReset();
     });
 
     it('calls API on success', async () => {
-      const expectedDispatchCalls = 2;
       const oldName = 'foo';
       const newName = 'bar';
       const color = '#ff0000';
@@ -72,19 +67,18 @@ describe('tagEditReducer', () => {
 
       await dispatchable(dispatch, getState);
 
-      expect(apiClientMock.editTag.callCount).toEqual(1);
-      expect(apiClientMock.editTag.getCall(0).args).toEqual([ oldName, newName ]);
+      expect(apiClientMock.editTag).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.editTag).toHaveBeenCalledWith(oldName, newName);
 
-      expect(colorGenerator.setColorForKey.callCount).toEqual(1);
-      expect(colorGenerator.setColorForKey.getCall(0).args).toEqual([ newName, color ]);
+      expect(colorGenerator.setColorForKey).toHaveBeenCalledTimes(1);
+      expect(colorGenerator.setColorForKey).toHaveBeenCalledWith(newName, color);
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: EDIT_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: EDIT_TAG, oldName, newName }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_TAG, oldName, newName });
     });
 
     it('throws on error', async () => {
-      const expectedDispatchCalls = 2;
       const error = 'Error';
       const oldName = 'foo';
       const newName = 'bar';
@@ -98,14 +92,14 @@ describe('tagEditReducer', () => {
         expect(e).toEqual(error);
       }
 
-      expect(apiClientMock.editTag.callCount).toEqual(1);
-      expect(apiClientMock.editTag.getCall(0).args).toEqual([ oldName, newName ]);
+      expect(apiClientMock.editTag).toHaveBeenCalledTimes(1);
+      expect(apiClientMock.editTag).toHaveBeenCalledWith(oldName, newName);
 
-      expect(colorGenerator.setColorForKey.callCount).toEqual(0);
+      expect(colorGenerator.setColorForKey).not.toHaveBeenCalled();
 
-      expect(dispatch.callCount).toEqual(expectedDispatchCalls);
-      expect(dispatch.getCall(0).args).toEqual([{ type: EDIT_TAG_START }]);
-      expect(dispatch.getCall(1).args).toEqual([{ type: EDIT_TAG_ERROR }]);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: EDIT_TAG_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: EDIT_TAG_ERROR });
     });
   });
 });

test/tags/reducers/tagsList.test.js

@@ -0,0 +1,145 @@
+import reducer, {
+  FILTER_TAGS,
+  filterTags,
+  LIST_TAGS,
+  LIST_TAGS_ERROR,
+  LIST_TAGS_START, listTags,
+} from '../../../src/tags/reducers/tagsList';
+import { TAG_DELETED } from '../../../src/tags/reducers/tagDelete';
+import { TAG_EDITED } from '../../../src/tags/reducers/tagEdit';
+
+describe('tagsListReducer', () => {
+  describe('reducer', () => {
+    it('returns loading on LIST_TAGS_START', () => {
+      expect(reducer({}, { type: LIST_TAGS_START })).toEqual({
+        loading: true,
+        error: false,
+      });
+    });
+
+    it('returns error on LIST_TAGS_ERROR', () => {
+      expect(reducer({}, { type: LIST_TAGS_ERROR })).toEqual({
+        loading: false,
+        error: true,
+      });
+    });
+
+    it('returns provided tags as filtered and regular tags on LIST_TAGS', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+
+      expect(reducer({}, { type: LIST_TAGS, tags })).toEqual({
+        tags,
+        filteredTags: tags,
+        loading: false,
+        error: false,
+      });
+    });
+
+    it('removes provided tag from filtered and regular tags on TAG_DELETED', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+      const tag = 'foo';
+      const expectedTags = [ 'bar', 'baz' ];
+
+      expect(reducer({ tags, filteredTags: tags }, { type: TAG_DELETED, tag })).toEqual({
+        tags: expectedTags,
+        filteredTags: expectedTags,
+      });
+    });
+
+    it('renames provided tag from filtered and regular tags on TAG_EDITED', () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+      const oldName = 'bar';
+      const newName = 'renamed';
+      const expectedTags = [ 'foo', 'renamed', 'baz' ].sort();
+
+      expect(reducer({ tags, filteredTags: tags }, { type: TAG_EDITED, oldName, newName })).toEqual({
+        tags: expectedTags,
+        filteredTags: expectedTags,
+      });
+    });
+
+    it('filters original list of tags by provided search term on FILTER_TAGS', () => {
+      const tags = [ 'foo', 'bar', 'baz', 'foo2', 'fo' ];
+      const searchTerm = 'fo';
+      const filteredTags = [ 'foo', 'foo2', 'fo' ];
+
+      expect(reducer({ tags }, { type: FILTER_TAGS, searchTerm })).toEqual({
+        tags,
+        filteredTags,
+      });
+    });
+  });
+
+  describe('filterTags', () => {
+    it('creates expected action', () => expect(filterTags('foo')).toEqual({ type: FILTER_TAGS, searchTerm: 'foo' }));
+  });
+
+  describe('listTags', () => {
+    const dispatch = jest.fn();
+    const getState = jest.fn(() => ({}));
+    const buildShlinkApiClient = jest.fn();
+    const listTagsMock = jest.fn();
+
+    afterEach(() => {
+      dispatch.mockReset();
+      getState.mockClear();
+      buildShlinkApiClient.mockReset();
+      listTagsMock.mockReset();
+    });
+
+    const assertNoAction = async (tagsList) => {
+      getState.mockReturnValue({ tagsList });
+
+      await listTags(buildShlinkApiClient, false)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).not.toHaveBeenCalled();
+      expect(dispatch).not.toHaveBeenCalled();
+      expect(getState).toHaveBeenCalledTimes(1);
+    };
+
+    it('does nothing when loading', async () => await assertNoAction({ loading: true }));
+    it('does nothing when list is not empty', async () => await assertNoAction({ loading: false, tags: [ 'foo', 'bar' ] }));
+
+    it('dispatches loaded lists when no error occurs', async () => {
+      const tags = [ 'foo', 'bar', 'baz' ];
+
+      listTagsMock.mockResolvedValue(tags);
+      buildShlinkApiClient.mockResolvedValue({ listTags: listTagsMock });
+
+      await listTags(buildShlinkApiClient, true)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_TAGS, tags });
+    });
+
+    const assertErrorResult = async () => {
+      await listTags(buildShlinkApiClient, true)()(dispatch, getState);
+
+      expect(buildShlinkApiClient).toHaveBeenCalledTimes(1);
+      expect(getState).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenCalledTimes(2);
+      expect(dispatch).toHaveBeenNthCalledWith(1, { type: LIST_TAGS_START });
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: LIST_TAGS_ERROR });
+    };
+
+    it('dispatches error when error occurs on list call', async () => {
+      listTagsMock.mockRejectedValue(new Error());
+      buildShlinkApiClient.mockResolvedValue({ listTags: listTagsMock });
+
+      await assertErrorResult();
+
+      expect(listTagsMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('dispatches error when error occurs on build call', async () => {
+      buildShlinkApiClient.mockRejectedValue(new Error());
+
+      await assertErrorResult();
+
+      expect(listTagsMock).not.toHaveBeenCalled();
+    });
+  });
+});

test/utils/Checkbox.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Checkbox from '../../src/utils/Checkbox';
+
+describe('<Checkbox />', () => {
+  let wrapped;
+
+  const createComponent = (props = {}) => {
+    wrapped = mount(<Checkbox {...props} />);
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('includes extra class names when provided', () => {
+    const classNames = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(classNames.length);
+    classNames.forEach((className) => {
+      const wrapped = createComponent({ className, checked, onChange });
+
+      expect(wrapped.prop('className')).toContain(className);
+    });
+  });
+
+  it('marks input as checked if defined', () => {
+    const checkeds = [ true, false ];
+    const onChange = () => {};
+
+    expect.assertions(checkeds.length);
+    checkeds.forEach((checked) => {
+      const wrapped = createComponent({ checked, onChange });
+      const input = wrapped.find('input');
+
+      expect(input.prop('checked')).toEqual(checked);
+    });
+  });
+
+  it('renders provided children inside the label', () => {
+    const labels = [ 'foo', 'bar', 'baz' ];
+    const checked = false;
+    const onChange = () => {};
+
+    expect.assertions(labels.length);
+    labels.forEach((children) => {
+      const wrapped = createComponent({ children, checked, onChange });
+      const label = wrapped.find('label');
+
+      expect(label.text()).toEqual(children);
+    });
+  });
+
+  it('changes checked status on input change', () => {
+    const onChange = jest.fn();
+    const e = { target: { checked: false } };
+    const wrapped = createComponent({ checked: true, onChange });
+    const input = wrapped.find('input');
+
+    input.prop('onChange')(e);
+
+    expect(onChange).toHaveBeenCalledWith(false, e);
+  });
+});

test/utils/ForVersion.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ForVersion from '../../src/utils/ForVersion';
+
+describe('<ForVersion />', () => {
+  let wrapped;
+
+  const renderComponent = (minVersion, currentServerVersion) => {
+    wrapped = mount(
+      <ForVersion minVersion={minVersion} currentServerVersion={currentServerVersion}>
+        <span>Hello</span>
+      </ForVersion>
+    );
+
+    return wrapped;
+  };
+
+  afterEach(() => wrapped && wrapped.unmount());
+
+  it('does not render children when current version is empty', () => {
+    const wrapped = renderComponent('1', '');
+
+    expect(wrapped.html()).toBeNull();
+  });
+
+  it('does not render children when current version is lower than min version', () => {
+    const wrapped = renderComponent('2.0.0', '1.8.3');
+
+    expect(wrapped.html()).toBeNull();
+  });
+
+  it('renders children when current version is equal min version', () => {
+    const wrapped = renderComponent('2.0.0', '2.0.0');
+
+    expect(wrapped.html()).toContain('<span>Hello</span>');
+  });
+
+  it('renders children when current version is higher than min version', () => {
+    const wrapped = renderComponent('2.0.0', '2.1.0');
+
+    expect(wrapped.html()).toContain('<span>Hello</span>');
+  });
+});

test/utils/SortingDropdown.test.js

@@ -4,7 +4,6 @@ import { DropdownItem } from 'reactstrap';
 import { identity, values } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
-import * as sinon from 'sinon';
 import SortingDropdown from '../../src/utils/SortingDropdown';
 
 describe('<SortingDropdown />', () => {
@@ -44,35 +43,35 @@ describe('<SortingDropdown />', () => {
   });
 
   it('triggers change function when item is clicked and no order field was provided', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
   });
 
   it('triggers change function when item is clicked and an order field was provided', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'ASC');
   });
 
   it('updates order dir when already selected item is clicked', () => {
-    const onChange = sinon.spy();
+    const onChange = jest.fn();
     const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
     const firstItem = wrapper.find(DropdownItem).first();
 
     firstItem.simulate('click');
 
-    expect(onChange.callCount).toEqual(1);
-    expect(onChange.calledWith('foo', 'DESC')).toEqual(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('foo', 'DESC');
   });
 });

test/utils/services/ColorGenerator.test.js

@@ -1,16 +1,15 @@
-import * as sinon from 'sinon';
 import ColorGenerator from '../../../src/utils/services/ColorGenerator';
 
 describe('ColorGenerator', () => {
   let colorGenerator;
   const storageMock = {
-    set: sinon.fake(),
-    get: sinon.fake.returns(undefined),
+    set: jest.fn(),
+    get: jest.fn(),
   };
 
   beforeEach(() => {
-    storageMock.set.resetHistory();
-    storageMock.get.resetHistory();
+    storageMock.set.mockReset();
+    storageMock.get.mockReset();
 
     colorGenerator = new ColorGenerator(storageMock);
   });
@@ -21,14 +20,14 @@ describe('ColorGenerator', () => {
     colorGenerator.setColorForKey('foo', color);
 
     expect(colorGenerator.getColorForKey('foo')).toEqual(color);
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 
   it('generates a random color when none is available for requested key', () => {
     expect(colorGenerator.getColorForKey('bar')).toEqual(expect.stringMatching(/^#(?:[0-9a-fA-F]{6})$/));
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 
   it('trims and lower cases keys before trying to match', () => {
@@ -42,7 +41,7 @@ describe('ColorGenerator', () => {
     expect(colorGenerator.getColorForKey('FOO')).toEqual(color);
     expect(colorGenerator.getColorForKey('FOO  ')).toEqual(color);
     expect(colorGenerator.getColorForKey(' FoO  ')).toEqual(color);
-    expect(storageMock.set.callCount).toEqual(1);
-    expect(storageMock.get.callCount).toEqual(1);
+    expect(storageMock.set).toHaveBeenCalledTimes(1);
+    expect(storageMock.get).toHaveBeenCalledTimes(1);
   });
 });

test/utils/services/ShlinkApiClient.test.js

@@ -1,5 +1,3 @@
-import sinon from 'sinon';
-import { head, last } from 'ramda';
 import ShlinkApiClient from '../../../src/utils/services/ShlinkApiClient';
 
 describe('ShlinkApiClient', () => {
@@ -35,23 +33,21 @@ describe('ShlinkApiClient', () => {
     });
 
     it('removes all empty options', async () => {
-      const axiosSpy = sinon.spy(createAxiosMock({ data: shortUrl }));
+      const axiosSpy = jest.fn(createAxiosMock({ data: shortUrl }));
       const { createShortUrl } = new ShlinkApiClient(axiosSpy);
 
       await createShortUrl(
         { foo: 'bar', empty: undefined, anotherEmpty: null }
       );
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.data).toEqual({ foo: 'bar' });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ data: { foo: 'bar' } }));
     });
   });
 
   describe('getShortUrlVisits', () => {
     it('properly returns short URL visits', async () => {
       const expectedVisits = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: {
           visits: {
             data: expectedVisits,
@@ -61,55 +57,55 @@ describe('ShlinkApiClient', () => {
       const { getShortUrlVisits } = new ShlinkApiClient(axiosSpy);
 
       const actualVisits = await getShortUrlVisits('abc123', {});
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect({ data: expectedVisits }).toEqual(actualVisits);
-      expect(axiosArgs.url).toContain('/short-urls/abc123/visits');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123/visits',
+        method: 'GET',
+      }));
     });
   });
 
   describe('getShortUrl', () => {
     it('properly returns short URL', async () => {
       const expectedShortUrl = { foo: 'bar' };
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: expectedShortUrl,
       }));
       const { getShortUrl } = new ShlinkApiClient(axiosSpy);
 
       const result = await getShortUrl('abc123');
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedShortUrl).toEqual(result);
-      expect(axiosArgs.url).toContain('/short-urls/abc123');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123',
+        method: 'GET',
+      }));
     });
   });
 
   describe('updateShortUrlTags', () => {
     it('properly updates short URL tags', async () => {
       const expectedTags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: { tags: expectedTags },
       }));
       const { updateShortUrlTags } = new ShlinkApiClient(axiosSpy);
 
       const result = await updateShortUrlTags('abc123', expectedTags);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedTags).toEqual(result);
-      expect(axiosArgs.url).toContain('/short-urls/abc123/tags');
-      expect(axiosArgs.method).toEqual('PUT');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123/tags',
+        method: 'PUT',
+      }));
     });
   });
 
   describe('listTags', () => {
     it('properly returns list of tags', async () => {
       const expectedTags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({
+      const axiosSpy = jest.fn(createAxiosMock({
         data: {
           tags: { data: expectedTags },
         },
@@ -117,28 +113,25 @@ describe('ShlinkApiClient', () => {
       const { listTags } = new ShlinkApiClient(axiosSpy);
 
       const result = await listTags();
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
       expect(expectedTags).toEqual(result);
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('GET');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({ url: '/tags', method: 'GET' }));
     });
   });
 
   describe('deleteTags', () => {
     it('properly deletes provided tags', async () => {
       const tags = [ 'foo', 'bar' ];
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { deleteTags } = new ShlinkApiClient(axiosSpy);
 
       await deleteTags(tags);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('DELETE');
-      expect(axiosArgs.params).toEqual({ tags });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/tags',
+        method: 'DELETE',
+        params: { tags },
+      }));
     });
   });
 
@@ -146,30 +139,46 @@ describe('ShlinkApiClient', () => {
     it('properly edits provided tag', async () => {
       const oldName = 'foo';
       const newName = 'bar';
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { editTag } = new ShlinkApiClient(axiosSpy);
 
       await editTag(oldName, newName);
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/tags');
-      expect(axiosArgs.method).toEqual('PUT');
-      expect(axiosArgs.data).toEqual({ oldName, newName });
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/tags',
+        method: 'PUT',
+        data: { oldName, newName },
+      }));
     });
   });
 
   describe('deleteShortUrl', () => {
     it('properly deletes provided short URL', async () => {
-      const axiosSpy = sinon.spy(createAxiosMock({}));
+      const axiosSpy = jest.fn(createAxiosMock({}));
       const { deleteShortUrl } = new ShlinkApiClient(axiosSpy);
 
       await deleteShortUrl('abc123');
-      const lastAxiosCall = last(axiosSpy.getCalls());
-      const axiosArgs = head(lastAxiosCall.args);
 
-      expect(axiosArgs.url).toContain('/short-urls/abc123');
-      expect(axiosArgs.method).toEqual('DELETE');
+      expect(axiosSpy).toHaveBeenCalledWith(expect.objectContaining({
+        url: '/short-urls/abc123',
+        method: 'DELETE',
+      }));
+    });
+  });
+
+  describe('health', () => {
+    it('returns health data', async () => {
+      const expectedData = {
+        status: 'pass',
+        version: '1.19.0',
+      };
+      const axiosSpy = jest.fn(createAxiosMock({ data: expectedData }));
+      const { health } = new ShlinkApiClient(axiosSpy);
+
+      const result = await health();
+
+      expect(axiosSpy).toHaveBeenCalled();
+      expect(result).toEqual(expectedData);
     });
   });
 });

test/utils/services/ShlinkApiClientBuilder.test.js

@@ -1,26 +1,46 @@
 import buildShlinkApiClient from '../../../src/utils/services/ShlinkApiClientBuilder';
+import { buildShlinkBaseUrl } from '../../../src/utils/services/ShlinkApiClient';
 
 describe('ShlinkApiClientBuilder', () => {
-  const builder = buildShlinkApiClient({});
+  const createBuilder = () => {
+    const builder = buildShlinkApiClient({});
 
-  it('creates new instances when provided params are different', () => {
-    const firstApiClient = builder({ url: 'foo', apiKey: 'bar' });
-    const secondApiClient = builder({ url: 'bar', apiKey: 'bar' });
-    const thirdApiClient = builder({ url: 'bar', apiKey: 'foo' });
+    return (selectedServer) => builder(() => ({ selectedServer }));
+  };
+
+  it('creates new instances when provided params are different', async () => {
+    const builder = createBuilder();
+    const [ firstApiClient, secondApiClient, thirdApiClient ] = await Promise.all([
+      builder({ url: 'foo', apiKey: 'bar' }),
+      builder({ url: 'bar', apiKey: 'bar' }),
+      builder({ url: 'bar', apiKey: 'foo' }),
+    ]);
 
     expect(firstApiClient).not.toBe(secondApiClient);
     expect(firstApiClient).not.toBe(thirdApiClient);
     expect(secondApiClient).not.toBe(thirdApiClient);
   });
 
-  it('returns existing instances when provided params are the same', () => {
-    const params = { url: 'foo', apiKey: 'bar' };
-    const firstApiClient = builder(params);
-    const secondApiClient = builder(params);
-    const thirdApiClient = builder(params);
+  it('returns existing instances when provided params are the same', async () => {
+    const builder = createBuilder();
+    const selectedServer = { url: 'foo', apiKey: 'bar' };
+    const [ firstApiClient, secondApiClient, thirdApiClient ] = await Promise.all([
+      builder(selectedServer),
+      builder(selectedServer),
+      builder(selectedServer),
+    ]);
 
     expect(firstApiClient).toBe(secondApiClient);
     expect(firstApiClient).toBe(thirdApiClient);
     expect(secondApiClient).toBe(thirdApiClient);
   });
+
+  it('does not fetch from state when provided param is already selected server', async () => {
+    const url = 'url';
+    const apiKey = 'apiKey';
+    const apiClient = await buildShlinkApiClient({})({ url, apiKey });
+
+    expect(apiClient._baseUrl).toEqual(buildShlinkBaseUrl(url));
+    expect(apiClient._apiKey).toEqual(apiKey);
+  });
 });

test/utils/services/Storage.test.js

@@ -1,16 +1,15 @@
-import * as sinon from 'sinon';
 import Storage from '../../../src/utils/services/Storage';
 
 describe('Storage', () => {
   const localStorageMock = {
-    getItem: sinon.fake((key) => key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null),
-    setItem: sinon.spy(),
+    getItem: jest.fn((key) => key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null),
+    setItem: jest.fn(),
   };
   let storage;
 
   beforeEach(() => {
-    localStorageMock.getItem.resetHistory();
-    localStorageMock.setItem.resetHistory();
+    localStorageMock.getItem.mockClear();
+    localStorageMock.setItem.mockReset();
 
     storage = new Storage(localStorageMock);
   });
@@ -21,18 +20,15 @@ describe('Storage', () => {
 
       storage.set('foo', value);
 
-      expect(localStorageMock.setItem.callCount).toEqual(1);
-      expect(localStorageMock.setItem.getCall(0).args).toEqual([
-        'shlink.foo',
-        JSON.stringify(value),
-      ]);
+      expect(localStorageMock.setItem).toHaveBeenCalledTimes(1);
+      expect(localStorageMock.setItem).toHaveBeenCalledWith('shlink.foo', JSON.stringify(value));
     });
   });
 
   describe('get', () => {
     it('fetches item from local storage', () => {
       storage.get('foo');
-      expect(localStorageMock.getItem.callCount).toEqual(1);
+      expect(localStorageMock.getItem).toHaveBeenCalledTimes(1);
     });
 
     it('returns parsed value when requested value is found in local storage', () => {

test/utils/utils.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import L from 'leaflet';
 import marker2x from 'leaflet/dist/images/marker-icon-2x.png';
 import marker from 'leaflet/dist/images/marker-icon.png';
@@ -14,19 +13,18 @@ import {
 describe('utils', () => {
   describe('stateFlagTimeout', () => {
     it('sets state and initializes timeout with provided delay', () => {
-      const setTimeout = sinon.fake((callback) => callback());
-      const setState = sinon.spy();
+      const setTimeout = jest.fn((callback) => callback());
+      const setState = jest.fn();
       const stateFlagTimeout = stateFlagTimeoutFactory(setTimeout);
       const delay = 5000;
-      const expectedSetStateCalls = 2;
 
       stateFlagTimeout(setState, 'foo', false, delay);
 
-      expect(setState.callCount).toEqual(expectedSetStateCalls);
-      expect(setState.getCall(0).args).toEqual([{ foo: false }]);
-      expect(setState.getCall(1).args).toEqual([{ foo: true }]);
-      expect(setTimeout.callCount).toEqual(1);
-      expect(setTimeout.getCall(0).args[1]).toEqual(delay);
+      expect(setState).toHaveBeenCalledTimes(2);
+      expect(setState).toHaveBeenNthCalledWith(1, { foo: false });
+      expect(setState).toHaveBeenNthCalledWith(2, { foo: true });
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      expect(setTimeout).toHaveBeenCalledWith(expect.anything(), delay);
     });
   });
 

test/visits/ShortUrlVisits.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import { Card } from 'reactstrap';
-import * as sinon from 'sinon';
 import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
 import MutedMessage from '../../src/utils/MuttedMessage';
 import GraphCard from '../../src/visits/GraphCard';
@@ -14,7 +13,7 @@ describe('<ShortUrlVisits />', () => {
   const processStatsFromVisits = () => (
     { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }
   );
-  const getShortUrlVisitsMock = sinon.spy();
+  const getShortUrlVisitsMock = jest.fn();
   const match = {
     params: { shortCode: 'abc123' },
   };
@@ -37,11 +36,8 @@ describe('<ShortUrlVisits />', () => {
   };
 
   afterEach(() => {
-    getShortUrlVisitsMock.resetHistory();
-
-    if (wrapper) {
-      wrapper.unmount();
-    }
+    getShortUrlVisitsMock.mockReset();
+    wrapper && wrapper.unmount();
   });
 
   it('renders a preloader when visits are loading', () => {
@@ -80,21 +76,19 @@ describe('<ShortUrlVisits />', () => {
     const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
     const graphs = wrapper.find(GraphCard);
     const sortableBarGraphs = wrapper.find(SortableBarGraph);
-    const expectedGraphsCount = 5;
 
-    expect(graphs.length + sortableBarGraphs.length).toEqual(expectedGraphsCount);
+    expect(graphs.length + sortableBarGraphs.length).toEqual(5);
   });
 
   it('reloads visits when selected dates change', () => {
     const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
     const dateInput = wrapper.find(DateInput).first();
-    const expectedGetShortUrlVisitsCalls = 4;
 
     dateInput.simulate('change', '2016-01-01T00:00:00+01:00');
     dateInput.simulate('change', '2016-01-02T00:00:00+01:00');
     dateInput.simulate('change', '2016-01-03T00:00:00+01:00');
 
-    expect(getShortUrlVisitsMock.callCount).toEqual(expectedGetShortUrlVisitsCalls);
+    expect(getShortUrlVisitsMock).toHaveBeenCalledTimes(4);
     expect(wrapper.state('startDate')).toEqual('2016-01-03T00:00:00+01:00');
   });
 

test/visits/SortableBarGraph.test.js

@@ -49,12 +49,10 @@ describe('<SortableBarGraph />', () => {
       assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
         dropdown.prop('onChange')(sortName, sortDir);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
-          const statsKeys = keys(graphCard.prop('stats'));
-          const statsValues = values(graphCard.prop('stats'));
+          const stats = wrapper.find(GraphCard).prop('stats');
 
-          expect(statsKeys).toEqual(expectedKeys);
-          expect(statsValues).toEqual(expectedValues);
+          expect(keys(stats)).toEqual(expectedKeys);
+          expect(values(stats)).toEqual(expectedValues);
           done();
         });
       };
@@ -80,10 +78,9 @@ describe('<SortableBarGraph />', () => {
       assert = (itemsPerPage, expectedStats, done) => {
         dropdown.prop('setValue')(itemsPerPage);
         setImmediate(() => {
-          const graphCard = wrapper.find(GraphCard);
-          const statsKeys = keys(graphCard.prop('stats'));
+          const stats = wrapper.find(GraphCard).prop('stats');
 
-          expect(statsKeys).toEqual(expectedStats);
+          expect(keys(stats)).toEqual(expectedStats);
           done();
         });
       };

test/visits/reducers/shortUrlDetail.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   getShortUrlDetail,
   GET_SHORT_URL_DETAIL_START,
@@ -32,64 +31,38 @@ describe('shortUrlDetailReducer', () => {
       expect(error).toEqual(false);
       expect(shortUrl).toEqual(actionShortUrl);
     });
-
-    it('returns default state on unknown action', () => {
-      const defaultState = {
-        shortUrl: {},
-        loading: false,
-        error: false,
-      };
-      const state = reducer(defaultState, { type: 'unknown' });
-
-      expect(state).toEqual(defaultState);
-    });
   });
 
   describe('getShortUrlDetail', () => {
     const buildApiClientMock = (returned) => ({
-      getShortUrl: sinon.fake.returns(returned),
+      getShortUrl: jest.fn(() => returned),
     });
-    const dispatchMock = sinon.spy();
+    const dispatchMock = jest.fn();
     const getState = () => ({});
 
-    beforeEach(() => dispatchMock.resetHistory());
+    beforeEach(() => dispatchMock.mockReset());
 
     it('dispatches start and error when promise is rejected', async () => {
       const ShlinkApiClient = buildApiClientMock(Promise.reject());
-      const expectedDispatchCalls = 2;
 
       await getShortUrlDetail(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
-      const [ firstCallArg ] = dispatchMock.getCall(0).args;
-      const { type: firstCallType } = firstCallArg;
-
-      const [ secondCallArg ] = dispatchMock.getCall(1).args;
-      const { type: secondCallType } = secondCallArg;
-
-      expect(dispatchMock.callCount).toEqual(expectedDispatchCalls);
-      expect(ShlinkApiClient.getShortUrl.callCount).toEqual(1);
-      expect(firstCallType).toEqual(GET_SHORT_URL_DETAIL_START);
-      expect(secondCallType).toEqual(GET_SHORT_URL_DETAIL_ERROR);
+      expect(dispatchMock).toHaveBeenCalledTimes(2);
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_DETAIL_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_DETAIL_ERROR });
+      expect(ShlinkApiClient.getShortUrl).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches start and success when promise is resolved', async () => {
       const resolvedShortUrl = { longUrl: 'foo', shortCode: 'bar' };
       const ShlinkApiClient = buildApiClientMock(Promise.resolve(resolvedShortUrl));
-      const expectedDispatchCalls = 2;
 
       await getShortUrlDetail(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
-      const [ firstCallArg ] = dispatchMock.getCall(0).args;
-      const { type: firstCallType } = firstCallArg;
-
-      const [ secondCallArg ] = dispatchMock.getCall(1).args;
-      const { type: secondCallType, shortUrl } = secondCallArg;
-
-      expect(dispatchMock.callCount).toEqual(expectedDispatchCalls);
-      expect(ShlinkApiClient.getShortUrl.callCount).toEqual(1);
-      expect(firstCallType).toEqual(GET_SHORT_URL_DETAIL_START);
-      expect(secondCallType).toEqual(GET_SHORT_URL_DETAIL);
-      expect(shortUrl).toEqual(resolvedShortUrl);
+      expect(dispatchMock).toHaveBeenCalledTimes(2);
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_DETAIL_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_DETAIL, shortUrl: resolvedShortUrl });
+      expect(ShlinkApiClient.getShortUrl).toHaveBeenCalledTimes(1);
     });
   });
 });

test/visits/reducers/shortUrlVisits.test.js

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import reducer, {
   getShortUrlVisits,
   cancelGetShortUrlVisits,
@@ -49,72 +48,46 @@ describe('shortUrlVisitsReducer', () => {
       expect(error).toEqual(false);
       expect(visits).toEqual(actionVisits);
     });
-
-    it('returns default state on unknown action', () => {
-      const defaultState = {
-        visits: [],
-        loading: false,
-        error: false,
-      };
-      const state = reducer(defaultState, { type: 'unknown' });
-
-      expect(state).toEqual(defaultState);
-    });
   });
 
   describe('getShortUrlVisits', () => {
     const buildApiClientMock = (returned) => ({
-      getShortUrlVisits: typeof returned === 'function' ? sinon.fake(returned) : sinon.fake.returns(returned),
+      getShortUrlVisits: jest.fn(typeof returned === 'function' ? returned : () => returned),
     });
-    const dispatchMock = sinon.spy();
+    const dispatchMock = jest.fn();
     const getState = () => ({
       shortUrlVisits: { cancelVisits: false },
     });
 
-    beforeEach(() => dispatchMock.resetHistory());
+    beforeEach(() => dispatchMock.mockReset());
 
     it('dispatches start and error when promise is rejected', async () => {
       const ShlinkApiClient = buildApiClientMock(Promise.reject());
-      const expectedDispatchCalls = 2;
 
       await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
-      const [ firstCallArg ] = dispatchMock.getCall(0).args;
-      const { type: firstCallType } = firstCallArg;
-
-      const [ secondCallArg ] = dispatchMock.getCall(1).args;
-      const { type: secondCallType } = secondCallArg;
-
-      expect(dispatchMock.callCount).toEqual(expectedDispatchCalls);
-      expect(ShlinkApiClient.getShortUrlVisits.callCount).toEqual(1);
-      expect(firstCallType).toEqual(GET_SHORT_URL_VISITS_START);
-      expect(secondCallType).toEqual(GET_SHORT_URL_VISITS_ERROR);
+      expect(dispatchMock).toHaveBeenCalledTimes(2);
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_VISITS_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_VISITS_ERROR });
+      expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches start and success when promise is resolved', async () => {
-      const resolvedVisits = [{}, {}];
+      const visits = [{}, {}];
       const ShlinkApiClient = buildApiClientMock(Promise.resolve({
-        data: resolvedVisits,
+        data: visits,
         pagination: {
           currentPage: 1,
           pagesCount: 1,
         },
       }));
-      const expectedDispatchCalls = 2;
 
       await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
-      const [ firstCallArg ] = dispatchMock.getCall(0).args;
-      const { type: firstCallType } = firstCallArg;
-
-      const [ secondCallArg ] = dispatchMock.getCall(1).args;
-      const { type: secondCallType, visits } = secondCallArg;
-
-      expect(dispatchMock.callCount).toEqual(expectedDispatchCalls);
-      expect(ShlinkApiClient.getShortUrlVisits.callCount).toEqual(1);
-      expect(firstCallType).toEqual(GET_SHORT_URL_VISITS_START);
-      expect(secondCallType).toEqual(GET_SHORT_URL_VISITS);
-      expect(visits).toEqual(resolvedVisits);
+      expect(dispatchMock).toHaveBeenCalledTimes(2);
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_SHORT_URL_VISITS_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_SHORT_URL_VISITS, visits });
+      expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(1);
     });
 
     it('performs multiple API requests when response contains more pages', async () => {
@@ -130,11 +103,10 @@ describe('shortUrlVisitsReducer', () => {
 
       await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
-      const [ secondCallArg ] = dispatchMock.getCall(1).args;
-      const { visits } = secondCallArg;
-
-      expect(ShlinkApiClient.getShortUrlVisits.callCount).toEqual(expectedRequests);
-      expect(visits).toEqual([{}, {}, {}, {}, {}, {}]);
+      expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(expectedRequests);
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        visits: [{}, {}, {}, {}, {}, {}],
+      }));
     });
   });