I was mistakenly thinking that you can define variables in beforeEach, but it turns out these are not used.
Rather, Jest was automatically creating variables for the elements according to their IDs. How convenient!
This introduces a new 'toggle' controller, and we already had three\! So I created a generic interface that could be extended to potentially support all of them. I propose we try to reduce them all into the one controller, but won't go down the rabbit-hole just yet..
I have an idea on how to re-arrange and make it more contained, by assigning the controller only to the checkbox, and defining targets with aria-controls="", but chose to stick with Stimulus conventions for now.
I couldn't think of a simpler way to hardcode it, so now we have a clever generic method :)
We can assume that hidden elements will stay hidden, but we need to check each time if an element is disabled or not.
I'm starting to think that these stimulus tests are worthless. The environment is not the same as a browser, which creates extra work to deal with the inconsistencies. And it means we're not testing real world behaviour.
So these are just unit tests, but they take extra effort to put together due to the inter-relatedness with the DOM. Hmm.
Had to update the form controller a little bit to handle buttons.
But arrow not showwing on focus.
Getting some weird SCSS behaviour here.. maybe I'm trying to be too clever.
I chose to use the 'elements' collection rather than choosing which elements to include (ie this supports inputs, textareas, buttons and anything else I didn't think of). It could be a bit simpler if we assume the element is a form. Even simpler if it's a fieldset (that has a disabled property). But I didn't want to limit it too much.
Unfortunately JS is quite ugly compared to Ruby. And 'prettier' made it uglier in my opinion.
Stimulus controllers aren't supposed to reach outside their own element (so we can't do this with targets). Perhaps the controller should be bigger to encompass more, but I wanted to see if I could avoid making a mega component that does everything. For now it seems appropriate just to pass a selector in.
Another option is to publish events on other controllers using Outlets, but I don't know if we need to go there just yet.
I found myself trying to write Ruby in Javascript, and it's not nearly as pretty..
Javascript now has more advanced data structures like Map, but it's rather useless because it doesn't have the usual iterator methods (such as filter, map, reduce etc).
Also for the spec I wasn't sure of the best approach, so will gladly recieve feedback.
As per review comment, use data-disable-with="false" do prevent Rails
from automatically enabling the "Apply" button. We can then remove
the timeout hack.
The "apply" button is disabled by default. If left enabled, a customer
could try to apply an empty voucher, which results in system trying
to move to the order summary step, an unexpected behaviour!
We only enable the button when something is entered in the input.
jquery-ujs automatically disable submit button when submitting the form.
If one choose cancel on the leaving page warning, then the submit buttons
end up in a disable state, with no way to re enable them. This fix
prevent the warning from being triggered when submitting the form, so
we can't end up in the scenario described.
Buttons will be enabled once the form has been interacted with.
Update unsavedChanges stimulus controller to handle this. It should
still be generic enought that it can be reused.
Add UnsavedChanges stimulus controller, it should be generic enough so
that it can reused somewhere else. It works with both 'beforeunload' event
and 'turbolinks:before-visit' when using turbo links.
Before there was a row for each distributor and a 'shared' row for shipping methods which were shared among more than one distributor. This layout displays a single list of shipping methods with the distributor or distributors it belongs to beside it as suggested by @lin-d-hop
