Add System tests for Validation Messages A11y
Add a dependency on the capybara_accessible_selectors gem to gain
access to valuable assertions that are concerned with Accessibility. For
example, by declaring the validation_error: filter (which utilizes the
described_by: filter under the hood) as an option to a find_selector
:rich_text_area call, we can assert the references between input and
validation message are valid .
Unfortunately, the capybara_accessible_selectors declares a
:rich_text selector which is slightly incompatible with
<trix-editor> elements. Since it is an almost identical concept to
:rich_text_area (and :rich_text_area is not yet available outside of
rails/rails@master), there isn’t support for passing filters like
validation_error: and described_by: to have_selector
:rich_text_area calls.
This commit rectifies that by modifying the :rich_text_area selector
to be counted as part of the :capybara_accessible_selectors filter
set:
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
+
+ Capybara.modify_selector(:rich_text_area) do
+ filter_set(:capybara_accessible_selectors, %i[focused fieldset described_by validation_error])
+ end
end
Finally, to ensure a tight testing feedback loop, this commit also
configures Rails’ I18n translations to raise errors for keys that
reference missing translations.
Collapse Gemfile
Expand Gemfile
Gemfile
diff --git a/Gemfile b/Gemfile
index c63f18f..910c8ef 100644
--- a/Gemfile
+++ b/Gemfile
@@ -50,6 +50,7 @@ end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
+ gem 'capybara_accessible_selectors', github: 'citizensadvice/capybara_accessible_selectors', tag: 'v0.4.1'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
Collapse Gemfile.lock
Expand Gemfile.lock
Gemfile.lock
diff --git a/Gemfile.lock b/Gemfile.lock
index 663218b..92a2727 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,3 +1,11 @@
+GIT
+ remote: https://github.com/citizensadvice/capybara_accessible_selectors.git
+ revision: b48c41eb9db64550991024e33bbd291d7723f743
+ tag: v0.4.1
+ specs:
+ capybara_accessible_selectors (0.4.1)
+ capybara (~> 3)
+
GIT
remote: https://github.com/rails/rails.git
revision: fb9bfa777468b8b88ff7362d63102444f3b51f5a
@@ -227,6 +235,7 @@ DEPENDENCIES
bootsnap (>= 1.4.4)
byebug
capybara (>= 3.26)
+ capybara_accessible_selectors!
jbuilder (~> 2.7)
listen (~> 3.2)
pg (~> 1.1)
Collapse config/environments/development.rb
Expand config/environments/development.rb
config/environments/development.rb
diff --git a/config/environments/development.rb b/config/environments/development.rb
index 643a04e..7810b12 100644
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -62,7 +62,7 @@ Rails.application.configure do
config.assets.quiet = true
# Raises error for missing translations.
- # config.i18n.raise_on_missing_translations = true
+ config.i18n.raise_on_missing_translations = true
# Annotate rendered view with file names
# config.action_view.annotate_rendered_view_with_filenames = true
Collapse config/environments/test.rb
Expand config/environments/test.rb
config/environments/test.rb
diff --git a/config/environments/test.rb b/config/environments/test.rb
index b5edb26..0f7d25d 100644
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@@ -53,7 +53,7 @@ Rails.application.configure do
config.active_support.disallowed_deprecation_warnings = []
# Raises error for missing translations.
- # config.i18n.raise_on_missing_translations = true
+ config.i18n.raise_on_missing_translations = true
# Annotate rendered view with file names
# config.action_view.annotate_rendered_view_with_filenames = true
Collapse config/locales/en.yml
Expand config/locales/en.yml
config/locales/en.yml
diff --git a/config/locales/en.yml b/config/locales/en.yml
index cf9b342..a56856b 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -30,4 +30,10 @@
# available at https://guides.rubyonrails.org/i18n.html.
en:
- hello: "Hello world"
+ helpers:
+ label:
+ message:
+ content: "Content"
+ submit:
+ message:
+ create: "Send"
Collapse test/application_system_test_case.rb
Expand test/application_system_test_case.rb
test/application_system_test_case.rb
diff --git a/test/application_system_test_case.rb b/test/application_system_test_case.rb
index d19212a..78287d7 100644
--- a/test/application_system_test_case.rb
+++ b/test/application_system_test_case.rb
@@ -2,4 +2,8 @@ require "test_helper"
class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
+
+ Capybara.modify_selector(:rich_text_area) do
+ filter_set(:capybara_accessible_selectors, %i[focused fieldset described_by validation_error])
+ end
end
Collapse test/system/messages_test.rb
Expand test/system/messages_test.rb
test/system/messages_test.rb
diff --git a/test/system/messages_test.rb b/test/system/messages_test.rb
new file mode 100644
index 0000000..f005327
--- /dev/null
+++ b/test/system/messages_test.rb
@@ -0,0 +1,24 @@
+require "application_system_test_case"
+
+class MessagesTest < ApplicationSystemTestCase
+ test "invalid messages are rendered as :invalid" do
+ visit messages_path
+ fill_in_rich_text_area label(:message, :content), with: ""
+ click_on submit(:message)
+
+ assert_rich_text_area label(:message, :content), validation_error: "can't be blank"
+ end
+
+ private
+ def assert_rich_text_area(locator, **options)
+ assert_selector :rich_text_area, locator, **options
+ end
+
+ def label(i18n_key, attribute)
+ I18n.translate(attribute, scope: [:helpers, :label, i18n_key])
+ end
+
+ def submit(i18n_key)
+ I18n.translate(:create, scope: [:helpers, :submit, i18n_key])
+ end
+end