diff --git a/package-lock.json b/package-lock.json
index 0f4bdbf2b00d503de7266c1d348beb4995d8384f..1fe99251def1b37fe533b561d169cf8650d01db3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2092,32 +2092,6 @@
         "loader-utils": "^2.0.0"
       }
     },
-    "@testing-library/dom": {
-      "version": "7.31.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
-      "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
-        "lz-string": "^1.4.4",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        }
-      }
-    },
     "@testing-library/jest-dom": {
       "version": "5.14.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
@@ -2134,15 +2108,6 @@
         "redent": "^3.0.0"
       }
     },
-    "@testing-library/react": {
-      "version": "11.2.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
-      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
-      "requires": {
-        "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^7.28.1"
-      }
-    },
     "@testing-library/user-event": {
       "version": "12.8.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
@@ -2156,11 +2121,6 @@
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="
     },
-    "@types/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig=="
-    },
     "@types/babel__core": {
       "version": "7.1.16",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.16.tgz",
@@ -2198,6 +2158,31 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.30",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.30.tgz",
+      "integrity": "sha512-t7ZVArWZlq3dFa9Yt33qFBQIK4CQd1Q3UJp0V+UhP6vgLWLM6Qug7vZuRSGXg45zXeB1Fm5X2vmBkEX58LV2Tw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/enzyme": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.9.tgz",
+      "integrity": "sha512-dx5UvcWe2Vtye6S9Hw2rFB7Ul9uMXOAje2FAbXvVYieQDNle9qPAo7DfvFMSztZ9NFiD3dVZ4JsRYGTrSLynJg==",
+      "requires": {
+        "@types/cheerio": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/enzyme-adapter-react-16": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz",
+      "integrity": "sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==",
+      "requires": {
+        "@types/enzyme": "*"
+      }
+    },
     "@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -2768,6 +2753,35 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@wojtekmaj/enzyme-adapter-react-17": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-react-17/-/enzyme-adapter-react-17-0.6.3.tgz",
+      "integrity": "sha512-Kp1ZJxtHkKEnUksaWrcMABNTOgL4wOt8VI6k2xOek2aH9PtZcWRXJNUEgnKrdJrqg5UqIjRslbVF9uUqwQJtFg==",
+      "dev": true,
+      "requires": {
+        "@wojtekmaj/enzyme-adapter-utils": "^0.1.1",
+        "enzyme-shallow-equal": "^1.0.0",
+        "has": "^1.0.0",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.0",
+        "react-is": "^17.0.2",
+        "react-test-renderer": "^17.0.0"
+      }
+    },
+    "@wojtekmaj/enzyme-adapter-utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@wojtekmaj/enzyme-adapter-utils/-/enzyme-adapter-utils-0.1.1.tgz",
+      "integrity": "sha512-bNPWtN/d8huKOkC6j1E3EkSamnRrHHT7YuR6f9JppAQqtoAm3v4/vERe4J14jQKmHLCyEBHXrlgb7H6l817hVg==",
+      "dev": true,
+      "requires": {
+        "function.prototype.name": "^1.1.0",
+        "has": "^1.0.0",
+        "object.assign": "^4.1.0",
+        "object.fromentries": "^2.0.0",
+        "prop-types": "^15.7.0"
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -2847,6 +2861,31 @@
         "indent-string": "^4.0.0"
       }
     },
+    "airbnb-prop-types": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
+      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
+      "dev": true,
+      "requires": {
+        "array.prototype.find": "^2.1.1",
+        "function.prototype.name": "^1.1.2",
+        "is-regex": "^1.1.0",
+        "object-is": "^1.1.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.2",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2994,6 +3033,88 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "array.prototype.filter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.filter/-/array.prototype.filter-1.0.1.tgz",
+      "integrity": "sha512-Dk3Ty7N42Odk7PjU/Ci3zT4pLj20YvuVnneG/58ICM6bt4Ij5kZaJTVQ9TSaWaIECX2sFyz4KItkVZqHNnciqw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "es-array-method-boxes-properly": "^1.0.0",
+        "is-string": "^1.0.7"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "get-symbol-description": "^1.0.0",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.4",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.4",
+            "is-shared-array-buffer": "^1.0.1",
+            "is-string": "^1.0.7",
+            "is-weakref": "^1.0.1",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
+      }
+    },
+    "array.prototype.find": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.2.tgz",
+      "integrity": "sha512-00S1O4ewO95OmmJW7EesWfQlrCrLEL8kZ40w3+GkLX2yTt0m2ggcePPa2uHPJ9KUmJvwRq+lCV9bD8Yim23x/Q==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "get-symbol-description": "^1.0.0",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.4",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.4",
+            "is-shared-array-buffer": "^1.0.1",
+            "is-string": "^1.0.7",
+            "is-weakref": "^1.0.1",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
+      }
+    },
     "array.prototype.flat": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
