2022-06-21 17:19:12 +05:30
|
|
|
# frozen_string_literal: true
|
|
|
|
require "spec_helper"
|
|
|
|
|
|
|
|
RSpec.describe Pajamas::AlertComponent, :aggregate_failures, type: :component do
|
2022-07-16 23:28:13 +05:30
|
|
|
context 'slots' do
|
|
|
|
let_it_be(:body) { 'Alert body' }
|
|
|
|
let_it_be(:actions) { 'Alert actions' }
|
|
|
|
|
2022-06-21 17:19:12 +05:30
|
|
|
before do
|
2022-07-16 23:28:13 +05:30
|
|
|
render_inline described_class.new do |c|
|
|
|
|
c.body { body }
|
|
|
|
c.actions { actions }
|
|
|
|
end
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
it 'renders alert body' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_content(body)
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders actions' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_content(actions)
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
context 'with defaults' do
|
|
|
|
before do
|
|
|
|
render_inline described_class.new
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'does not set a title' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).not_to have_selector('.gl-alert-title')
|
|
|
|
expect(page).to have_selector('.gl-alert-icon-no-title')
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders the default variant' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-alert-info')
|
|
|
|
expect(page).to have_selector("[data-testid='information-o-icon']")
|
|
|
|
expect(page).not_to have_selector('.gl-alert-no-icon')
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders a dismiss button' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-dismiss-btn.js-close')
|
|
|
|
expect(page).to have_selector("[data-testid='close-icon']")
|
|
|
|
expect(page).not_to have_selector('.gl-alert-not-dismissible')
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
context 'with custom options' do
|
|
|
|
context 'with simple options' do
|
2022-07-16 23:28:13 +05:30
|
|
|
before do
|
|
|
|
render_inline described_class.new(
|
|
|
|
title: '_title_',
|
2022-07-23 23:45:48 +05:30
|
|
|
alert_options: {
|
|
|
|
class: '_alert_class_',
|
|
|
|
data: {
|
|
|
|
feature_id: '_feature_id_',
|
|
|
|
dismiss_endpoint: '_dismiss_endpoint_'
|
|
|
|
}
|
2022-07-16 23:28:13 +05:30
|
|
|
}
|
|
|
|
)
|
|
|
|
end
|
2022-06-21 17:19:12 +05:30
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
it 'sets the title' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-alert-title')
|
|
|
|
expect(page).to have_content('_title_')
|
|
|
|
expect(page).not_to have_selector('.gl-alert-icon-no-title')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
2022-06-21 17:19:12 +05:30
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
it 'sets the alert_class' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('._alert_class_')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
2022-06-21 17:19:12 +05:30
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
it 'sets the alert_data' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('[data-feature-id="_feature_id_"][data-dismiss-endpoint="_dismiss_endpoint_"]')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
end
|
2022-06-21 17:19:12 +05:30
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
context 'with dismissible disabled' do
|
|
|
|
before do
|
|
|
|
render_inline described_class.new(dismissible: false)
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'has the "not dismissible" class' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-alert-not-dismissible')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
|
|
|
|
it 'does not render the dismiss button' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).not_to have_selector('.gl-dismiss-btn.js-close')
|
|
|
|
expect(page).not_to have_selector("[data-testid='close-icon']")
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
context 'with the icon hidden' do
|
|
|
|
before do
|
|
|
|
render_inline described_class.new(show_icon: false)
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'has the hidden icon class' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-alert-no-icon')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
|
|
|
|
it 'does not render the icon' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).not_to have_selector('.gl-alert-icon')
|
|
|
|
expect(page).not_to have_selector("[data-testid='information-o-icon']")
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
context 'with dismissible content' do
|
|
|
|
before do
|
|
|
|
render_inline described_class.new(
|
2022-07-23 23:45:48 +05:30
|
|
|
close_button_options: {
|
|
|
|
class: '_close_button_class_',
|
|
|
|
data: {
|
|
|
|
testid: '_close_button_testid_'
|
|
|
|
}
|
2022-06-21 17:19:12 +05:30
|
|
|
}
|
|
|
|
)
|
|
|
|
end
|
|
|
|
|
2022-07-16 23:28:13 +05:30
|
|
|
it 'does not have "not dismissible" class' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).not_to have_selector('.gl-alert-not-dismissible')
|
2022-07-16 23:28:13 +05:30
|
|
|
end
|
|
|
|
|
2022-06-21 17:19:12 +05:30
|
|
|
it 'renders a dismiss button and data' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector('.gl-dismiss-btn.js-close._close_button_class_')
|
|
|
|
expect(page).to have_selector("[data-testid='close-icon']")
|
|
|
|
expect(page).to have_selector('[data-testid="_close_button_testid_"]')
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
context 'with setting variant type' do
|
|
|
|
where(:variant) { [:warning, :success, :danger, :tip] }
|
|
|
|
|
|
|
|
before do
|
|
|
|
render_inline described_class.new(variant: variant)
|
|
|
|
end
|
|
|
|
|
|
|
|
with_them do
|
|
|
|
it 'renders the variant' do
|
2022-08-13 15:12:31 +05:30
|
|
|
expect(page).to have_selector(".gl-alert-#{variant}")
|
|
|
|
expect(page).to have_selector("[data-testid='#{described_class::ICONS[variant]}-icon']")
|
2022-06-21 17:19:12 +05:30
|
|
|
end
|
|
|
|
end
|
|
|
|
end
|
|
|
|
end
|
|
|
|
end
|