Preview flash

[alec-c4]

Hey!
I have flash component

# frozen_string_literal: true

class Elements::FlashComponent < ViewComponent::Base
  def initialize
    @flash_class = {
      notice: "alert alert-info",
      success: "alert alert-success",
      error: "alert alert-danger",
      alert: "alert alert-warning"
    }
  end
end

<% unless flash.empty? %>
  <% flash.each do |key, value| %>
    <% next unless value.is_a? String %>
    <div class="<%= @flash_class[key.to_sym] %>">
      <label><%= sanitize(value) %></label>
    </div>
  <% end %>
<% end %>

and I'd like to add ability to preview flashes. But this code doesn't work

class Elements::FlashComponentPreview < ViewComponent::Preview
  def default
    controller.flash[:notice] = "Flash / Notice"
    render Elements::FlashComponent.new
  end
end

How can I modify it to make it work?

[Spone]

Hi @alec-c4 I would advise passing the flash as an argument to the ViewComponent, so the component does not rely on global state (see Avoid global state advice). It will make testing and previewing easier.

[Spone]

Can you show the full code for the component? (Ruby class and view)

When you say "not working", what does it mean? Do you have an error? Or is the test not passing?

[alec-c4]

sure

# frozen_string_literal: true

class Elements::FlashComponent < ViewComponent::Base
  def initialize(flash:)
    @flash_class = {
      notice: "alert alert-info",
      success: "alert alert-success",
      error: "alert alert-danger",
      alert: "alert alert-warning"
    }
  end
end

<% unless flash.empty? %>
  <% flash.each do |key, value| %>
    <% next unless value.is_a? String %>
    <div class="<%= @flash_class[key.to_sym] %>">
      <label><%= sanitize(value) %></label>
    </div>
  <% end %>
<% end %>

[alec-c4]

spec

require "rails_helper"

RSpec.describe Elements::FlashComponent, type: :component do
  it "renders flash notification" do
    with_controller_class PagesController do
      flash = {notice: "Notification message!"}
      render_inline described_class.new(flash: flash)
    end

    expect(rendered_content).to have_text "Notification message!"
    expect(rendered_content).to have_selector "label"
    expect(rendered_content).not_to have_selector "img"
  end
end

Elements::FlashComponent
  renders flash notification (FAILED - 1)

Failures:

  1) Elements::FlashComponent renders flash notification
     Failure/Error: expect(rendered_content).to have_text "Notification message!"
       expected to find text "Notification message!" in ""
     # ./spec/components/elements/flash_component_spec.rb:10:in `block (2 levels) in <top (required)>'

Finished in 0.03441 seconds (files took 3.64 seconds to load)
1 example, 1 failure

preview

class Elements::FlashComponentPreview < Lookbook::Preview
  def notice
    flash = {notice: "Notification message!"}
    render Elements::FlashComponent.new(flash:)
  end
end

[oliverguenther]

You did not set up flash as an instance variable.

# frozen_string_literal: true

class Elements::FlashComponent < ViewComponent::Base
  def initialize(flash:)
    @flash = flash
    @flash_class = {
      notice: "alert alert-info",
      success: "alert alert-success",
      error: "alert alert-danger",
      alert: "alert alert-warning"
    }
  end
end

<% unless @flash.empty? %>
  <% @flash.each do |key, value| %>
    <% next unless value.is_a? String %>
    <div class="<%= @flash_class[key.to_sym] %>">
      <label><%= sanitize(value) %></label>
    </div>
  <% end %>
<% end %>

[alec-c4]

Thanks a lot for your help, @oliverguenther !!!