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

added notification logic and tests (#829)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2018-12-12 15:44:01 +02:00 committed by Yehor Butko
parent ba5f71810e
commit c8a110a36d
13 changed files with 493 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/satellite/src/App.vue
View File

@ -2,39 +2,54 @@
// See LICENSE for copying information.
<template>
<div id="app">
<router-view/>
</div>
<div id="app">
<router-view/>
<!-- Area for displaying notification -->
<NotificationArea />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
@Component({
components: {
NotificationArea
}
})
export default class App extends Vue {}
</script>
<style lang="scss">
@font-face {
font-family: "montserrat_regular";
src: url("../static/fonts/montserrat_regular.ttf");
font-family: "montserrat_regular";
src: url("../static/fonts/montserrat_regular.ttf");
}
@font-face {
font-family: "montserrat_medium";
src: url("../static/fonts/montserrat_medium.ttf");
font-family: "montserrat_medium";
src: url("../static/fonts/montserrat_medium.ttf");
}
@font-face {
font-family: "montserrat_bold";
src: url("../static/fonts/montserrat_bold.ttf");
font-family: "montserrat_bold";
src: url("../static/fonts/montserrat_bold.ttf");
}
a{
cursor: pointer;
cursor: pointer;
}
input,
textarea {
font-family: inherit;
font-weight: 600;
border: 1px solid rgba(56, 75, 101, 0.4);
font-family: inherit;
font-weight: 600;
border: 1px solid rgba(56, 75, 101, 0.4);
}
input:hover,
textarea:hover {
border-color: #737791 !important;
border-color: #737791 !important;
}
</style>

91
web/satellite/src/components/notifications/Notification.vue
View File

@ -2,43 +2,84 @@
// See LICENSE for copying information.
<template>
<div>
<div class="notification-container" >
<div class="notification-container__text">
<img src="../../../../static/images/team/info.svg" alt="">
<p>All team members succesfully deleted</p>
</div>
<div class="notification-container__buttons-group">
<span class="notification-container__buttons-group__close"></span>
</div>
<div :style="configuration.style" class="notification-wrap" @mouseover="onMouseOver" @mouseleave="onMouseLeave" >
<div class="notification-wrap__text">
<div v-html="configuration.imageSource"></div>
<p>{{message}}</p>
</div>
<div class="notification-wrap__buttons-group" v-on:click="onCloseClick">
<span class="notification-wrap__buttons-group__close" v-html="configuration.closeImage"></span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { NOTIFICATION_TYPES, NOTIFICATION_IMAGES } from '@/utils/constants/notification';
@Component({})
@Component({
props: {
type: String,
message: String,
},
methods: {
// Force delete notification
onCloseClick: function(): void {
this.$store.dispatch('deleteNotification');
},
// Force notification to stay on page on mouse over it
onMouseOver: function(): void {
this.$store.dispatch('pauseNotification');
},
// Resume notification flow when mouse leaves notification
onMouseLeave: function(): void {
this.$store.dispatch('resumeNotification');
},
},
computed: {
configuration: function() {
let backgroundColor, imageSource;
// Switch for choosing notification style depends on notification type
switch (this.$props.type) {
case NOTIFICATION_TYPES.SUCCESS:
backgroundColor = 'rgba(214, 235, 208, 0.4)';
imageSource = NOTIFICATION_IMAGES.SUCCESS;
break;
case NOTIFICATION_TYPES.ERROR:
backgroundColor = 'rgba(246, 205, 204, 0.4)';
imageSource = NOTIFICATION_IMAGES.ERROR;
break;
case NOTIFICATION_TYPES.NOTIFICATION:
default:
backgroundColor = 'rgba(219, 225, 232, 0.4)';
imageSource = NOTIFICATION_IMAGES.NOTIFICATION;
break;
}
return {
style: {
backgroundColor
},
imageSource,
closeImage: NOTIFICATION_IMAGES.CLOSE
}
},
}
})
export default class Notification extends Vue {}
</script>
<style scoped lang="scss">
.notification-container {
height: 98px;
max-width: 74.2%;
.notification-wrap {
width: 100%;
background-color: #fff;
height: 98px;
display: flex;
position: fixed;
bottom: 100px;
align-items: center;
justify-content: space-between;
padding: 0 50px;
background: rgba(194, 214, 241, 1);
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
border-radius: 6px;
z-index: 999;
align-items: center;
&__text {
display: flex;
@ -48,6 +89,10 @@ export default class Notification extends Vue {}
font-family: 'montserrat_medium';
font-size: 16px;
margin-left: 40px;
span {
margin-right: 10px;
}
}
}
@ -57,8 +102,8 @@ export default class Notification extends Vue {}
&__close {
width: 32px;
height: 32px;
background-image: url('../../../../static/images/team/close.svg');
cursor: pointer;
}
}
}
</style>
</style>

