Files
grecia/spec/shared/system/nested_imageable.rb
Javi Martín cc6f9391fc Fix attaching files using the keyboard
We were hiding the file input and styling the label as a button instead.
Since clicking on a label has the same effect as clicking on the input,
the input worked properly for mouse and touch screen users.

However, hiding the input makes it inaccessible for keyboard users,
since labels don't get keyboard focus, but inputs do.

So we must not hide the input but make it invisible instead. But we
still need to hide the input (alongside the label) after a file has been
attached.

We could add some extra JavaScript to hide the input when we hide the
label. Since the JavaScript is already quite complex and my first few
attempts at changing it failed, I've opted to assume that the input (and
its label) must be hidden whenever there's already a file name, and
implement that rule with CSS.

Note we're using the `:focus-within` pseudoclass to style a label when
focus is on the input. This rule (at the time of writing) is only
supported by 93.5% of the browsers. Keyboard users without a screen
reader and using the other 6.5% of the browsers will still be able to
focus on the field but might not notice the field has received focus.
Since the percentage of affected users will decrease over time and until
now 100% of keyboard users were completely unable to focus on these
fields, for now we think this is a good-enough solution.
2021-07-13 17:09:05 +02:00

312 lines
9.0 KiB
Ruby

shared_examples "nested imageable" do |imageable_factory_name, path, imageable_path_arguments,
fill_resource_method_name, submit_button, imageable_success_notice,
has_many_images = false, management: false|
let!(:user) { create(:user, :level_two) }
let!(:arguments) { {} }
let!(:imageable) { create(imageable_factory_name) }
let(:management) { management }
before do
create(:administrator, user: user)
imageable_path_arguments&.each do |argument_name, path_to_value|
arguments.merge!("#{argument_name}": imageable.send(path_to_value))
end
imageable.update(author: user) if imageable.respond_to?(:author)
end
describe "at #{path}" do
scenario "Should show new image link when imageable has not an associated image defined" do
do_login_for user
visit send(path, arguments)
expect(page).to have_selector "#new_image_link"
end
scenario "Should hide new image link after adding one image" do
do_login_for user
visit send(path, arguments)
click_on "Add image"
expect(page).not_to have_selector "#new_image_link"
end
scenario "Should update nested image file name after choosing any file" do
do_login_for user
visit send(path, arguments)
click_link "Add image"
attach_file "Choose image", Rails.root.join("spec/fixtures/files/clippy.jpg")
expect(page).to have_selector ".file-name", text: "clippy.jpg"
end
scenario "Should update nested image file title with file name after choosing a file when no title defined" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
expect_image_has_title("clippy.jpg")
end
scenario "Should not update nested image file title with file name after choosing a file when title already defined" do
do_login_for user
visit send(path, arguments)
click_link "Add image"
input_title = find(".image input[name$='[title]']")
fill_in input_title[:id], with: "Title"
attach_file "Choose image", Rails.root.join("spec/fixtures/files/clippy.jpg")
if has_many_images
expect(find("input[id$='_title']").value).to eq "Title"
else
expect(find("##{imageable_factory_name}_image_attributes_title").value).to eq "Title"
end
end
scenario "Should update loading bar style after valid file upload" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
expect(page).to have_selector ".loading-bar.complete"
end
scenario "Should update loading bar style after invalid file upload" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/logo_header.png"),
false
)
expect(page).to have_selector ".loading-bar.errors"
end
scenario "Should update image cached_attachment field after valid file upload" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
expect_image_has_cached_attachment(".jpg")
end
scenario "Should not update image cached_attachment field after invalid file upload" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/logo_header.png"),
false
)
expect_image_has_cached_attachment("")
end
scenario "Should show nested image errors after invalid form submit" do
do_login_for user
visit send(path, arguments)
click_link "Add image"
click_on submit_button
if has_many_images
# Pending. Review soon and test
else
within "#nested-image .image" do
expect(page).to have_content("can't be blank", count: 2)
end
end
end
scenario "Should remove nested image after valid file upload and click on remove button" do
do_login_for user
visit send(path, arguments)
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
within "#nested-image .image" do
click_link "Remove image"
end
expect(page).not_to have_selector("#nested-image .image")
end
scenario "Should show successful notice when resource filled correctly without any nested images" do
if has_many_images
skip "no need to test, there are no attributes for the parent resource"
else
do_login_for user
visit send(path, arguments)
send(fill_resource_method_name) if fill_resource_method_name
click_on submit_button
expect(page).to have_content imageable_success_notice
end
end
scenario "Should show successful notice when resource filled correctly and after valid file uploads" do
do_login_for user
visit send(path, arguments)
send(fill_resource_method_name) if fill_resource_method_name
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
expect(page).to have_selector ".loading-bar.complete"
click_on submit_button
expect(page).to have_content imageable_success_notice
end
scenario "Should show new image after successful creation with one uploaded file" do
do_login_for user
visit send(path, arguments)
send(fill_resource_method_name) if fill_resource_method_name
imageable_attach_new_file(
imageable_factory_name,
Rails.root.join("spec/fixtures/files/clippy.jpg")
)
expect(page).to have_selector ".loading-bar.complete"
click_on submit_button
imageable_redirected_to_resource_show_or_navigate_to
if has_many_images
# Pending. Review soon and test
else
expect(page).to have_selector "figure img"
expect(page).to have_selector "figure figcaption" if show_caption_for?(imageable_factory_name)
end
end
if path.include? "edit"
scenario "Should show persisted image" do
create(:image, imageable: imageable)
do_login_for user
visit send(path, arguments)
expect(page).to have_css ".image", count: 1
end
scenario "Should not show add image button when image already exists" do
create(:image, imageable: imageable)
do_login_for user
visit send(path, arguments)
expect(page).not_to have_css "a#new_image_link"
end
scenario "Should remove nested field after remove image" do
create(:image, imageable: imageable)
do_login_for user
visit send(path, arguments)
click_on "Remove image"
expect(page).not_to have_css ".image"
end
scenario "Should show add image button after remove image" do
create(:image, imageable: imageable)
do_login_for user
visit send(path, arguments)
click_on "Remove image"
expect(page).to have_css "a#new_image_link"
end
end
end
end
def do_login_for(user)
common_do_login_for(user, management: management)
end
def imageable_redirected_to_resource_show_or_navigate_to
case imageable.class.to_s
when "Budget"
visit edit_admin_budget_path(Budget.last)
when "Proposal"
click_on "Not now, go to my proposal" rescue Capybara::ElementNotFound
end
end
def imageable_attach_new_file(_imageable_factory_name, path, success = true)
click_link "Add image"
within "#nested-image" do
image = find(".image")
attach_file "Choose image", path
within image do
if success
expect(page).to have_css(".loading-bar.complete")
else
expect(page).to have_css(".loading-bar.errors")
end
end
end
end
def imageable_fill_new_valid_proposal
fill_in "Proposal title", with: "Proposal title"
fill_in "Proposal summary", with: "Proposal summary"
check :proposal_terms_of_service
end
def imageable_fill_new_valid_budget
fill_in "Name", with: "Budget name"
end
def imageable_fill_new_valid_budget_investment
fill_in "Title", with: "Budget investment title"
fill_in_ckeditor "Description", with: "Budget investment description"
check :budget_investment_terms_of_service
end
def expect_image_has_title(title)
image = find(".image")
within image do
expect(find("input[name$='[title]']").value).to eq title
end
end
def expect_image_has_cached_attachment(extension)
within "#nested-image" do
image = find(".image")
within image do
expect(find("input[name$='[cached_attachment]']", visible: :hidden).value).to end_with(extension)
end
end
end
def show_caption_for?(imageable_factory_name)
imageable_factory_name != "budget"
end