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

3 files changed, 43 insertions, 34 deletions

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);
-  });
-});