sub_header_test.rb

# frozen_string_literal: true

require "components/test_helper"

class PrimerOpenProjectSubHeaderTest < Minitest::Test
  include Primer::ComponentTestHelpers

  def test_renders
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
      component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do |button|
        "Create"
      end
      component.with_action_button(leading_icon: :trash, label: "Delete", scheme: :danger) { "Delete" }
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader-filterInput")
    assert_selector(".SubHeader .Button--primary")
    assert_selector(".SubHeader .Button--danger")
    # Assert the correct order
    assert_selector(".SubHeader-rightPane .Button--primary+.Button--danger")
  end

  def test_renders_an_icon_button_as_action
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_action_button(icon_only: true, leading_icon: :plus, label: "Create", aria: { label: "Create" })
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader .Button--iconOnly")
  end

  def test_renders_a_button_without_label
    err = assert_raises ArgumentError do
      render_inline(Primer::OpenProject::SubHeader.new) do |component|
        component.with_action_button(icon_only: true, leading_icon: :plus, label: "", aria: { label: "Create" })
      end
    end

    assert_equal "You need to provide a valid label.", err.message
  end

  def test_renders_a_button_group_as_action
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_action_button_group do |group|
        group.with_button(icon: :note, "aria-label": "Button 1")
        group.with_button(icon: :rows, "aria-label": "Button 2")
        group.with_button(icon: "sort-desc", "aria-label": "Button 3")
      end
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader .ButtonGroup")
    assert_selector(".octicon.octicon-note")
    assert_selector(".octicon.octicon-rows")
    assert_selector(".octicon.octicon-sort-desc")
  end

  def test_renders_a_menu_as_action
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_action_menu(leading_icon: :plus, label: "Create", button_arguments: { scheme: :primary, "aria-label": "Menu"}) do |menu|
        menu.with_item(label: "Foo") do |item|
          item.with_leading_visual_icon(icon: :paste)
        end
        menu.with_item(label: "Bar") do |item|
          item.with_leading_visual_icon(icon: :log)
        end
      end
    end

    assert_selector(".Button-leadingVisual .octicon-plus")
    assert_selector("ul[role=menu]") do
      assert_selector ".ActionListItem", text: "Foo"
      assert_selector ".ActionListItem", text: "Bar"
    end
  end

  def test_renders_a_menu_without_label
    err = assert_raises ArgumentError do
      render_inline(Primer::OpenProject::SubHeader.new) do |component|
        component.with_action_menu(leading_icon: :plus, label: "", button_arguments: { scheme: :primary, "aria-label": "Menu"}) do |menu|
          menu.with_item(label: "Foo") do |item|
            item.with_leading_visual_icon(icon: :paste)
          end
          menu.with_item(label: "Bar") do |item|
            item.with_leading_visual_icon(icon: :log)
          end
        end
      end
    end

    assert_equal "You need to provide a valid label.", err.message
  end

  def test_renders_a_text
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_text { "Hello world!" }
    end

    assert_selector(".SubHeader")
    assert_text("Hello world!")
  end

  def test_renders_a_filter_button
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button do |button|
        button.with_trailing_visual_counter(count: "15")
        "Filter"
      end
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader-leftPane") do
      assert_text("Filter")
    end
  end

  def test_renders_an_icon_button_as_filter_button
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button(icon_only: true)
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader-leftPane") do
      assert_selector(".SubHeader .Button--iconOnly")
      assert_selector(".octicon.octicon-filter")
    end
  end

  def test_renders_an_icon_filter_button
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button(icon: "filter", "aria-label": "Filter")
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader-leftPane .Button--iconOnly .octicon-filter")
  end

  def test_filter_button_uses_invisible_scheme
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button { "Filter" }
    end

    assert_selector(".SubHeader .Button--invisible")
  end

  def test_renders_a_custom_filter_button
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_component do
        "<button class='MyCustomButton'>Filter</button>".html_safe
      end
      component.with_bottom_pane_component do
        "<div class='ABottomPane'>Whatever block you need</div>".html_safe
      end
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader .MyCustomButton")
    assert_selector(".SubHeader .SubHeader-bottomPane .ABottomPane")
  end

  def test_renders_a_clear_button_when_show_clear_button_is_set
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(
        name: "filter",
        label: "Filter",
        show_clear_button: true,
        value: "value is set"
      )
    end

    assert_selector(".SubHeader")
    assert_selector(
      ".SubHeader-filterInput"\
      "[data-action=\" input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton\"]"
    )
    assert_selector(".FormControl-input-trailingAction[data-action=\"click:primer-text-field#clearContents\"]")
  end

  def test_renders_a_filter_input_label
    err = assert_raises ArgumentError do
      render_inline(Primer::OpenProject::SubHeader.new) do |component|
        component.with_filter_input(
          name: "filter",
          label: "",
          show_clear_button: true,
          value: "value is set"
        )
      end
    end

    assert_equal "You need to provide a valid label.", err.message
  end

  def test_renders_a_segmented_control
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_segmented_control("aria-label": "Segmented control") do |control|
        control.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
        control.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
      end
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader .SegmentedControl")
    assert_text("Preview")
    assert_text("Raw")
  end

  def test_renders_empty_left_pane
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_action_button_group do |group|
        group.with_button(icon: :note, "aria-label": "Button 1")
        group.with_button(icon: :rows, "aria-label": "Button 2")
      end
    end

    assert_selector(".SubHeader.SubHeader--emptyLeftPane")
  end

  def test_does_not_render_input_events_when_show_clear_button_is_not_set
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(
        name: "filter",
        label: "Filter",
        show_clear_button: false,
        value: "value is set"
      )
    end

    assert_selector(".SubHeader")
    assert_selector(".SubHeader-filterInput")
    assert_no_selector(
      ".SubHeader-filterInput"\
      "[data-action=\" input:sub-header#toggleFilterInputClearButton focus:sub-header#toggleFilterInputClearButton\"]"
    )
    assert_no_selector(".FormControl-input-trailingAction[data-action=\"click:primer-text-field#clearContents\"]")
  end

  def test_renders_collapsed_search_per_default
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
    end

    assert_selector(".SubHeader")
    # Trigger is rendered and wired to expand
    assert_selector("[data-action='click:sub-header#expandFilterInput']")
    # Filter container starts hidden on all screen sizes (d-none, no d-sm-flex)
    assert_selector(".SubHeader-filterContainer.d-none")
    assert_no_selector(".SubHeader-filterContainer.d-sm-flex")
  end

  def test_collapsed_search_trigger_visible_on_all_screen_sizes
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
    end

    # Without collapsed_search, the trigger has d-md-none (hidden on desktop).
    # With collapsed_search, it must not have d-md-none.
    assert_no_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
  end

  def test_expanded_search_trigger_hidden_on_desktop
    render_inline(Primer::OpenProject::SubHeader.new(collapsed_search: false)) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
    end

    # Without collapsed_search the trigger is mobile-only (d-md-none)
    assert_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
  end

  def test_renders_quick_filters
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
      component.with_filter_button { "Filter" }
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
      component.with_quick_filter { "<span class='MyQuickFilter'>Assignee</span>".html_safe }
    end

    assert_selector(".SubHeader-leftPane .MyQuickFilter", count: 2)
  end

  def test_quick_filters_are_hidden_on_mobile_when_multiple
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button { "Filter" }
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
      component.with_quick_filter { "<span class='MyQuickFilter'>Assignee</span>".html_safe }
    end

    # Each quick_filter wrapper has d-none d-md-flex (hidden on mobile, visible on desktop)
    assert_selector(".d-none.d-md-flex .MyQuickFilter", count: 2)
  end

  def test_single_quick_filter_is_visible_on_all_screen_sizes
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
    end

    assert_selector(".MyQuickFilter")
    assert_no_selector(".d-none .MyQuickFilter")
  end

  def test_quick_filters_require_filter_button_when_multiple_quick_filters
    err = assert_raises ArgumentError do
      render_inline(Primer::OpenProject::SubHeader.new) do |component|
        component.with_filter_input(name: "filter", label: "Filter")
        component.with_quick_filter { "Status" }
        component.with_quick_filter { "Status" }
      end
    end

    assert_equal "You must provide a filter_button when using quick_filters.", err.message
  end

  def test_quick_filters_require_no_filter_button_for_single_quick_filter
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
    end

    assert_selector(".MyQuickFilter")
  end

  def test_quick_filters_maximum_is_five
    err = assert_raises ArgumentError do
      render_inline(Primer::OpenProject::SubHeader.new) do |component|
        component.with_filter_button { "Filter" }
        6.times { |i| component.with_quick_filter { "Filter #{i}" } }
      end
    end

    assert_equal "SubHeader supports a maximum of 5 quick_filters, got 6.", err.message
  end

  def test_renders_sort_quick_filter
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_quick_sort { "<span class='SortFilter'>Sort</span>".html_safe }
    end

    assert_selector(".SubHeader-leftPane .SortFilter")
  end

  def test_renders_group_quick_filter
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_quick_group { "<span class='GroupFilter'>Group</span>".html_safe }
    end

    assert_selector(".SubHeader-leftPane .GroupFilter")
  end

  def test_sort_and_group_quick_filters_render_before_other_quick_filters
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button { "Filter" }
      component.with_quick_filter(classes: "OtherFilter") { "Other" }
      component.with_quick_group(classes: "GroupFilter") { "Group" }
      component.with_quick_sort(classes: "SortFilter") { "Sort" }
    end

    assert_selector(".SortFilter ~ .GroupFilter")
    assert_selector(".GroupFilter ~ .OtherFilter")
  end

  def test_sort_and_group_do_not_count_toward_filter_button_requirement
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_quick_sort { "Sort" }
      component.with_quick_filter { "Status" }
    end

    assert_text "Sort"
    assert_text "Status"
  end

  def test_sort_and_group_do_not_count_toward_maximum
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button { "Filter" }
      component.with_quick_sort { "Sort" }
      component.with_quick_group { "Group" }
      4.times { |i| component.with_quick_filter { "Filter #{i}" } }
    end

    assert_text "Sort"
    assert_text "Group"
    assert_text "Filter 0"
    assert_text "Filter 1"
    assert_text "Filter 2"
    assert_text "Filter 3"
  end

  def test_sort_and_group_are_not_hidden_on_mobile_when_multiple_quick_filters
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_button { "Filter" }
      component.with_quick_sort { "<span class='SortFilter'>Sort</span>".html_safe }
      component.with_quick_group { "<span class='GroupFilter'>Group</span>".html_safe }
    end

    assert_no_selector(".d-none.d-md-flex .SortFilter")
    assert_no_selector(".d-none.d-md-flex .GroupFilter")
  end

  def test_collapsed_search_auto_enabled_when_quick_filter_present
    render_inline(Primer::OpenProject::SubHeader.new) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
    end

    # Filter container is hidden (collapsed_search auto-detected as true)
    assert_selector(".SubHeader-filterContainer.d-none")
    assert_no_selector(".SubHeader-filterContainer.d-md-flex")
    # Trigger is visible on all screen sizes (no d-sm-none)
    assert_no_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
  end

  def test_explicit_collapsed_search_false_overrides_auto_collapse
    render_inline(Primer::OpenProject::SubHeader.new(collapsed_search: false)) do |component|
      component.with_filter_input(name: "filter", label: "Filter")
      component.with_quick_filter { "<span class='MyQuickFilter'>Status</span>".html_safe }
    end

    # Filter container is NOT hidden despite quick_filter being present
    assert_selector(".SubHeader-filterContainer.d-md-flex")
    # Trigger is mobile-only (d-sm-none) since collapsed_search is false
    assert_selector("[data-action='click:sub-header#expandFilterInput'].d-md-none")
  end
end