Simplify column toggling in report spec

* This partly reverts 3a957fb988.

app/components/multiple_checked_select_component.rb

@@ -1,11 +1,7 @@
 # frozen_string_literal: true
 
 class MultipleCheckedSelectComponent < ViewComponent::Base
-  # @param id [String]
-  #   Uniquely identifies the MultipleCheckedSelect (mcs) field.
-  #   '_mcs_field' will be appended to the given ID to form the complete ID.
-  def initialize(id:, name:, options:, selected:)
-    @id = "#{id}_mcs_field"
+  def initialize(name:, options:, selected:)
     @name = name
     @options = options.map { |option| [option[0], option[1].to_sym] }
     @selected = selected.nil? ? [] : selected.map(&:to_sym)

app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml

@@ -1,4 +1,4 @@
-.ofn-drop-down.ofn-drop-down-v2{ id: @id, data: { controller: "multiple-checked-select" } }
+.ofn-drop-down.ofn-drop-down-v2{ data: { controller: "multiple-checked-select" } }
   %div.ofn-drop-down-label{ "data-multiple-checked-select-target": "button" }
     %span{class: "label"}= t('admin.columns')
     %span{ class: "icon-caret-down", "data-multiple-checked-select-target": "caret" }

app/views/admin/reports/_rendering_options.html.haml

@@ -27,5 +27,4 @@
   .row
     .alpha.two.columns= label_tag nil, t(:report_columns)
     .omega.fourteen.columns
-      = render MultipleCheckedSelectComponent.new(id: 'fields_to_show', name: "fields_to_show", options: @report.available_headers, selected: @rendering_options.options[:fields_to_show])
-  
+      = render MultipleCheckedSelectComponent.new(name: "fields_to_show", options: @report.available_headers, selected: @rendering_options.options[:fields_to_show])

spec/system/admin/reports/orders_and_fulfillment_spec.rb

@@ -209,10 +209,12 @@ describe "Orders And Fulfillment" do
 
       context "when voucher is applied to the order" do
         let(:voucher) { create(:voucher_percentage_rate, enterprise: distributor) }
+
         before do
-          mcs_field = page.find('#fields_to_show_mcs_field')
-          option_names = ['Voucher Label', 'Voucher Amount ($)']
-          toggle_mcs_options(mcs_field, option_names)
+          within_multi_select("Columns") do
+            check "Voucher Label"
+            check "Voucher Amount ($)"
+          end
         end
 
         it 'displays the voucher label and amount values for the orders with voucher applied' do
@@ -645,16 +647,9 @@ describe "Orders And Fulfillment" do
     end
   end
 
-  # @param mcs_field MultipleCheckedSelect (mcs) field
-  # @param option_name [String] option to check or select
-  def toggle_mcs_options(mcs_field, option_names)
-    mcs_field.click # to open the mcs menu
-
-    option_names.each do |option_name|
-      option = page.find(".menu .menu_items label[data-label='#{option_name}']")
-      option.click
-    end
-
-    mcs_field.click # to close the mcs menu
+  def within_multi_select(text)
+    find(".label", text:).click # open
+    yield
+    find(".label", text:).click # close
   end
 end