Changed the javascript class from using the global scope to exporting it via webpack

Also improved accesibility and change the id from user_callouts to a class

3 files changed, 35 insertions, 40 deletions

diff --git a/spec/features/user_callout_spec.rb b/spec/features/user_callout_spec.rb
index 7077ac2fc54..53a87d3c224 100644
--- a/spec/features/user_callout_spec.rb
+++ b/spec/features/user_callout_spec.rb
@@ -18,18 +18,18 @@ describe 'User Callouts', js: true do
   describe 'user callout should appear in two routes' do
     it 'shows up on the user profile' do
       visit user_path(user)
-      expect(find('#user-callout')).to have_content 'Customize your experience'
+      expect(find('.user-callout')).to have_content 'Customize your experience'
     end
 
     it 'shows up on the dashboard projects' do
       visit dashboard_projects_path
-      expect(find('#user-callout')).to have_content 'Customize your experience'
+      expect(find('.user-callout')).to have_content 'Customize your experience'
     end
   end
 
   it 'hides the user callout when click on the dismiss icon' do
     visit user_path(user)
-    within('#user-callout') do
+    within('.user-callout') do
       find('.dismiss-icon').click
     end
     expect(page).not_to have_selector('#user-callout')
diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml
index 2aa6bf4b604..430e6c829ef 100644
--- a/spec/javascripts/fixtures/user_callout.html.haml
+++ b/spec/javascripts/fixtures/user_callout.html.haml
@@ -1,6 +1,7 @@
-#user-callout
+.user-callout
   .bordered-box.landing.content-block
-    %i.fa.fa-times.dismiss-icon
+    %button.btn.btn-default.close{ type: "button" }
+      %i.fa.fa-times.dismiss-icon
     .row
       .col-sm-3.col-xs-12.svg-container
       .col-sm-8.col-xs-12.inner-content
@@ -9,4 +10,4 @@
         %p
           Change syntax themes, default project pages, and more in preferences.
         %a{ href: 'foo', class:'user-callout-btn' }
-          Check it out
\ No newline at end of file
+          Check it out
diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js
index 26a12bed067..72410e5369e 100644
--- a/spec/javascripts/user_callout_spec.js
+++ b/spec/javascripts/user_callout_spec.js
@@ -1,42 +1,36 @@
 /* esint-disable space-before-function-paren, arrow-body-style */
-require('~/user_callout');
+const UserCallout = require('~/user_callout');
 
-((global) => {
-  const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
-  const Cookie = window.Cookies;
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+const Cookie = window.Cookies;
 
-  describe('UserCallout', function () {
-    const fixtureName = 'static/user_callout.html.raw';
-    preloadFixtures(fixtureName);
+describe('UserCallout', function () {
+  const fixtureName = 'static/user_callout.html.raw';
+  preloadFixtures(fixtureName);
 
-    it('should be defined in the global scope', () => {
-      expect(global.UserCallout).toBeDefined();
-    });
-
-    beforeEach(() => {
-      loadFixtures(fixtureName);
-      this.userCallout = new global.UserCallout();
-      this.dismissIcon = $('.dismiss-icon');
-      this.userCalloutContainer = $('#user-callout');
-      this.userCalloutBtn = $('.user-callout-btn');
-      Cookie.set(USER_CALLOUT_COOKIE, 0);
-    });
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    this.userCallout = new UserCallout();
+    this.dismissIcon = $('.dismiss-icon');
+    this.userCalloutContainer = $('.user-callout');
+    this.userCalloutBtn = $('.user-callout-btn');
+    Cookie.set(USER_CALLOUT_COOKIE, 0);
+  });
 
-    it('shows when cookie is set to false', () => {
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
-      expect(this.userCalloutContainer.is(':visible')).toBe(true);
-    });
+  it('shows when cookie is set to false', () => {
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
+    expect(this.userCalloutContainer.is(':visible')).toBe(true);
+  });
 
-    it('hides when user clicks on the dismiss-icon', () => {
-      this.dismissIcon.click();
-      expect(this.userCalloutContainer.is(':visible')).toBe(false);
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
-    });
+  it('hides when user clicks on the dismiss-icon', () => {
+    this.dismissIcon.click();
+    expect(this.userCalloutContainer.is(':visible')).toBe(false);
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
+  });
 
-    it('hides when user clicks on the "check it out" button', () => {
-      this.userCalloutBtn.click();
-      expect(this.userCalloutContainer.is(':visible')).toBe(false);
-      expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
-    });
+  it('hides when user clicks on the "check it out" button', () => {
+    this.userCalloutBtn.click();
+    expect(this.userCalloutContainer.is(':visible')).toBe(false);
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('1');
   });
-})(window.gl || (window.gl = {}));
+});