diff options
Diffstat (limited to 'spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb')
| -rw-r--r-- | spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb | 269 |
1 files changed, 150 insertions, 119 deletions
diff --git a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb index a5f26a212ab..2b1fcac9257 100644 --- a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb +++ b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb @@ -3,163 +3,194 @@ require 'spec_helper' RSpec.describe Gitlab::FormBuilders::GitlabUiFormBuilder do - let_it_be(:user) { build(:user) } - let_it_be(:fake_template) do - Object.new.tap do |template| - template.extend ActionView::Helpers::FormHelper - template.extend ActionView::Helpers::FormOptionsHelper - template.extend ActionView::Helpers::TagHelper - template.extend ActionView::Context - end - end + include FormBuilderHelpers - let_it_be(:form_builder) { described_class.new(:user, user, fake_template, {}) } - - describe '#gitlab_ui_checkbox_component' do - let(:optional_args) { {} } + let_it_be(:user) { build(:user, :admin) } - subject(:checkbox_html) { 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) } - - context 'without optional arguments' do - it 'renders correct html' do - expected_html = <<~EOS - <div class="gl-form-checkbox custom-control custom-checkbox"> - <input name="user[view_diffs_file_by_file]" type="hidden" value="0" /> - <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"> - Show one file at a time on merge request's Changes tab - </label> - </div> - EOS + let_it_be(:form_builder) { described_class.new(:user, user, fake_action_view_base, {}) } - expect(checkbox_html).to eq(html_strip_whitespace(expected_html)) + 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 + ) end - end - 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' - } + context 'without optional arguments' do + it 'renders correct html' do + expected_html = <<~EOS + <div class="gl-form-checkbox custom-control custom-checkbox"> + <input name="user[view_diffs_file_by_file]" type="hidden" value="0" /> + <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 end - it 'renders help text' do - expected_html = <<~EOS - <div class="gl-form-checkbox custom-control custom-checkbox"> - <input name="user[view_diffs_file_by_file]" type="hidden" value="1" /> - <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">Instead of all the files changed, show only one file at a time.</p> - </label> - </div> - EOS - - expect(checkbox_html).to eq(html_strip_whitespace(expected_html)) - end - - it 'passes arguments to `check_box` method' do - allow(fake_template).to receive(:check_box).and_return('') - - checkbox_html - - expect(fake_template).to have_received(:check_box).with(:user, :view_diffs_file_by_file, { class: %w(custom-control-input checkbox-foo-bar), object: user }, '3', '1') + 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"> + <input name="user[view_diffs_file_by_file]" type="hidden" value="1" /> + <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 end - it 'passes arguments to `label` method' do - allow(fake_template).to receive(:label).and_return('') - - checkbox_html - - expect(fake_template).to have_received(:label).with(:user, :view_diffs_file_by_file, { class: %w(custom-control-label label-foo-bar), object: user, value: nil }) + 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 end end - context 'with checkbox_options: { multiple: true }' do - let(:optional_args) do - { - checkbox_options: { multiple: true }, - checked_value: 'one', - unchecked_value: false - } + 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 end - it 'renders labels with correct for attributes' do + it 'renders correct html' 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"> - Show one file at a time on merge request's Changes tab + <input name="user[view_diffs_file_by_file]" type="hidden" value="0" /> + <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> </label> </div> EOS - expect(checkbox_html).to eq(html_strip_whitespace(expected_html)) + expect(html_strip_whitespace(checkbox_html)).to eq(html_strip_whitespace(expected_html)) end end end describe '#gitlab_ui_radio_component' do - let(:optional_args) { {} } - - subject(:radio_html) { form_builder.gitlab_ui_radio_component(:access_level, :admin, "Access Level", **optional_args) } + 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 - 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" name="user[access_level]" id="user_access_level_admin" /> - <label class="custom-control-label" for="user_access_level_admin"> - Access Level - </label> - </div> - EOS + 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 - expect(radio_html).to eq(html_strip_whitespace(expected_html)) + 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 end end - 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' } - } + 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 end - it 'renders help text' do + it 'renders correct html' 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" name="user[access_level]" id="user_access_level_admin" /> - <label class="custom-control-label label-foo-bar" for="user_access_level_admin"> - <span>Access Level</span> - <p class="help-text">Administrators have access to all groups, projects, and users and can manage all features in this installation</p> + <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> </label> </div> EOS - expect(radio_html).to eq(html_strip_whitespace(expected_html)) - end - - it 'passes arguments to `radio_button` method' do - allow(fake_template).to receive(:radio_button).and_return('') - - radio_html - - expect(fake_template).to have_received(:radio_button).with(:user, :access_level, :admin, { class: %w(custom-control-input radio-foo-bar), object: user }) - end - - it 'passes arguments to `label` method' do - allow(fake_template).to receive(:label).and_return('') - - radio_html - - expect(fake_template).to have_received(:label).with(:user, :access_level, { class: %w(custom-control-label label-foo-bar), object: user, value: :admin }) + expect(html_strip_whitespace(radio_html)).to eq(html_strip_whitespace(expected_html)) end end end |