JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrate NotificationItem to use SFC composition api

Browse Source 
Change-Id: I649e93e4e9251fcb871acae89f4c1b91b6450fbb
This commit is contained in:
Vitalii 2023-04-04 13:08:30 +03:00 committed by Storj Robot
parent 3f4ad197b0
commit 3336a24c5d
3 changed files with 46 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
web/satellite/src/components/notifications/NotificationItem.vue
View File

@ -27,66 +27,66 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { computed, onMounted, ref } from 'vue';
import { DelayedNotification } from '@/types/DelayedNotification';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
import { useStore } from '@/utils/hooks';
import CloseIcon from '@/../static/images/notifications/close.svg';
// @vue/component
@Component({
components: {
CloseIcon,
},
})
export default class NotificationItem extends Vue {
@Prop({ default: () => new DelayedNotification(() => { return; }, '', '') })
private notification: DelayedNotification;
const store = useStore();
public readonly requestUrl = MetaUtils.getMetaContent('general-request-url');
public isClassActive = false;
const props = withDefaults(defineProps<{
notification: DelayedNotification;
}>(), {
notification: () => new DelayedNotification(() => { return; }, '', ''),
});
/**
* Indicates if support word is mentioned in message.
* Temporal solution, can be changed later.
*/
public get isSupportLinkMentioned(): boolean {
return this.notification.message.toLowerCase().includes('support');
}
const requestUrl = MetaUtils.getMetaContent('general-request-url');
/**
* Forces notification deletion.
*/
public onCloseClick(): void {
this.$store.dispatch(NOTIFICATION_ACTIONS.DELETE, this.notification.id);
}
const isClassActive = ref<boolean>(false);
/**
* Forces notification to stay on page on mouse over it.
*/
public onMouseOver(): void {
this.$store.dispatch(NOTIFICATION_ACTIONS.PAUSE, this.notification.id);
}
/**
* Indicates if support word is mentioned in message.
* Temporal solution, can be changed later.
*/
const isSupportLinkMentioned = computed((): boolean => {
return props.notification.message.toLowerCase().includes('support');
});
/**
* Resume notification flow when mouse leaves notification.
*/
public onMouseLeave(): void {
this.$store.dispatch(NOTIFICATION_ACTIONS.RESUME, this.notification.id);
}
/**
* Uses for class change for animation.
*/
public mounted(): void {
setTimeout(() => {
this.isClassActive = true;
}, 100);
}
/**
* Forces notification deletion.
*/
function onCloseClick(): void {
store.dispatch(NOTIFICATION_ACTIONS.DELETE, props.notification.id);
}
/**
* Forces notification to stay on page on mouse over it.
*/
function onMouseOver(): void {
store.dispatch(NOTIFICATION_ACTIONS.PAUSE, props.notification.id);
}
/**
* Resume notification flow when mouse leaves notification.
*/
function onMouseLeave(): void {
store.dispatch(NOTIFICATION_ACTIONS.RESUME, props.notification.id);
}
/**
* Uses for class change for animation.
*/
onMounted((): void => {
setTimeout(() => {
isClassActive.value = true;
}, 100);
});
</script>
<style scoped lang="scss">

147
web/satellite/tests/unit/notifications/NotificationItem.spec.ts
View File

@ -1,147 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { DelayedNotification } from '@/types/DelayedNotification';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
import NotificationItem from '@/components/notifications/NotificationItem.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const pauseSpy = jest.fn();
const resumeSpy = jest.fn();
const deleteSpy = jest.fn();
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);
describe('NotificationItem', () => {
it('renders correctly', () => {
const wrapper = mount(NotificationItem);
expect(wrapper).toMatchSnapshot();
});
it('renders correctly with success props', () => {
const testMessage = 'testMessage';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.SUCCESS,
testMessage,
),
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
});
it('renders correctly with error props', () => {
const testMessage = 'testMessage';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.ERROR,
testMessage,
),
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
});
it('renders correctly with notification props', () => {
const testMessage = 'testMessage';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.NOTIFICATION,
testMessage,
),
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
});
it('renders correctly with warning props', () => {
const testMessage = 'testMessage';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.WARNING,
testMessage,
),
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
});
it('renders correctly with support link', async (): Promise<void> => {
const testMessage = 'testMessage support rest of message';
const wrapper = mount(NotificationItem, {
propsData: {
notification: new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.NOTIFICATION,
testMessage,
),
},
});
await wrapper.setData({ requestUrl: 'https://requestUrl.com' });
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('.notification-wrap__content-area__message').text()).toMatch(testMessage);
expect(wrapper.find('.notification-wrap__content-area__link').text()).toBeTruthy();
});
it('trigger pause correctly', () => {
const wrapper = mount(NotificationItem, { store, localVue });
wrapper.find('.notification-wrap').trigger('mouseover');
expect(pauseSpy).toHaveBeenCalledTimes(1);
});
it('trigger resume correctly', () => {
const wrapper = mount(NotificationItem, { store, localVue });
wrapper.find('.notification-wrap').trigger('mouseover');
wrapper.find('.notification-wrap').trigger('mouseleave');
expect(resumeSpy).toHaveBeenCalledTimes(1);
});
it('trigger delete correctly', () => {
const wrapper = mount(NotificationItem, { store, localVue });
wrapper.find('.notification-wrap__buttons-group').trigger('click');
expect(deleteSpy).toHaveBeenCalledTimes(1);
});
});

80
web/satellite/tests/unit/notifications/__snapshots__/NotificationItem.spec.ts.snap
View File

@ -1,80 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NotificationItem renders correctly 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message"></p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with error props 1`] = `
<div class="notification-wrap" style="background-color: rgb(255, 212, 210);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with notification props 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with success props 1`] = `
<div class="notification-wrap" style="background-color: rgb(219, 241, 211);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with support link 1`] = `
<div class="notification-wrap" style="background-color: rgb(208, 227, 254);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage support rest of message</p> <a href="https://requestUrl.com" target="_blank" class="notification-wrap__content-area__link">
https://requestUrl.com
</a>
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;
exports[`NotificationItem renders correctly with warning props 1`] = `
<div class="notification-wrap" style="background-color: rgb(252, 248, 227);">
<div class="notification-wrap__content-area">
<div class="notification-wrap__content-area__image"><svg></svg></div>
<div class="notification-wrap__content-area__message-area">
<p class="notification-wrap__content-area__message">testMessage</p>
<!---->
</div>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg></svg></span></div>
</div>
`;