diff options
Diffstat (limited to 'spec/components/pajamas')
5 files changed, 415 insertions, 0 deletions
diff --git a/spec/components/pajamas/checkbox_component_spec.rb b/spec/components/pajamas/checkbox_component_spec.rb new file mode 100644 index 00000000000..b2f3a84fbfe --- /dev/null +++ b/spec/components/pajamas/checkbox_component_spec.rb @@ -0,0 +1,130 @@ +# frozen_string_literal: true +require "spec_helper" + +RSpec.describe Pajamas::CheckboxComponent, :aggregate_failures, type: :component do + include FormBuilderHelpers + + let_it_be(:method) { :view_diffs_file_by_file } + let_it_be(:label) { "Show one file at a time on merge request's Changes tab" } + let_it_be(:help_text) { 'Instead of all the files changed, show only one file at a time.' } + + RSpec.shared_examples 'it renders unchecked checkbox with value of `1`' do + it 'renders unchecked checkbox with value of `1`' do + expect(rendered_component).to have_unchecked_field(label, with: '1') + end + end + + context 'with default options' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + label: label + ) + ) + end + end + + include_examples 'it renders unchecked checkbox with value of `1`' + include_examples 'it does not render help text' + + it 'renders hidden input with value of `0`' do + expect(rendered_component).to have_field('user[view_diffs_file_by_file]', type: 'hidden', with: '0') + end + end + + context 'with custom options' do + let_it_be(:checked_value) { 'yes' } + let_it_be(:unchecked_value) { 'no' } + let_it_be(:checkbox_options) { { class: 'checkbox-foo-bar', checked: true } } + let_it_be(:label_options) { { class: 'label-foo-bar' } } + + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + label: label, + help_text: help_text, + checked_value: checked_value, + unchecked_value: unchecked_value, + checkbox_options: checkbox_options, + label_options: label_options + ) + ) + end + end + + include_examples 'it renders help text' + + it 'renders checked checkbox with value of `yes`' do + expect(rendered_component).to have_checked_field(label, with: checked_value, class: checkbox_options[:class]) + end + + it 'adds CSS class to label' do + expect(rendered_component).to have_selector('label.label-foo-bar') + end + + it 'renders hidden input with value of `no`' do + expect(rendered_component).to have_field('user[view_diffs_file_by_file]', type: 'hidden', with: unchecked_value) + end + end + + context 'with `label` slot' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method + ) + ) do |c| + c.label { label } + end + end + end + + include_examples 'it renders unchecked checkbox with value of `1`' + end + + context 'with `help_text` slot' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + label: label + ) + ) do |c| + c.help_text { help_text } + end + end + end + + include_examples 'it renders unchecked checkbox with value of `1`' + include_examples 'it renders help text' + end + + context 'with `label` and `help_text` slots' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method + ) + ) do |c| + c.label { label } + c.help_text { help_text } + end + end + end + + include_examples 'it renders unchecked checkbox with value of `1`' + include_examples 'it renders help text' + end +end diff --git a/spec/components/pajamas/component_spec.rb b/spec/components/pajamas/component_spec.rb index 96f6b43bac1..7385519b468 100644 --- a/spec/components/pajamas/component_spec.rb +++ b/spec/components/pajamas/component_spec.rb @@ -23,4 +23,21 @@ RSpec.describe Pajamas::Component do expect(value).to eq('something') end end + + describe '#format_options' do + it 'merges CSS classes and additional options' do + expect( + subject.send( + :format_options, + options: { foo: 'bar', class: 'gl-display-flex gl-py-5' }, + css_classes: %w(gl-px-5 gl-mt-5), + additional_options: { baz: 'bax' } + ) + ).to match({ + foo: 'bar', + baz: 'bax', + class: ['gl-px-5', 'gl-mt-5', 'gl-display-flex gl-py-5'] + }) + end + end end diff --git a/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb b/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb new file mode 100644 index 00000000000..7a792592b3c --- /dev/null +++ b/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb @@ -0,0 +1,110 @@ +# frozen_string_literal: true +require "spec_helper" + +RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do + let(:form) { instance_double('ActionView::Helpers::FormBuilder') } + let(:component_class) do + Class.new do + attr_reader( + :form, + :method, + :label_argument, + :help_text_argument, + :label_options, + :input_options, + :value + ) + + def initialize( + form:, + method:, + label: nil, + help_text: nil, + label_options: {}, + radio_options: {}, + value: nil + ) + @form = form + @method = method + @label_argument = label + @help_text_argument = help_text + @label_options = label_options + @input_options = radio_options + @value = value + end + + def label_content + @label_argument + end + + def help_text_content + @help_text_argument + end + + def format_options(options:, css_classes: [], additional_options: {}) + {} + end + + include Pajamas::Concerns::CheckboxRadioLabelWithHelpText + include ActionView::Helpers::TagHelper + end + end + + let_it_be(:method) { 'username' } + let_it_be(:label_options) { { class: 'foo-bar' } } + let_it_be(:value) { 'Foo bar' } + + describe '#render_label_with_help_text' do + it 'calls `#format_options` with correct arguments' do + allow(form).to receive(:label) + + component = component_class.new(form: form, method: method, label_options: label_options, value: value) + + expect(component).to receive(:format_options).with( + options: label_options, + css_classes: ['custom-control-label'], + additional_options: { value: value } + ) + + component.render_label_with_help_text + end + + context 'when `help_text` argument is passed' do + it 'calls `form.label` with `label` and `help_text` arguments used in the block' do + component = component_class.new( + form: form, + method: method, + label: 'Label argument', + help_text: 'Help text argument' + ) + + expected_label_entry = '<span>Label argument</span><p class="help-text"' \ + ' data-testid="pajamas-component-help-text">Help text argument</p>' + + expect(form).to receive(:label).with(method, {}) do |&block| + expect(block.call).to eq(expected_label_entry) + end + + component.render_label_with_help_text + end + end + + context 'when `help_text` argument is not passed' do + it 'calls `form.label` with `label` argument used in the block' do + component = component_class.new( + form: form, + method: method, + label: 'Label argument' + ) + + expected_label_entry = '<span>Label argument</span>' + + expect(form).to receive(:label).with(method, {}) do |&block| + expect(block.call).to eq(expected_label_entry) + end + + component.render_label_with_help_text + end + end + end +end diff --git a/spec/components/pajamas/concerns/checkbox_radio_options_spec.rb b/spec/components/pajamas/concerns/checkbox_radio_options_spec.rb new file mode 100644 index 00000000000..3eb888e5f3b --- /dev/null +++ b/spec/components/pajamas/concerns/checkbox_radio_options_spec.rb @@ -0,0 +1,32 @@ +# frozen_string_literal: true +require "spec_helper" + +RSpec.describe Pajamas::Concerns::CheckboxRadioOptions do + let(:component_class) do + Class.new do + include Pajamas::Concerns::CheckboxRadioOptions + + attr_reader(:input_options) + + def initialize(input_options: {}) + @input_options = input_options + end + + def format_options(options:, css_classes: [], additional_options: {}) + {} + end + end + end + + describe '#formatted_input_options' do + let_it_be(:input_options) { { class: 'foo-bar' } } + + it 'calls `#format_options` with correct arguments' do + component = component_class.new(input_options: input_options) + + expect(component).to receive(:format_options).with(options: input_options, css_classes: ['custom-control-input']) + + component.formatted_input_options + end + end +end diff --git a/spec/components/pajamas/radio_component_spec.rb b/spec/components/pajamas/radio_component_spec.rb new file mode 100644 index 00000000000..3885d101c7a --- /dev/null +++ b/spec/components/pajamas/radio_component_spec.rb @@ -0,0 +1,126 @@ +# frozen_string_literal: true +require "spec_helper" + +RSpec.describe Pajamas::RadioComponent, :aggregate_failures, type: :component do + include FormBuilderHelpers + + let_it_be(:method) { :access_level } + let_it_be(:label) { "Access Level" } + let_it_be(:value) { :regular } + let_it_be(:help_text) do + 'Administrators have access to all groups, projects, and users and can manage all features in this installation' + end + + RSpec.shared_examples 'it renders unchecked radio' do + it 'renders unchecked radio' do + expect(rendered_component).to have_unchecked_field(label) + end + end + + context 'with default options' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + value: value, + label: label + ) + ) + end + end + + include_examples 'it renders unchecked radio' + include_examples 'it does not render help text' + end + + context 'with custom options' do + let_it_be(:radio_options) { { class: 'radio-foo-bar', checked: true } } + let_it_be(:label_options) { { class: 'label-foo-bar' } } + + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + value: method, + label: label, + help_text: help_text, + radio_options: radio_options, + label_options: label_options + ) + ) + end + end + + include_examples 'it renders help text' + + it 'renders checked radio' do + expect(rendered_component).to have_checked_field(label, class: radio_options[:class]) + end + + it 'adds CSS class to label' do + expect(rendered_component).to have_selector('label.label-foo-bar') + end + end + + context 'with `label` slot' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + value: value + ) + ) do |c| + c.label { label } + end + end + end + + include_examples 'it renders unchecked radio' + end + + context 'with `help_text` slot' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + value: value, + label: label + ) + ) do |c| + c.help_text { help_text } + end + end + end + + include_examples 'it renders unchecked radio' + include_examples 'it renders help text' + end + + context 'with `label` and `help_text` slots' do + before do + fake_form_for do |form| + render_inline( + described_class.new( + form: form, + method: method, + value: value + ) + ) do |c| + c.label { label } + c.help_text { help_text } + end + end + end + + include_examples 'it renders unchecked radio' + include_examples 'it renders help text' + end +end |