Files
nairobi/spec/system/admin/budgets_wizard/groups_spec.rb
Javi Martín 5311daadfe Use a button for non-GET table actions
Links acting like buttons have a few disadvantages.

First, screen readers will announce them as "links". Screen reader users
usually associate links with "things that get you somewhere" and buttons
with "things that perform an action". So when something like "Delete,
link" is announced, they'll probably think this is a link which will
take them to another page where they can delete a record.

Furthermore, the URL of the link for the "destroy" action might be the
same as the URL for the "show" action (only one is accessed with a
DELETE request and the other one with a GET request). That means screen
readers could announce the link like "Delete, visited link", which is
very confusing.

They also won't work when opening links in a new tab, since opening
links in a new tab always results in a GET request to the URL the link
points to.

Finally, submit buttons work without JavaScript enabled, so they'll work
even if the JavaScript in the page hasn't loaded (for whatever reason).

For all these reasons (and probably many more), using a button to send
forms is IMHO superior to using links.

There's one disadvantage, though. Using `button_to` we create a <form>
tag, which means we'll generate invalid HTML if the table is inside
another form. If we run into this issue, we need to use `button_tag`
with a `form` attribute and then generate a form somewhere else inside
the HTML (with `content_for`).

Note we're using `button_to` with a block so it generates a <button>
tag. Using it in a different way the text would result in an <input />
tag, and input elements can't have pseudocontent added via CSS.

The following code could be a starting point to use the `button_tag`
with a `form` attribute. One advantage of this approach is screen
readers wouldn't announce "leaving form" while navigating through these
buttons. However, it doesn't work in Internet Explorer.

```
ERB:

<% content_for(:hidden_content, form_tag(path, form_options) {}) %>
<%= button_tag text, button_options %>

Ruby:

def form_id
  path.gsub("/", "_")
end

def form_options
  { id: form_id, method: options[:method] }
end

def button_options
  html_options.except(:method).merge(form: form_id)
end

Layout:

<%= content_for :hidden_content %> # Right before the `</body>`
```
2021-09-20 20:27:37 +02:00

148 lines
5.0 KiB
Ruby

require "rails_helper"
describe "Budgets wizard, groups step", :admin do
let(:budget) { create(:budget, :drafting) }
describe "New" do
scenario "create group" do
visit admin_budgets_wizard_budget_groups_path(budget)
within "#side_menu" do
expect(page).to have_css ".is-active", exact_text: "Participatory budgets"
end
expect(page).to have_content "Continue to headings"
expect(page).not_to have_link "Continue to headings"
click_button "Add new group"
fill_in "Group name", with: "All City"
click_button "Create new group"
expect(page).to have_content "Group created successfully!"
expect(page).to have_content "All City"
expect(page).to have_button "Add new group"
expect(page).to have_link "Continue to headings"
end
scenario "cancel creating a group" do
visit admin_budgets_wizard_budget_groups_path(budget)
expect(page).not_to have_field "Group name"
expect(page).not_to have_button "Cancel"
expect(page).to have_content "Continue to headings"
click_button "Add new group"
expect(page).to have_field "Group name"
expect(page).not_to have_button "Add new group"
expect(page).not_to have_content "Continue to headings"
click_button "Cancel"
expect(page).to have_button "Add new group"
expect(page).not_to have_field "Group name"
expect(page).not_to have_button "Cancel"
expect(page).to have_content "Continue to headings"
end
scenario "submit the form with errors" do
visit admin_budgets_wizard_budget_groups_path(budget)
click_button "Add new group"
click_button "Create new group"
expect(page).not_to have_content "Group created successfully!"
expect(page).to have_css ".is-invalid-label", text: "Group name"
expect(page).to have_css ".creation-timeline"
expect(page).to have_content "can't be blank"
expect(page).to have_button "Create new group"
expect(page).to have_button "Cancel"
expect(page).not_to have_button "Add new group"
expect(page).not_to have_content "Continue to headings"
end
end
describe "Edit" do
scenario "update group" do
create(:budget_group, budget: budget, name: "Group wiht a typo")
visit admin_budgets_wizard_budget_groups_path(budget)
expect(page).to have_css ".creation-timeline"
within("tr", text: "Group wiht a typo") { click_link "Edit" }
fill_in "Group name", with: "Group without typos"
click_button "Save group"
expect(page).to have_content "Group updated successfully"
expect(page).to have_css ".creation-timeline"
expect(page).to have_css "td", exact_text: "Group without typos"
end
scenario "submit the form with errors and then without errors" do
group = create(:budget_group, budget: budget, name: "Group wiht a typo")
visit edit_admin_budgets_wizard_budget_group_path(budget, group)
fill_in "Group name", with: ""
click_button "Save group"
expect(page).to have_css "#error_explanation"
fill_in "Group name", with: "Group without typos"
click_button "Save group"
expect(page).to have_content "Group updated successfully"
expect(page).to have_css ".creation-timeline"
expect(page).to have_css "td", exact_text: "Group without typos"
end
scenario "update group in single heading budget" do
visit admin_budgets_wizard_budget_groups_path(budget, mode: "single")
fill_in "Group name", with: "Group wiht typo"
click_button "Continue to headings"
click_link "Go back to edit group"
expect(page).to have_field "Group name", with: "Group wiht typo"
fill_in "Group name", with: "Group without typos"
click_button "Continue to headings"
expect(page).to have_content "Group updated successfully"
visit admin_budget_groups_path(budget)
expect(page).to have_content "There is 1 group"
within("tbody tr") { expect(page).to have_content "Group without typos" }
end
end
describe "Destroy" do
scenario "delete a group without headings" do
create(:budget_group, budget: budget, name: "Delete me!")
visit admin_budgets_wizard_budget_groups_path(budget)
within("tr", text: "Delete me!") { accept_confirm { click_button "Delete" } }
expect(page).to have_content "Group deleted successfully"
expect(page).not_to have_content "Delete me!"
expect(page).to have_css ".creation-timeline"
end
scenario "try to delete a group with headings" do
group = create(:budget_group, budget: budget, name: "Don't delete me!")
create(:budget_heading, group: group)
visit admin_budgets_wizard_budget_groups_path(budget)
within("tr", text: "Don't delete me!") { accept_confirm { click_button "Delete" } }
expect(page).to have_content "You cannot delete a Group that has associated headings"
expect(page).to have_content "Don't delete me!"
expect(page).to have_css ".creation-timeline"
end
end
end