Commit 103f5a11 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas
Browse files

Created unit tests, fixtures and integration tests

Also changed the user_callout haml to a partial and
added the corresponding SVG icon
parent 4802bd51
......@@ -3,20 +3,35 @@
((global) => {
const userCalloutElementName = '#user-callout';
const dismissIcon = '.dismiss-icon';
const userCalloutBtn = '.user-callout-btn';
const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
class UserCallout {
constructor() {
this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
this.init();
}
init() {
$(document)
.on('DOMContentLoaded', () => {
const element = $(userCalloutElementName);
console.log('element:', element);
});
.on('click', dismissIcon, () => this.closeAndDismissCallout())
.on('click', userCalloutBtn, () => this.closeAndDismissCallout())
.on('DOMContentLoaded', () => this.isUserCalloutDismissed());
}
closeAndDismissCallout() {
$(userCalloutElementName).hide();
Cookies.set(USER_CALLOUT_COOKIE, '1');
}
isUserCalloutDismissed() {
if (!this.isCalloutDismissed) {
$(userCalloutElementName).show();
}
}
}
global.UserCallout = UserCallout;
})(window.gl || (window.gl = {}));
\ No newline at end of file
})(window.gl || (window.gl = {}));
......@@ -279,6 +279,7 @@ table.u2f-registrations {
}
#user-callout {
display: none;
margin: 24px auto 0;
.bordered-box {
......@@ -291,8 +292,8 @@ table.u2f-registrations {
overflow: hidden;
.dismiss-icon {
position: absolute;
right: $user-callout-right;
float: right;
margin-right: 20px;
cursor: pointer;
color: $cycle-analytics-dismiss-icon-color;
}
......@@ -306,4 +307,10 @@ table.u2f-registrations {
}
}
}
@media(max-width: $screen-xs-max) {
.inner-content {
padding-left: 30px;
}
}
}
= content_for :flash_message do
= render 'shared/project_limit'
#user-callout
.bordered-box.landing.content-block
= icon("times", class: "dismiss-icon")
.row
.col-sm-3.col-xs-12.svg-container
= custom_icon('icon_cycle_analytics_splash')
.col-sm-8.col-xs-12.inner-content
%h4
Customize your experience
%p
Change syntax themes, default project pages, and more in preferences.
= link_to "Check it out", profile_preferences_path, class: 'btn'
.top-area
%ul.nav-links
= nav_link(page: [dashboard_projects_path, root_path]) do
......
......@@ -5,6 +5,8 @@
- page_title "Projects"
- header_title "Projects", dashboard_projects_path
= render partial: 'shared/user_callout'
- if @projects.any? || params[:filter_projects]
= render 'dashboard/projects_head'
......@@ -15,3 +17,6 @@
= render 'projects'
- else
= render "zero_authorized_projects"
:javascript
var userCallout = new gl.UserCallout();
\ No newline at end of file
#user-callout
.bordered-box.landing.content-block
= icon("times", class: "dismiss-icon")
.row
.col-sm-3.col-xs-12.svg-container
= custom_icon('icon_customization')
.col-sm-8.col-xs-12.inner-content
%h4
Customize your experience
%p
Change syntax themes, default project pages, and more in preferences.
= link_to "Check it out", profile_preferences_path, class: 'btn user-callout-btn'
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 90" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd"><rect width="112" height="90" fill="#fff" rx="6"/><path fill="#eee" fill-rule="nonzero" d="m4 6.01v77.98c0 1.11.899 2.01 2 2.01h100c1.105 0 2-.898 2-2.01v-77.98c0-1.11-.899-2.01-2-2.01h-100c-1.105 0-2 .898-2 2.01m-4 0c0-3.319 2.686-6.01 6-6.01h100c3.315 0 6 2.694 6 6.01v77.98c0 3.319-2.686 6.01-6 6.01h-100c-3.315 0-6-2.694-6-6.01v-77.98"/><g transform="translate(26 35)"><rect width="4" height="39" x="5" fill="#eee" rx="2" id="0"/><rect width="4" height="21" x="5" y="18" fill="#fef0ea" rx="2"/><circle cx="7" cy="13" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 20c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(49 35)"><use xlink:href="#0"/><rect width="4" height="21" x="5" y="18" fill="#b5a7dd" rx="2"/><circle cx="7" cy="25" r="5" fill="#fff"/><path fill="#6b4fbb" fill-rule="nonzero" d="m7 32c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(72 33)"><rect width="4" height="39" x="5" y="2" fill="#eee" rx="2"/><rect width="4" height="34" x="5" y="7" fill="#fef0ea" rx="2"/><circle cx="7" cy="7" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 14c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g fill="#6b4fbb"><circle cx="13.5" cy="11.5" r="2.5"/><circle cx="23.5" cy="11.5" r="2.5" opacity=".5"/><circle cx="33.5" cy="11.5" r="2.5" opacity=".5"/></g><path fill="#eee" d="m0 19h111v4h-111z"/></g></svg>
\ No newline at end of file
......@@ -98,19 +98,9 @@
Snippets
%div{ class: container_class }
#user-callout
.bordered-box.landing.content-block
= icon("times", class: "dismiss-icon")
.row
.col-sm-3.col-xs-12.svg-container
= custom_icon('icon_cycle_analytics_splash')
.col-sm-8.col-xs-12.inner-content
%h4
Customize your experience
%p
Change syntax themes, default project pages, and more in preferences.
= link_to "Check it out", profile_preferences_path, class: 'btn'
= render partial: 'shared/user_callout'
%div{ class: container_class }
.tab-content
#activity.tab-pane
.row-content-block.calender-block.white.second-block.hidden-xs
.user-calendar{ data: { href: user_calendar_path } }
......
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('.dismiss-icon').click
end
expect(page).not_to have_selector('#user-callout')
end
end
\ No newline at end of file
#user-callout
.bordered-box.landing.content-block
%i.fa.fa-times.dismiss-icon
.row
.col-sm-3.col-xs-12.svg-container
.col-sm-8.col-xs-12.inner-content
%h4
Customize your experience
%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
/* esint-disable space-before-function-paren, arrow-body-style */
require('~/user_callout');
((global) => {
const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
const Cookie = window.Cookies;
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);
});
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 "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 = {}));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment