We've had some tests fail after this test was executed in our CI, and
one possible reason could be that sometimes this test finished before
all its requests had finished. This could be the case with the following
code:
```
visit sdg_management_proposals_path(filter: "pending_sdg_review")
click_button "Search"
expect(page).to have_css "li.is-active h2", exact_text: "Pending"
```
Before clicking the "Search" button, the expectation is already true, so
there's a chance that the expectation is evaluated as true before the
request has finished. That might result in requests and session data
leaking between tests.
So we're adding more expectations in order to make sure that the
requests have finished before evaluating the expectations associated to
them.
Since targets didn't have a title but only a long description, every
form allowing to select targets was pretty much unusable: we either
displayed just the code or the whole description.
Now, with a concise title, it's easier to find and select the desired
target.
The titles have been copied from The Global Goals page [1].
Note we're using the `short_title` I18n key for the `title` method and
the `long_title` I18n key for the `long_title` method. We can't use
`title` as I18n key instead of `short_title` because it would affect
existing translations.
[1] https://www.globalgoals.org/
JavaScript is used by about 98% of web users, so by testing without it
enabled, we're only testing that the application works for a very
reduced number of users.
We proceeded this way in the past because CONSUL started using Rails 4.2
and truncating the database between JavaScript tests with database
cleaner, which made these tests terribly slow.
When we upgraded to Rails 5.1 and introduced system tests, we started
using database transactions in JavaScript tests, making these tests much
faster. So now we can use JavaScript tests everywhere without critically
slowing down our test suite.
While trying to add the target="_blank" to this link I noticed that this attribute
no longer works in some places in the application, such as the terms and
conditions link in the sign_up page.
For the time being I think we can resolve it this way in this case and deal with
this issue in a separate PR.
Hopefully now it's a bit more obvious that SDGs can be selected by
clicking on them and that the field to select goals and the field to
select targets/goals are related (since they're now part of the same
fieldset).
We were using list items with the checkbox role. This is probably
confusing since list items have a listitem role, and so we were
basically using a list with no listitem.
We could add a `<span role="checkbox">` tag inside the list item, but
using real checkboxes is probably easier. We're also adding a test to
verify the checkboxes native behavior is compatible with our code.
Note we're using the "enter" key to toggle the "checked" status of the
SDG. This is probably not intuitive for screen reader users who might
try to submit the form using the "enter" key after selecting a goal.
However, the alternative would be even less intuitive for sighted
keyboard users, since for them these icons look like links or buttons
and they would accidentally submit the form when trying to select a
goal.
Since we haven't come up with a better interface yet, for now we're
following the principle of least damage; we consider submitting the form
against a user's will is less annoying than forcing users to move to a
different field before being able to submit the form.
Also note we can't write `check` in the tests because Capybara will try
to click the checkbox, which is hidden by the image in the label.
Note we're using both the `hidden` and `disabled` properties to
guarantee compatibility with user agents which might still display the
option even when using the `hidden` attribute or hiding it with
`display: none`. We could also use `hide()` and `show()` instead of the
`hidden` property, but since we're using the `disabled` property, I
thought the code would be easier to read if we used properties in both
cases.
Also note users will no longer be able to get, let's say, debates which
are related to goal 1 and target 2.1. We think this use case is highly
unlikely and there's no need to take it into account.
Add "display_text" to allow customize the text that we want render on tag.
For Goals we render "SDG1", "SDG2"..
For Targets we render the code "1.1", "1.A"...
Add spec which is fixed with this commit.
In the `sTagsArea` zone there are two elements with the same `data-val`:
the `<span class="amsify-select-tag>` containing the selected tag and
the `<li class="amsify-list-item" data-val="1">` containing the
suggested tag.
This means every time we call `removeTag`, the `removeTagByItem`
function is called twice, and might remove extra items.
Suggested PR:
c8765a6915
- When we click on an icon we add a new tag with the Goal related to the input or
we remove the tag when that label already exists.
- Manage goals icons status when add or remove related targets:
Whenever there is a tag related to Goal, either the Goal itself or a Target, the icon
will be "checked".
When there is no related Goal or Target it will no longer be marked as checked.
This will allow autocomplete for the loaded values in suggestions settings.
We remove commas on tag to allow to jquery.amsify.suggestag.js use comma
as delimiter.
This component allows you to add Goals and Targets in a single
input to relate it to any resource.
We use the new added library to render them as tags.
We have three filters: "pending", "all" and "reviewed". Where "pending"
is the default one.
Now we are rendering the `shared/_filter_subnav` partial we need to stub
helper methods defined at the controller and the helper methods that
rely on the request parameters to test the component.
Note using `params[:relatable_type].classify` is recognized as a
security risk by some tools. However, it's a false positive, since we've
added constraints to the URL so that paramenter can only have the values
we trust.
