2021-07-22 12:10:04 +00:00
|
|
|
# frozen_string_literal: true
|
|
|
|
|
|
|
|
require 'spec_helper'
|
|
|
|
|
|
|
|
RSpec.describe Gitlab::FormBuilders::GitlabUiFormBuilder do
|
2022-06-16 06:08:59 +00:00
|
|
|
include FormBuilderHelpers
|
2021-07-22 12:10:04 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
let_it_be(:user) { build(:user, :admin) }
|
2021-07-22 12:10:04 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
let_it_be(:form_builder) { described_class.new(:user, user, fake_action_view_base, {}) }
|
2021-07-22 12:10:04 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
describe '#gitlab_ui_checkbox_component' do
|
|
|
|
context 'when not using slots' do
|
|
|
|
let(:optional_args) { {} }
|
|
|
|
|
|
|
|
subject(:checkbox_html) do
|
|
|
|
form_builder.gitlab_ui_checkbox_component(
|
|
|
|
:view_diffs_file_by_file,
|
|
|
|
"Show one file at a time on merge request's Changes tab",
|
|
|
|
**optional_args
|
|
|
|
)
|
2021-07-22 12:10:04 +00:00
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'without optional arguments' do
|
|
|
|
it 'renders correct html' do
|
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-checkbox custom-control custom-checkbox">
|
2022-07-26 09:09:02 +00:00
|
|
|
<input name="user[view_diffs_file_by_file]" type="hidden" value="0" autocomplete="off" />
|
2022-06-16 06:08:59 +00:00
|
|
|
<input class="custom-control-input" type="checkbox" value="1" name="user[view_diffs_file_by_file]" id="user_view_diffs_file_by_file" />
|
|
|
|
<label class="custom-control-label" for="user_view_diffs_file_by_file">
|
|
|
|
<span>Show one file at a time on merge request's Changes tab</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
|
|
|
expect(html_strip_whitespace(checkbox_html)).to eq(html_strip_whitespace(expected_html))
|
|
|
|
end
|
2021-07-22 12:10:04 +00:00
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'with optional arguments' do
|
|
|
|
let(:optional_args) do
|
|
|
|
{
|
|
|
|
help_text: 'Instead of all the files changed, show only one file at a time.',
|
|
|
|
checkbox_options: { class: 'checkbox-foo-bar' },
|
|
|
|
label_options: { class: 'label-foo-bar' },
|
|
|
|
checked_value: '3',
|
|
|
|
unchecked_value: '1'
|
|
|
|
}
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders help text' do
|
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-checkbox custom-control custom-checkbox">
|
2022-07-26 09:09:02 +00:00
|
|
|
<input name="user[view_diffs_file_by_file]" type="hidden" value="1" autocomplete="off" />
|
2022-06-16 06:08:59 +00:00
|
|
|
<input class="custom-control-input checkbox-foo-bar" type="checkbox" value="3" name="user[view_diffs_file_by_file]" id="user_view_diffs_file_by_file" />
|
|
|
|
<label class="custom-control-label label-foo-bar" for="user_view_diffs_file_by_file">
|
|
|
|
<span>Show one file at a time on merge request's Changes tab</span>
|
|
|
|
<p class="help-text" data-testid="pajamas-component-help-text">Instead of all the files changed, show only one file at a time.</p>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
|
|
|
expect(html_strip_whitespace(checkbox_html)).to eq(html_strip_whitespace(expected_html))
|
|
|
|
end
|
2021-07-22 12:10:04 +00:00
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'with checkbox_options: { multiple: true }' do
|
|
|
|
let(:optional_args) do
|
|
|
|
{
|
|
|
|
checkbox_options: { multiple: true },
|
|
|
|
checked_value: 'one',
|
|
|
|
unchecked_value: false
|
|
|
|
}
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders labels with correct for attributes' do
|
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-checkbox custom-control custom-checkbox">
|
|
|
|
<input class="custom-control-input" type="checkbox" value="one" name="user[view_diffs_file_by_file][]" id="user_view_diffs_file_by_file_one" />
|
|
|
|
<label class="custom-control-label" for="user_view_diffs_file_by_file_one">
|
|
|
|
<span>Show one file at a time on merge request's Changes tab</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
|
|
|
expect(html_strip_whitespace(checkbox_html)).to eq(html_strip_whitespace(expected_html))
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
end
|
|
|
|
end
|
2022-02-18 15:15:51 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'when using slots' do
|
|
|
|
subject(:checkbox_html) do
|
|
|
|
form_builder.gitlab_ui_checkbox_component(
|
|
|
|
:view_diffs_file_by_file
|
|
|
|
) do |c|
|
|
|
|
c.label { "Show one file at a time on merge request's Changes tab" }
|
|
|
|
c.help_text { 'Instead of all the files changed, show only one file at a time.' }
|
|
|
|
end
|
2022-02-18 15:15:51 +00:00
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
it 'renders correct html' do
|
2022-02-18 15:15:51 +00:00
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-checkbox custom-control custom-checkbox">
|
2022-07-26 09:09:02 +00:00
|
|
|
<input name="user[view_diffs_file_by_file]" type="hidden" value="0" autocomplete="off" />
|
2022-06-16 06:08:59 +00:00
|
|
|
<input class="custom-control-input" type="checkbox" value="1" name="user[view_diffs_file_by_file]" id="user_view_diffs_file_by_file" />
|
|
|
|
<label class="custom-control-label" for="user_view_diffs_file_by_file">
|
|
|
|
<span>Show one file at a time on merge request's Changes tab</span>
|
|
|
|
<p class="help-text" data-testid="pajamas-component-help-text">Instead of all the files changed, show only one file at a time.</p>
|
2022-02-18 15:15:51 +00:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
expect(html_strip_whitespace(checkbox_html)).to eq(html_strip_whitespace(expected_html))
|
2022-02-18 15:15:51 +00:00
|
|
|
end
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
end
|
|
|
|
|
|
|
|
describe '#gitlab_ui_radio_component' do
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'when not using slots' do
|
|
|
|
let(:optional_args) { {} }
|
|
|
|
|
|
|
|
subject(:radio_html) do
|
|
|
|
form_builder.gitlab_ui_radio_component(
|
|
|
|
:access_level,
|
|
|
|
:admin,
|
|
|
|
"Admin",
|
|
|
|
**optional_args
|
|
|
|
)
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'without optional arguments' do
|
|
|
|
it 'renders correct html' do
|
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-radio custom-control custom-radio">
|
|
|
|
<input class="custom-control-input" type="radio" value="admin" checked="checked" name="user[access_level]" id="user_access_level_admin" />
|
|
|
|
<label class="custom-control-label" for="user_access_level_admin">
|
|
|
|
<span>Admin</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
|
|
|
expect(html_strip_whitespace(radio_html)).to eq(html_strip_whitespace(expected_html))
|
|
|
|
end
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'with optional arguments' do
|
|
|
|
let(:optional_args) do
|
|
|
|
{
|
|
|
|
help_text: 'Administrators have access to all groups, projects, and users and can manage all features in this installation',
|
|
|
|
radio_options: { class: 'radio-foo-bar' },
|
|
|
|
label_options: { class: 'label-foo-bar' }
|
|
|
|
}
|
|
|
|
end
|
|
|
|
|
|
|
|
it 'renders help text' do
|
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-radio custom-control custom-radio">
|
|
|
|
<input class="custom-control-input radio-foo-bar" type="radio" value="admin" checked="checked" name="user[access_level]" id="user_access_level_admin" />
|
|
|
|
<label class="custom-control-label label-foo-bar" for="user_access_level_admin">
|
|
|
|
<span>Admin</span>
|
|
|
|
<p class="help-text" data-testid="pajamas-component-help-text">Administrators have access to all groups, projects, and users and can manage all features in this installation</p>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
|
|
|
expect(html_strip_whitespace(radio_html)).to eq(html_strip_whitespace(expected_html))
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
context 'when using slots' do
|
|
|
|
subject(:radio_html) do
|
|
|
|
form_builder.gitlab_ui_radio_component(
|
|
|
|
:access_level,
|
|
|
|
:admin
|
|
|
|
) do |c|
|
|
|
|
c.label { "Admin" }
|
|
|
|
c.help_text { 'Administrators have access to all groups, projects, and users and can manage all features in this installation' }
|
|
|
|
end
|
2021-10-13 12:12:20 +00:00
|
|
|
end
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
it 'renders correct html' do
|
2021-10-13 12:12:20 +00:00
|
|
|
expected_html = <<~EOS
|
|
|
|
<div class="gl-form-radio custom-control custom-radio">
|
2022-06-16 06:08:59 +00:00
|
|
|
<input class="custom-control-input" type="radio" value="admin" checked="checked" name="user[access_level]" id="user_access_level_admin" />
|
|
|
|
<label class="custom-control-label" for="user_access_level_admin">
|
|
|
|
<span>Admin</span>
|
|
|
|
<p class="help-text" data-testid="pajamas-component-help-text">Administrators have access to all groups, projects, and users and can manage all features in this installation</p>
|
2021-10-13 12:12:20 +00:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
EOS
|
|
|
|
|
2022-06-16 06:08:59 +00:00
|
|
|
expect(html_strip_whitespace(radio_html)).to eq(html_strip_whitespace(expected_html))
|
2021-07-22 12:10:04 +00:00
|
|
|
end
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
private
|
|
|
|
|
|
|
|
def html_strip_whitespace(html)
|
|
|
|
html.lines.map(&:strip).join('')
|
|
|
|
end
|
|
|
|
end
|