From 3a7eb10c71f0a2da56d8ed9b748c23f09c8270fa Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Thu, 1 Oct 2020 12:15:37 +0300
Subject: [PATCH] web: tests fix

Change-Id: I73cfb86fd214afb02be6a9e96e0ae5ffb92fd214
---
 web/satellite/package-lock.json               | 319 ++++------
 .../account/billing/BillingArea.vue           |   2 -
 .../src/components/common/VDatePicker.vue     | 567 ------------------
 .../tests/unit/common/VDatePicker.spec.ts     | 198 ------
 web/storagenode/package-lock.json             |  14 +-
 .../payments/HeldHistoryAllStatsTable.spec.ts |   8 +-
 .../HeldHistoryAllStatsTableItemSmall.spec.ts |   7 +-
 .../HeldHistoryMonthlyBreakdownTable.spec.ts  |  15 +-
 ...toryMonthlyBreakdownTableItemSmall.spec.ts |   9 +-
 .../HeldHistoryAllStatsTable.spec.ts.snap     |  12 +-
 ...HistoryAllStatsTableItemSmall.spec.ts.snap |   8 +-
 11 files changed, 181 insertions(+), 978 deletions(-)
 delete mode 100644 web/satellite/src/components/common/VDatePicker.vue
 delete mode 100644 web/satellite/tests/unit/common/VDatePicker.spec.ts

diff --git a/web/satellite/package-lock.json b/web/satellite/package-lock.json
index c0136d203..084f7eacc 100644
--- a/web/satellite/package-lock.json
+++ b/web/satellite/package-lock.json
@@ -1743,16 +1743,6 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
       "dev": true
     },
-    "@types/mini-css-extract-plugin": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz",
-      "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/webpack": "*"
-      }
-    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2160,6 +2150,103 @@
         "yorkie": "^2.0.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "fork-ts-checker-webpack-plugin-v5": {
+          "version": "npm:fork-ts-checker-webpack-plugin@5.2.0",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.0.tgz",
+          "integrity": "sha512-NEKcI0+osT5bBFZ1SFGzJMQETjQWZrSvMO1g0nAR/w0t328Z41eN8BJEIZyFCl2HsuiJpa9AN474Nh2qLVwGLQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@types/json-schema": "^7.0.5",
+            "chalk": "^4.1.0",
+            "cosmiconfig": "^6.0.0",
+            "deepmerge": "^4.2.2",
+            "fs-extra": "^9.0.0",
+            "memfs": "^3.1.2",
+            "minimatch": "^3.0.4",
+            "schema-utils": "2.7.0",
+            "semver": "^7.3.2",
+            "tapable": "^1.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+              "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+              }
+            },
+            "semver": {
+              "version": "7.3.2",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+              "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "tslint": {
           "version": "5.20.1",
           "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.20.1.tgz",
@@ -2359,6 +2446,17 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2454,6 +2552,18 @@
             "graceful-fs": "^4.1.6"
           }
         },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2561,6 +2671,18 @@
           "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
           "dev": true
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.0.0-beta.8",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
+          "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -7389,103 +7511,6 @@
         "worker-rpc": "^0.1.0"
       }
     },
-    "fork-ts-checker-webpack-plugin-v5": {
-      "version": "npm:fork-ts-checker-webpack-plugin@5.2.0",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.0.tgz",
-      "integrity": "sha512-NEKcI0+osT5bBFZ1SFGzJMQETjQWZrSvMO1g0nAR/w0t328Z41eN8BJEIZyFCl2HsuiJpa9AN474Nh2qLVwGLQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-          }
-        },
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -16720,86 +16745,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
-      "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/mini-css-extract-plugin": "^0.9.1",
-        "chalk": "^3.0.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^1.2.3",
-        "merge-source-map": "^1.1.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-parser": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/vue-parser/-/vue-parser-1.1.6.tgz",
diff --git a/web/satellite/src/components/account/billing/BillingArea.vue b/web/satellite/src/components/account/billing/BillingArea.vue
index d1804378e..3119bab12 100644
--- a/web/satellite/src/components/account/billing/BillingArea.vue
+++ b/web/satellite/src/components/account/billing/BillingArea.vue
@@ -63,7 +63,6 @@ import SmallDepositHistory from '@/components/account/billing/depositAndBillingH
 import EstimatedCostsAndCredits from '@/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue';
 import HistoryDropdown from '@/components/account/billing/HistoryDropdown.vue';
 import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
