Add latest changes from gitlab-org/gitlab@master

3 files changed, 122 insertions, 20 deletions

diff --git a/spec/components/pajamas/checkbox_component_spec.rb b/spec/components/pajamas/checkbox_component_spec.rb
index d79c537a30e..3d50509ef10 100644
--- a/spec/components/pajamas/checkbox_component_spec.rb
+++ b/spec/components/pajamas/checkbox_component_spec.rb
@@ -8,12 +8,6 @@ RSpec.describe Pajamas::CheckboxComponent, :aggregate_failures, type: :component
   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(page).to have_unchecked_field(label, with: '1')
-    end
-  end
-
   context 'with default options' do
     before do
       fake_form_for do |form|
diff --git a/spec/components/pajamas/checkbox_tag_component_spec.rb b/spec/components/pajamas/checkbox_tag_component_spec.rb
new file mode 100644
index 00000000000..bca7a6005d5
--- /dev/null
+++ b/spec/components/pajamas/checkbox_tag_component_spec.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Pajamas::CheckboxTagComponent, :aggregate_failures, type: :component do
+  let_it_be(:name) { :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.' }
+
+  context 'with default options' do
+    before do
+      render_inline(described_class.new(name: name)) do |c|
+        c.label { label }
+      end
+    end
+
+    include_examples 'it renders unchecked checkbox with value of `1`'
+    include_examples 'it does not render help text'
+  end
+
+  context 'with custom options' do
+    let_it_be(:value) { 'yes' }
+    let_it_be(:checkbox_options) { { class: 'checkbox-foo-bar', checked: true } }
+    let_it_be(:label_options) { { class: 'label-foo-bar' } }
+
+    before do
+      render_inline(
+        described_class.new(
+          name: name,
+          value: value,
+          checked: true,
+          checkbox_options: checkbox_options,
+          label_options: label_options
+        )
+      ) do |c|
+        c.label { label }
+      end
+    end
+
+    it 'renders checked checkbox with value of `yes`' do
+      expect(page).to have_checked_field(label, with: value, class: checkbox_options[:class])
+    end
+
+    it 'adds CSS class to label' do
+      expect(page).to have_selector('label.label-foo-bar')
+    end
+  end
+
+  context 'with `help_text` slot' do
+    before do
+      render_inline(described_class.new(name: name)) do |c|
+        c.label { label }
+        c.help_text { help_text }
+      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/concerns/checkbox_radio_label_with_help_text_spec.rb b/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb
index 7a792592b3c..4994abcfb93 100644
--- 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
@@ -8,6 +8,7 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       attr_reader(
         :form,
         :method,
+        :name,
         :label_argument,
         :help_text_argument,
         :label_options,
@@ -16,8 +17,9 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       )
 
       def initialize(
-        form:,
-        method:,
+        form: nil,
+        method: nil,
+        name: nil,
         label: nil,
         help_text: nil,
         label_options: {},
@@ -26,6 +28,7 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       )
         @form = form
         @method = method
+        @name = name
         @label_argument = label
         @help_text_argument = help_text
         @label_options = label_options
@@ -46,19 +49,25 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       end
 
       include Pajamas::Concerns::CheckboxRadioLabelWithHelpText
+      include ActionView::Context
       include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::FormTagHelper
     end
   end
 
-  let_it_be(:method) { 'username' }
+  let_it_be(:method_or_name) { 'username' }
   let_it_be(:label_options) { { class: 'foo-bar' } }
   let_it_be(:value) { 'Foo bar' }
+  let_it_be(:expected_label_entry) { '<span>Label argument</span>' }
+  let_it_be(:expected_label_with_help_text_entry) do
+    '<span>Label argument</span><p class="help-text" data-testid="pajamas-component-help-text">Help text argument</p>'
+  end
 
   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)
+      component = component_class.new(form: form, method: method_or_name, label_options: label_options, value: value)
 
       expect(component).to receive(:format_options).with(
         options: label_options,
@@ -73,16 +82,13 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       it 'calls `form.label` with `label` and `help_text` arguments used in the block' do
         component = component_class.new(
           form: form,
-          method: method,
+          method: method_or_name,
           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)
+        expect(form).to receive(:label).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_with_help_text_entry)
         end
 
         component.render_label_with_help_text
@@ -93,13 +99,11 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       it 'calls `form.label` with `label` argument used in the block' do
         component = component_class.new(
           form: form,
-          method: method,
+          method: method_or_name,
           label: 'Label argument'
         )
 
-        expected_label_entry = '<span>Label argument</span>'
-
-        expect(form).to receive(:label).with(method, {}) do |&block|
+        expect(form).to receive(:label).with(method_or_name, {}) do |&block|
           expect(block.call).to eq(expected_label_entry)
         end
 
@@ -107,4 +111,49 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       end
     end
   end
+
+  describe '#render_label_tag_with_help_text' do
+    it 'calls `#format_options` with correct arguments' do
+      component = component_class.new(name: method_or_name, 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_tag_with_help_text
+    end
+
+    context 'when `help_text` argument is passed' do
+      it 'calls `label_tag` with `label` and `help_text` arguments used in the block' do
+        component = component_class.new(
+          name: method_or_name,
+          label: 'Label argument',
+          help_text: 'Help text argument'
+        )
+
+        expect(component).to receive(:label_tag).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_with_help_text_entry)
+        end
+
+        component.render_label_tag_with_help_text
+      end
+    end
+
+    context 'when `help_text` argument is not passed' do
+      it 'calls `label_tag` with `label` argument used in the block' do
+        component = component_class.new(
+          name: method_or_name,
+          label: 'Label argument'
+        )
+
+        expect(component).to receive(:label_tag).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_entry)
+        end
+
+        component.render_label_tag_with_help_text
+      end
+    end
+  end
 end