Files
nairobi/spec/system/admin/budgets_wizard/headings_spec.rb
Javi Martín 3484c6b7b8 Use a list of links to change group in budgets wizard
The original implementation (which was never merged) had a `<select>`
field for the switch, which offered accessibility issues. So I came up
with a very bad idea, which was emulating the look and feel of a select
field while making it more accessible for keyboard users.

This approach is inconvenient because we were using a bunch of ARIA
roles to do the same thing that can be done with a list of links, going
against the first rule of ARIA, which is:

> "Don’t use ARIA if you can achieve the same semantics with a native
> HTML element or attribute

Not only that, but the control was confusing for people using mobile
phones (select fields don't behave the same way), and we were using
*invalid* ARIA roles in this situation, leading Axe to report a critical
accessibility error:

```
aria-required-children: Certain ARIA roles must contain particular
children (critical)
https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI
The following 1 node violate this rule:

  Selector: ul[data-dropdown-menu="edw1i2-dropdown-menu"]
  HTML: <ul class="dropdown menu" wnenu="edw1i2-dropdown-menu"
            data-disable-hover="true" op="true" role="menubar">
  Fix any of the following:
  - Element has children which are not allowed: button[tabindex]
```

So, at least for now, we're using a simple list of links. We might style
it in the future if we find ways to make usability improvements, but,
for now, it does the job, and it does it better than the custom control
we were using.
2025-04-02 13:40:04 +02:00

177 lines
6.1 KiB
Ruby

require "rails_helper"
describe "Budgets wizard, headings step", :admin do
let(:budget) { create(:budget, :drafting) }
let(:group) { create(:budget_group, budget: budget, name: "Default group") }
describe "Index" do
scenario "back to a previous step" do
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
within "#side_menu" do
expect(page).to have_css "[aria-current]", exact_text: "Participatory budgets"
end
click_link "Go back to groups"
expect(page).to have_css "tr", text: "Default group"
expect(page).to have_css ".creation-timeline"
end
scenario "change to another group" do
economy = create(:budget_group, budget: budget, name: "Economy")
health = create(:budget_group, budget: budget, name: "Health")
create(:budget_group, budget: budget, name: "Technology")
create(:budget_heading, group: economy, name: "Banking")
create(:budget_heading, group: health, name: "Hospitals")
visit admin_budgets_wizard_budget_group_headings_path(budget, economy)
within(".heading") do
expect(page).to have_content "Banking"
expect(page).not_to have_content "Hospitals"
end
expect(page).not_to have_link "Health"
click_link "Manage headings from the Health group."
within(".heading") do
expect(page).to have_content "Hospitals"
expect(page).not_to have_content "Banking"
end
expect(page).to have_css ".creation-timeline"
end
end
describe "New" do
scenario "cancel creating a heading" do
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
expect(page).not_to have_field "Heading name"
expect(page).not_to have_button "Cancel"
expect(page).to have_content "Continue to phases"
click_button "Add new heading"
expect(page).to have_field "Heading name"
expect(page).not_to have_button "Add new heading"
expect(page).not_to have_content "Continue to phases"
click_button "Cancel"
expect(page).to have_button "Add new heading"
expect(page).not_to have_field "Heading name"
expect(page).not_to have_button "Cancel"
expect(page).to have_content "Continue to phases"
end
scenario "submit the form with errors" do
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
click_button "Add new heading"
click_button "Create new heading"
expect(page).to have_css(".is-invalid-label", text: "Heading name")
expect(page).to have_content "can't be blank"
expect(page).to have_button "Create new heading"
expect(page).to have_button "Cancel"
expect(page).not_to have_content "Heading created successfully!"
expect(page).not_to have_button "Add new heading"
expect(page).not_to have_content "Continue to phases"
within ".budgets-help" do
expect(page).to have_content "Headings are meant"
expect(page).not_to have_content "{"
end
end
end
describe "Edit" do
scenario "update heading" do
create(:budget_heading, group: group, name: "Heading wiht a typo")
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
expect(page).to have_css ".creation-timeline"
within("tr", text: "Heading wiht a typo") { click_link "Edit" }
fill_in "Heading name", with: "Heading without typos"
click_button "Save heading"
expect(page).to have_content "Heading updated successfully"
expect(page).to have_css ".creation-timeline"
expect(page).to have_css "td", exact_text: "Heading without typos"
end
scenario "submit the form with errors and then without errors" do
heading = create(:budget_heading, group: group, name: "Heading wiht a typo")
visit edit_admin_budgets_wizard_budget_group_heading_path(budget, group, heading)
fill_in "Heading name", with: ""
click_button "Save heading"
expect(page).to have_css "#error_explanation"
expect(page).to have_css ".creation-timeline"
fill_in "Heading name", with: "Heading without typos"
click_button "Save heading"
expect(page).to have_content "Heading updated successfully"
expect(page).to have_css ".creation-timeline"
expect(page).to have_css "td", exact_text: "Heading without typos"
end
scenario "update heading in single heading budget" do
visit admin_budgets_wizard_budget_group_headings_path(budget, group, mode: "single")
fill_in "Heading name", with: "Heading wiht typo"
fill_in "Money amount", with: "300000"
click_button "Continue to phases"
expect(page).to have_content "Heading created successfully"
click_link "Go back to edit heading"
expect(page).to have_field "Heading name", with: "Heading wiht typo"
fill_in "Heading name", with: "Heading without typos"
click_button "Continue to phases"
expect(page).to have_content "Heading updated successfully"
visit admin_budget_path(budget)
within "section", text: "Heading groups" do
within("tbody tr") { expect(page).to have_content "Heading without typos" }
end
end
end
describe "Destroy" do
scenario "delete a heading without investments" do
create(:budget_heading, group: group, name: "Delete me!")
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
within("tr", text: "Delete me!") { accept_confirm { click_button "Delete" } }
expect(page).to have_content "Heading deleted successfully"
expect(page).not_to have_content "Delete me!"
expect(page).to have_css ".creation-timeline"
end
scenario "try to delete a heading with investments" do
heading = create(:budget_heading, group: group, name: "Don't delete me!")
create(:budget_investment, heading: heading)
visit admin_budgets_wizard_budget_group_headings_path(budget, group)
within("tr", text: "Don't delete me!") { accept_confirm { click_button "Delete" } }
expect(page).to have_content "You cannot delete a Heading that has associated investments"
expect(page).to have_content "Don't delete me!"
expect(page).to have_css ".creation-timeline"
end
end
end