@@ -4038,6 +4159,106 @@
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
       "integrity": "sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ=="
     },
+    "cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "requires": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
+    "cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+          "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^5.0.0",
+            "domhandler": "^4.2.0",
+            "domutils": "^2.6.0",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+          "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg=="
+        },
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
@@ -5224,6 +5445,11 @@
         "path-type": "^4.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo="
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -5489,6 +5715,137 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
     },
+    "enzyme": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.11.0.tgz",
+      "integrity": "sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==",
+      "requires": {
+        "array.prototype.flat": "^1.2.3",
+        "cheerio": "^1.0.0-rc.3",
+        "enzyme-shallow-equal": "^1.0.1",
+        "function.prototype.name": "^1.1.2",
+        "has": "^1.0.3",
+        "html-element-map": "^1.2.0",
+        "is-boolean-object": "^1.0.1",
+        "is-callable": "^1.1.5",
+        "is-number-object": "^1.0.4",
+        "is-regex": "^1.0.5",
+        "is-string": "^1.0.5",
+        "is-subset": "^0.1.1",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.7.0",
+        "object-is": "^1.0.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.1",
+        "object.values": "^1.1.1",
+        "raf": "^3.4.1",
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.2.1"
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.6.tgz",
+      "integrity": "sha512-yFlVJCXh8T+mcQo8M6my9sPgeGzj85HSHi6Apgf1Cvq/7EL/J9+1JoJmJsRxZgyTvPMAqOEpRSu/Ii/ZpyOk0g==",
+      "dev": true,
+      "requires": {
+        "enzyme-adapter-utils": "^1.14.0",
+        "enzyme-shallow-equal": "^1.0.4",
+        "has": "^1.0.3",
+        "object.assign": "^4.1.2",
+        "object.values": "^1.1.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
+        },
+        "react-test-renderer": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
+          "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "react-is": "^16.8.6",
+            "scheduler": "^0.19.1"
+          }
+        },
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.14.0.tgz",
+      "integrity": "sha512-F/z/7SeLt+reKFcb7597IThpDp0bmzcH1E9Oabqv+o01cID2/YInlqHbFl7HzWBl4h3OdZYedtwNDOmSKkk0bg==",
+      "dev": true,
+      "requires": {
+        "airbnb-prop-types": "^2.16.0",
+        "function.prototype.name": "^1.1.3",
+        "has": "^1.0.3",
+        "object.assign": "^4.1.2",
+        "object.fromentries": "^2.0.3",
+        "prop-types": "^15.7.2",
+        "semver": "^5.7.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
+    "enzyme-shallow-equal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.4.tgz",
+      "integrity": "sha512-MttIwB8kKxypwHvRynuC3ahyNc+cFbR8mjVIltnmzQ0uKGqmsfO4bfBuLxb0beLNPhjblUEYvEbsg+VSygvF1Q==",
+      "requires": {
+        "has": "^1.0.3",
+        "object-is": "^1.1.2"
+      }
+    },
+    "enzyme-to-json": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz",
+      "integrity": "sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg==",
+      "requires": {
+        "@types/cheerio": "^0.22.22",
+        "lodash": "^4.17.21",
+        "react-is": "^16.12.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "errno": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@@ -5538,6 +5895,11 @@
         "unbox-primitive": "^1.0.1"
       }
     },
+    "es-array-method-boxes-properly": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
+      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
+    },
     "es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -6964,11 +7326,56 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.19.1",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
+          "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "get-intrinsic": "^1.1.1",
+            "get-symbol-description": "^1.0.0",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.2",
+            "internal-slot": "^1.0.3",
+            "is-callable": "^1.2.4",
+            "is-negative-zero": "^2.0.1",
+            "is-regex": "^1.1.4",
+            "is-shared-array-buffer": "^1.0.1",
+            "is-string": "^1.0.7",
+            "is-weakref": "^1.0.1",
+            "object-inspect": "^1.11.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.2",
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.1"
+          }
+        }
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "functions-have-names": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
+      "integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7301,6 +7708,15 @@
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
     },
