Refactored the user callout class

Instead of the JS being in charge of the HTML, the HAML now handles it.
The HAML can then check the cookie & show it needed. It also allows the
HAML access to the paths so we don't have to pass that through.

Closes #29955

4 files changed, 58 insertions, 37 deletions

diff --git a/spec/features/user_callout_spec.rb b/spec/features/user_callout_spec.rb
index 659cd7c7af7..848af5e3a4d 100644
--- a/spec/features/user_callout_spec.rb
+++ b/spec/features/user_callout_spec.rb
@@ -7,15 +7,27 @@ describe 'User Callouts', js: true do
 
   before do
     login_as(user)
-    project.team << [user, :master]    
+    project.team << [user, :master]
   end
 
-  it 'takes you to the profile preferences when the link is clicked' do    
+  it 'takes you to the profile preferences when the link is clicked' do
     visit dashboard_projects_path
     click_link 'Check it out'
     expect(current_path).to eq profile_preferences_path
   end
 
+  it 'does not show when cookie is set' do
+    visit dashboard_projects_path
+
+    within('.user-callout') do
+      find('.close').click
+    end
+
+    visit dashboard_projects_path
+
+    expect(page).not_to have_selector('.user-callout')
+  end
+
   describe 'user callout should appear in two routes' do
     it 'shows up on the user profile' do
       visit user_path(user)
@@ -31,7 +43,7 @@ describe 'User Callouts', js: true do
   it 'hides the user callout when click on the dismiss icon' do
     visit user_path(user)
     within('.user-callout') do
-      find('.close-user-callout').click
+      find('.close').click
     end
     expect(page).not_to have_selector('.user-callout')
   end
diff --git a/spec/javascripts/fixtures/dashboard.rb b/spec/javascripts/fixtures/dashboard.rb
new file mode 100644
index 00000000000..e83db8daaf2
--- /dev/null
+++ b/spec/javascripts/fixtures/dashboard.rb
@@ -0,0 +1,31 @@
+require 'spec_helper'
+
+describe Dashboard::ProjectsController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('dashboard/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'dashboard/user-callout.html.raw' do |example|
+    rendered = render_template('shared/_user_callout')
+    store_frontend_fixture(rendered, example.description)
+  end
+
+  private
+
+  def render_template(template_file_name)
+    controller.prepend_view_path(JavaScriptFixturesHelpers::FIXTURE_PATH)
+    controller.render_to_string(template_file_name, layout: false)
+  end
+end
diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml
deleted file mode 100644
index 275359bde0a..00000000000
--- a/spec/javascripts/fixtures/user_callout.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
-
diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js
index 2398149d3ad..c0375ebc61c 100644
--- a/spec/javascripts/user_callout_spec.js
+++ b/spec/javascripts/user_callout_spec.js
@@ -4,7 +4,7 @@ import UserCallout from '~/user_callout';
 const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
 describe('UserCallout', function () {
-  const fixtureName = 'static/user_callout.html.raw';
+  const fixtureName = 'dashboard/user-callout.html.raw';
   preloadFixtures(fixtureName);
 
   beforeEach(() => {
@@ -12,26 +12,22 @@ describe('UserCallout', function () {
     Cookies.remove(USER_CALLOUT_COOKIE);
 
     this.userCallout = new UserCallout();
-    this.closeButton = $('.close-user-callout');
-    this.userCalloutBtn = $('.user-callout-btn');
+    this.closeButton = $('.js-close-callout.close');
+    this.userCalloutBtn = $('.js-close-callout:not(.close)');
     this.userCalloutContainer = $('.user-callout');
   });
 
-  it('does not show when cookie is set not defined', () => {
-    expect(Cookies.get(USER_CALLOUT_COOKIE)).toBeUndefined();
-    expect(this.userCalloutContainer.is(':visible')).toBe(true);
-  });
-
-  it('shows when cookie is set to false', () => {
-    Cookies.set(USER_CALLOUT_COOKIE, 'false');
-
-    expect(Cookies.get(USER_CALLOUT_COOKIE)).toBeDefined();
-    expect(this.userCalloutContainer.is(':visible')).toBe(true);
-  });
-
-  it('hides when user clicks on the dismiss-icon', () => {
+  it('hides when user clicks on the dismiss-icon', (done) => {
     this.closeButton.click();
     expect(Cookies.get(USER_CALLOUT_COOKIE)).toBe('true');
+
+    setTimeout(() => {
+      expect(
+        document.querySelector('.user-callout'),
+      ).toBeNull();
+
+      done();
+    });
   });
 
   it('hides when user clicks on the "check it out" button', () => {
@@ -39,19 +35,3 @@ describe('UserCallout', function () {
     expect(Cookies.get(USER_CALLOUT_COOKIE)).toBe('true');
   });
 });
-
-describe('UserCallout when cookie is present', function () {
-  const fixtureName = 'static/user_callout.html.raw';
-  preloadFixtures(fixtureName);
-
-  beforeEach(() => {
-    loadFixtures(fixtureName);
-    Cookies.set(USER_CALLOUT_COOKIE, 'true');
-    this.userCallout = new UserCallout();
-    this.userCalloutContainer = $('.user-callout');
-  });
-
-  it('removes the DOM element', () => {
-    expect(this.userCalloutContainer.length).toBe(0);
-  });
-});