From 14bb00f71320e98ecfe437044bcaf2cf7bc09ee6 Mon Sep 17 00:00:00 2001 From: NickolaiYurchenko Date: Thu, 2 Jul 2020 17:44:41 +0300 Subject: [PATCH] web/storagenode: all stats held history Change-Id: Ief40a97a7e120dccefc04c3c2eb78b8492dff17d --- .../src/app/components/SNOHeader.vue | 23 +++- .../payments/BaseHeldHistoryTable.vue | 114 +++++++++++++++++ ...mall.vue => BaseSmallHeldHistoryTable.vue} | 44 +------ .../payments/HeldHistoryAllStatsTable.vue | 68 +++++++++++ .../HeldHistoryAllStatsTableItemSmall.vue | 51 ++++++++ .../components/payments/HeldHistoryArea.vue | 115 +++++++++++++++++- .../HeldHistoryMonthlyBreakdownTable.vue | 101 +-------------- ...dHistoryMonthlyBreakdownTableItemSmall.vue | 51 ++++++++ web/storagenode/src/app/types/payout.ts | 16 ++- web/storagenode/src/storagenode/api/payout.ts | 15 ++- .../EstimationPeriodDropdown.spec.ts | 0 .../payments/HeldHistoryAllStatsTable.spec.ts | 44 +++++++ .../HeldHistoryAllStatsTableItemSmall.spec.ts | 47 +++++++ .../payments/HeldHistoryArea.spec.ts | 50 ++++++++ .../HeldHistoryMonthlyBreakdownTable.spec.ts} | 6 +- ...oryMonthlyBreakdownTableItemSmall.spec.ts} | 5 +- .../{ => payments}/TotalPayoutArea.spec.ts | 0 .../EstimationPeriodDropdown.spec.ts.snap | 0 .../HeldHistoryAllStatsTable.spec.ts.snap | 56 +++++++++ ...HistoryAllStatsTableItemSmall.spec.ts.snap | 71 +++++++++++ .../HeldHistoryArea.spec.ts.snap | 67 ++++++++++ ...HistoryMonthlyBreakdownTable.spec.ts.snap} | 6 +- ...nthlyBreakdownTableItemSmall.spec.ts.snap} | 0 .../TotalPayoutArea.spec.ts.snap | 0 .../tests/unit/store/payout.spec.ts | 43 +++++-- 25 files changed, 829 insertions(+), 164 deletions(-) create mode 100644 web/storagenode/src/app/components/payments/BaseHeldHistoryTable.vue rename web/storagenode/src/app/components/payments/{HeldHistoryMonthlyBreakdownTableSmall.vue => BaseSmallHeldHistoryTable.vue} (52%) create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryAllStatsTable.vue create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryAllStatsTableItemSmall.vue create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue rename web/storagenode/tests/unit/components/{ => payments}/EstimationPeriodDropdown.spec.ts (100%) create mode 100644 web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts create mode 100644 web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts create mode 100644 web/storagenode/tests/unit/components/payments/HeldHistoryArea.spec.ts rename web/storagenode/tests/unit/components/{HeldHistoryMonthlyBreakdownItem.spec.ts => payments/HeldHistoryMonthlyBreakdownTable.spec.ts} (95%) rename web/storagenode/tests/unit/components/{HeldHistoryMonthlyBreakdownTableSmall.spec.ts => payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts} (88%) rename web/storagenode/tests/unit/components/{ => payments}/TotalPayoutArea.spec.ts (100%) rename web/storagenode/tests/unit/components/{ => payments}/__snapshots__/EstimationPeriodDropdown.spec.ts.snap (100%) create mode 100644 web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap create mode 100644 web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap create mode 100644 web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryArea.spec.ts.snap rename web/storagenode/tests/unit/components/{__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap => payments/__snapshots__/HeldHistoryMonthlyBreakdownTable.spec.ts.snap} (88%) rename web/storagenode/tests/unit/components/{__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap => payments/__snapshots__/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts.snap} (100%) rename web/storagenode/tests/unit/components/{ => payments}/__snapshots__/TotalPayoutArea.spec.ts.snap (100%) diff --git a/web/storagenode/src/app/components/SNOHeader.vue b/web/storagenode/src/app/components/SNOHeader.vue index 8f76afb27..244ee62d7 100644 --- a/web/storagenode/src/app/components/SNOHeader.vue +++ b/web/storagenode/src/app/components/SNOHeader.vue @@ -153,6 +153,9 @@ export default class SNOHeader extends Vue { await this.$router.replace('/'); } + /** + * Refreshes all needed data from server. + */ public async onRefresh(): Promise { await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, true); @@ -162,7 +165,6 @@ export default class SNOHeader extends Vue { try { await this.$store.dispatch(GET_NODE_INFO); await this.$store.dispatch(SELECT_SATELLITE, selectedSatellite); - await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL); } catch (error) { console.error(`${error.message} satellite data.`); } @@ -174,6 +176,25 @@ export default class SNOHeader extends Vue { } await this.$store.dispatch(APPSTATE_ACTIONS.SET_LOADING, false); + + try { + await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_INFO, selectedSatellite); + await this.$store.dispatch(PAYOUT_ACTIONS.GET_TOTAL); + } catch (error) { + console.error(error.message); + } + + try { + await this.$store.dispatch(NOTIFICATIONS_ACTIONS.GET_NOTIFICATIONS, new NotificationsCursor(1)); + } catch (error) { + console.error(error.message); + } + + try { + await this.$store.dispatch(PAYOUT_ACTIONS.GET_HELD_HISTORY); + } catch (error) { + console.error(error.message); + } } } diff --git a/web/storagenode/src/app/components/payments/BaseHeldHistoryTable.vue b/web/storagenode/src/app/components/payments/BaseHeldHistoryTable.vue new file mode 100644 index 000000000..edf35c6c6 --- /dev/null +++ b/web/storagenode/src/app/components/payments/BaseHeldHistoryTable.vue @@ -0,0 +1,114 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue b/web/storagenode/src/app/components/payments/BaseSmallHeldHistoryTable.vue similarity index 52% rename from web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue rename to web/storagenode/src/app/components/payments/BaseSmallHeldHistoryTable.vue index 2d427fb84..f5ed5dfa7 100644 --- a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue +++ b/web/storagenode/src/app/components/payments/BaseSmallHeldHistoryTable.vue @@ -1,59 +1,19 @@ // Copyright (C) 2020 Storj Labs, Inc. // See LICENSE for copying information. - - diff --git a/web/storagenode/src/app/components/payments/HeldHistoryAllStatsTableItemSmall.vue b/web/storagenode/src/app/components/payments/HeldHistoryAllStatsTableItemSmall.vue new file mode 100644 index 000000000..4c0eac21b --- /dev/null +++ b/web/storagenode/src/app/components/payments/HeldHistoryAllStatsTableItemSmall.vue @@ -0,0 +1,51 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/storagenode/src/app/components/payments/HeldHistoryArea.vue b/web/storagenode/src/app/components/payments/HeldHistoryArea.vue index 377f29775..f8ab9b815 100644 --- a/web/storagenode/src/app/components/payments/HeldHistoryArea.vue +++ b/web/storagenode/src/app/components/payments/HeldHistoryArea.vue @@ -5,25 +5,53 @@