46
web/satellite/src/components/notifications/NotificationArea.vue Normal file
View File

@ -0,0 +1,46 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div id="notificationArea" class="notification-container" v-if="currentNotification" >
<Notification :type="currentNotification.type" :message="currentNotification.message" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Notification from '@/components/notifications/Notification.vue';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
@Component({
computed: {
// Computed value for current notification depends on store.state value
currentNotification: function(): Notification {
return this.$store.getters.currentNotification;
}
},
components: {
Notification,
}
})
export default class NotificationArea extends Vue {}
</script>
<style scoped lang="scss">
.notification-container {
height: 98px;
max-width: 80%;
width: 100%;
background-color: #fff;
display: flex;
position: fixed;
bottom: 50px;
right: 30px;
align-items: center;
justify-content: space-between;
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
border-radius: 6px;
z-index: 999;
}
</style>

10
web/satellite/src/store/index.ts
View File

@ -4,8 +4,9 @@
import Vue from 'vue';
import Vuex from 'vuex';
import {authModule} from "@/store/modules/users";
import {projectsModule} from "@/store/modules/projects";
import { authModule } from "@/store/modules/users";
import { projectsModule } from "@/store/modules/projects";
import { notificationsModule } from '@/store/modules/notifications';
Vue.use(Vuex);
@ -13,8 +14,9 @@ Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
authModule,
projectsModule
}
projectsModule,
notificationsModule,
},
});
export default store;

87
web/satellite/src/store/modules/notifications.ts Normal file
View File

@ -0,0 +1,87 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
import { NOTIFICATION_MUTATIONS } from '../mutationConstants';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
import { DelayedNotification } from '@/utils/entities/DelayedNotification';
export const notificationsModule = {
state: {
// Dynamic queue for displaying notifications
notificationQueue: [],
},
mutations: {
// Mutaion for adding notification to queue
[NOTIFICATION_MUTATIONS.ADD](state: any, notification: any): void {
state.notificationQueue.push(notification);
// Pause current notification if it`s not first
if (state.notificationQueue.length > 1) {
notification.pause();
}
},
// Mutaion for deleting notification to queue
[NOTIFICATION_MUTATIONS.DELETE](state: any): void {
state.notificationQueue[0].pause();
state.notificationQueue.shift();
// Starts next notification in queue if it exist
if (state.notificationQueue[0]) {
state.notificationQueue[0].start();
}
},
[NOTIFICATION_MUTATIONS.PAUSE](state: any): void {
state.notificationQueue[0].pause();
},
[NOTIFICATION_MUTATIONS.RESUME](state: any): void {
state.notificationQueue[0].start();
},
},
actions: {
// Commits muttation for adding success notification
success: function({commit}: any, message: string): void {
const notification = new DelayedNotification(
() => commit(NOTIFICATION_MUTATIONS.DELETE),
NOTIFICATION_TYPES.SUCCESS,
message,
);
commit(NOTIFICATION_MUTATIONS.ADD, notification);
},
// Commits muttation for adding info notification
notify: function({commit}: any, message: string): void {
const notification = new DelayedNotification(
() => commit(NOTIFICATION_MUTATIONS.DELETE),
NOTIFICATION_TYPES.NOTIFICATION,
message,
);
commit(NOTIFICATION_MUTATIONS.ADD, notification);
},
// Commits muttation for adding error notification
error: function({commit}: any, message: string): void {
const notification = new DelayedNotification(
() => commit(NOTIFICATION_MUTATIONS.DELETE),
NOTIFICATION_TYPES.ERROR,
message,
);
commit(NOTIFICATION_MUTATIONS.ADD, notification);
},
deleteNotification: function({commit}: any): void {
commit(NOTIFICATION_MUTATIONS.DELETE);
},
pauseNotification: function({commit}: any): void {
commit(NOTIFICATION_MUTATIONS.PAUSE);
},
resumeNotification: function({commit}: any): void {
commit(NOTIFICATION_MUTATIONS.RESUME);
},
},
getters: {
currentNotification: (state: any) => {
return state.notificationQueue[0] ? state.notificationQueue[0] : null;
},
},
};

