Merge branch 'user-callouts' into 'master'

Added user-callouts

Closes #27269

See merge request !9249

3 files changed, 76 insertions, 0 deletions

diff --git a/spec/features/user_callout_spec.rb b/spec/features/user_callout_spec.rb
new file mode 100644
index 00000000000..336c4092c98
--- /dev/null
+++ b/spec/features/user_callout_spec.rb
@@ -0,0 +1,37 @@
+require 'spec_helper'
+
+describe 'User Callouts', js: true do
+  let(:user) { create(:user) }
+  let(:project) { create(:empty_project, path: 'gitlab', name: 'sample') }
+
+  before do
+    login_as(user)
+    project.team << [user, :master]    
+  end
+
+  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
+
+  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'
+    end
+
+    it 'shows up on the dashboard projects' do
+      visit dashboard_projects_path
+      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
+      find('.close-user-callout').click
+    end
+    expect(page).not_to have_selector('#user-callout')
+  end
+end
diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml
new file mode 100644
index 00000000000..275359bde0a
--- /dev/null
+++ b/spec/javascripts/fixtures/user_callout.html.haml
@@ -0,0 +1,2 @@
+.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
+
diff --git a/spec/javascripts/user_callout_spec.js.es6 b/spec/javascripts/user_callout_spec.js.es6
new file mode 100644
index 00000000000..6ee63f56a26
--- /dev/null
+++ b/spec/javascripts/user_callout_spec.js.es6
@@ -0,0 +1,37 @@
+const UserCallout = require('~/user_callout');
+
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+const Cookie = window.Cookies;
+
+describe('UserCallout', () => {
+  const fixtureName = 'static/user_callout.html.raw';
+  preloadFixtures(fixtureName);
+
+  beforeEach(function () {
+    loadFixtures(fixtureName);
+    this.userCallout = new UserCallout();
+    this.closeButton = $('.close-user-callout');
+    this.userCalloutBtn = $('.user-callout-btn');
+    this.userCalloutContainer = $('.user-callout');
+    Cookie.set(USER_CALLOUT_COOKIE, 'false');
+  });
+
+  afterEach(function () {
+    Cookie.set(USER_CALLOUT_COOKIE, 'false');
+  });
+
+  it('shows when cookie is set to false', function () {
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
+    expect(this.userCalloutContainer.is(':visible')).toBe(true);
+  });
+
+  it('hides when user clicks on the dismiss-icon', function () {
+    this.closeButton.click();
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
+  });
+
+  it('hides when user clicks on the "check it out" button', function () {
+    this.userCalloutBtn.click();
+    expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
+  });
+});