web/storagenode: notifications components unit tests

Change-Id: I2b0249eff73572b3bf401c5f920440f095bc3978

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',
+                `Month ${this.MONTHS_BREAKPOINTS[0] + 1}-${this.MONTHS_BREAKPOINTS[1]}`,
-                this.monthsOnNetwork > 0 && this.monthsOnNetwork <= 3,
+                this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[0] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[1],
                 false,
             ),
             new HeldStep(
                 '50%',
-                'Month 4-6',
+                `Month ${this.MONTHS_BREAKPOINTS[1] + 1}-${this.MONTHS_BREAKPOINTS[4]}`,
-                this.monthsOnNetwork > 3 && this.monthsOnNetwork <= 6,
+                this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[1] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[2],
-                this.monthsOnNetwork < 4,
+                this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[1] + 1,
             ),
             new HeldStep(
                 '25%',
-                'Month 7-9',
+                `Month ${this.MONTHS_BREAKPOINTS[2] + 1}-${this.MONTHS_BREAKPOINTS[3]}`,
-                this.monthsOnNetwork > 6 && this.monthsOnNetwork <= 9,
+                this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[2] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[3],
-                this.monthsOnNetwork < 7,
+                this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[2] + 1,
             ),
             new HeldStep(
                 '0%',
-                'Month 10-15',
+                `Month ${this.MONTHS_BREAKPOINTS[3] + 1}-${this.MONTHS_BREAKPOINTS[4]}`,
-                this.monthsOnNetwork > 9 && this.monthsOnNetwork <= 15,
+                this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[3] && this.monthsOnNetwork <= this.MONTHS_BREAKPOINTS[4],
-                this.monthsOnNetwork < 10,
+                this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[3] + 1,
             ),
             new HeldStep(
                 '+50%',
-                'Month 16',
+                `Month ${this.MONTHS_BREAKPOINTS[4] + 1}`,
-                this.monthsOnNetwork > 15,
+                this.monthsOnNetwork > this.MONTHS_BREAKPOINTS[4],
-                this.monthsOnNetwork < 15,
+                this.monthsOnNetwork < this.MONTHS_BREAKPOINTS[4] + 1,
             ),
         ];
     }

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<void> => {
+        await store.commit(NOTIFICATIONS_MUTATIONS.SET_NOTIFICATIONS, new NotificationsState(
+            [new UINotification(new Notification())],
+            1,
+            1,
+        ));
+
+        const wrapper = shallowMount(NotificationsArea, {
+            store,
+            localVue,
+        });
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});

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<void> => {
+        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<void> => {
+        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();
+    });
+});

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<void> => {
+        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();
+    });
+});

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`] = `
+<div class="notifications-container">
+  <div class="notifications-container__header">
+    <div class="notifications-container__header__left-area">
+      <router-link to="/" class="notifications-container__header__back-link">
+        <backarrowicon-stub></backarrowicon-stub>
+      </router-link>
+      <p class="notifications-container__header__text">Notifications</p>
+    </div> <button name="Mark all notifications as read" class="notifications-container__header__button disabled">
+      <p class="notifications-container__header__button__label">Mark all as read</p>
+    </button>
+  </div>
+  <div class="notifications-container__empty-state"><img src="@/../static/images/notifications/EmptyStateLarge.png" alt="Empty state image" class="notifications-container__empty-state__image">
+    <p class="notifications-container__empty-state__label">No notifications yet</p>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`NotificationsArea renders correctly with notifications 1`] = `
+<div class="notifications-container">
+  <div class="notifications-container__header">
+    <div class="notifications-container__header__left-area">
+      <router-link to="/" class="notifications-container__header__back-link">
+        <backarrowicon-stub></backarrowicon-stub>
+      </router-link>
+      <p class="notifications-container__header__text">Notifications</p>
+    </div> <button name="Mark all notifications as read" class="notifications-container__header__button">
+      <p class="notifications-container__header__button__label">Mark all as read</p>
+    </button>
+  </div>
+  <div class="notifications-container__content-area">
+    <snonotification-stub notification="[object Object]" class="notification"></snonotification-stub>
+  </div>
+  <!---->
+</div>
+`;

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`] = `
+<div class="notification-popup-container">
+  <div class="notification-popup-container__header">
+    <p class="notification-popup-container__header__title">Notifications</p>
+    <router-link-stub to="/notifications" tag="a" event="click" class="notification-popup-container__header__link">
+      <p>See All</p>
+    </router-link-stub>
+  </div>
+  <div class="notification-popup-container__content collapsed">
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+  </div>
+</div>
+`;
+
+exports[`NotificationsPopup renders correctly with more than 4 notifications 1`] = `
+<div class="notification-popup-container">
+  <div class="notification-popup-container__header">
+    <p class="notification-popup-container__header__title">Notifications</p>
+    <router-link-stub to="/notifications" tag="a" event="click" class="notification-popup-container__header__link">
+      <p>See All</p>
+    </router-link-stub>
+  </div>
+  <div class="notification-popup-container__content">
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+    <snonotification-stub notification="[object Object]" issmall="true"></snonotification-stub>
+  </div>
+</div>
+`;
+
+exports[`NotificationsPopup renders correctly with no notifications 1`] = `
+<div class="notification-popup-container">
+  <div class="notification-popup-container__header">
+    <p class="notification-popup-container__header__title">Notifications</p>
+    <router-link-stub to="/notifications" tag="a" event="click" class="notification-popup-container__header__link">
+      <p>See All</p>
+    </router-link-stub>
+  </div>
+  <div class="notification-popup-container__empty-state"><img src="@/../static/images/notifications/EmptyState.png" alt="Empty state image">
+    <p class="notification-popup-container__empty-state__label">No notifications yet</p>
+  </div>
+</div>
+`;

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`] = `
+<div class="notification-item unread">
+  <div class="row">
+    <div class="notification-item__new-indicator-container"><span class="notification-item__new-indicator-container__circle"></span></div>
+    <div class="notification-item__icon-container">
+      <div class="icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.6625 12.9324C15.441 12.5231 15.2181 12.1132 14.996 11.7019C14.5825 10.939 14.1698 10.1761 13.7571 9.41319C13.2614 8.49914 12.7671 7.58367 12.2721 6.66963C11.7939 5.78722 11.3172 4.90619 10.8391 4.02453C10.4875 3.37625 10.1374 2.72727 9.78581 2.07837C9.69089 1.90259 9.59596 1.72682 9.50105 1.55243C9.40261 1.36962 9.29855 1.19384 9.14949 1.04478C8.62918 0.520942 7.76574 0.420394 7.13997 0.816268C6.87137 0.986424 6.67732 1.2276 6.52826 1.50392C6.29975 1.92581 6.07122 2.34767 5.84271 2.77096C5.42646 3.54087 5.00951 4.31081 4.59326 5.08072C4.09192 5.99971 3.59482 6.92086 3.0956 7.84192C2.6231 8.71521 2.1499 9.58707 1.6767 10.4611C1.33076 11.1009 0.984114 11.7394 0.637488 12.3792C0.546082 12.5479 0.45468 12.7167 0.363276 12.8854C0.235307 13.1231 0.134766 13.3635 0.103122 13.6378C0.013826 14.4126 0.556632 15.1762 1.30687 15.3661C1.50516 15.4167 1.70062 15.4188 1.90102 15.4188H14.276H14.2957C14.7035 15.4104 15.0902 15.2571 15.3891 14.9793C15.6773 14.7122 15.8461 14.3465 15.8939 13.9598C15.9396 13.5956 15.8341 13.2511 15.6626 12.9325L15.6625 12.9324ZM7.29666 5.27876C7.29666 4.88501 7.6187 4.59321 7.99978 4.57564C8.37947 4.55806 8.70289 4.91174 8.70289 5.27876V10.2302C8.70289 10.6239 8.38085 10.9157 7.99978 10.9333C7.62008 10.9509 7.29666 10.5972 7.29666 10.2302V5.27876ZM7.99978 13.3282C7.60462 13.3282 7.28399 13.0083 7.28399 12.6124C7.28399 12.2172 7.6039 11.8966 7.99978 11.8966C8.39493 11.8966 8.71556 12.2165 8.71556 12.6124C8.71556 13.0075 8.39495 13.3282 7.99978 13.3282Z" fill="#535F77"></path>
+        </svg></div>
+    </div>
+    <div class="notification-item__text-container">
+      <p class="notification-item__text-container__message"><b class="notification-item__text-container__message__bold">title1:</b> message1
+      </p>
+      <!---->
+    </div>
+  </div>
+  <div class="notification-item__date-container">
+    <p class="notification-item__date-container__date">Just now</p>
+  </div>
+</div>
+`;
+
+exports[`SNONotification renders correctly with default props 1`] = `
+<div class="notification-item unread">
+  <div class="row">
+    <div class="notification-item__new-indicator-container"><span class="notification-item__new-indicator-container__circle"></span></div>
+    <div class="notification-item__icon-container">
+      <div class="icon"><svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.09394 2.14899C3.66843 2.80225 1.87523 5.10849 1.87523 7.85462V11.7819C1.87523 12.1437 1.59447 12.4364 1.25145 12.4364C0.560552 12.4364 0.000244141 13.0245 0.000244141 13.7455C0.000244141 14.469 0.560552 15.0546 1.25389 15.0546H13.7466C14.4387 15.0546 15.0002 14.4665 15.0002 13.7455C15.0002 13.0219 14.4375 12.4364 13.749 12.4364C13.4048 12.4364 13.1253 12.1449 13.1253 11.7819V7.85462C13.1253 5.1099 11.3333 2.80353 8.90655 2.14899V1.47272C8.90655 0.657093 8.27668 0 7.50031 0C6.72516 0 6.09407 0.659646 6.09407 1.47272L6.09394 2.14899ZM5.3127 15.7091H9.68766C9.68766 16.9747 8.70867 18 7.50018 18C6.29169 18 5.3127 16.9747 5.3127 15.7091Z" fill="#535F77"></path>
+        </svg></div>
+    </div>
+    <div class="notification-item__text-container">
+      <p class="notification-item__text-container__message"><b class="notification-item__text-container__message__bold">:</b>
+      </p>
+      <!---->
+    </div>
+  </div>
+  <div class="notification-item__date-container">
+    <p class="notification-item__date-container__date">Just now</p>
+  </div>
+</div>
+`;