Merge pull request #3609 from projectblacklight/facet_filters_component

Extract Facets::FiltersComponent so it's display can be customized

Author: dnoneill

app/assets/builds/blacklight.css

@@ -414,12 +414,6 @@ main {
   background: transparent url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16"%3e%3cpath d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" /%3e%3cpath d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" /%3e%3c/svg%3e') center/1em auto no-repeat;
 }
 
-/* Facet browse pages & modals
--------------------------------------------------- */
-.facet-filters:not(:has(*)) {
-  display: none;
-}
-
 /* Search History */
 .search-history {
   --bl-history-filter-name-color: var(--bs-secondary-color);

app/assets/stylesheets/blacklight/_facets.scss

@@ -206,9 +206,3 @@ $facet-toggle-height: $facet-toggle-width !default;
       $facet-toggle-width auto no-repeat;
   }
 }
-
-/* Facet browse pages & modals
--------------------------------------------------- */
-.facet-filters:not(:has(*)) {
-  display: none;
-}

app/components/blacklight/facets/filters_component.html.erb

@@ -0,0 +1,4 @@
+  <div class="<%= classes %>">
+    <%= render Blacklight::Facets::SuggestComponent.new(presenter: presenter) %>
+    <%= render 'facet_index_navigation' if render_index_navigation? %>
+  </div>

app/components/blacklight/facets/filters_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Blacklight::Facets
+  class FiltersComponent < Blacklight::Component
+    # @param [Blacklight::FacetFieldPresenter] presenter
+    def initialize(presenter:, classes: 'facet-filters card card-body bg-light p-3 mb-3 border-0')
+      @presenter = presenter
+      @classes = classes
+    end
+
+    def facet
+      @presenter.facet_field
+    end
+
+    attr_reader :classes, :presenter
+
+    delegate :display_facet, to: :presenter
+
+    def render?
+      facet.suggest != false || render_index_navigation?
+    end
+
+    def render_index_navigation?
+      facet.index_range && display_facet.index?
+    end
+  end
+end

app/views/catalog/facet.html.erb

@@ -2,10 +2,7 @@
   <% component.with_title { facet_field_label(@facet.key) } %>
   <% view_config = blacklight_config.view_config(document_index_view_type) %>
 
-  <div class="facet-filters card card-body bg-light p-3 mb-3 border-0">
-    <%= render Blacklight::Facets::SuggestComponent.new(presenter: @presenter) %>
-    <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>
-  </div>
+  <%= render Blacklight::Facets::FiltersComponent.new(presenter: @presenter) %>
 
   <div class="facet-pagination top d-flex flex-wrap w-100 justify-content-between border-bottom pb-3 mb-3">
     <%= render view_config.facet_pagination_component.new(facet_field: @presenter) %>

spec/components/blacklight/facets/filters_component_spec.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Blacklight::Facets::FiltersComponent, type: :component do
+  let(:facet_field) { Blacklight::Configuration::FacetField.new key: 'language_facet', suggest: true }
+  let(:presenter) do
+    instance_double(Blacklight::FacetFieldPresenter, facet_field: facet_field, label: 'Lang',
+                                                     view_context: view_context, suggest: true, key: 'lang')
+  end
+  let(:view_context) { vc_test_controller.view_context }
+
+  before do
+    allow(view_context).to receive(:search_facet_path).and_return('/catalog/facet/language_facet')
+
+    with_request_url '/catalog?q=foo' do
+      render_inline(component)
+    end
+  end
+
+  context 'with default classes' do
+    let(:component) { described_class.new(presenter: presenter) }
+
+    it 'draws default classes' do
+      expect(page).to have_css(".facet-filters.card.card-body.bg-light.p-3.mb-3.border-0")
+    end
+  end
+
+  context 'with custom classes' do
+    let(:component) { described_class.new(presenter: presenter, classes: 'foo') }
+
+    it 'draws default classes' do
+      expect(page).to have_css(".foo")
+    end
+  end
+end

spec/views/catalog/facet.html.erb_spec.rb

@@ -4,17 +4,17 @@
   let(:display_facet) { double }
   let(:blacklight_config) { Blacklight::Configuration.new }
   let(:component) { instance_double(Blacklight::FacetComponent) }
-  let(:facet_suggest_input) { instance_double(Blacklight::Facets::SuggestComponent) }
   let(:pagination) { instance_double(Blacklight::FacetFieldPaginationComponent) }
+  let(:facet_filters) { instance_double(Blacklight::Facets::FiltersComponent) }
 
   before do
     allow(Blacklight::FacetComponent).to receive(:new).and_return(component)
-    allow(Blacklight::Facets::SuggestComponent).to receive(:new).and_return(facet_suggest_input)
+    allow(Blacklight::Facets::FiltersComponent).to receive(:new).and_return(facet_filters)
     allow(Blacklight::FacetFieldPaginationComponent).to receive(:new).and_return(pagination)
 
     allow(view).to receive(:render).and_call_original
     allow(view).to receive(:render).with(component)
-    allow(view).to receive(:render).with(facet_suggest_input)
+    allow(view).to receive(:render).with(facet_filters)
     allow(view).to receive(:render).with(pagination)
 
     blacklight_config.add_facet_field 'xyz', label: "Facet title"
@@ -30,7 +30,7 @@
 
   it "renders the subcomponents" do
     render
-    expect(view).to have_received(:render).with(facet_suggest_input)
+    expect(view).to have_received(:render).with(facet_filters)
     expect(view).to have_received(:render).with(pagination).twice
   end