Ste #46 - Scaling image with background cover

build-canaries · Jan 23, 2015 · 36670a6 · 36670a6
1 parent 4df0f46
commit 36670a6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 13 deletions.
diff --git a/src/js/monitor/appender.js b/src/js/monitor/appender.js
@@ -25,9 +25,14 @@ function showSuccessMessage(projects, config) {
 
     if (successImageUrl) {
         $('#projects')
-            .append('<li><div class=monitor-outerContainer><div class=monitor-innerContainer>' +
-            '<img id="success-image" src="'+ successImageUrl +'" />' +
-            '</div></div></li>')
+            .append('<li><div class=monitor-outerContainer><div id="success-image" class="monitor-innerContainer" style="' +
+            'background: url(' + successImageUrl + ') no-repeat center center fixed;' +
+            '-webkit-background-size: cover;' +
+            '-moz-background-size: cover;' +
+            '-o-background-size: cover;' +
+            'background-size: cover;">' +
+            '</div>' +
+            '</div></li>')
     } else {
         var successMessage = settings.successText
         $('#projects')

diff --git a/test/js/monitor/appenderTest.js b/test/js/monitor/appenderTest.js
@@ -1,21 +1,36 @@
 var $ = require('jquery')
-var config = {
-    load: function () {
-        return {successText: 'some success text', successImageUrl: 'some-success-url'}
-    }
-}
-var projects = [];
-var appender = require('../../../src/js/monitor/appender')(config, projects)
+var monitorAppender = require('../../../src/js/monitor/appender')
 
 describe('Showing success message', function () {
-    it('shows success image', function () {
+    it('image', function () {
+        var config = {
+            load: function () {
+                return {successText: 'some success text', successImageUrl: 'some-success-url'}
+            }
+        }
+        var appender = monitorAppender(config, [])
         $('body').empty()
         $('body').append('<div id="projects"/>')
 
         appender.addProjects()
 
-        var successImageUrl = $('#success-image').attr('src');
-        expect(successImageUrl).toBe('some-success-url')
+        expect($('#success-image')).toBeInDOM()
         expect($('#success-text')).not.toBeInDOM()
     })
+
+    it('text', function () {
+        var config = {
+            load: function () {
+                return {successText: 'some success text'}
+            }
+        }
+        var appender = monitorAppender(config, [])
+        $('body').empty()
+        $('body').append('<div id="projects"/>')
+
+        appender.addProjects()
+
+        expect($('#success-text')).toBeInDOM()
+        expect($('#success-image')).not.toBeInDOM()
+    })
 })