diff --git a/frontend/tests/unit/tests/ui_components/flash-message-directive-test.js b/frontend/tests/unit/tests/ui_components/flash-message-directive-test.js
index 71e043d1cf..402c79e054 100644
--- a/frontend/tests/unit/tests/ui_components/flash-message-directive-test.js
+++ b/frontend/tests/unit/tests/ui_components/flash-message-directive-test.js
@@ -28,71 +28,99 @@
 
 /*jshint expr: true*/
 
-var activateError;
+describe('flashMessage Directive', function() {
+  var compile, element, rootScope, scope;
 
-describe('flash message Directive', function() {
-    var compile, element, rootScope, scope;
+  beforeEach(angular.mock.module('openproject.uiComponents', function($provide) {
+    var configurationService = {};
 
-    beforeEach(angular.mock.module('openproject.uiComponents'));
-    beforeEach(module('openproject.templates'));
+    configurationService.accessibilityModeEnabled = sinon.stub().returns(true);
 
-    beforeEach(inject(function($rootScope, $compile) {
-      var html = '<flash-message></flash-message>';
+    $provide.constant('ConfigurationService', configurationService);
+  }));
 
-      rootScope = $rootScope;
-      scope = $rootScope.$new();
+  beforeEach(module('openproject.templates'));
 
-      compile = function() {
-        element = $compile(html)(scope);
-        scope.$digest();
-      };
+  beforeEach(inject(function($rootScope, $compile) {
+    var html = '<flash-message></flash-message>';
+
+    element = angular.element(html);
+    rootScope = $rootScope;
+    scope = $rootScope.$new();
 
-      activateError = sinon.spy();
-    }));
+    compile = function() {
+      $compile(element)(scope);
+      scope.$digest();
+    };
+  }));
 
+  context('with no message', function() {
     beforeEach(function() {
       compile();
     });
 
-    describe('element', function() {
-      xit('should render nothing initially', function() {
-        expect(element.html()).to.be.null;
-      });
+    it('should render no message initially', function() {
+      expect(element.text()).to.be.equal('');
+    });
+
+    it('should be hidden', function() {
+      expect(element.hasClass('ng-hide')).to.be.true;
     });
+  });
+
+  context('with flash messages', function() {
+    beforeEach(function() {
+      compile();
+    });
+
+    describe('info message', function() {
+      var message = {
+        text: 'für deine Informationen',
+        isError: false
+      };
 
-    describe('flash properties', function() {
-      describe('info message', function() {
-        var message = {text: 'Test', isError: false};
+      beforeEach(function() {
+        rootScope.$emit('flashMessage', message);
+        scope.$apply();
+      });
 
-        beforeEach(function() {
-          rootScope.$emit('flashMessage', message);
-        });
+      it('should render message', function() {
+        expect(element.text().trim()).to.equal('für deine Informationen');
+      });
 
-        xit('should render message', function() {
-          var directiveScope = element.isolateScope();
+      it('should be visible', function() {
+        expect(element.hasClass('ng-hide')).to.be.false;
+      });
 
-          expect(directiveScope.flashClass).to.equal("flash notice icon icon-notice");
-          expect(directiveScope.flashId).to.be.empty;
-          expect(directiveScope.message.text).to.equal(message.text);
-          expect(directiveScope.message.isError).to.equal(message.isError);
-        });
+      it('should style as an info message', function() {
+        expect(element.attr('class').split(' ')).to
+          .include.members(['flash', 'icon-notice', 'notice']);
       });
+    });
 
-      describe('error message', function() {
-        var message = {text: 'Error', isError: true};
+    describe('error message', function() {
+      var message = {
+        text: '¡Alerta! WARNING! Achtung!',
+        isError: true
+      };
 
-        beforeEach(function() {
-          rootScope.$emit('flashMessage', message);
-        });
+      beforeEach(function() {
+        rootScope.$emit('flashMessage', message);
+        scope.$apply();
+      });
 
-        xit('should render message', function() {
-          var directiveScope = element.isolateScope();
+      it('should render message', function() {
+        expect(element.text().trim()).to.equal('¡Alerta! WARNING! Achtung!');
+      });
+
+      it('should be visible', function() {
+        expect(element.hasClass('ng-hide')).to.be.false;
+      });
 
-          expect(directiveScope.flashClass).to.equal("errorExplanation");
-          expect(directiveScope.flashId).to.be.equal("errorExplanation");
-          expect(directiveScope.message.text).to.equal(message.text);
-          expect(directiveScope.message.isError).to.equal(message.isError);
-        });
+      it('should style as an error message', function() {
+        expect(element.attr('class').split(' ')).to
+          .include.members(['flash', 'icon-errorExplanation', 'errorExplanation']);
       });
     });
+  });
 });