+    "html-element-map": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.3.1.tgz",
+      "integrity": "sha512-6XMlxrAFX4UEEGxctfFnmrFaaZFNf9i5fNuV5wZ3WWQ4FVaNP1aX1LkX9j2mfEx1NpjeE/rL3nmgEn23GdFmrg==",
+      "requires": {
+        "array.prototype.filter": "^1.0.0",
+        "call-bind": "^1.0.2"
+      }
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -8049,6 +8465,11 @@
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
       "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg=="
     },
+    "is-shared-array-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA=="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -8062,6 +8483,11 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY="
+    },
     "is-symbol": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
@@ -8081,6 +8507,14 @@
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true
     },
+    "is-weakref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz",
+      "integrity": "sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==",
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -9569,6 +10003,21 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
+    },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -9676,11 +10125,6 @@
         "yallist": "^4.0.0"
       }
     },
-    "lz-string": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY="
-    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -9991,6 +10435,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moo": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
+      "integrity": "sha512-I1mnb5xn4fO80BH9BLcF0yLypy2UKl+Cb01Fu0hJRkJjlCRtxZMWkTdAtDd5ZqCOxtCkhmRwyI57vWT+1iZ67w=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10069,6 +10518,24 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
+    "nearley": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
+      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.5.0",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -10579,6 +11046,14 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
     },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "requires": {
+        "parse5": "^6.0.1"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -11971,6 +12446,17 @@
         }
       }
     },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -12092,6 +12578,20 @@
         "performance-now": "^2.1.0"
       }
     },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234="
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12553,6 +13053,28 @@
         }
       }
     },
+    "react-shallow-renderer": {
+      "version": "16.14.1",
+      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz",
+      "integrity": "sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0"
+      }
+    },
+    "react-test-renderer": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
+      "integrity": "sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "react-is": "^17.0.2",
+        "react-shallow-renderer": "^16.13.1",
+        "scheduler": "^0.20.2"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -12683,6 +13205,12 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -13155,6 +13683,15 @@
         }
       }
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -14086,6 +14623,16 @@
         "side-channel": "^1.0.4"
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.4.tgz",
+      "integrity": "sha512-hWCk/iqf7lp0/AgTF7/ddO1IWtSNPASjlzCicV5irAVdE1grjsneK26YG6xACMBEdCvO8fUST0UzDMh/2Qy+9Q==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
     "string.prototype.trimend": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
diff --git a/package.json b/package.json
index 2b469ffeef308ed1d58f10291e7d95bea4dbcc46..4d0ec5f27cedd242915a951703ef727e98e57a02 100644
--- a/package.json
+++ b/package.json
@@ -9,14 +9,15 @@
     "@heroicons/react": "^1.0.4",
     "@material-ui/core": "^4.12.3",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/material-ui": "^0.21.9",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
@@ -28,6 +29,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "testupdate": "react-scripts test -u",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "prettier": "prettier --write -u ."
@@ -51,8 +53,12 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^4.1.1",
+    "@types/enzyme": "^3.10.9",
+    "@types/jest": "^26.0.24",
     "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
diff --git a/src/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx
index 4ca9d0c9d297603e0fc0e6402a2ecd5441ea04b7..ecc75f508da9ba078fbe71da2bc707f9a5f4eee3 100644
--- a/src/components/PageContainer/index.tsx
+++ b/src/components/PageContainer/index.tsx
@@ -1,6 +1,6 @@
-import useStyles from './styles';
 import { Container, Grid } from '@material-ui/core';
 import { ReactNode } from 'react';