7
web/satellite/src/store/mutationConstants.ts
View File

@ -15,3 +15,10 @@ export const PROJECTS_MUTATIONS = {
FETCH: "FETCH_PROJECTS",
SELECT: "SELECT_PROJECT",
};
export const NOTIFICATION_MUTATIONS = {
ADD: 'ADD_NOTIFICATION',
DELETE: 'DELETE_NOTIFICATION',
PAUSE: 'PAUSE_NOTIFICATION',
RESUME: 'RESUME_NOTIFICATION',
};

33
web/satellite/src/utils/constants/notification.ts Normal file
View File

@ -0,0 +1,33 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
export const NOTIFICATION_IMAGES = {
NOTIFICATION: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"/>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"/>
</svg>
`,
SUCCESS: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#95D486"/>
<path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"/>
</svg>
`,
ERROR: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#EB5757"/>
<path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"/>
<path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"/>
</svg>
`,
CLOSE: `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"/>
</svg>
`
};
export const NOTIFICATION_TYPES = {
SUCCESS: 'SUCCESS',
NOTIFICATION: 'NOTIFICATION',
ERROR: 'ERROR',
};

31
web/satellite/src/utils/entities/DelayedNotification.ts Normal file
View File

@ -0,0 +1,31 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
export class DelayedNotification {
public type: string;
public message: string;
public id: string;
private timerId: any = null;
private startTime: any;
private remainingTime: any;
private callback: Function;
constructor(callback: Function, type: string, message: string) {
this.callback = callback;
this.type = type;
this.message = message;
this.id = Date.now().toString();
this.remainingTime = 3000;
this.start();
}
public pause(): void {
clearTimeout(this.timerId);
this.remainingTime -= new Date().getMilliseconds() - this.startTime;
}
public start(): void {
this.startTime = new Date().getMilliseconds();
this.timerId = setTimeout(this.callback, this.remainingTime);
}
}

7
web/satellite/src/utils/idGenerator.ts Normal file
View File

@ -0,0 +1,7 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
// Custom string id generator
export function getId(): string {
return '_' + Math.random().toString(36).substr(2, 9);
}

43
web/satellite/tests/unit/notifications/Notification.spec.ts Normal file
View File

@ -0,0 +1,43 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
import { shallowMount, mount } from '@vue/test-utils';
import Notification from '@/components/notifications/Notification.vue';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
describe('Notification.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(Notification);
expect(wrapper).toMatchSnapshot();
});
it('renders correctly with props', () => {
const testMessage = 'testMessage';
const wrapper = mount(Notification, {
propsData: {
type: NOTIFICATION_TYPES.SUCCESS,
message: testMessage,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.find(".notification-wrap__text").text()).toMatch(testMessage);
wrapper.setProps({
type: NOTIFICATION_TYPES.ERROR,
message: testMessage,
});
expect(wrapper).toMatchSnapshot();
wrapper.setProps({
type: NOTIFICATION_TYPES.NOTIFICATION,
message: testMessage,
});
expect(wrapper).toMatchSnapshot();
});
});

44
web/satellite/tests/unit/notifications/NotificationArea.spec.ts Normal file
View File

@ -0,0 +1,44 @@
// Copyright (C) 2018 Storj Labs, Inc.
// See LICENSE for copying information.
import { shallowMount, mount } from '@vue/test-utils';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
import { NOTIFICATION_TYPES } from '@/utils/constants/notification';
import { DelayedNotification } from '@/utils/entities/DelayedNotification';
import Vuex from 'vuex';
import { createLocalVue } from 'vue-test-utils';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('Notification.vue', () => {
it('renders correctly', () => {
const wrapper = shallowMount(NotificationArea,{
computed: {
currentNotification: jest.fn(),
},
});
expect(wrapper).toMatchSnapshot();
});
it('renders correctly with notification', () => {
const testMessage = 'testMessage';
const notification = new DelayedNotification(
jest.fn(),
NOTIFICATION_TYPES.SUCCESS,
testMessage
);
const wrapper = mount(NotificationArea, {
localVue,
computed: {
currentNotification: () => notification,
}
});
expect(wrapper).toMatchSnapshot();
});
});

70
web/satellite/tests/unit/notifications/__snapshots__/Notification.spec.ts.snap Normal file
View File

@ -0,0 +1,70 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Notification.vue renders correctly 1`] = `
<div class="notification-wrap" style="background-color: rgba(219, 225, 232, 0.4);">
<div class="notification-wrap__text">
<div><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg>
</div>
<p></p>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path>
</svg>
</span></div>
</div>
`;
exports[`Notification.vue renders correctly with props 1`] = `
<div class="notification-wrap" style="background-color: rgba(214, 235, 208, 0.4);">
<div class="notification-wrap__text">
<div><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#95D486"></rect>
<path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
</svg>
</div>
<p>testMessage</p>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path>
</svg>
</span></div>
</div>
`;
exports[`Notification.vue renders correctly with props 2`] = `
<div class="notification-wrap" style="background-color: rgba(246, 205, 204, 0.4);">
<div class="notification-wrap__text">
<div><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#EB5757"></rect>
<path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"></path>
<path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"></path>
</svg>
</div>
<p>testMessage</p>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path>
</svg>
</span></div>
</div>
`;
exports[`Notification.vue renders correctly with props 3`] = `
<div class="notification-wrap" style="background-color: rgba(219, 225, 232, 0.4);">
<div class="notification-wrap__text">
<div><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#2683FF"></rect>
<path d="M18.1489 17.043H21.9149V28H18.1489V17.043ZM20 12C20.5816 12 21.0567 12.1823 21.4255 12.5468C21.8085 12.8979 22 13.357 22 13.9241C22 14.4776 21.8085 14.9367 21.4255 15.3013C21.0567 15.6658 20.5816 15.8481 20 15.8481C19.4184 15.8481 18.9362 15.6658 18.5532 15.3013C18.1844 14.9367 18 14.4776 18 13.9241C18 13.357 18.1844 12.8979 18.5532 12.5468C18.9362 12.1823 19.4184 12 20 12Z" fill="#F5F6FA"></path>
</svg>
</div>
<p>testMessage</p>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path>
</svg>
</span></div>
</div>
`;

