Commit 8de6c306 authored by Diana Zubova's avatar Diana Zubova Committed by Jose Ivan Vargas

Fix close button for subscription expired alert

parent ddb2c3ae
...@@ -94,8 +94,8 @@ export default class EETrialBanner { ...@@ -94,8 +94,8 @@ export default class EETrialBanner {
} }
handleTrialBannerDismiss(element) { handleTrialBannerDismiss(element) {
// Check if a close button was clicked inside the parent element // Check if a close button or an element inside it was clicked inside the parent alert component
if (!element.classList.contains('js-close')) { if (!element.closest('.js-close')) {
return; return;
} }
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
- if message.present? && subscribable.present? - if message.present? && subscribable.present?
.container-fluid.container-limited.pt-3 .container-fluid.container-limited.pt-3
.gl-alert.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } } .gl-alert.gitlab-ee-license-banner.hidden.js-gitlab-ee-license-banner.gl-pb-7.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base{ role: 'alert', data: { license_expiry: subscribable.expires_at } }
%button.gl-alert-dismiss{ type: 'button', 'aria-label' => 'Dismiss', data: { track_action: 'click_button', track_label: 'dismiss_subscribable_banner' } } %button.gl-alert-dismiss.js-close{ type: 'button', 'aria-label' => 'Dismiss', data: { track_action: 'click_button', track_label: 'dismiss_subscribable_banner' } }
= sprite_icon('close', css_class: 'gl-icon js-close') = sprite_icon('close', css_class: 'gl-icon')
.gl-display-flex.gl-flex-direction-row.gl-align-items-center .gl-display-flex.gl-flex-direction-row.gl-align-items-center
.gl-pr-6.gl-pl-5.gl-pt-3.gl-display-none.gl-sm-display-block .gl-pr-6.gl-pl-5.gl-pt-3.gl-display-none.gl-sm-display-block
- if subscribable.block_changes? - if subscribable.block_changes?
......
# frozen_string_literal: true
require 'spec_helper'
RSpec.describe 'Subscription expired notification', :js do
let(:admin) { create(:admin) }
let(:subscribable) { double(:license) }
let(:expected_content) { 'Your subscription expired' }
before do
stub_application_setting(signup_enabled: false)
sign_in(admin)
gitlab_enable_admin_mode_sign_in(admin)
end
context 'for group namespace' do
let(:message) { double(:message) }
let(:group) { create(:group) }
let(:plan_name) { ::Plan::PREMIUM }
let(:auto_renew) { false }
let!(:license) { create_current_license(cloud_licensing_enabled: false, plan: License::ULTIMATE_PLAN, expires_at: Date.current - 1.week) }
before do
allow(subscribable).to receive(:plan).and_return(plan_name)
allow(subscribable).to receive(:expires_at).and_return(Date.current - 1.week)
allow(subscribable).to receive(:auto_renew).and_return(auto_renew)
visit group_path(group)
end
it 'displays and dismisses alert' do
expect(page).to have_content(expected_content)
find('.gl-alert-dismiss.js-close').click
visit group_path(group)
expect(page).not_to have_content(expected_content)
end
end
end
...@@ -7,6 +7,11 @@ describe('EE gitlab license banner dismiss', () => { ...@@ -7,6 +7,11 @@ describe('EE gitlab license banner dismiss', () => {
button.click(); button.click();
}; };
const dismissOnChildElement = () => {
const childElement = document.querySelector('.child-element');
childElement.click();
};
const renew = () => { const renew = () => {
const button = document.querySelector('.gl-button'); const button = document.querySelector('.gl-button');
button.click(); button.click();
...@@ -18,7 +23,7 @@ describe('EE gitlab license banner dismiss', () => { ...@@ -18,7 +23,7 @@ describe('EE gitlab license banner dismiss', () => {
beforeEach(() => { beforeEach(() => {
setFixtures(` setFixtures(`
<div class="js-gitlab-ee-license-banner"> <div class="js-gitlab-ee-license-banner">
<button class="js-close"></button> <button class="js-close"><span class="child-element">X</span></button>
<a href="#" class="btn gl-button btn-confirm"></a> <a href="#" class="btn gl-button btn-confirm"></a>
</div> </div>
`); `);
...@@ -26,6 +31,10 @@ describe('EE gitlab license banner dismiss', () => { ...@@ -26,6 +31,10 @@ describe('EE gitlab license banner dismiss', () => {
initEETrialBanner(); initEETrialBanner();
}); });
afterEach(() => {
Cookies.remove('show_ee_trial_banner');
});
it('should remove the license banner when a close button is clicked', () => { it('should remove the license banner when a close button is clicked', () => {
expect(isHidden()).toBeFalsy(); expect(isHidden()).toBeFalsy();
...@@ -34,6 +43,14 @@ describe('EE gitlab license banner dismiss', () => { ...@@ -34,6 +43,14 @@ describe('EE gitlab license banner dismiss', () => {
expect(isHidden()).toBeTruthy(); expect(isHidden()).toBeTruthy();
}); });
it('should remove the license banner when an element inside close button is clicked', () => {
expect(isHidden()).toBeFalsy();
dismissOnChildElement();
expect(isHidden()).toBeTruthy();
});
it('calls Cookies.set for `show_ee_trial_banner` when a close button is clicked', () => { it('calls Cookies.set for `show_ee_trial_banner` when a close button is clicked', () => {
jest.spyOn(Cookies, 'set'); jest.spyOn(Cookies, 'set');
dismiss(); dismiss();
......
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