Held Amount History

+
+
+

+ All Stats +

+
+
+

+ Monthly Breakdown +

+
+
- + +
@@ -48,21 +90,88 @@ export default class HeldHistoryArea extends Vue { &__header { display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; justify-content: space-between; + height: 40px; &__title { font-family: 'font_medium', sans-serif; font-size: 18px; color: var(--regular-text-color); } + + &__selection-area { + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; + + &__item { + display: flex; + align-items: flex-start; + justify-content: center; + cursor: pointer; + height: 100%; + padding: 0 20px; + border-bottom: 3px solid transparent; + z-index: 102; + + &__label { + text-align: center; + font-size: 16px; + color: var(--regular-text-color); + } + + &.active { + border-bottom: 3px solid var(--navigation-link-color); + + &__label { + font-size: 16px; + color: var(--regular-text-color); + } + } + } + } } &__divider { width: 100%; height: 1px; - margin-top: 18px; background-color: #eaeaea; } } + + @media screen and (max-width: 870px) { + + .held-history-container { + + &__divider { + display: none; + } + + &__header { + flex-direction: column; + align-items: flex-start; + height: auto; + + &__selection-area { + width: 100%; + height: 41px; + margin: 20px 0; + + &__item { + width: calc(50% - 40px); + border-bottom: 3px solid #eaeaea; + } + } + } + } + } + + @media screen and (max-width: 600px) { + + .held-history-container { + padding: 28px 20px 10px 20px; + } + } diff --git a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue index 5d55d9cca..6fd0b70cf 100644 --- a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue +++ b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue @@ -35,7 +35,7 @@
- import { Component, Vue } from 'vue-property-decorator'; -import HeldHistoryMonthlyBreakdownTableSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue'; +import BaseHeldHistoryTable from '@/app/components/payments/BaseHeldHistoryTable.vue'; +import HeldHistoryMonthlyBreakdownTableItemSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue'; import { HeldHistoryMonthlyBreakdownItem } from '@/app/types/payout'; @Component({ components: { - HeldHistoryMonthlyBreakdownTableSmall, + HeldHistoryMonthlyBreakdownTableItemSmall, }, }) -export default class HeldHistoryMonthlyBreakdownTable extends Vue { +export default class HeldHistoryMonthlyBreakdownTable extends BaseHeldHistoryTable { /** * Returns list of satellite held history items by periods from store. */ @@ -65,95 +66,3 @@ export default class HeldHistoryMonthlyBreakdownTable extends Vue { } } - - diff --git a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue new file mode 100644 index 000000000..2c8f09b39 --- /dev/null +++ b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue @@ -0,0 +1,51 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/storagenode/src/app/types/payout.ts b/web/storagenode/src/app/types/payout.ts index a74bea6c8..84de9c057 100644 --- a/web/storagenode/src/app/types/payout.ts +++ b/web/storagenode/src/app/types/payout.ts @@ -146,6 +146,7 @@ export interface PayoutApi { export class HeldHistory { public constructor( public monthlyBreakdown: HeldHistoryMonthlyBreakdownItem[] = [], + public allStats: HeldHistoryAllStatItem[] = [], ) {} } @@ -160,7 +161,20 @@ export class HeldHistoryMonthlyBreakdownItem { public firstPeriod: number = 0, public secondPeriod: number = 0, public thirdPeriod: number = 0, - public fourthPeriod: number = 0, + ) {} +} + +/** + * Contains held information summary of satellite grouped by periods. + */ +export class HeldHistoryAllStatItem { + public constructor( + public satelliteID: string = '', + public satelliteName: string = '', + public age: number = 1, + public totalHeld: number = 0, + public totalDisposed: number = 0, + public joinedAt: Date = new Date(), ) {} } diff --git a/web/storagenode/src/storagenode/api/payout.ts b/web/storagenode/src/storagenode/api/payout.ts index eda02c476..afc9aab58 100644 --- a/web/storagenode/src/storagenode/api/payout.ts +++ b/web/storagenode/src/storagenode/api/payout.ts @@ -4,6 +4,7 @@ import { EstimatedPayout, HeldHistory, + HeldHistoryAllStatItem, HeldHistoryMonthlyBreakdownItem, HeldInfo, PaymentInfoParameters, @@ -161,11 +162,21 @@ export class PayoutHttpApi implements PayoutApi { historyItem.firstPeriod / this.PRICE_DIVIDER, historyItem.secondPeriod / this.PRICE_DIVIDER, historyItem.thirdPeriod / this.PRICE_DIVIDER, - historyItem.fourthPeriod / this.PRICE_DIVIDER, ); }); - return new HeldHistory(monthlyBreakdown); + const allStats = data.map((historyItem: any) => { + return new HeldHistoryAllStatItem( + historyItem.satelliteID, + historyItem.satelliteName, + historyItem.age, + historyItem.totalHeld, + historyItem.totalDisposed, + new Date(historyItem.joinedAt), + ); + }); + + return new HeldHistory(monthlyBreakdown, allStats); } /** diff --git a/web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts b/web/storagenode/tests/unit/components/payments/EstimationPeriodDropdown.spec.ts similarity index 100% rename from web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts rename to web/storagenode/tests/unit/components/payments/EstimationPeriodDropdown.spec.ts diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts new file mode 100644 index 000000000..432ce501d --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTable.spec.ts @@ -0,0 +1,44 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import HeldHistoryAllStatsTable from '@/app/components/payments/HeldHistoryAllStatsTable.vue'; + +import { makePayoutModule, PAYOUT_MUTATIONS } from '@/app/store/modules/payout'; +import { HeldHistory, HeldHistoryAllStatItem } from '@/app/types/payout'; +import { PayoutHttpApi } from '@/storagenode/api/payout'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +localVue.filter('centsToDollars', (cents: number): string => { + return `$${(cents / 100).toFixed(2)}`; +}); + +const payoutApi = new PayoutHttpApi(); +const payoutModule = makePayoutModule(payoutApi); + +const store = new Vuex.Store({ modules: { payoutModule }}); + +describe('HeldHistoryAllStatsTable', (): void => { + it('renders correctly with actual values', async (): Promise => { + const wrapper = shallowMount(HeldHistoryAllStatsTable, { + store, + localVue, + }); + + const testJoinAt = new Date(Date.UTC(2020, 0, 30)); + + await store.commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, new HeldHistory( + [], + [ + new HeldHistoryAllStatItem('1', 'name1', 1, 50000, 20000, testJoinAt), + new HeldHistoryAllStatItem('2', 'name2', 5, 40000, 30000, testJoinAt), + ], + )); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts new file mode 100644 index 000000000..119031fde --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/HeldHistoryAllStatsTableItemSmall.spec.ts @@ -0,0 +1,47 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import HeldHistoryAllStatsTableItemSmall from '@/app/components/payments/HeldHistoryAllStatsTableItemSmall.vue'; + +import { HeldHistoryAllStatItem } from '@/app/types/payout'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); + +localVue.filter('centsToDollars', (cents: number): string => { + return `$${(cents / 100).toFixed(2)}`; +}); + +describe('HeldHistoryAllStatsTableItemSmall', (): void => { + it('renders correctly with actual values', async (): Promise => { + const testJoinAt = new Date(Date.UTC(2020, 0, 27)); + + const wrapper = shallowMount(HeldHistoryAllStatsTableItemSmall, { + propsData: { + heldHistoryItem: new HeldHistoryAllStatItem( + '1', + 'name1', + 7, + 45000, + 8000, + testJoinAt, + ), + }, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + + wrapper.find('.expand').trigger('click'); + + await localVue.nextTick(); + + expect(wrapper).toMatchSnapshot(); + + wrapper.find('.hide').trigger('click'); + + await localVue.nextTick(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/payments/HeldHistoryArea.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryArea.spec.ts new file mode 100644 index 000000000..e4d6c0fc3 --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/HeldHistoryArea.spec.ts @@ -0,0 +1,50 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import HeldHistoryArea from '@/app/components/payments/HeldHistoryArea.vue'; + +import { makePayoutModule } from '@/app/store/modules/payout'; +import { PayoutHttpApi } from '@/storagenode/api/payout'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const payoutApi = new PayoutHttpApi(); +const payoutModule = makePayoutModule(payoutApi); + +const store = new Vuex.Store({ modules: { payoutModule }}); + +describe('HeldHistoryArea', (): void => { + it('renders correctly', async (): Promise => { + const wrapper = shallowMount(HeldHistoryArea, { + store, + localVue, + }); + + await localVue.nextTick(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('changes state correctly', async (): Promise => { + const wrapper = shallowMount(HeldHistoryArea, { + store, + localVue, + }); + + wrapper.findAll('.held-history-container__header__selection-area__item').at(1).trigger('click'); + + await localVue.nextTick(); + + expect(wrapper).toMatchSnapshot(); + + wrapper.findAll('.held-history-container__header__selection-area__item').at(0).trigger('click'); + + await localVue.nextTick(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts similarity index 95% rename from web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts rename to web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts index 72dfc4ae3..f08d8c2b1 100644 --- a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts +++ b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTable.spec.ts @@ -30,9 +30,9 @@ describe('HeldHistoryMonthlyBreakdownTable', (): void => { }); await store.commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, new HeldHistory([ - new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0, 0), - new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0, 0), - new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235, 0), + new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0), + new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0), + new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235), ])); expect(wrapper).toMatchSnapshot(); diff --git a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts similarity index 88% rename from web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts rename to web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts index 4ad9603df..5b5970f11 100644 --- a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts +++ b/web/storagenode/tests/unit/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts @@ -1,7 +1,7 @@ // Copyright (C) 2020 Storj Labs, Inc. // See LICENSE for copying information. -import HeldHistoryMonthlyBreakdownTableSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue'; +import HeldHistoryMonthlyBreakdownTableItemSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableItemSmall.vue'; import { HeldHistoryMonthlyBreakdownItem } from '@/app/types/payout'; import { createLocalVue, shallowMount } from '@vue/test-utils'; @@ -14,7 +14,7 @@ localVue.filter('centsToDollars', (cents: number): string => { describe('HeldHistoryMonthlyBreakdownTableSmall', (): void => { it('renders correctly with actual values', async (): Promise => { - const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTableSmall, { + const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTableItemSmall, { propsData: { heldHistoryItem: new HeldHistoryMonthlyBreakdownItem( '1', @@ -23,7 +23,6 @@ describe('HeldHistoryMonthlyBreakdownTableSmall', (): void => { 50000, 7333880, 7852235, - 0, ), }, localVue, diff --git a/web/storagenode/tests/unit/components/TotalPayoutArea.spec.ts b/web/storagenode/tests/unit/components/payments/TotalPayoutArea.spec.ts similarity index 100% rename from web/storagenode/tests/unit/components/TotalPayoutArea.spec.ts rename to web/storagenode/tests/unit/components/payments/TotalPayoutArea.spec.ts diff --git a/web/storagenode/tests/unit/components/__snapshots__/EstimationPeriodDropdown.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/EstimationPeriodDropdown.spec.ts.snap similarity index 100% rename from web/storagenode/tests/unit/components/__snapshots__/EstimationPeriodDropdown.spec.ts.snap rename to web/storagenode/tests/unit/components/payments/__snapshots__/EstimationPeriodDropdown.spec.ts.snap 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 new file mode 100644 index 000000000..92a829192 --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTable.spec.ts.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeldHistoryAllStatsTable renders correctly with actual values 1`] = ` +
+
+
+
+

Satellite

+
+
+

First Contact

+
+
+

Held Total

+
+
+

Held Returned

+
+
+
+
+

name1

+

1 month

+
+
+

2020-01-30

+
+
+

$500.00

+
+
+

$200.00

+
+
+
+
+

name2

+

5 month

+
+
+

2020-01-30

+
+
+

$400.00

+
+
+

$300.00

+
+
+
+
+ + +
+
+`; 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 new file mode 100644 index 000000000..e405cd8e7 --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryAllStatsTableItemSmall.spec.ts.snap @@ -0,0 +1,71 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values 1`] = ` +
+
+
+

name1

+

7 month

+
+
+
+ +
+
+
+ + + +
+`; + +exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values 2`] = ` +
+
+
+

name1

+

7 month

+
+
+
+ +
+
+
+ +
+
+

First Contact

+

2020-01-27

+
+
+

Held Total

+

$450.00

+
+
+

Held Returned

+

$80.00

+
+
+ +
+`; + +exports[`HeldHistoryAllStatsTableItemSmall renders correctly with actual values 3`] = ` +
+
+
+

name1

+

7 month

+
+
+
+ +
+
+
+ + + +
+`; diff --git a/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryArea.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryArea.spec.ts.snap new file mode 100644 index 000000000..13c74e748 --- /dev/null +++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryArea.spec.ts.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeldHistoryArea changes state correctly 1`] = ` +
+
+

Held Amount History

+
+
+

+ All Stats +

+
+
+

+ Monthly Breakdown +

+
+
+
+
+ +
+`; + +exports[`HeldHistoryArea changes state correctly 2`] = ` +
+
+

Held Amount History

+
+
+

+ All Stats +

+
+
+

+ Monthly Breakdown +

+
+
+
+
+ +
+`; + +exports[`HeldHistoryArea renders correctly 1`] = ` +
+
+

Held Amount History

+
+
+

+ All Stats +

+
+
+

+ Monthly Breakdown +

+
+
+
+
+ +
+`; diff --git a/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryMonthlyBreakdownTable.spec.ts.snap similarity index 88% rename from web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap rename to web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryMonthlyBreakdownTable.spec.ts.snap index 4cc078b43..d77518eca 100644 --- a/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap +++ b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryMonthlyBreakdownTable.spec.ts.snap @@ -64,9 +64,9 @@ exports[`HeldHistoryMonthlyBreakdownTable renders correctly with actual values 1
- - - + + +
`; diff --git a/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts.snap similarity index 100% rename from web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap rename to web/storagenode/tests/unit/components/payments/__snapshots__/HeldHistoryMonthlyBreakdownTableItemSmall.spec.ts.snap diff --git a/web/storagenode/tests/unit/components/__snapshots__/TotalPayoutArea.spec.ts.snap b/web/storagenode/tests/unit/components/payments/__snapshots__/TotalPayoutArea.spec.ts.snap similarity index 100% rename from web/storagenode/tests/unit/components/__snapshots__/TotalPayoutArea.spec.ts.snap rename to web/storagenode/tests/unit/components/payments/__snapshots__/TotalPayoutArea.spec.ts.snap diff --git a/web/storagenode/tests/unit/store/payout.spec.ts b/web/storagenode/tests/unit/store/payout.spec.ts index f51d11f1e..c034feefe 100644 --- a/web/storagenode/tests/unit/store/payout.spec.ts +++ b/web/storagenode/tests/unit/store/payout.spec.ts @@ -8,6 +8,7 @@ import { makePayoutModule, PAYOUT_ACTIONS, PAYOUT_MUTATIONS } from '@/app/store/ import { EstimatedPayout, HeldHistory, + HeldHistoryAllStatItem, HeldHistoryMonthlyBreakdownItem, HeldInfo, PayoutInfoRange, @@ -80,16 +81,27 @@ describe('mutations', (): void => { }); it('sets held history', (): void => { - const testHeldHistory = new HeldHistory([ - new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0, 0), - new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0, 0), - new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235, 0), - ]); + const testJoinAt = new Date(Date.UTC(2020, 0, 30)); + + const testHeldHistory = new HeldHistory( + [ + new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0), + new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0), + new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235), + ], + [ + new HeldHistoryAllStatItem('1', 'name1', 1, 100, 0, testJoinAt), + new HeldHistoryAllStatItem('2', 'name2', 5, 30, 20, testJoinAt), + ], + ); store.commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, testHeldHistory); expect(state.payoutModule.heldHistory.monthlyBreakdown.length).toBe(testHeldHistory.monthlyBreakdown.length); expect(state.payoutModule.heldHistory.monthlyBreakdown[1].satelliteName).toBe(testHeldHistory.monthlyBreakdown[1].satelliteName); + expect(state.payoutModule.heldHistory.allStats.length).toBe(testHeldHistory.allStats.length); + expect(state.payoutModule.heldHistory.allStats[0].joinedAt).toBe(testJoinAt); + expect(state.payoutModule.heldHistory.allStats[1].totalHeld).toBe(30); }); it('sets estimated payout information', (): void => { @@ -252,18 +264,29 @@ describe('actions', () => { }); it('success get held history', async (): Promise => { + const testJoinAt = new Date(Date.UTC(2020, 0, 30)); + jest.spyOn(payoutApi, 'getHeldHistory').mockReturnValue( - Promise.resolve(new HeldHistory([ - new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0, 0), - new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0, 0), - new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235, 0), - ])), + Promise.resolve(new HeldHistory( + [ + new HeldHistoryMonthlyBreakdownItem('1', 'name1', 1, 50000, 0, 0), + new HeldHistoryMonthlyBreakdownItem('2', 'name2', 5, 50000, 422280, 0), + new HeldHistoryMonthlyBreakdownItem('3', 'name3', 6, 50000, 7333880, 7852235), + ], + [ + new HeldHistoryAllStatItem('1', 'name1', 1, 100, 0, testJoinAt), + new HeldHistoryAllStatItem('2', 'name2', 5, 30, 20, testJoinAt), + ], + )), ); await store.dispatch(PAYOUT_ACTIONS.GET_HELD_HISTORY); expect(state.payoutModule.heldHistory.monthlyBreakdown.length).toBe(3); expect(state.payoutModule.heldHistory.monthlyBreakdown[1].satelliteName).toBe('name2'); + expect(state.payoutModule.heldHistory.allStats.length).toBe(2); + expect(state.payoutModule.heldHistory.allStats[0].joinedAt).toBe(testJoinAt); + expect(state.payoutModule.heldHistory.allStats[1].totalHeld).toBe(30); }); it('get total throws an error when api call fails', async (): Promise => {