JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: tests fix

Browse Source 
Change-Id: I73cfb86fd214afb02be6a9e96e0ae5ffb92fd214
This commit is contained in:
NickolaiYurchenko 2020-10-01 12:15:37 +03:00
parent 4e8d53c8fb
commit 3a7eb10c71
11 changed files with 181 additions and 978 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
web/satellite/package-lock.json generated
View File

@ -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",

2
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -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,

567
web/satellite/src/components/common/VDatePicker.vue
View File

@ -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>

198
web/satellite/tests/unit/common/VDatePicker.spec.ts
View File

@ -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);
});
});

14
web/storagenode/package-lock.json generated
View File

@ -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": {

8
web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts
View File

@ -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;
});
});

7
web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts
View File

@ -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;
});
});

15
web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts
View File

@ -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;
});
});

9
web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts
View File

@ -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;
});
});

12
web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap
View File

@ -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>

8
web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap
View File

@ -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">