From ddd261703c49c41213453bf871682e91435afd08 Mon Sep 17 00:00:00 2001 From: NickolaiYurchenko Date: Fri, 5 Jun 2020 12:42:13 +0300 Subject: [PATCH] web/storagenode: held history monthly breakdown Change-Id: Ia60070853e160d2a56fc420c02fe6b6955fb4b0f --- .../components/payments/EstimationArea.vue | 2 +- .../components/payments/HeldHistoryArea.vue | 68 ++++++++ .../HeldHistoryMonthlyBreakdownTable.vue | 159 +++++++++++++++++ .../HeldHistoryMonthlyBreakdownTableSmall.vue | 160 ++++++++++++++++++ .../components/payments/HeldHistoryTable.vue | 126 -------------- .../src/app/store/modules/payout.ts | 11 ++ web/storagenode/src/app/types/payout.ts | 31 ++++ web/storagenode/src/app/views/PayoutArea.vue | 43 +---- web/storagenode/src/storagenode/api/payout.ts | 42 ++++- .../static/images/common/BlueMinus.svg | 3 + .../static/images/common/BluePlus.svg | 4 + web/storagenode/static/styles/_variables.scss | 6 +- .../EstimationPeriodDropdown.spec.ts | 3 +- .../HeldHistoryMonthlyBreakdownItem.spec.ts | 40 +++++ ...dHistoryMonthlyBreakdownTableSmall.spec.ts | 46 +++++ ...ldHistoryMonthlyBreakdownItem.spec.ts.snap | 72 ++++++++ ...oryMonthlyBreakdownTableSmall.spec.ts.snap | 71 ++++++++ web/storagenode/tests/unit/mock/api/payout.ts | 26 --- .../tests/unit/store/payout.spec.ts | 49 +++++- 19 files changed, 764 insertions(+), 198 deletions(-) create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryArea.vue create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue create mode 100644 web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue delete mode 100644 web/storagenode/src/app/components/payments/HeldHistoryTable.vue create mode 100644 web/storagenode/static/images/common/BlueMinus.svg create mode 100644 web/storagenode/static/images/common/BluePlus.svg create mode 100644 web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts create mode 100644 web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts create mode 100644 web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap create mode 100644 web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap delete mode 100644 web/storagenode/tests/unit/mock/api/payout.ts diff --git a/web/storagenode/src/app/components/payments/EstimationArea.vue b/web/storagenode/src/app/components/payments/EstimationArea.vue index 50afbc184..22c2d5052 100644 --- a/web/storagenode/src/app/components/payments/EstimationArea.vue +++ b/web/storagenode/src/app/components/payments/EstimationArea.vue @@ -464,7 +464,7 @@ export default class EstimationArea extends Vue { padding: 0 16px; width: calc(100% - 32px); height: 36px; - background: var(--estimation-table-header-color); + background: var(--table-header-color); &__text { font-weight: 500; diff --git a/web/storagenode/src/app/components/payments/HeldHistoryArea.vue b/web/storagenode/src/app/components/payments/HeldHistoryArea.vue new file mode 100644 index 000000000..377f29775 --- /dev/null +++ b/web/storagenode/src/app/components/payments/HeldHistoryArea.vue @@ -0,0 +1,68 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue new file mode 100644 index 000000000..5d55d9cca --- /dev/null +++ b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue @@ -0,0 +1,159 @@ +// 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/HeldHistoryMonthlyBreakdownTableSmall.vue new file mode 100644 index 000000000..2d427fb84 --- /dev/null +++ b/web/storagenode/src/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue @@ -0,0 +1,160 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + diff --git a/web/storagenode/src/app/components/payments/HeldHistoryTable.vue b/web/storagenode/src/app/components/payments/HeldHistoryTable.vue deleted file mode 100644 index d2910aecd..000000000 --- a/web/storagenode/src/app/components/payments/HeldHistoryTable.vue +++ /dev/null @@ -1,126 +0,0 @@ -// Copyright (C) 2020 Storj Labs, Inc. -// See LICENSE for copying information. - - - - - - diff --git a/web/storagenode/src/app/store/modules/payout.ts b/web/storagenode/src/app/store/modules/payout.ts index c8ed537e9..c22bf0aa0 100644 --- a/web/storagenode/src/app/store/modules/payout.ts +++ b/web/storagenode/src/app/store/modules/payout.ts @@ -2,6 +2,7 @@ // See LICENSE for copying information. import { + HeldHistory, HeldInfo, PaymentInfoParameters, PayoutApi, @@ -17,12 +18,14 @@ export const PAYOUT_MUTATIONS = { SET_RANGE: 'SET_RANGE', SET_TOTAL: 'SET_TOTAL', SET_HELD_PERCENT: 'SET_HELD_PERCENT', + SET_HELD_HISTORY: 'SET_HELD_HISTORY', }; export const PAYOUT_ACTIONS = { GET_HELD_INFO: 'GET_HELD_INFO', SET_PERIODS_RANGE: 'SET_PERIODS_RANGE', GET_TOTAL: 'GET_TOTAL', + GET_HELD_HISTORY: 'GET_HELD_HISTORY', }; export const BANDWIDTH_DOWNLOAD_PRICE_PER_TB = 2000; @@ -52,6 +55,9 @@ export function makePayoutModule(api: PayoutApi) { [PAYOUT_MUTATIONS.SET_HELD_PERCENT](state: PayoutState, heldPercentage: number): void { state.heldPercentage = heldPercentage; }, + [PAYOUT_MUTATIONS.SET_HELD_HISTORY](state: PayoutState, heldHistory: HeldHistory): void { + state.heldHistory = heldHistory; + }, }, actions: { [PAYOUT_ACTIONS.GET_HELD_INFO]: async function ({commit, state, rootState}: any, satelliteId: string = ''): Promise { @@ -99,6 +105,11 @@ export function makePayoutModule(api: PayoutApi) { [PAYOUT_ACTIONS.SET_PERIODS_RANGE]: function ({commit}: any, periodRange: PayoutInfoRange): void { commit(PAYOUT_MUTATIONS.SET_RANGE, periodRange); }, + [PAYOUT_ACTIONS.GET_HELD_HISTORY]: async function ({commit}: any): Promise { + const heldHistory = await api.getHeldHistory(); + + commit(PAYOUT_MUTATIONS.SET_HELD_HISTORY, heldHistory); + }, }, }; } diff --git a/web/storagenode/src/app/types/payout.ts b/web/storagenode/src/app/types/payout.ts index 33339e006..45eef5d57 100644 --- a/web/storagenode/src/app/types/payout.ts +++ b/web/storagenode/src/app/types/payout.ts @@ -83,6 +83,7 @@ export class PayoutState { public totalEarnings: number = 0, public currentMonthEarnings: number = 0, public heldPercentage: number = 0, + public heldHistory: HeldHistory = new HeldHistory(), ) {} } @@ -107,4 +108,34 @@ export interface PayoutApi { * @throws Error */ getTotal(paymentInfoParameters: PaymentInfoParameters): Promise; + + /** + * Fetches held history for all satellites. + * @throws Error + */ + getHeldHistory(): Promise; +} + +/** + * Holds held history information for all satellites. + */ +export class HeldHistory { + public constructor( + public monthlyBreakdown: HeldHistoryMonthlyBreakdownItem[] = [], + ) {} +} + +/** + * Contains held amounts of satellite grouped by periods. + */ +export class HeldHistoryMonthlyBreakdownItem { + public constructor( + public satelliteID: string = '', + public satelliteName: string = '', + public age: number = 1, + public firstPeriod: number = 0, + public secondPeriod: number = 0, + public thirdPeriod: number = 0, + public fourthPeriod: number = 0, + ) {} } diff --git a/web/storagenode/src/app/views/PayoutArea.vue b/web/storagenode/src/app/views/PayoutArea.vue index d3bcecb0f..e3f7cfb29 100644 --- a/web/storagenode/src/app/views/PayoutArea.vue +++ b/web/storagenode/src/app/views/PayoutArea.vue @@ -29,13 +29,7 @@ - - - - - - - + @@ -44,7 +38,8 @@ import { Component, Vue } from 'vue-property-decorator'; import EstimationArea from '@/app/components/payments/EstimationArea.vue'; -import HeldHistoryTable from '@/app/components/payments/HeldHistoryTable.vue'; +import HeldHistoryArea from '@/app/components/payments/HeldHistoryArea.vue'; +import HeldHistoryTable from '@/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue'; import HeldProgress from '@/app/components/payments/HeldProgress.vue'; import SingleInfo from '@/app/components/payments/SingleInfo.vue'; import SatelliteSelection from '@/app/components/SatelliteSelection.vue'; @@ -59,6 +54,7 @@ import { SatelliteInfo } from '@/storagenode/dashboard'; @Component ({ components: { + HeldHistoryArea, HeldProgress, HeldHistoryTable, SingleInfo, @@ -181,37 +177,6 @@ export default class PayoutArea extends Vue { &__process-area { margin-top: 12px; } - - &__held-history-container { - display: flex; - flex-direction: column; - padding: 28px 40px 10px 40px; - background: #fff; - border: 1px solid #eaeaea; - box-sizing: border-box; - border-radius: 12px; - margin: 12px 0 50px; - - &__header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - - &__title { - font-family: 'font_medium', sans-serif; - font-size: 18px; - color: #535f77; - } - } - - &__divider { - width: 100%; - height: 1px; - margin-top: 18px; - background-color: #eaeaea; - } - } } .additional-text { diff --git a/web/storagenode/src/storagenode/api/payout.ts b/web/storagenode/src/storagenode/api/payout.ts index 20ee7dcd0..6ecb29a84 100644 --- a/web/storagenode/src/storagenode/api/payout.ts +++ b/web/storagenode/src/storagenode/api/payout.ts @@ -1,7 +1,14 @@ // Copyright (C) 2020 Storj Labs, Inc. // See LICENSE for copying information. -import { HeldInfo, PaymentInfoParameters, PayoutApi, TotalPayoutInfo } from '@/app/types/payout'; +import { + HeldHistory, + HeldHistoryMonthlyBreakdownItem, + HeldInfo, + PaymentInfoParameters, + PayoutApi, + TotalPayoutInfo, +} from '@/app/types/payout'; import { HttpClient } from '@/storagenode/utils/httpClient'; /** @@ -99,6 +106,39 @@ export class PayoutHttpApi implements PayoutApi { ); } + /** + * Fetch total payout information. + * + * @returns total payout information + * @throws Error + */ + public async getHeldHistory(): Promise { + const path = `${this.ROOT_PATH}/heldhistory/`; + + const response = await this.client.get(path); + + if (!response.ok) { + throw new Error('can not get held history information'); + } + + const data: any = await response.json() || []; + + // TODO: this will be changed with adding 'all stats' held history. + const monthlyBreakdown = data.map((historyItem: any) => { + return new HeldHistoryMonthlyBreakdownItem( + historyItem.satelliteID, + historyItem.satelliteName, + historyItem.age, + historyItem.firstPeriod / this.PRICE_DIVIDER, + historyItem.secondPeriod / this.PRICE_DIVIDER, + historyItem.thirdPeriod / this.PRICE_DIVIDER, + historyItem.fourthPeriod / this.PRICE_DIVIDER, + ); + }); + + return new HeldHistory(monthlyBreakdown); + } + /** * Fetch total payout information depends on month. * diff --git a/web/storagenode/static/images/common/BlueMinus.svg b/web/storagenode/static/images/common/BlueMinus.svg new file mode 100644 index 000000000..69ebc2aab --- /dev/null +++ b/web/storagenode/static/images/common/BlueMinus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/storagenode/static/images/common/BluePlus.svg b/web/storagenode/static/images/common/BluePlus.svg new file mode 100644 index 000000000..5228b5c7a --- /dev/null +++ b/web/storagenode/static/images/common/BluePlus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/web/storagenode/static/styles/_variables.scss b/web/storagenode/static/styles/_variables.scss index 746dcb263..542864c29 100644 --- a/web/storagenode/static/styles/_variables.scss +++ b/web/storagenode/static/styles/_variables.scss @@ -23,7 +23,7 @@ --page-number-color: #354049; --refresh-button-background-color: white; --refresh-button-border-color: #e8e8e8; - --estimation-table-header-color: #f9fafc; + --table-header-color: #f9fafc; --estimation-table-total-container-color: rgba(0, 117, 255, 0.05); --month-label-color: #535f77; --month-active-background-color: #f1f4f9; @@ -42,6 +42,7 @@ --egress-font-color: #2e5f46; --egress-tooltip-info-background-color: rgba(211, 242, 204, 0.3); --disk-stat-chart-text-color: #657284; + --expand-button-background-color: rgba(226, 236, 247, 0.45); --tooltip-background-path: url('../../static/images/tooltipBack.png'); --tooltip-arrow-path: url('../../static/images/tooltipArrow.png'); --info-image-arrow-middle-path: url('../../static/images/Message.png'); @@ -71,7 +72,7 @@ --page-number-color: #354049; --refresh-button-background-color: #494c57; --refresh-button-border-color: #212329; - --estimation-table-header-color: #3e414d; + --table-header-color: #3e414d; --estimation-table-total-container-color: #5e6c80; --month-label-color: #4f97f7; --month-active-background-color: #3f4352; @@ -90,6 +91,7 @@ --egress-font-color: white; --egress-tooltip-info-background-color: #212329; --disk-stat-chart-text-color: white; + --expand-button-background-color: #31343d; --tooltip-background-path: url('../../static/images/tooltipBackDark.png'); --tooltip-arrow-path: url('../../static/images/tooltipArrowDark.png'); --info-image-arrow-middle-path: url('../../static/images/MessageDark.png'); diff --git a/web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts b/web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts index 5485d4c25..b24c0203d 100644 --- a/web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts +++ b/web/storagenode/tests/unit/components/EstimationPeriodDropdown.spec.ts @@ -1,8 +1,7 @@ // Copyright (C) 2020 Storj Labs, Inc. // See LICENSE for copying information. -import Vue, { VNode } from 'vue'; -import { DirectiveBinding } from 'vue/types/options'; +import Vue from 'vue'; import Vuex from 'vuex'; import EstimationPeriodDropdown from '@/app/components/payments/EstimationPeriodDropdown.vue'; diff --git a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts b/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts new file mode 100644 index 000000000..72dfc4ae3 --- /dev/null +++ b/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownItem.spec.ts @@ -0,0 +1,40 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import HeldHistoryMonthlyBreakdownTable from '@/app/components/payments/HeldHistoryMonthlyBreakdownTable.vue'; + +import { makePayoutModule, PAYOUT_MUTATIONS } from '@/app/store/modules/payout'; +import { HeldHistory, HeldHistoryMonthlyBreakdownItem } 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('HeldHistoryMonthlyBreakdownTable', (): void => { + it('renders correctly with actual values', async (): Promise => { + const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTable, { + store, + localVue, + }); + + 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), + ])); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts b/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts new file mode 100644 index 000000000..4ad9603df --- /dev/null +++ b/web/storagenode/tests/unit/components/HeldHistoryMonthlyBreakdownTableSmall.spec.ts @@ -0,0 +1,46 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import HeldHistoryMonthlyBreakdownTableSmall from '@/app/components/payments/HeldHistoryMonthlyBreakdownTableSmall.vue'; + +import { HeldHistoryMonthlyBreakdownItem } 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('HeldHistoryMonthlyBreakdownTableSmall', (): void => { + it('renders correctly with actual values', async (): Promise => { + const wrapper = shallowMount(HeldHistoryMonthlyBreakdownTableSmall, { + propsData: { + heldHistoryItem: new HeldHistoryMonthlyBreakdownItem( + '1', + 'name1', + 6, + 50000, + 7333880, + 7852235, + 0, + ), + }, + 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/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap b/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap new file mode 100644 index 000000000..4cc078b43 --- /dev/null +++ b/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownItem.spec.ts.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeldHistoryMonthlyBreakdownTable renders correctly with actual values 1`] = ` +
+
+
+
+

Satellite

+
+
+

Month 1-3

+
+
+

Month 4-6

+
+
+

Month 7-9

+
+
+
+
+

name1

+

1 month

+
+
+

$500.00

+
+
+

$0.00

+
+
+

$0.00

+
+
+
+
+

name2

+

5 month

+
+
+

$500.00

+
+
+

$4222.80

+
+
+

$0.00

+
+
+
+
+

name3

+

6 month

+
+
+

$500.00

+
+
+

$73338.80

+
+
+

$78522.35

+
+
+
+
+ + + +
+
+`; diff --git a/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap b/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap new file mode 100644 index 000000000..8629c8618 --- /dev/null +++ b/web/storagenode/tests/unit/components/__snapshots__/HeldHistoryMonthlyBreakdownTableSmall.spec.ts.snap @@ -0,0 +1,71 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HeldHistoryMonthlyBreakdownTableSmall renders correctly with actual values 1`] = ` +
+
+
+

name1

+

6 month

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

name1

+

6 month

+
+
+
+ +
+
+
+ +
+
+

Month 1-3

+

$500.00

+
+
+

Month 4-6

+

$73338.80

+
+
+

Month 7-9

+

$78522.35

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

name1

+

6 month

+
+
+
+ +
+
+
+ + + +
+`; diff --git a/web/storagenode/tests/unit/mock/api/payout.ts b/web/storagenode/tests/unit/mock/api/payout.ts deleted file mode 100644 index a59b4d6e1..000000000 --- a/web/storagenode/tests/unit/mock/api/payout.ts +++ /dev/null @@ -1,26 +0,0 @@ -// Copyright (C) 2019 Storj Labs, Inc. -// See LICENSE for copying information. - -import { - HeldInfo, - PaymentInfoParameters, - PayoutApi, - TotalPayoutInfo, -} from '@/app/types/payout'; - -/** - * Mock for PayoutApi. - */ -export class PayoutApiMock implements PayoutApi { - public getHeldInfoByMonth(paymentInfoParameters: PaymentInfoParameters): Promise { - return Promise.resolve(new HeldInfo()); - } - - public getHeldInfoByPeriod(paymentInfoParameters: PaymentInfoParameters): Promise { - return Promise.resolve(new HeldInfo()); - } - - public getTotal(paymentInfoParameters: PaymentInfoParameters): Promise { - return Promise.resolve(new TotalPayoutInfo()); - } -} diff --git a/web/storagenode/tests/unit/store/payout.spec.ts b/web/storagenode/tests/unit/store/payout.spec.ts index dc9349a0d..70ccb8ed1 100644 --- a/web/storagenode/tests/unit/store/payout.spec.ts +++ b/web/storagenode/tests/unit/store/payout.spec.ts @@ -5,7 +5,14 @@ import Vuex from 'vuex'; import { makeNodeModule } from '@/app/store/modules/node'; import { makePayoutModule, PAYOUT_ACTIONS, PAYOUT_MUTATIONS } from '@/app/store/modules/payout'; -import { HeldInfo, PayoutInfoRange, PayoutPeriod, TotalPayoutInfo } from '@/app/types/payout'; +import { + HeldHistory, + HeldHistoryMonthlyBreakdownItem, + HeldInfo, + PayoutInfoRange, + PayoutPeriod, + TotalPayoutInfo, +} from '@/app/types/payout'; import { getHeldPercentage, getMonthsBeforeNow } from '@/app/utils/payout'; import { PayoutHttpApi } from '@/storagenode/api/payout'; import { SNOApi } from '@/storagenode/api/storagenode'; @@ -69,6 +76,19 @@ describe('mutations', (): void => { expect(state.payoutModule.heldPercentage).toBe(expectedHeldPercentage); }); + + 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), + ]); + + 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); + }); }); describe('actions', () => { @@ -168,6 +188,33 @@ describe('actions', () => { expect(state.payoutModule.periodRange.start.period).toBe('2020-02'); expect(state.payoutModule.periodRange.end.period).toBe('2020-03'); }); + + it('success get held history', async (): Promise => { + 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), + ])), + ); + + 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'); + }); + + it('get total throws an error when api call fails', async (): Promise => { + jest.spyOn(payoutApi, 'getHeldHistory').mockImplementation(() => { throw new Error(); }); + + try { + await store.dispatch(PAYOUT_ACTIONS.GET_HELD_HISTORY); + expect(true).toBe(false); + } catch (error) { + expect(state.payoutModule.heldHistory.monthlyBreakdown.length).toBe(3); + expect(state.payoutModule.heldHistory.monthlyBreakdown[1].satelliteName).toBe('name2'); + } + }); }); describe('utils functions', (): void => {