22
web/satellite/tests/unit/notifications/__snapshots__/NotificationArea.spec.ts.snap Normal file
View File

@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Notification.vue renders correctly 1`] = ``;
exports[`Notification.vue renders correctly with notification 1`] = `
<div id="notificationArea" class="notification-container">
<div class="notification-wrap" style="background-color: rgba(214, 235, 208, 0.4);">
<div class="notification-wrap__text">
<div><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="10" fill="#95D486"></rect>
<path d="M27.7625 17.0601C28.348 16.4741 28.3475 15.5243 27.7614 14.9388C27.1753 14.3533 26.2256 14.3538 25.6401 14.9399L27.7625 17.0601ZM17.7003 25.01L16.6396 26.0707C16.921 26.3521 17.3027 26.5101 17.7007 26.51C18.0986 26.5099 18.4802 26.3517 18.7615 26.0701L17.7003 25.01ZM16.0607 21.249C15.4749 20.6633 14.5251 20.6633 13.9393 21.249C13.3536 21.8348 13.3536 22.7846 13.9393 23.3704L16.0607 21.249ZM25.6401 14.9399L16.6391 23.9499L18.7615 26.0701L27.7625 17.0601L25.6401 14.9399ZM18.761 23.9493L16.0607 21.249L13.9393 23.3704L16.6396 26.0707L18.761 23.9493Z" fill="white"></path>
</svg>
</div>
<p>testMessage</p>
</div>
<div class="notification-wrap__buttons-group"><span class="notification-wrap__buttons-group__close"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.7071 9.70711C24.0976 9.31658 24.0976 8.68342 23.7071 8.29289C23.3166 7.90237 22.6834 7.90237 22.2929 8.29289L23.7071 9.70711ZM8.29289 22.2929C7.90237 22.6834 7.90237 23.3166 8.29289 23.7071C8.68342 24.0976 9.31658 24.0976 9.70711 23.7071L8.29289 22.2929ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L9.70711 8.29289ZM22.2929 23.7071C22.6834 24.0976 23.3166 24.0976 23.7071 23.7071C24.0976 23.3166 24.0976 22.6834 23.7071 22.2929L22.2929 23.7071ZM22.2929 8.29289L8.29289 22.2929L9.70711 23.7071L23.7071 9.70711L22.2929 8.29289ZM8.29289 9.70711L22.2929 23.7071L23.7071 22.2929L9.70711 8.29289L8.29289 9.70711Z" fill="#354049"></path>
</svg>
</span></div>
</div>
</div>
`;