+import useStyles from './styles';
 type PageContainerProps = {
   children: ReactNode;
   title?: string;
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
index cbf41e49c6076d0744cfa309be5348d17d231517..2e4bc66cf658765d3a2f83911b253e0158362728 100644
--- a/src/helpers/types.ts
+++ b/src/helpers/types.ts
@@ -112,8 +112,8 @@ export type Issue = {
   state: StateGL;
   created_at: string;
   updated_at: string;
-  closed_at: string;
-  closed_by: string;
+  closed_at: string | null;
+  closed_by: string | null;
   labels: string[];
   milestone: Milestone;
   assignees: [];
diff --git a/src/tests/App.test.tsx b/src/tests/App.test.tsx
deleted file mode 100644
index 9c7faf5092a3218f8c68194cb0392280a08f8886..0000000000000000000000000000000000000000
--- a/src/tests/App.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import App from '../App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const a = true;
-  const b = true;
-  expect(a).toEqual(b);
-});
diff --git a/src/tests/__snapshots__/snapshot.test.tsx.snap b/src/tests/__snapshots__/snapshot.test.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..6cde48ff12e51e45fd5d8775d71d2e0672e9865f
--- /dev/null
+++ b/src/tests/__snapshots__/snapshot.test.tsx.snap
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot tests Snapshotting ChartBar 1`] = `
+<ChartContainer>
+  <Component
+    data={
+      Array [
+        Object {
+          "barLabel": "Label1",
+          "barValue": 4,
+        },
+        Object {
+          "barLabel": "Label2",
+          "barValue": 6,
+        },
+      ]
+    }
+  >
+    <Component
+      name="barValue"
+    />
+    <Component />
+    <Component
+      scaleName="barValue"
+      showGrid={false}
+      showLine={true}
+      showTicks={true}
+    />
+    <Component
+      argumentField="barLabel"
+      barWidth={0.9}
+      name="Units Sold"
+      scaleName="barValue"
+      valueField="barValue"
+    />
+    <Component
+      text="Some title"
+    />
+    <AnimationBase
+      duration={1000}
+      easing={[Function]}
+    />
+  </Component>
+</ChartContainer>
+`;
+
+exports[`Snapshot tests Snapshotting ChartPie 1`] = `
+<ChartContainer>
+  <Component
+    data={
+      Array [
+        Object {
+          "commitType": "Label1",
+          "val": 4,
+        },
+        Object {
+          "commitType": "Label2",
+          "val": 6,
+        },
+      ]
+    }
+  >
+    <Component />
+    <Component
+      argumentField="commitType"
+      innerRadius={0.6}
+      outerRadius={1}
+      valueField="val"
+    />
+    <Component
+      text="Some title"
+    />
+    <EventTrackerBase />
+    <Component />
+    <AnimationBase
+      duration={1000}
+      easing={[Function]}
+    />
+  </Component>
+</ChartContainer>
+`;
+
+exports[`Snapshot tests Snapshotting CommitsPerBranch page 1`] = `
+<PageContainer>
+  <header />
+  <div
+    className="makeStyles-switchcontainer-9"
+  />
+</PageContainer>
+`;
+
+exports[`Snapshot tests Snapshotting FeatVsFixesPage 1`] = `
+<PageContainer
+  title="Commit statistics"
+>
+  Here you can see data about the ratio between feats and fixes, and the ratio between lines of code added and deleted. This is cumulative data of all the commits in the master branch. You can also choose who you want to see data about. This is anonymised to preserve the authors' privacy.
+  <ChartPie
+    data={
+      Array [
+        Object {
+          "commitType": "feat",
+          "val": 0,
+        },
+        Object {
+          "commitType": "fix",
+          "val": 0,
+        },
+      ]
+    }
+    legend={true}
+    title="feats vs fixes"
+  />
+  <ChartPie
+    data={
+      Array [
+        Object {
+          "commitType": "additions",
+          "val": 0,
+        },
+        Object {
+          "commitType": "deletions",
+          "val": 0,
+        },
+      ]
+    }
+    legend={true}
+    title="additions vs deletions"
+  />
+</PageContainer>
+`;
+
+exports[`Snapshot tests Snapshotting Home page 1`] = `
+<PageContainer
+  title="Intro"
+>
+  <div>
+    In this project we visualize gitlab data about the repository used when developing this website. We use react and material UI for most of the layout, and use devexpress graphs for the base graph components.
+  </div>
+  <div
+    className="makeStyles-imgContainer-10"
+  >
+    <div>
+      <img
+        alt="react"
+        src="react.png"
+      />
+    </div>
+    <div>
+      <img
+        alt="react"
+        src="gitlab.png"
+      />
+    </div>
+    <div>
+      <img
+        alt="react"
+        className="makeStyles-materialUILogo-11"
+        src="materialui.png"
+      />
+    </div>
+  </div>
+</PageContainer>
+`;
+
+exports[`Snapshot tests Snapshotting PageContainer 1`] = `
+<WithStyles(ForwardRef(Grid))
+  className="makeStyles-background-6"
+  container={true}
+>
+  <WithStyles(ForwardRef(Container))
+    className="makeStyles-main-5"
+    maxWidth="md"
+  >
+    <h3>
+      Some title
+    </h3>
+    <div>
+      Hello world
+    </div>
+  </WithStyles(ForwardRef(Container))>
+</WithStyles(ForwardRef(Grid))>
+`;
+
+exports[`Snapshot tests Snapshotting Popup 1`] = `
+<WithStyles(ForwardRef(Dialog))
+  PaperProps={
+    Object {
+      "className": "makeStyles-dialog-4",
+    }
+  }
+  fullWidth={true}
+  maxWidth="xs"
+  onClose={[Function]}
+  open={true}
+>
+  <WithStyles(ForwardRef(IconButton))
+    aria-label="close"
+    className="makeStyles-closeButton-3"
+    onClick={[Function]}
+  >
+    <XIcon
+      width="1em"
+    />
+  </WithStyles(ForwardRef(IconButton))>
+  <h1
+    className="makeStyles-title-1"
+    id="dialogTitle"
+  >
+    Popup
+  </h1>
+  <div
+    className="makeStyles-contentDiv-2"
+  />
+</WithStyles(ForwardRef(Dialog))>
+`;
+
+exports[`Snapshot tests Snapshotting TimePerIssueLabelPage 1`] = `
+<PageContainer
+  title="Average  Close Time Per Issue-label"
+>
+  <p>
+    This counts only finished issues and it is the total time from the issue was created to it was closed.
+  </p>
+  <div>
+    <WithStyles(ForwardRef(FormControl))
+      className="makeStyles-dropdown-12"
+    >
+      <WithStyles(ForwardRef(InputLabel))>
+        Showing labels
+      </WithStyles(ForwardRef(InputLabel))>
+      <WithStyles(ForwardRef(Select))
+        className="makeStyles-select-13"
+        id="demo-simple-select"
+        labelId="demo-simple-select-label"
+        onChange={[Function]}
+        value="[\\"Good first issue\\",\\"Easy\\",\\"Hard\\",\\"Possibly impossible\\"]"
+      >
+        <WithStyles(ForwardRef(MenuItem))
+          key="[\\"Good first issue\\",\\"Easy\\",\\"Hard\\",\\"Possibly impossible\\"]"
+          value="[\\"Good first issue\\",\\"Easy\\",\\"Hard\\",\\"Possibly impossible\\"]"
+        >
+          <div>
+            Difficulty
+          </div>
+        </WithStyles(ForwardRef(MenuItem))>
+        <WithStyles(ForwardRef(MenuItem))
+          key="[\\"API\\",\\"Browser storage\\",\\"DevOps\\",\\"Testing\\"]"
+          value="[\\"API\\",\\"Browser storage\\",\\"DevOps\\",\\"Testing\\"]"
+        >
+          <div>
+            Tech Description
+          </div>
+        </WithStyles(ForwardRef(MenuItem))>
+        <WithStyles(ForwardRef(MenuItem))
+          key="[\\"Documentation\\",\\"Doing\\",\\"Important\\",\\"Set-up\\",\\"Planning\\"]"
+          value="[\\"Documentation\\",\\"Doing\\",\\"Important\\",\\"Set-up\\",\\"Planning\\"]"
+        >
+          <div>
+            Other
+          </div>
+        </WithStyles(ForwardRef(MenuItem))>
+      </WithStyles(ForwardRef(Select))>
+    </WithStyles(ForwardRef(FormControl))>
+  </div>
+</PageContainer>
+`;
diff --git a/src/tests/calculations.test.ts b/src/tests/calculations.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b80521522974a14fe8869b50635effb80a69fad6
--- /dev/null
+++ b/src/tests/calculations.test.ts
@@ -0,0 +1,28 @@
+import { BarDataItem } from '../helpers/types';
+import { avgTimePerIssueLabel } from './../pages/TimePerIssueLabelPage/utils';
+import { ISSUE_1, NON_CLOSED_ISSUES, NO_DATA, USED_LABELS } from './dummydata';
+
+describe('Testing that the avgTimePerIssueLabel works as expected', () => {
+  test('Test that for an empty issuelist, an empty list is returned', () => {
+    const result = avgTimePerIssueLabel([], USED_LABELS);
+    expect(result).toEqual(NO_DATA);
+  });
+
+  test('Test that for a single issue, the time used for that issue is returned', () => {
+    const result = avgTimePerIssueLabel([ISSUE_1], USED_LABELS);
+    if (ISSUE_1.closed_at == null) return fail();
+    const expected_ms =
+      new Date(ISSUE_1.closed_at).getTime() - new Date(ISSUE_1.created_at).getTime();
+    const expected_h = expected_ms / (60 * 60 * 1000);
+    const expected: BarDataItem[] = NO_DATA.map((barItem) => ({
+      ...barItem,
+      barValue: expected_h,
+    }));
+    expect(result).toEqual(expected);
+  });
+
+  test('Test that for a list of an issue with no closed issues, an empty list is returned', () => {
+    const result = avgTimePerIssueLabel(NON_CLOSED_ISSUES, USED_LABELS);
+    expect(result).toEqual(NO_DATA);
+  });
+});
diff --git a/src/tests/dummydata.ts b/src/tests/dummydata.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4db183aaa96d6b97d8a21c6736dfc11bc0930ede
--- /dev/null
+++ b/src/tests/dummydata.ts
@@ -0,0 +1,143 @@
+import { Label } from '../helpers/constants';
+import { BarDataItem, Issue, PieDataItem } from '../helpers/types';
+
+// Other created issues owerwrite this, as most is not used data.
+const issueRest: Issue = {
+  id: 2,
+  iid: 2,
+  project_id: 2,
+  state: 'active',
+  title: 'Some issue',
+  description: '',
+  created_at: '',
+  closed_at: null,
+  labels: [''],
+  updated_at: '',
+  closed_by: '',
+  milestone: {
+    id: 2,
+    iid: 2,
+    project_id: '',
+    title: '',
+    description: '',
+    state: 'active',
+    created_at: '',
+    updated_at: '',
+    due_date: '',
+    start_date: '',
+    expired: '',
+    web_url: '',
+  },
+  assignees: [],
+  author: {
+    id: 3,
+    name: 'hei',
+    username: 'hei',
+    state: 'active',
+    avatar_url: 'hei',
+    web_url: 'hei',
+  },
+  type: 'ISSUE',
+  assignee: [],
+  user_notes_count: 2,
+  merge_requests_count: 2,
+  upvotes: 2,
+  downvotes: 2,
+  due_date: '',
+  confidential: false,
+  discussion_locked: null,
+  issue_type: 'issue',
+  web_url: '',
+  time_stats: {
+    time_estimate: 4,
+    total_time_spent: 4,
+    human_time_estimate: null,
+    human_total_time_spent: null,
+  },
+  task_completion_status: { count: 5, completed_count: 5 },
+  has_tasks: true,
+  _links: { self: 'hei', notes: 'hei', award_emoji: 'hei', project: 'hei' },
+  references: { short: 'dfsf', relative: 'dfsf', full: 'dfsf' },
+  moved_to_id: null,
+  service_desk_reply_to: null,
+};
+
+/* type IssueMatters = {
+  title: string;
+  description: string;
+  created_at: string;
+  closed_at: string;
+  labels: string[];
+}; */
+
+export const ISSUE_1: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-09T11:47:21.510+02:00"',
+  closed_at: '2021-09-27T13:30:39.518+02:00',
+  labels: [Label.API, Label.BROWSER_STORAGE, Label.IMPORTANT],
+};
+
+export const ISSUE_2: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-01T11:47:21.510+02:00"',
+  closed_at: '2021-09-10T13:30:39.518+02:00',
+  labels: [Label.API],
+};
+
+export const ISSUE_3: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-09T11:47:21.510+02:00"',
+  closed_at: '2021-09-11T13:30:39.518+02:00',
+  labels: [Label.BROWSER_STORAGE],
+};
+
+export const ISSUE_4: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-08T11:47:21.510+02:00"',
+  closed_at: '2021-09-11T13:30:39.518+02:00',
+  labels: [Label.API],
+};
+
+export const ISSUE_5: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-08T11:47:21.510+02:00"',
+  labels: [Label.BROWSER_STORAGE, Label.IMPORTANT],
+};
+
+export const ISSUE_6: Issue = {
+  ...issueRest,
+  created_at: '"2021-09-08T11:47:21.510+02:00"',
+  labels: [Label.IMPORTANT],
+};
+
+export const USED_LABELS = [Label.API, Label.BROWSER_STORAGE, Label.IMPORTANT];
+
+export const ALL_ISSUES = [ISSUE_1, ISSUE_2, ISSUE_3, ISSUE_4, ISSUE_5, ISSUE_6];
+
+export const NON_CLOSED_ISSUES = [ISSUE_5, ISSUE_6];
+
+export const NO_DATA: BarDataItem[] = USED_LABELS.reduce((data: BarDataItem[], label) => {
+  return [
+    ...data,
+    {
+      barLabel: label,
+      barValue: 0,
+    },
+  ];
+}, []);
+
+export const CHART_BAR_DATA: BarDataItem[] = [
+  {
+    barLabel: 'Label1',
+    barValue: 4,
+  },
+  { barLabel: 'Label2', barValue: 6 },
+];
+
+export const CHART_PIE_DATA: PieDataItem[] = [
+  {
+    commitType: 'Label1',
+    val: 4,
+  },
+  { commitType: 'Label2', val: 6 },
+];
diff --git a/src/tests/snapshot.test.tsx b/src/tests/snapshot.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fc66d4e70c811a38e2a8f77af4806f491e05454
--- /dev/null
+++ b/src/tests/snapshot.test.tsx
@@ -0,0 +1,64 @@
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import ChartBar from '../components/ChartBar';
+import ChartPie from '../components/ChartPie';
+import PageContainer from '../components/PageContainer';
+import Popup from '../components/Popup';
+import CommitsPerBranchPage from '../pages/CommitsPerBranch/index';
+import FeatsVsFixesPage from '../pages/FeatsVsFixesPage/index';
+import Home from '../pages/Home';
+import TimePerIssueLabelPage from '../pages/TimePerIssueLabelPage/index';
+import { CHART_BAR_DATA, CHART_PIE_DATA } from './dummydata';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Snapshot tests', () => {
+  // Snapshotting some components that many other components rely on and therefore should not be changed.
+  test('Snapshotting ChartBar', () => {
+    const result = toJson(shallow(<ChartBar data={CHART_BAR_DATA} title="Some title" />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting ChartPie', () => {
+    const result = toJson(shallow(<ChartPie data={CHART_PIE_DATA} title="Some title" />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting Popup', () => {
+    const result = toJson(shallow(<Popup open={true} title="Popup" onClose={() => {}} />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting PageContainer', () => {
+    const result = toJson(
+      shallow(
+        <PageContainer title="Some title">
+          <div>Hello world</div>
+        </PageContainer>,
+      ),
+    );
+    expect(result).toMatchSnapshot();
+  });
+
+  // Snapshotting the pages that are not indended to be changed
+  test('Snapshotting FeatVsFixesPage', () => {
+    const result = toJson(shallow(<FeatsVsFixesPage />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting CommitsPerBranch page', () => {
+    const result = toJson(shallow(<CommitsPerBranchPage />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting Home page', () => {
+    const result = toJson(shallow(<Home />));
+    expect(result).toMatchSnapshot();
+  });
+
+  test('Snapshotting TimePerIssueLabelPage', () => {
+    const result = toJson(shallow(<TimePerIssueLabelPage />));
+    expect(result).toMatchSnapshot();
+  });
+});
diff --git a/src/tests/uitest.test.tsx b/src/tests/uitest.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..41faeee8a4905fcb32c99006187e2f51c4eb785b
--- /dev/null
+++ b/src/tests/uitest.test.tsx
@@ -0,0 +1,18 @@
+import { Link } from '@material-ui/core';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Enzyme, { mount } from 'enzyme';
+import App from '../App';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Testing that clicking the different menu buttons directs to the correct url', () => {
+  let wrapper: Enzyme.ReactWrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<App />);
+  });
+  test('Testing mounting the App component and that clicking the first link gived the home path', () => {
+    wrapper.find(Link).at(0).simulate('click');
+    expect(window.location.pathname).toEqual('/');
+  });
+});