2019-01-24 20:15:10 +00:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
2018-12-12 13:44:01 +00:00
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
2019-08-21 14:21:23 +01:00
|
|
|
import sinon from 'sinon';
|
2019-09-09 11:33:39 +01:00
|
|
|
import Vuex from 'vuex';
|
|
|
|
|
2019-09-26 14:36:12 +01:00
|
|
|
import NotificationItem from '@/components/notifications/NotificationItem.vue';
|
2019-09-09 11:33:39 +01:00
|
|
|
|
2019-08-21 14:21:23 +01:00
|
|
|
import { makeNotificationsModule } from '@/store/modules/notifications';
|
2019-09-09 11:33:39 +01:00
|
|
|
import { DelayedNotification } from '@/types/DelayedNotification';
|
2019-08-21 14:21:23 +01:00
|
|
|
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
2019-09-09 11:33:39 +01:00
|
|
|
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
|
|
|
|
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
|
2019-08-21 14:21:23 +01:00
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
|
|
|
|
localVue.use(Vuex);
|
|
|
|
const pauseSpy = sinon.spy();
|
|
|
|
const resumeSpy = sinon.spy();
|
|
|
|
const deleteSpy = sinon.spy();
|
|
|
|
const notificationModule = makeNotificationsModule();
|
|
|
|
notificationModule.actions[NOTIFICATION_ACTIONS.PAUSE] = pauseSpy;
|
|
|
|
notificationModule.actions[NOTIFICATION_ACTIONS.RESUME] = resumeSpy;
|
|
|
|
notificationModule.actions[NOTIFICATION_ACTIONS.DELETE] = deleteSpy;
|
|
|
|
|
|
|
|
const store = new Vuex.Store(notificationModule);
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2020-09-15 18:05:26 +01:00
|
|
|
describe('NotificationItem', () => {
|
2018-12-18 14:43:23 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly', () => {
|
2019-09-26 14:36:12 +01:00
|
|
|
const wrapper = shallowMount(NotificationItem);
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2020-09-15 18:05:26 +01:00
|
|
|
it('renders correctly with success props', () => {
|
2019-02-20 13:33:56 +00:00
|
|
|
const testMessage = 'testMessage';
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2019-09-26 14:36:12 +01:00
|
|
|
const wrapper = mount(NotificationItem, {
|
2019-02-20 13:33:56 +00:00
|
|
|
propsData: {
|
2019-08-21 14:21:23 +01:00
|
|
|
notification: new DelayedNotification(
|
|
|
|
jest.fn(),
|
|
|
|
NOTIFICATION_TYPES.SUCCESS,
|
2019-09-13 15:58:18 +01:00
|
|
|
testMessage,
|
|
|
|
),
|
2019-02-20 13:33:56 +00:00
|
|
|
},
|
|
|
|
});
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2019-09-26 14:36:12 +01:00
|
|
|
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage);
|
2020-09-15 18:05:26 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders correctly with error props', () => {
|
|
|
|
const testMessage = 'testMessage';
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2020-09-15 18:05:26 +01:00
|
|
|
const wrapper = mount(NotificationItem, {
|
|
|
|
propsData: {
|
|
|
|
notification: new DelayedNotification(
|
|
|
|
jest.fn(),
|
|
|
|
NOTIFICATION_TYPES.ERROR,
|
|
|
|
testMessage,
|
|
|
|
),
|
|
|
|
},
|
2019-08-21 14:21:23 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
expect(wrapper).toMatchSnapshot();
|
2020-09-15 18:05:26 +01:00
|
|
|
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders correctly with notification props', () => {
|
|
|
|
const testMessage = 'testMessage';
|
2019-08-21 14:21:23 +01:00
|
|
|
|
2020-09-15 18:05:26 +01:00
|
|
|
const wrapper = mount(NotificationItem, {
|
|
|
|
propsData: {
|
|
|
|
notification: new DelayedNotification(
|
|
|
|
jest.fn(),
|
|
|
|
NOTIFICATION_TYPES.NOTIFICATION,
|
|
|
|
testMessage,
|
|
|
|
),
|
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2020-09-15 18:05:26 +01:00
|
|
|
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders correctly with warning props', () => {
|
|
|
|
const testMessage = 'testMessage';
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2020-09-15 18:05:26 +01:00
|
|
|
const wrapper = mount(NotificationItem, {
|
|
|
|
propsData: {
|
|
|
|
notification: new DelayedNotification(
|
|
|
|
jest.fn(),
|
|
|
|
NOTIFICATION_TYPES.WARNING,
|
|
|
|
testMessage,
|
|
|
|
),
|
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-12-12 13:44:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
2020-09-15 18:05:26 +01:00
|
|
|
expect(wrapper.find('.notification-wrap__text-area__message').text()).toMatch(testMessage);
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2019-08-21 14:21:23 +01:00
|
|
|
|
|
|
|
it('trigger pause correctly', () => {
|
2019-09-26 14:36:12 +01:00
|
|
|
const wrapper = shallowMount(NotificationItem, { store, localVue });
|
2019-08-21 14:21:23 +01:00
|
|
|
|
|
|
|
wrapper.find('.notification-wrap').trigger('mouseover');
|
|
|
|
|
|
|
|
expect(pauseSpy.callCount).toBe(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('trigger resume correctly', () => {
|
2019-09-26 14:36:12 +01:00
|
|
|
const wrapper = shallowMount(NotificationItem, { store, localVue });
|
2019-08-21 14:21:23 +01:00
|
|
|
|
|
|
|
wrapper.find('.notification-wrap').trigger('mouseover');
|
|
|
|
wrapper.find('.notification-wrap').trigger('mouseleave');
|
|
|
|
|
|
|
|
expect(resumeSpy.callCount).toBe(1);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('trigger delete correctly', () => {
|
2019-09-26 14:36:12 +01:00
|
|
|
const wrapper = shallowMount(NotificationItem, { store, localVue });
|
2019-08-21 14:21:23 +01:00
|
|
|
|
|
|
|
wrapper.find('.notification-wrap__buttons-group').trigger('click');
|
|
|
|
|
|
|
|
expect(deleteSpy.callCount).toBe(1);
|
|
|
|
});
|
2018-12-12 13:44:01 +00:00
|
|
|
});
|