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

web/satellite: migrate NotificationArea component to use SFC composition api

Browse Source 
Change-Id: I8ac32f49f5e4afb1f5dd75b193054b27f3222769
This commit is contained in:
Vitalii 2023-04-04 13:03:52 +03:00 committed by Storj Robot
parent 354aff424b
commit 68c016ad50
3 changed files with 17 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/satellite/src/components/notifications/NotificationArea.vue
View File

@ -11,34 +11,29 @@
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
<script setup lang="ts">
import { computed } from 'vue';
import { DelayedNotification } from '@/types/DelayedNotification';
import { useStore } from '@/utils/hooks';
import NotificationItem from '@/components/notifications/NotificationItem.vue';
// @vue/component
@Component({
components: {
NotificationItem,
},
})
export default class NotificationArea extends Vue {
/**
* Returns all notification queue from store.
*/
public get notifications(): DelayedNotification[] {
return this.$store.state.notificationsModule.notificationQueue;
}
const store = useStore();
/**
* Indicates if any notifications are in queue.
*/
public get doNotificationsExist(): boolean {
return this.notifications.length > 0;
}
}
/**
* Returns all notification queue from store.
*/
const notifications = computed((): DelayedNotification[] => {
return store.state.notificationsModule.notificationQueue;
});
/**
* Indicates if any notifications are in queue.
*/
const doNotificationsExist = computed((): boolean => {
return notifications.value.length > 0;
});
</script>
<style scoped lang="scss">

50
web/satellite/tests/unit/notifications/NotificationArea.spec.ts
View File

@ -1,50 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { mount, shallowMount } from '@vue/test-utils';
import { DelayedNotification } from '@/types/DelayedNotification';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
describe('NotificationArea.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(NotificationArea, {
computed: {
notifications: () => [],
},
});
expect(wrapper).toMatchSnapshot();
});
it('renders correctly with notification', () => {
const testMessage = 'testMessage';
const notifications = [new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.SUCCESS,
testMessage,
), new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.ERROR,
testMessage,
), new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.WARNING,
testMessage,
), new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.NOTIFICATION,
testMessage,
)];
const wrapper = mount(NotificationArea, {
computed: {
notifications: () => notifications,
},
});
expect(wrapper).toMatchSnapshot();
});
});

48
web/satellite/tests/unit/notifications/__snapshots__/NotificationArea.spec.ts.snap
View File

@ -1,48 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NotificationArea.vue renders correctly 1`] = ``;
exports[`NotificationArea.vue renders correctly with notification 1`] = `
<div class="notification-container">
<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>
<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>
<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>
<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>
</div>
`;