Merge branch...

Merge branch 'gamesover/gitlab-ce-broken_iamge_when_doing_offline_update_check(help_page)' into 'master'

Gamesover/gitlab ce broken iamge when doing offline update check(help page)

See merge request !8539

app/assets/javascripts/version_check_image.js.es6

-(() => {
-  class VersionCheckImage {
-    static bindErrorEvent(imageElement) {
-      imageElement.off('error').on('error', () => imageElement.hide());
-    }
+class VersionCheckImage {
+  static bindErrorEvent(imageElement) {
+    imageElement.off('error').on('error', () => imageElement.hide());
   }
+}
 
-  window.gl = window.gl || {};
-  gl.VersionCheckImage = VersionCheckImage;
-})();
+window.gl = window.gl || {};
+gl.VersionCheckImage = VersionCheckImage;
+
+module.exports = VersionCheckImage;

spec/features/help_pages_spec.rb

@@ -33,4 +33,30 @@ describe 'Help Pages', feature: true do
       it_behaves_like 'help page', prefix: '/gitlab'
     end
   end
+
+  context 'in a production environment with version check enabled', js: true do
+    before do
+      allow(Rails.env).to receive(:production?) { true }
+      allow(current_application_settings).to receive(:version_check_enabled) { true }
+      allow_any_instance_of(VersionCheck).to receive(:url) { '/version-check-url' }
+
+      login_as :user
+      visit help_path
+    end
+
+    it 'should display a version check image' do
+      expect(find('.js-version-status-badge')).to be_visible
+    end
+
+    it 'should have a src url' do
+      expect(find('.js-version-status-badge')['src']).to match(/\/version-check-url/)
+    end
+
+    it 'should hide the version check image if the image request fails' do
+      # We use '--load-images=no' with poltergeist so we must trigger manually
+      execute_script("$('.js-version-status-badge').trigger('error');")
+
+      expect(find('.js-version-status-badge', visible: false)).not_to be_visible
+    end
+  end
 end

spec/helpers/version_check_helper_spec.rb

+require 'spec_helper'
+
+describe VersionCheckHelper do
+  describe '#version_status_badge' do
+    it 'should return nil if not dev environment and not enabled' do
+      allow(Rails.env).to receive(:production?) { false }
+      allow(current_application_settings).to receive(:version_check_enabled) { false }
+
+      expect(helper.version_status_badge).to be(nil)
+    end
+
+    context 'when production and enabled' do
+      before do
+        allow(Rails.env).to receive(:production?) { true }
+        allow(current_application_settings).to receive(:version_check_enabled) { true }
+        allow_any_instance_of(VersionCheck).to receive(:url) { 'https://version.host.com/check.svg?gitlab_info=xxx' }
+
+        @image_tag = helper.version_status_badge
+      end
+
+      it 'should return an image tag' do
+        expect(@image_tag).to match(/^<img/)
+      end
+
+      it 'should have a js prefixed css class' do
+        expect(@image_tag).to match(/class="js-version-status-badge"/)
+      end
+
+      it 'should have a VersionCheck url as the src' do
+        expect(@image_tag).to match(/src="https:\/\/version\.host\.com\/check\.svg\?gitlab_info=xxx"/)
+      end
+    end
+  end
+end

spec/javascripts/.eslintrc

@@ -18,7 +18,8 @@
     "sandbox": false,
     "setFixtures": false,
     "setStyleFixtures": false,
-    "spyOnEvent": false
+    "spyOnEvent": false,
+    "ClassSpecHelper": false
   },
   "plugins": ["jasmine"],
   "rules": {

spec/javascripts/helpers/class_spec_helper.js.es6

@@ -7,3 +7,5 @@ class ClassSpecHelper {
 }
 
 window.ClassSpecHelper = ClassSpecHelper;
+
+module.exports = ClassSpecHelper;

spec/javascripts/version_check_image_spec.js.es6

+const ClassSpecHelper = require('./helpers/class_spec_helper');
+const VersionCheckImage = require('~/version_check_image');
+require('jquery');
+
+describe('VersionCheckImage', function () {
+  describe('.bindErrorEvent', function () {
+    ClassSpecHelper.itShouldBeAStaticMethod(VersionCheckImage, 'bindErrorEvent');
+
+    beforeEach(function () {
+      this.imageElement = $('<div></div>');
+    });
+
+    it('registers an error event', function () {
+      spyOn($.prototype, 'on');
+      spyOn($.prototype, 'off').and.callFake(function () { return this; });
+
+      VersionCheckImage.bindErrorEvent(this.imageElement);
+
+      expect($.prototype.off).toHaveBeenCalledWith('error');
+      expect($.prototype.on).toHaveBeenCalledWith('error', jasmine.any(Function));
+    });
+
+    it('hides the imageElement on error', function () {
+      spyOn($.prototype, 'hide');
+
+      VersionCheckImage.bindErrorEvent(this.imageElement);
+
+      this.imageElement.trigger('error');
+
+      expect($.prototype.hide).toHaveBeenCalled();
+    });
+  });
+});