Add Javascript API

Thanks for reporting!

To my mind

inserting before and after pseudo events, is a good idea

I am postponing until we have a ajax command associated with ajax flag actions.

In the issue I have linked to, its current name is ActionLinkFlashCommand, but from this issue I can see that we need to be make that name more generic.

I am postponing until we have a ajax command associated with ajax flag actions.

We have that command now.

Here is the code that adds before and after events for third party modules to bind their event listeners to.
I have included a 'working' test modules that adds the appropriate event listeners.

If you copy "flag_flash_event_test" out of the test directory into the custom module directory then you will see it adds a flag which attaches to any article that you care to create .. clicking on the new flag will cause the third party module to respond to before and after events. It dumps messages onto the console.

The next steps are to write a functional javascript test.. but I am inserting a pause here to show my working out .. for people to criticise. --- When I am sure the architecture is ok I will write the test

Test failures unrelated.

...of a successful command respoonse

Small typo there.

Also needs tests, but I'm liking this.

From #8 "small typo" ... thanks .. can't think why I was thinking of spoons while i mistyped that!

1) I am trying to shadow the functionality provided by the drupal7 version of this module.. and I see after a little review that I had missed a little bit of piping. In this iteration the response object is now plumbed down into the customEvents

2) To nail thing down in testing I am vandalizing the page by adding two paragraphs elements one for each event. I have found a way of locking down the test so they fail if the response object is not included as a detail object in the event.

3) With regard to namespacing, others may extend ActionLinkFlashCommand so in a couple of places I have made the name of things more unique,

for example

flagBefore becomes flagFlashBefore.

Ok so the failures in #9 are caused by our test instability

#2945195: test instability ( round 2 )

For which we I think we now have a solution ....

https://www.drupal.org/project/flag/issues/2945195#comment-12530969

So here I am retesting.

Retesting now that the above issue is in.

I have not fixed the test ... yet

but there are enough pieces of the solution here to be worth talking about.

The problem when debugging is that the js files provided by the mock third party module is not on the page.

ie event_listener.js - I have no solution to that yet.

Here are the changes ...

a) flag_flash_event_test/config/install/flag.flag.event_test.yml was creating when I had a different test stratergy
it is no longer needed.

b) The code below cannot tolerate white spaces.

  $p_after = $this->assertSession()->waitForElementVisible('css', "p.after:contains('After:$flag_short_text')");

c) I have made flag_flash_event_test.info.yml follow the pattern set in flag_test_plugin.info.yml

So when I described in #17 ...

"Why is the javascript added in reality, in manual testing, but consistently screws up in test?"

Well this core issue is similar but not exactly that ....

#1988968: Drupal.ajax does not guarantee that "add new JS file to page" commands have finished before calling said JS

I am going to postpone this and work on that ...

#1988968: Drupal.ajax does not guarantee that "add new JS file to page" commands have finished before calling said JS has been fixed in Drupal core, so this issue is no longer postponed.

Needs reroll to MR

Only why the test is working for me is if I manually dispatch the event in the test, so something like:

$this->getSession()->executeScript(<<<JS
document.dispatchEvent(new CustomEvent('flagFlashBefore', {
  detail: { response: { message: 'Before:$flag_short_text' } }
}));
document.dispatchEvent(new CustomEvent('flagFlashAfter', {
  detail: { response: { message: 'After:$flag_short_text' } }
}));
JS
    );

And the event listener should not be attached to the drupal.behaviors. This seems to be a limitation of the JS Functional test.

I'll push code, just to see if Drupal CI is of the same opinion and it can be changed later if needed.

Tests are passing when manually dispatching events in the test. Not sure if the right way to go, so leaving status to needs work.

The loss of this API in 4.x was a regression and a bug.