Extract banner test to a component

Checking the `style` attribute fails in JavaScript tests because the
browser converts colors to the `rgb()` format.

So we're testing the generated HTML in a component test while
simplifying the system test.

spec/components/shared/banner_component_spec.rb

@@ -2,9 +2,24 @@ require "rails_helper"
 
 describe Shared::BannerComponent, type: :component do
   it "renders given a banner" do
-    render_inline Shared::BannerComponent.new(create(:banner, title: "Vote now!"))
+    banner = create(:banner,
+                    title: "Vote now!",
+                    description: "Banner description",
+                    target_url:  "http://www.url.com",
+                    post_started_at: (Time.current - 4.days),
+                    post_ended_at:   (Time.current + 10.days),
+                    background_color: "#FF0000",
+                    font_color: "#FFFFFF"
+                   )
+
+    render_inline Shared::BannerComponent.new(banner)
 
     expect(page.find(".banner")).to have_content "Vote now!"
+    expect(page.find(".banner")).to have_content "Banner description"
+    expect(page.find(".banner")[:style]).to eq("background-color:#FF0000;")
+    expect(page.find("h2")[:style]).to eq("color:#FFFFFF;")
+    expect(page.find("h3")[:style]).to eq("color:#FFFFFF;")
+    expect(page).to have_link href: "http://www.url.com"
   end
 
   it "renders given a section" do

spec/system/banners_spec.rb

@@ -1,25 +1,16 @@
 require "rails_helper"
 
 describe "Banner" do
-  scenario "The banner is shown correctly" do
+  scenario "Only renders banners in the right section" do
-    create(:web_section, name: "homepage")
+    create(:banner,
-    banner = create(:banner, title: "Hello",
+           web_sections: [WebSection.find_by!(name: "homepage")],
-                      description: "Banner description",
+           description: "Banner description",
-                      target_url:  "http://www.url.com",
+           post_started_at: (Time.current - 4.days),
-                      post_started_at: (Time.current - 4.days),
+           post_ended_at:   (Time.current + 10.days))
-                      post_ended_at:   (Time.current + 10.days),
-                      background_color: "#FF0000",
-                      font_color: "#FFFFFF")
-    section = WebSection.where(name: "homepage").last
-    create(:banner_section, web_section: section, banner_id: banner.id)
 
     visit root_path
 
-    within(".banner") do
+    within(".banner") { expect(page).to have_content("Banner description") }
-      expect(page).to have_content("Banner description")
-      expect(find("h2")[:style]).to eq("color:#{banner.font_color};")
-      expect(find("h3")[:style]).to eq("color:#{banner.font_color};")
-    end
 
     visit debates_path