-import VDatepicker from '@/components/common/VDatePicker.vue';
 
 import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
 import ExpandIcon from '@/../static/images/account/billing/expand.svg';
@@ -83,7 +82,6 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
         SmallDepositHistory,
         EstimatedCostsAndCredits,
         PaymentMethods,
-        VDatepicker,
         DatePickerIcon,
         LowBalanceIcon,
         NegativeBalanceIcon,
diff --git a/web/satellite/src/components/common/VDatePicker.vue b/web/satellite/src/components/common/VDatePicker.vue
deleted file mode 100644
index 170ab1c77..000000000
--- a/web/satellite/src/components/common/VDatePicker.vue
+++ /dev/null
@@ -1,567 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="cov-vue-date">
-        <div class="datepickbox">
-            <input type="text" title="input date" class="cov-datepicker" readonly="readonly" :style="option.inputStyle ? option.inputStyle : {}" />
-        </div>
-        <div class="datepicker-overlay" v-if="isChecking" @click.self="dismiss" :style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}">
-            <div class="cov-date-body" :style="{'background-color': option.color ? option.color.header : '#3f51b5'}">
-                <div class="cov-date-monthly">
-                    <div class="cov-date-previous" @click="onPreviousMonthClick">«</div>
-                    <div class="cov-date-caption" :style="{'color': option.color ? option.color.headerText : '#fff'}">
-                        <span class="year-selection" @click="showYear">{{selectedDateState.year}}</span>
-                        <span class="month-selection" @click="showMonth">{{displayedMonth}}</span>
-                    </div>
-                    <div class="cov-date-next" @click="onNextMonthClick">»</div>
-                </div>
-                <div class="cov-date-box" v-if="isDaysChoiceShown">
-                    <div class="cov-picker-box">
-                        <div class="week">
-                            <ul class="week-ul">
-                                <li class="week-li" v-for="week in daysInWeek" :key="week">{{week}}</li>
-                            </ul>
-                        </div>
-                        <div class="day" v-for="(day, index) in daysToShow" :key="index" @click="checkDay(day)" :class="{'checked':day.checked,'unavailable':day.unavailable,'passive-day': !(day.inMonth), 'today': day.today}" :style="day.checked ? (option.color && option.color.checkedDay ? { background: option.color.checkedDay } : { background: '#2683FF' }) : {}">{{day.value}}</div>
-                    </div>
-                </div>
-                <div class="cov-date-box list-box" v-if="isYearChoiceShown">
-                    <div class="cov-picker-box date-list" id="yearList">
-                        <div class="date-item year" v-for="yearItem in years" :key="yearItem" @click="setYear(yearItem)">{{yearItem}}</div>
-                    </div>
-                </div>
-                <div class="cov-date-box list-box" v-if="isMonthChoiceShown">
-                    <div class="cov-picker-box date-list">
-                        <div class="date-item month" v-for="monthItem in monthsNames" :key="monthItem" @click="setMonth(monthItem)">{{monthItem}}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-import {
-    DateGenerator,
-    DateStamp,
-    DayAction,
-    DayItem,
-    DisplayedType,
-    Options,
-} from '@/utils/datepicker';
-
-@Component
-export default class VDatePicker extends Vue {
-    @Prop({default: () => new Options()})
-    private option: Options;
-    @Prop({default: () => false})
-    private isSundayFirst: boolean;
-
-    private readonly MAX_DAYS_SELECTED: number = 2;
-    public selectedDays: Date[] = [];
-
-    private showType: number = DisplayedType.Day;
-    private dateGenerator: DateGenerator = new DateGenerator();
-
-    // daysInWeek contains days names abbreviations
-    public readonly daysInWeek: string[] = [];
-    public readonly monthsNames: string[] = [];
-    // years contains years numbers available to choose
-    public readonly years: number[] = [];
-
-    // isChecking indicates when calendar is shown
-    public isChecking: boolean = false;
-    public displayedMonth: string;
-    // daysToShow contains days of selected month with a few extra days from adjacent months
-    public daysToShow: DayItem[] = [];
-
-    // Combination of selected year, month and day
-    public selectedDateState: DateStamp = new DateStamp(0, 0, 0);
-
-    public constructor() {
-        super();
-
-        this.daysInWeek = this.isSundayFirst ? this.option.sundayFirstWeek : this.option.mondayFirstWeek;
-        this.monthsNames = this.option.month;
-        this.displayedMonth = this.monthsNames[0];
-        this.years = this.dateGenerator.populateYears();
-    }
-
-    /**
-     * computed value that indicates should days view be shown
-     */
-    public get isDaysChoiceShown(): boolean {
-        return this.showType === DisplayedType.Day;
-    }
-
-    /**
-     * computed value that indicates should month choice view be shown
-     */
-    public get isMonthChoiceShown(): boolean {
-        return this.showType === DisplayedType.Month;
-    }
-
-    /**
-     * computed value that indicates should year choice view be shown
-     */
-    public get isYearChoiceShown(): boolean {
-        return this.showType === DisplayedType.Year;
-    }
-
-    /**
-     * onPreviousMonthClick set previous month
-     */
-    public onPreviousMonthClick(): void {
-        this.nextMonth(DayAction.Previous);
-    }
-
-    /**
-     * onNextMonthClick set next month
-     */
-    public onNextMonthClick(): void {
-        this.nextMonth(DayAction.Next);
-    }
-
-    /**
-     * checkDay toggles checked property of day object
-     *
-     * @param day represent day object to check/uncheck
-     */
-    public checkDay(day: DayItem): void {
-        if (day.unavailable || !day.value) {
-            return;
-        }
-
-        if (!day.inMonth) {
-            this.nextMonth(day.action);
-
-            return;
-        }
-
-        if (day.checked) {
-            day.checked = false;
-            this.selectedDays.splice(this.selectedDays.indexOf(day.moment), 1);
-
-            return;
-        }
-
-        if (this.selectedDays.length < this.MAX_DAYS_SELECTED) {
-            this.selectedDays.push(day.moment);
-            day.checked = true;
-        }
-
-        if (this.selectedDays.length === this.MAX_DAYS_SELECTED) {
-            this.submitSelectedDays();
-        }
-    }
-
-    /**
-     * setYear selects chosen year
-     *
-     * @param year
-     */
-    public setYear(year): void {
-        this.populateDays(new Date(year, this.selectedDateState.month, 1));
-    }
-
-    /**
-     * setYear selects chosen month
-     *
-     * @param month
-     */
-    public setMonth(month: string): void {
-        const monthIndex = this.monthsNames.indexOf(month);
-        this.populateDays(new Date(this.selectedDateState.year, monthIndex, 1));
-    }
-
-    /**
-     * dismiss closes popup and clears values
-     */
-    public dismiss(): void {
-        if (!this.option.dismissible) {
-            return;
-        }
-
-        this.selectedDays = [];
-        this.isChecking = false;
-    }
-
-    /**
-     * showCheck used for external popup opening
-     */
-    public showCheck(): void {
-        this.populateDays();
-        this.isChecking = true;
-    }
-
-    /**
-     * showYear used for opening choose year view
-     */
-    public showYear(): void {
-        this.showType = DisplayedType.Year;
-    }
-
-    /**
-     * showMonth used for opening choose month view
-     */
-    public showMonth(): void {
-        this.showType = DisplayedType.Month;
-    }
-
-    /**
-     * nextMonth set month depends on day action (next or previous)
-     *
-     * @param action represents next or previous type of action
-     */
-    private nextMonth(action: DayAction): void {
-        const currentMoment = new Date(this.selectedDateState.year, this.selectedDateState.month, 1);
-        const currentMonth = currentMoment.getMonth();
-        const now = new Date();
-
-        switch (action) {
-            case DayAction.Next:
-                if (currentMonth === now.getMonth() && currentMoment.getFullYear() === now.getFullYear()) {
-                    return;
-                }
-
-                currentMoment.setMonth(currentMonth + 1);
-                break;
-            case DayAction.Previous:
-                currentMoment.setMonth(currentMonth - 1);
-                break;
-        }
-
-        this.populateDays(currentMoment);
-    }
-
-    /**
-     * submitSelectedDays emits function to receive selected dates externally and then clears state
-     */
-    private submitSelectedDays(): void {
-        this.$emit('change', this.selectedDays);
-        this.isChecking = false;
-        this.selectedDays = [];
-    }
-
-    /**
-     * populateDays used for populating date items into calendars depending on selected date
-     *
-     * @param date represents Date which is used to create current date items to show
-     */
-    private populateDays(date: Date = new Date()): void {
-        this.selectedDateState.fromDate(date);
-        this.showType = DisplayedType.Day;
-        this.displayedMonth = this.monthsNames[this.selectedDateState.month];
-        this.daysToShow = this.dateGenerator.populateDays(this.selectedDateState, this.isSundayFirst);
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .datepicker-overlay {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        z-index: 998;
-        top: 0;
-        left: 0;
-        overflow: hidden;
-        -webkit-animation: fadein 0.5s;
-
-        /* Safari, Chrome and Opera > 12.1 */
-        -moz-animation: fadein 0.5s;
-
-        /* Internet Explorer */
-        -o-animation: fadein 0.5s;
-
-        /* Opera < 12.1 */
-        animation: fadein 0.5s;
-    }
-
-    @keyframes fadein {
-
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    /* Firefox < 16 */
-    @-moz-keyframes fadein {
-
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    /* Safari, Chrome and Opera > 12.1 */
-    @-webkit-keyframes fadein {
-
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    /* Internet Explorer */
-    @-ms-keyframes fadein {
-
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    /* Opera < 12.1 */
-    @-o-keyframes fadein {
-
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    .cov-date-body {
-        background: #3f51b5;
-        overflow: hidden;
-        font-size: 16px;
-        font-weight: 400;
-        position: fixed;
-        display: block;
-        width: 400px;
-        max-width: 100%;
-        z-index: 999;
-        top: 50%;
-        left: 50%;
-        -webkit-transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-        font-family: 'font_medium', sans-serif;
-    }
-
-    .cov-picker-box {
-        background: #fff;
-        display: inline-block;
-        padding: 25px;
-        box-sizing: border-box !important;
-        -moz-box-sizing: border-box !important;
-        -webkit-box-sizing: border-box !important;
-        width: 400px;
-        max-width: 100%;
-        height: 280px;
-        text-align: start !important;
-    }
-
-    .day {
-        width: 14.2857143%;
-        display: inline-block;
-        text-align: center;
-        cursor: pointer;
-        height: 34px;
-        padding: 0;
-        line-height: 34px;
-        color: #000;
-        background: #fff;
-        vertical-align: middle;
-    }
-
-    .week-ul {
-        margin: 0 0 8px;
-        padding: 0;
-        list-style: none;
-    }
-
-    .week-li {
-        width: 14.2%;
-        display: inline-block;
-        text-align: center;
-        background: transparent;
-        color: #000;
-        font-weight: bold;
-    }
-
-    .passive-day {
-        color: #bbb;
-    }
-
-    .checked {
-        background: #2683ff;
-        color: #fff !important;
-    }
-
-    .unavailable {
-        color: #ccc;
-        cursor: not-allowed;
-    }
-
-    .cov-date-monthly {
-        height: 50px;
-    }
-
-    .cov-date-monthly > div {
-        display: inline-block;
-        padding: 0;
-        margin: 0;
-        vertical-align: middle;
-        color: #fff;
-        height: 50px;
-        float: left;
-        text-align: center;
-    }
-
-    .cov-date-previous,
-    .cov-date-next {
-        position: relative;
-        width: 20% !important;
-        text-indent: -300px;
-        overflow: hidden;
-        color: #fff;
-    }
-
-    .cov-date-caption {
-        width: 60%;
-        padding: 10px 0 !important;
-        box-sizing: border-box;
-        font-size: 18px;
-        font-family: 'font_medium', sans-serif;
-        line-height: 30px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .month-selection,
-    .year-selection {
-        padding: 0 3px;
-    }
-
-    .cov-date-previous:hover,
-    .cov-date-next:hover {
-        background: rgba(255, 255, 255, 0.1);
-    }
-
-    .day:hover {
-        background: #eaeaea;
-    }
-
-    .unavailable:hover {
-        background: none;
-    }
-
-    .cov-date-next:before,
-    .cov-date-previous:before {
-        width: 20px;
-        height: 2px;
-        text-align: center;
-        position: absolute;
-        background: #fff;
-        top: 50%;
-        margin-top: -7px;
-        margin-left: -7px;
-        left: 50%;
-        line-height: 0;
-        content: '';
-        -webkit-transform: rotate(45deg);
-        -moz-transform: rotate(45deg);
-        transform: rotate(45deg);
-    }
-
-    .cov-date-next:after,
-    .cov-date-previous:after {
-        width: 20px;
-        height: 2px;
-        text-align: center;
-        position: absolute;
-        background: #fff;
-        margin-top: 6px;
-        margin-left: -7px;
-        top: 50%;
-        left: 50%;
-        line-height: 0;
-        content: '';
-        -webkit-transform: rotate(-45deg);
-        -moz-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-
-    .cov-date-previous:after {
-        -webkit-transform: rotate(45deg);
-        -moz-transform: rotate(45deg);
-        transform: rotate(45deg);
-    }
-
-    .cov-date-previous:before {
-        -webkit-transform: rotate(-45deg);
-        -moz-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-
-    .date-item {
-        text-align: center;
-        font-size: 20px;
-        padding: 10px 0;
-        cursor: pointer;
-    }
-
-    .date-item:hover {
-        background: #e0e0e0;
-    }
-
-    .date-list {
-        overflow: auto;
-        vertical-align: top;
-        padding: 0;
-    }
-
-    .cov-vue-date {
-        display: inline-block;
-        color: #5d5d5d;
-    }
-
-    .watch-box {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    ::-webkit-scrollbar {
-        width: 2px;
-    }
-
-    ::-webkit-scrollbar-track {
-        background: #e3e3e3;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: #c1c1c1;
-        border-radius: 2px;
-    }
-
-    .cov-date-box {
-        font-family: 'font_medium', sans-serif;
-    }
-
-    .today {
-        background: lightblue;
-        color: white;
-    }
-</style>
diff --git a/web/satellite/tests/unit/common/VDatePicker.spec.ts b/web/satellite/tests/unit/common/VDatePicker.spec.ts
deleted file mode 100644
index 877979b6e..000000000
--- a/web/satellite/tests/unit/common/VDatePicker.spec.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import VDatePicker from '@/components/common/VDatePicker.vue';
-
-import { mount } from '@vue/test-utils';
-
-const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-describe('VDatePicker.vue', () => {
-    it('renders correctly', async () => {
-        const wrapper = mount(VDatePicker, {});
-
-        await wrapper.vm.showCheck();
-
-        expect(wrapper.findAll('li').at(0).text()).toBe('Mo');
-        expect(wrapper.findAll('.day').length).toBe(42);
-
-        await wrapper.vm.showYear();
-
-        expect(wrapper.findAll('.year').length).toBe(100);
-
-        await wrapper.vm.showMonth();
-
-        expect(wrapper.findAll('.month').length).toBe(12);
-    });
-
-    it('renders correctly with props', async () => {
-        const wrapper = mount(VDatePicker, {
-            propsData: {
-                isSundayFirst: true,
-            },
-        });
-
-        await wrapper.vm.showCheck();
-
-        expect(wrapper.findAll('li').at(0).text()).toBe('Su');
-        expect(wrapper.findAll('.day').length).toBe(42);
-    });
-
-    it('triggers correct functionality on normal check', async () => {
-        const wrapper = mount(VDatePicker);
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(2019);
-        await wrapper.vm.setMonth(months[9]);
-
-        wrapper.findAll('.day').at(1).trigger('click');
-
-        expect(wrapper.vm.selectedDays.length).toBe(1);
-        const selectedDay = wrapper.vm.selectedDays[0];
-        expect(selectedDay.getDate()).toBe(1);
-        expect(selectedDay.getMonth()).toBe(9);
-        expect(selectedDay.getFullYear()).toBe(2019);
-
-        wrapper.findAll('.day').at(2).trigger('click');
-
-        expect(wrapper.vm.selectedDays.length).toBe(0);
-    });
-
-    it('triggers correct functionality on toggle checking', async () => {
-        const wrapper = mount(VDatePicker);
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(2019);
-        await wrapper.vm.setMonth(months[9]);
-
-        wrapper.findAll('.day').at(1).trigger('click');
-
-        expect(wrapper.vm.selectedDays.length).toBe(1);
-        const selectedDay1 = wrapper.vm.selectedDays[0];
-        expect(selectedDay1.getDate()).toBe(1);
-        expect(selectedDay1.getMonth()).toBe(9);
-        expect(selectedDay1.getFullYear()).toBe(2019);
-
-        wrapper.findAll('.day').at(1).trigger('click');
-
-        expect(wrapper.vm.selectedDays.length).toBe(0);
-
-        wrapper.findAll('.day').at(2).trigger('click');
-
-        expect(wrapper.vm.selectedDays.length).toBe(1);
-        const selectedDay2 = wrapper.vm.selectedDays[0];
-        expect(selectedDay2.getDate()).toBe(2);
-        expect(selectedDay2.getMonth()).toBe(9);
-        expect(selectedDay2.getFullYear()).toBe(2019);
-    });
-
-    it('triggers correct functionality on month selection', async () => {
-        const wrapper = mount(VDatePicker);
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(2019);
-        await wrapper.vm.setMonth(months[9]);
-
-        expect(wrapper.findAll('.month').length).toBe(0);
-
-        await wrapper.find('.month-selection').trigger('click');
-
-        expect(wrapper.findAll('.month').length).toBe(12);
-
-        await wrapper.findAll('.month').at(0).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.month).toBe(0);
-        expect(wrapper.find('.month-selection').text()).toBe(months[0]);
-    });
-
-    it('triggers correct functionality on year selection', async () => {
-        const wrapper = mount(VDatePicker);
-        const now = new Date();
-        const nowYear = now.getFullYear();
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(2019);
-        await wrapper.vm.setMonth(months[9]);
-
-        expect(wrapper.findAll('.year').length).toBe(0);
-
-        await wrapper.find('.year-selection').trigger('click');
-
-        expect(wrapper.findAll('.year').length).toBe(100);
-        expect(wrapper.findAll('.year').at(0).text()).toBe(nowYear.toString());
-
-        await wrapper.find('.year-selection').trigger('click');
-        await wrapper.findAll('.year').at(1).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1);
-        expect(wrapper.find('.year-selection').text()).toBe((nowYear - 1).toString());
-    });
-
-    it('triggers correct functionality on month incrementation', async () => {
-        const wrapper = mount(VDatePicker);
-        const now = new Date();
-        const nowYear = now.getFullYear();
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(nowYear);
-        await wrapper.vm.setMonth(months[now.getMonth() - 1]);
-
-        const actualDates = wrapper.findAll('.day');
-
-        actualDates.at(actualDates.length - 1).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(nowYear);
-        expect(wrapper.vm.selectedDateState.month).toBe(now.getMonth());
-
-        wrapper.find('.cov-date-next').trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(nowYear);
-        expect(wrapper.vm.selectedDateState.month).toBe(now.getMonth());
-
-        wrapper.vm.setYear(nowYear - 1);
-        wrapper.vm.setMonth(months[0]);
-
-        const changedDates = wrapper.findAll('.day');
-
-        changedDates.at(changedDates.length - 1).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1);
-        expect(wrapper.vm.selectedDateState.month).toBe(1);
-
-        wrapper.find('.cov-date-next').trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1);
-        expect(wrapper.vm.selectedDateState.month).toBe(2);
-    });
-
-    it('triggers correct functionality on month decrementation', async () => {
-        const wrapper = mount(VDatePicker);
-
-        await wrapper.vm.showCheck();
-        await wrapper.vm.setYear(2019);
-        await wrapper.vm.setMonth(months[9]);
-
-        wrapper.findAll('.day').at(0).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.month).toBe(8);
-
-        wrapper.find('.cov-date-previous').trigger('click');
-
-        expect(wrapper.vm.selectedDateState.month).toBe(7);
-
-        wrapper.vm.setMonth(months[0]);
-
-        wrapper.find('.cov-date-previous').trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(2018);
-        expect(wrapper.vm.selectedDateState.month).toBe(11);
-
-        wrapper.vm.setYear(2019);
-        wrapper.vm.setMonth(months[0]);
-
-        wrapper.findAll('.day').at(0).trigger('click');
-
-        expect(wrapper.vm.selectedDateState.year).toBe(2018);
-        expect(wrapper.vm.selectedDateState.month).toBe(11);
-    });
-});
diff --git a/web/storagenode/package-lock.json b/web/storagenode/package-lock.json
index 3851f3de2..b950dba4b 100644
--- a/web/storagenode/package-lock.json
+++ b/web/storagenode/package-lock.json
@@ -12084,9 +12084,9 @@
       "dev": true
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-gyp": {
@@ -14704,12 +14704,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts
index 7e83ee14d..2d2b8df51 100644
--- a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts
+++ b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts
@@ -26,12 +26,16 @@ const store = new Vuex.Store({ modules: { payoutModule }});
 
 describe('HeldHistoryAllStatsTable', (): void => {
     it('renders correctly with actual values', async (): Promise<void> => {
+        const _Date = Date;
+        const mockedDate = new Date(1580522290000);
+        const testJoinAt = new Date(Date.UTC(2019, 6, 30));
+        global.Date = jest.fn(() => mockedDate);
+
         const wrapper = shallowMount(HeldHistoryAllStatsTable, {
             store,
             localVue,
         });
 
-        const testJoinAt = new Date(Date.UTC(2020, 0, 30));
         const testHeldHistory = [
             new SatelliteHeldHistory('1', 'name1', 1, 50000, 0, 0, 1, testJoinAt),
             new SatelliteHeldHistory('2', 'name2', 5, 50000, 422280, 0, 0, testJoinAt),
@@ -41,5 +45,7 @@ describe('HeldHistoryAllStatsTable', (): void => {
         await store.commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, testHeldHistory);
 
         expect(wrapper).toMatchSnapshot();
+
+        global.Date = _Date;
     });
 });
diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts
index 0e657f4e6..1af1c3199 100644
--- a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts
+++ b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts
@@ -14,7 +14,10 @@ localVue.filter('centsToDollars', (cents: number): string => {
 
 describe('HeldHistoryAllStatsTableItemSmall', (): void => {
     it('renders correctly with actual values',  async (): Promise<void> => {
-        const testJoinAt = new Date(Date.UTC(2020, 0, 27));
+        const _Date = Date;
+        const mockedDate = new Date(1580522290000);
+        const testJoinAt = new Date(Date.UTC(2019, 6, 30));
+        global.Date = jest.fn(() => mockedDate);
 
         const wrapper = shallowMount(HeldHistoryAllStatsTableItemSmall, {
             propsData: {
@@ -45,5 +48,7 @@ describe('HeldHistoryAllStatsTableItemSmall', (): void => {
         await localVue.nextTick();
 
         expect(wrapper).toMatchSnapshot();
+
+        global.Date = _Date;
     });
 });
diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts
index 4fde0726e..c86de501c 100644
--- a/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts
+++ b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts
@@ -26,19 +26,26 @@ const store = new Vuex.Store({ modules: { payoutModule }});
 
 describe('HeldHistoryMonthlyBreakdownTable', (): void => {
     it('renders correctly with actual values', async (): Promise<void> => {
+        const _Date = Date;
+        const mockedDate = new Date(1580522290000);
+        const testJoinAt = new Date(Date.UTC(2019, 6, 30));
+        global.Date = jest.fn(() => mockedDate);
+
         const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTable, {
             store,
             localVue,
         });
 
-        const testJoinedAt = new Date(2020, 1, 20);
+
 
         await store.commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, [
-            new SatelliteHeldHistory('1', 'name1', 1, 50000, 0, 0, 0, testJoinedAt),
-            new SatelliteHeldHistory('2', 'name2', 5, 50000, 422280, 0, 0 , testJoinedAt),
-            new SatelliteHeldHistory('3', 'name3', 6, 50000, 7333880, 7852235, 0, testJoinedAt),
+            new SatelliteHeldHistory('1', 'name1', 1, 50000, 0, 0, 0, testJoinAt),
+            new SatelliteHeldHistory('2', 'name2', 5, 50000, 422280, 0, 0 , testJoinAt),
+            new SatelliteHeldHistory('3', 'name3', 6, 50000, 7333880, 7852235, 0, testJoinAt),
         ]);
 
         expect(wrapper).toMatchSnapshot();
+
+        global.Date = _Date;
     });
 });
diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts
index adae0d66f..5457ec8de 100644
--- a/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts
+++ b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts
@@ -14,6 +14,11 @@ localVue.filter('centsToDollars', (cents: number): string => {
 
 describe('HeldHistoryMonthlyBreakdownTableSmall', (): void => {
     it('renders correctly with actual values',  async (): Promise<void> => {
+        const _Date = Date;
+        const testJoinAt = new Date(Date.UTC(2019, 6, 30));
+        const mockedDate = new Date(1580522290000);
+        global.Date = jest.fn(() => mockedDate);
+
         const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTableItemSmall, {
             propsData: {
                 heldHistoryItem: new SatelliteHeldHistory(
@@ -24,7 +29,7 @@ describe('HeldHistoryMonthlyBreakdownTableSmall', (): void => {
                     7333880,
                     7852235,
                     757576,
-                    new Date(2020, 1, 20),
+                    testJoinAt,
                 ),
             },
             localVue,
@@ -43,5 +48,7 @@ describe('HeldHistoryMonthlyBreakdownTableSmall', (): void => {
         await localVue.nextTick();
 
         expect(wrapper).toMatchSnapshot();
+
+        global.Date = _Date;
     });
 });
diff --git a/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap
index dec80eaf0..f2479ca7d 100644
--- a/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap
+++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap
@@ -20,10 +20,10 @@ exports[`HeldHistoryAllStatsTable renders correctly with actual values 1`] = `
     <div class="held-history-table-container--large__info-area">
       <div class="justify-start column-1">
         <p class="held-history-table-container--large__info-area__text">name1</p>
-        <p class="held-history-table-container--large__info-area__months">9 month</p>
+        <p class="held-history-table-container--large__info-area__months">8 month</p>
       </div>
       <div class="column justify-end column-2">
-        <p class="held-history-table-container--large__info-area__text">2020-01-30</p>
+        <p class="held-history-table-container--large__info-area__text">2019-07-30</p>
       </div>
       <div class="column justify-end column-3">
         <p class="held-history-table-container--large__info-area__text">$0.00</p>
@@ -35,10 +35,10 @@ exports[`HeldHistoryAllStatsTable renders correctly with actual values 1`] = `
     <div class="held-history-table-container--large__info-area">
       <div class="justify-start column-1">
         <p class="held-history-table-container--large__info-area__text">name2</p>
-        <p class="held-history-table-container--large__info-area__months">9 month</p>
+        <p class="held-history-table-container--large__info-area__months">8 month</p>
       </div>
       <div class="column justify-end column-2">
-        <p class="held-history-table-container--large__info-area__text">2020-01-30</p>
+        <p class="held-history-table-container--large__info-area__text">2019-07-30</p>
       </div>
       <div class="column justify-end column-3">
         <p class="held-history-table-container--large__info-area__text">$0.00</p>
@@ -50,10 +50,10 @@ exports[`HeldHistoryAllStatsTable renders correctly with actual values 1`] = `
     <div class="held-history-table-container--large__info-area">
       <div class="justify-start column-1">
         <p class="held-history-table-container--large__info-area__text">name3</p>
-        <p class="held-history-table-container--large__info-area__months">9 month</p>
+        <p class="held-history-table-container--large__info-area__months">8 month</p>
       </div>
       <div class="column justify-end column-2">
-        <p class="held-history-table-container--large__info-area__text">2020-01-30</p>
+        <p class="held-history-table-container--large__info-area__text">2019-07-30</p>
       </div>
       <div class="column justify-end column-3">
         <p class="held-history-table-container--large__info-area__text">$7.85</p>
diff --git a/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap
index 3d6ca1d8f..0cc0e4e6b 100644
--- a/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap
+++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values
   <div class="held-history-table-container--small__item__satellite-info">
     <div>
       <p class="held-history-table-container--small__item__satellite-info__name">name1</p>
-      <p class="held-history-table-container--small__item__satellite-info__months">9 month</p>
+      <p class="held-history-table-container--small__item__satellite-info__months">8 month</p>
     </div>
     <div class="held-history-table-container--small__item__satellite-info__button">
       <div class="icon expand">
@@ -24,7 +24,7 @@ exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values
   <div class="held-history-table-container--small__item__satellite-info">
     <div>
       <p class="held-history-table-container--small__item__satellite-info__name">name1</p>
-      <p class="held-history-table-container--small__item__satellite-info__months">9 month</p>
+      <p class="held-history-table-container--small__item__satellite-info__months">8 month</p>
     </div>
     <div class="held-history-table-container--small__item__satellite-info__button">
       <div class="icon hide">
@@ -36,7 +36,7 @@ exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values
     <div class="held-history-table-container--small__item__held-info">
       <div class="held-history-table-container--small__item__held-info__item">
         <p class="held-history-table-container--small__item__held-info__item__label">First Contact</p>
-        <p class="held-history-table-container--small__item__held-info__item__value">2020-01-27</p>
+        <p class="held-history-table-container--small__item__held-info__item__value">2019-07-30</p>
       </div>
       <div class="held-history-table-container--small__item__held-info__item">
         <p class="held-history-table-container--small__item__held-info__item__label">Held Total</p>
@@ -56,7 +56,7 @@ exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values
   <div class="held-history-table-container--small__item__satellite-info">
     <div>
       <p class="held-history-table-container--small__item__satellite-info__name">name1</p>
-      <p class="held-history-table-container--small__item__satellite-info__months">9 month</p>
+      <p class="held-history-table-container--small__item__satellite-info__months">8 month</p>
     </div>
     <div class="held-history-table-container--small__item__satellite-info__button">
       <div class="icon expand">