From ac9433342260c2dd0a3e944fb02cc4944cca8538 Mon Sep 17 00:00:00 2001 From: NickolaiYurchenko Date: Wed, 4 Nov 2020 13:52:19 +0200 Subject: [PATCH] web/storagenode: notifications components unit tests Change-Id: I2b0249eff73572b3bf401c5f920440f095bc3978 --- .../app/components/payments/HeldProgress.vue | 29 ++++---- .../notifications/NotificationArea.spec.ts | 47 ++++++++++++ .../notifications/NotificationsPopup.spec.ts | 72 +++++++++++++++++++ .../notifications/SNONotification.spec.ts | 60 ++++++++++++++++ .../NotificationArea.spec.ts.snap | 39 ++++++++++ .../NotificationsPopup.spec.ts.snap | 47 ++++++++++++ .../SNONotification.spec.ts.snap | 43 +++++++++++ 7 files changed, 323 insertions(+), 14 deletions(-) create mode 100644 web/storagenode/tests/unit/components/notifications/NotificationArea.spec.ts create mode 100644 web/storagenode/tests/unit/components/notifications/NotificationsPopup.spec.ts create mode 100644 web/storagenode/tests/unit/components/notifications/SNONotification.spec.ts create mode 100644 web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationArea.spec.ts.snap create mode 100644 web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationsPopup.spec.ts.snap create mode 100644 web/storagenode/tests/unit/components/notifications/__snapshots__/SNONotification.spec.ts.snap diff --git a/web/storagenode/src/app/components/payments/HeldProgress.vue b/web/storagenode/src/app/components/payments/HeldProgress.vue index 0cca128f4..6596dede6 100644 --- a/web/storagenode/src/app/components/payments/HeldProgress.vue +++ b/web/storagenode/src/app/components/payments/HeldProgress.vue @@ -41,6 +41,7 @@ class HeldStep { @Component export default class HeldProgress extends Vue { public steps: HeldStep[] = []; + private MONTHS_BREAKPOINTS: number[] = [0, 3, 6, 9, 15]; /** * Returns approximated number of months that node is online. @@ -65,33 +66,33 @@ export default class HeldProgress extends Vue { this.steps = [ new HeldStep( '75%', - 'Month 1-3', - this.monthsOnNetwork > 0 && this.monthsOnNetwork <= 3, + `Month ${this.MONTHS_BREAKPOINTS[0] + 1}-${this.MONTHS_BREAKPOINTS[1]}`, + this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[0] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[1], false, ), new HeldStep( '50%', - 'Month 4-6', - this.monthsOnNetwork > 3 && this.monthsOnNetwork <= 6, - this.monthsOnNetwork < 4, + `Month ${this.MONTHS_BREAKPOINTS[1] + 1}-${this.MONTHS_BREAKPOINTS[4]}`, + this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[1] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[2], + this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[1] + 1, ), new HeldStep( '25%', - 'Month 7-9', - this.monthsOnNetwork > 6 && this.monthsOnNetwork <= 9, - this.monthsOnNetwork < 7, + `Month ${this.MONTHS_BREAKPOINTS[2] + 1}-${this.MONTHS_BREAKPOINTS[3]}`, + this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[2] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[3], + this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[2] + 1, ), new HeldStep( '0%', - 'Month 10-15', - this.monthsOnNetwork > 9 && this.monthsOnNetwork <= 15, - this.monthsOnNetwork < 10, + `Month ${this.MONTHS_BREAKPOINTS[3] + 1}-${this.MONTHS_BREAKPOINTS[4]}`, + this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[3] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[4], + this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[3] + 1, ), new HeldStep( '+50%', - 'Month 16', - this.monthsOnNetwork > 15, - this.monthsOnNetwork < 15, + `Month ${this.MONTHS_BREAKPOINTS[4] + 1}`, + this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[4], + this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[4] + 1, ), ]; } diff --git a/web/storagenode/tests/unit/components/notifications/NotificationArea.spec.ts b/web/storagenode/tests/unit/components/notifications/NotificationArea.spec.ts new file mode 100644 index 000000000..cd2f93f2a --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/NotificationArea.spec.ts @@ -0,0 +1,47 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import { newNotificationsModule, NOTIFICATIONS_MUTATIONS } from '@/app/store/modules/notifications'; +import { NotificationsState, UINotification } from '@/app/types/notifications'; +import NotificationsArea from '@/app/views/NotificationsArea.vue'; +import { NotificationsHttpApi } from '@/storagenode/api/notifications'; +import { Notification } from '@/storagenode/notifications/notifications'; +import { NotificationsService } from '@/storagenode/notifications/service'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const notificationsApi = new NotificationsHttpApi(); +const notificationsService = new NotificationsService(notificationsApi); +const notificationsModule = newNotificationsModule(notificationsService); + +const store = new Vuex.Store({ modules: { notificationsModule }}); + +describe('NotificationsArea', (): void => { + it('renders correctly with no notifications', (): void => { + const wrapper = shallowMount(NotificationsArea, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders correctly with notifications', async (): Promise => { + await store.commit(NOTIFICATIONS_MUTATIONS.SET_NOTIFICATIONS, new NotificationsState( + [new UINotification(new Notification())], + 1, + 1, + )); + + const wrapper = shallowMount(NotificationsArea, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/notifications/NotificationsPopup.spec.ts b/web/storagenode/tests/unit/components/notifications/NotificationsPopup.spec.ts new file mode 100644 index 000000000..4c9f80622 --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/NotificationsPopup.spec.ts @@ -0,0 +1,72 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import NotificationsPopup from '@/app/components/notifications/NotificationsPopup.vue'; + +import { + newNotificationsModule, + NOTIFICATIONS_MUTATIONS, +} from '@/app/store/modules/notifications'; +import { NotificationsState, UINotification } from '@/app/types/notifications'; +import { NotificationsHttpApi } from '@/storagenode/api/notifications'; +import { Notification } from '@/storagenode/notifications/notifications'; +import { NotificationsService } from '@/storagenode/notifications/service'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const notificationsApi = new NotificationsHttpApi(); +const notificationsService = new NotificationsService(notificationsApi); +const notificationsModule = newNotificationsModule(notificationsService); + +const store = new Vuex.Store({ modules: { notificationsModule }}); + +describe('NotificationsPopup', (): void => { + it('renders correctly with no notifications', (): void => { + const wrapper = shallowMount(NotificationsPopup, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders correctly with less than 4 notifications', async (): Promise => { + await store.commit(NOTIFICATIONS_MUTATIONS.SET_LATEST, new NotificationsState( + [new UINotification(new Notification())], + 1, + 1, + )); + + const wrapper = shallowMount(NotificationsPopup, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders correctly with more than 4 notifications', async (): Promise => { + await store.commit(NOTIFICATIONS_MUTATIONS.SET_LATEST, new NotificationsState( + [ + new UINotification(new Notification('1')), + new UINotification(new Notification('2')), + new UINotification(new Notification('3')), + new UINotification(new Notification('4')), + new UINotification(new Notification('5')), + ], + 1, + 1, + )); + + const wrapper = shallowMount(NotificationsPopup, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/notifications/SNONotification.spec.ts b/web/storagenode/tests/unit/components/notifications/SNONotification.spec.ts new file mode 100644 index 000000000..37a9296f3 --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/SNONotification.spec.ts @@ -0,0 +1,60 @@ +// Copyright (C) 2020 Storj Labs, Inc. +// See LICENSE for copying information. + +import Vuex from 'vuex'; + +import SNONotification from '@/app/components/notifications/SNONotification.vue'; + +import { newNotificationsModule } from '@/app/store/modules/notifications'; +import { UINotification } from '@/app/types/notifications'; +import { NotificationsHttpApi } from '@/storagenode/api/notifications'; +import { Notification, NotificationTypes } from '@/storagenode/notifications/notifications'; +import { NotificationsService } from '@/storagenode/notifications/service'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +const notificationsApi = new NotificationsHttpApi(); +const notificationsService = new NotificationsService(notificationsApi); +const notificationsModule = newNotificationsModule(notificationsService); + +const store = new Vuex.Store({ modules: { notificationsModule }}); + +describe('SNONotification', (): void => { + it('renders correctly with default props', (): void => { + const wrapper = shallowMount(SNONotification, { + store, + localVue, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders correctly', async (): Promise => { + const mockMethod = jest.fn(); + const testNotification = new Notification( + '123', + '1234', + NotificationTypes.UptimeCheckFailure, + 'title1', + 'message1', + ); + + const wrapper = shallowMount(SNONotification, { + store, + localVue, + propsData: { + notification: new UINotification(testNotification), + isSmall: false, + }, + }); + + wrapper.setMethods({ read: mockMethod }); + + await wrapper.find('.notification-item').trigger('mouseenter'); + + expect(mockMethod).toHaveBeenCalled(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationArea.spec.ts.snap b/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationArea.spec.ts.snap new file mode 100644 index 000000000..c18f85fb7 --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationArea.spec.ts.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotificationsArea renders correctly with no notifications 1`] = ` +
+
+
+ + + +

Notifications

+
+
+
Empty state image +

No notifications yet

+
+ +
+`; + +exports[`NotificationsArea renders correctly with notifications 1`] = ` +
+
+
+ + + +

Notifications

+
+
+
+ +
+ +
+`; diff --git a/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationsPopup.spec.ts.snap b/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationsPopup.spec.ts.snap new file mode 100644 index 000000000..8715e5c67 --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/__snapshots__/NotificationsPopup.spec.ts.snap @@ -0,0 +1,47 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotificationsPopup renders correctly with less than 4 notifications 1`] = ` +
+
+

Notifications

+ +

See All

+ +
+ +
+`; + +exports[`NotificationsPopup renders correctly with more than 4 notifications 1`] = ` +
+
+

Notifications

+ +

See All

+ +
+
+ + + + + +
+
+`; + +exports[`NotificationsPopup renders correctly with no notifications 1`] = ` +
+
+

Notifications

+ +

See All

+ +
+
Empty state image +

No notifications yet

+
+
+`; diff --git a/web/storagenode/tests/unit/components/notifications/__snapshots__/SNONotification.spec.ts.snap b/web/storagenode/tests/unit/components/notifications/__snapshots__/SNONotification.spec.ts.snap new file mode 100644 index 000000000..653d3ace6 --- /dev/null +++ b/web/storagenode/tests/unit/components/notifications/__snapshots__/SNONotification.spec.ts.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SNONotification renders correctly 1`] = ` +
+
+
+
+
+ +
+
+
+

title1: message1 +

+ +
+
+
+

Just now

+
+
+`; + +exports[`SNONotification renders correctly with default props 1`] = ` +
+
+
+
+
+ +
+
+
+

: +

+ +
+
+
+

Just now

+
+
+`;