From feeca6c9735f05f47fa61337ff2f32c71bca367a Mon Sep 17 00:00:00 2001 From: Josh Morrow Date: Fri, 3 Mar 2017 10:03:38 -0800 Subject: [PATCH] Add refills and refill-styled flashes Unsuccessful updates were resulting in weird form spacing. Changes: - Add refills to Gemfile - Replace `flashes` component with generated refills flashes component - Apply refills class to existing `flashes` partial - Update `#have_flash` matcher to reflect new class name --- Gemfile | 1 + Gemfile.lock | 4 +- .../administrate/components/_flashes.scss | 26 +++++++++---- .../application/_flashes.html.erb | 2 +- .../administrate/application/_form.html.erb | 2 +- spec/features/edit_page_spec.rb | 38 ++++++++++++++++--- spec/support/have_flash_matcher.rb | 2 +- 7 files changed, 59 insertions(+), 16 deletions(-) diff --git a/Gemfile b/Gemfile index 9dde7b0034..51c85d8d63 100644 --- a/Gemfile +++ b/Gemfile @@ -13,6 +13,7 @@ gem "redcarpet" gem "unicorn" group :development do + gem "refills" gem "web-console", ">= 2.1.3" end diff --git a/Gemfile.lock b/Gemfile.lock index 9c6beafa57..c78336618f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -211,6 +211,7 @@ GEM rake (11.2.2) rdiscount (1.6.8) redcarpet (3.3.3) + refills (0.2.0) rspec-core (3.5.1) rspec-support (~> 3.5.0) rspec-expectations (3.5.0) @@ -308,6 +309,7 @@ DEPENDENCIES rack-timeout rails_stdout_logging redcarpet + refills rspec-rails (~> 3.5.0) shoulda-matchers (~> 2.8.0) timecop @@ -317,4 +319,4 @@ DEPENDENCIES webmock BUNDLED WITH - 1.13.7 + 1.14.4 diff --git a/app/assets/stylesheets/administrate/components/_flashes.scss b/app/assets/stylesheets/administrate/components/_flashes.scss index 0cf4f4d44e..af9fe8bdb8 100644 --- a/app/assets/stylesheets/administrate/components/_flashes.scss +++ b/app/assets/stylesheets/administrate/components/_flashes.scss @@ -1,15 +1,27 @@ -@each $flash-type, $flash-color in $flash-colors { - .flash--#{$flash-type} { - background-color: $flash-color; - color: darken($flash-color, 60%); - padding: $small-spacing $base-spacing; +$base-spacing: 1.5em !default; +$flashes: ( + "alert": #fff6bf, + "error": #fbe3e4, + "notice": #e5edf8, + "success": #e6efc2, +) !default; + +@each $flash-type, $color in $flashes { + .flash-#{$flash-type} { + background-color: $color; + color: shade($color, 60%); + display: block; + margin-bottom: $base-spacing / 2; + padding: $base-spacing / 2; + text-align: center; a { - color: darken($flash-color, 70%); + color: shade($color, 70%); + text-decoration: underline; &:focus, &:hover { - color: darken($flash-color, 90%); + color: shade($color, 90%); } } } diff --git a/app/views/administrate/application/_flashes.html.erb b/app/views/administrate/application/_flashes.html.erb index ff3a9f5842..07d4265222 100644 --- a/app/views/administrate/application/_flashes.html.erb +++ b/app/views/administrate/application/_flashes.html.erb @@ -14,7 +14,7 @@ This partial renders flash messages on every page. <% if flash.any? %>
<% flash.each do |key, value| -%> -
<%= value %>
+
<%= value %>
<% end -%>
<% end %> diff --git a/app/views/administrate/application/_form.html.erb b/app/views/administrate/application/_form.html.erb index cf991d0d12..c849c2594a 100644 --- a/app/views/administrate/application/_form.html.erb +++ b/app/views/administrate/application/_form.html.erb @@ -24,7 +24,7 @@ and renders all form fields for a resource's editable attributes. diff --git a/spec/features/edit_page_spec.rb b/spec/features/edit_page_spec.rb index 0688ac898d..cc97879c13 100644 --- a/spec/features/edit_page_spec.rb +++ b/spec/features/edit_page_spec.rb @@ -22,8 +22,8 @@ visit edit_admin_customer_path(customer) - expect(page).to have_content("Name") - expect(page).to have_content("Email") + expect(page).to have_text("Name") + expect(page).to have_text("Email") end it "displays boolean values as check boxes" do @@ -33,7 +33,7 @@ check "Email subscriber" click_on "Update Customer" - expect(page).to have_content("true") + expect(page).to have_text("true") end it "displays selectable strings as dropdowns", :js do @@ -43,7 +43,35 @@ select "vip", from: "Kind" click_on "Update Customer" - expect(page).to have_content("KIND") - expect(page).to have_content("vip") + expect(page).to have_text("KIND") + expect(page).to have_text("vip") + end + + it "displays an error when the submitted form is invalid" do + customer = create(:customer) + + visit edit_admin_customer_path(customer) + fill_in "Name", with: "" + click_on "Update Customer" + + expect(page).to have_css( + "#error_explanation ul li.flash-error", + text: "Name can't be blank", + ) + end + + it "displays a success message for successful updates" do + new_name = "Hyper" + new_email = "example@example.com" + customer = create(:customer) + + visit edit_admin_customer_path(customer) + fill_in "Name", with: new_name + fill_in "Email", with: new_email + click_on "Update Customer" + + expect(page).to have_text(new_name) + expect(page).to have_text(new_email) + expect(page).to have_flash("Customer was successfully updated.") end end diff --git a/spec/support/have_flash_matcher.rb b/spec/support/have_flash_matcher.rb index db7c23cfa9..8717a59be2 100644 --- a/spec/support/have_flash_matcher.rb +++ b/spec/support/have_flash_matcher.rb @@ -1,5 +1,5 @@ module Features def have_flash(text) - have_css(".flash--notice", text: text) + have_css(".flash-notice", text: text) end end