diff --git a/src/components/SessionInfo.vue b/src/components/SessionInfo.vue
index 5e9bc3c..fd7550a 100644
--- a/src/components/SessionInfo.vue
+++ b/src/components/SessionInfo.vue
@@ -1,29 +1,34 @@
 <template lang="pug">
 	NoSSR
 		.SessionInfo
 			template(v-if="$keycloak && $keycloak.ready")
 				WTLButton(v-if="!$keycloak.authenticated", @click=`doLogin()`) Login
 				template(v-if="$keycloak.authenticated")
 					WTLField(grouped=true)
 						WTLButton(@click=`checkLogin()`) View user info
 						WTLButton(@click=`$keycloak.logout()`, type="error") Logout
 </template>
 
 <script>
+import WTLButton from "components/ui/WTLButton"
+import WTLField from "components/ui/WTLField"
+import NoSSR from "vue-no-ssr"
+
 export default {
 	name: "SessionInfo",
+	components: { NoSSR, WTLButton, WTLField },
 	methods: {
 		checkLogin() {
 			const _this = this
 			this.$keycloak.loadUserProfile().success((user) => {
 				_this.$dialog.alert({ content: JSON.stringify(user) })
 			})
 		},
 		doLogin() {
 			this.$keycloak.login({
 				redirectUri: `${window.location.origin}/afterLogin`
 			})
 		}
 	}
 }
 </script>
diff --git a/src/components/ui/WTLBanner.vue b/src/components/ui/WTLBanner.vue
index f15e353..4329f80 100644
--- a/src/components/ui/WTLBanner.vue
+++ b/src/components/ui/WTLBanner.vue
@@ -1,83 +1,85 @@
 <template lang="pug">
 	.WTLBanner(
 		v-if="opened"
 		:class=`[
 			"WTLBanner--" + type
 		]`
 	)
 		slot
 		WTLButton.WTLBanner__close(
 			v-if="closable"
 			@click="opened = false"
 			icon="close"
 		)
 </template>
 
 <script>
 export default {
 	name: "WTLBanner",
 	props: {
 		text: {
 			type: String,
 			required: true
 		},
 		type: {
 			type: String,
 			default: "default"
 		},
 		closable: {
 			type: Boolean,
 			default: false
 		}
 	},
 	data() {
 		return {
 			opened: true
 		}
 	}
 }
 </script>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .WTLBanner {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 1rem;
 	box-shadow: $shadow-1;
 	border-radius: $input-radius;
 	color: #ffffff;
+	background-color: black;
 
 	> * {
 		margin-left: 0.5rem;
 		margin-right: 0.5rem;
 		height: 100%;
 	}
+
 	&--default {
 		background-color: $black;
 	}
 
 	&--success {
 		background-color: $green;
 	}
 
 	&--warning {
 		background-color: $yellow;
 	}
 
 	&--error {
 		background-color: $red;
 	}
 
 	&--full-width {
 		width: 100%;
 	}
 
 	&__close {
 		justify-content: flex-end;
 	}
 }
 </style>
 
diff --git a/test/unit/specs/components/ui/WTLBanner.spec.js b/test/unit/specs/components/ui/WTLBanner.spec.js
new file mode 100644
index 0000000..79a59d8
--- /dev/null
+++ b/test/unit/specs/components/ui/WTLBanner.spec.js
@@ -0,0 +1,26 @@
+import { mount } from "@vue/test-utils"
+import { expect } from "chai"
+import WTLBanner from "components/ui/WTLBanner"
+
+describe("WTLBanner", () => {
+	let banner = mount(WTLBanner, {
+		slots: {
+			default: "Sample text"
+		}
+	})
+	banner.setProps({
+		closable: true,
+		type: "error"
+	})
+
+	it("displays text", () => {
+		expect(banner.text()).to.equal("Sample text")
+	})
+
+	it("closes on button click", () => {
+		expect(banner.is(".WTLBanner")).to.be.true
+		let button = banner.find(".WTLBanner__close")
+		button.trigger("click")
+		expect(banner.is(".WTLBanner")).to.be.false
+	})
+})