Add CKEditor Widget JS test coverage

Here's a start for the test for the caption being editable in the wysiwyg. It validates the basic functionality, but not the edge cases in this issue yet.

Lol, I started working on it when I saw the original issue (#2282957) was ready for tests when I got up this morning. I can work on it more this evening, or if you want to move it along, that's cool too.

Adding coverage for edge cases in the issue summary, except for this:

Triggering "Source" button does not trigger a blur event on the caption editable, which results in the source being inaccurate. The blur event should be triggered.

I'm not sure what the issue is there, nor how to test it. And I don't really see a problem. The source seems accurate. I need some clarification on what the issue to test is there.

I can't recreate the error on testbot in #7. I don't see that error locally. I changed that part of the code slightly to see if I can circumvent the issue.

Also adding some coding standard fixes.

Still the same failure in #9 as #7. I suspect the double click is not working properly on headless chrome. Testing version without double clicks. Although after I posted this, I figured out how to run it locally headless and tested #7, and I didn't get the error.

I realized that one bit of js wasn't executing as I failed to actually execute it. When I updated it to run, I was getting an ajax error. Here's the code in question:

    $select_and_edit_embed = <<<JS
var editor = CKEDITOR.instances['edit-body-0-value'];
var entityEmbed = editor.widgets.getByElement(editor.editable().findOne('div'));
entityEmbed.focus();
editor.execCommand('editdrupalentity');
JS;
    $this->getSession()->executeScript($select_and_edit_embed);

I had left off the execution line.

I've tried various ways of testing whether the widget is editable. There's a function added in the anonymous function isEditableEntityWidget(), so I could possibly check that in the test if it’s exposed outside the anonymous function. But I think it's better to actually run the code rather than just test the attributes.

I propose that the editdrupalentity command above should run without error, whether there is a drupal-embed-button attribute or not.

This also would fix an edge case where the command is run instead of prevented to run.

To get this to work, I added some code to the editdrupalentity command borrowed from isEditableEntityWidget():

          if (typeof embed_button_id === 'undefined' || !editor.config.DrupalEntity_buttons.hasOwnProperty(embed_button_id)) {
            return;
          }

I tried to actually have it run isEditableEntityWidget() there, but I couldn't get it to work I was getting the following error:

1) Drupal\Tests\entity_embed\FunctionalJavascript\MediaImageTest::testJavascriptWidget
WebDriver\Exception\JavaScriptError: javascript error: d.is is not a function
  (Session info: chrome=74.0.3729.169)
  (Driver info: chromedriver=2.46.628411 (3324f4c8be9ff2f70a05a30ebc72ffb013e1a71e),platform=Mac OS X 10.11.6 x86_64)

/Users/oknate/dev/entity_browser_testing/web/vendor/instaclick/php-webdriver/lib/WebDriver/Exception.php:155
/Users/oknate/dev/entity_browser_testing/web/vendor/instaclick/php-webdriver/lib/WebDriver/AbstractWebDriver.php:157
/Users/oknate/dev/entity_browser_testing/web/vendor/instaclick/php-webdriver/lib/WebDriver/AbstractWebDriver.php:218
/Users/oknate/dev/entity_browser_testing/web/vendor/instaclick/php-webdriver/lib/WebDriver/Container.php:224
/Users/oknate/dev/entity_browser_testing/web/vendor/behat/mink-selenium2-driver/src/Selenium2Driver.php:931
/Users/oknate/dev/entity_browser_testing/web/vendor/behat/mink/src/Session.php:329
/Users/oknate/dev/entity_browser_testing/web/modules/contrib/entity_embed/tests/src/FunctionalJavascript/EntityEmbedTestBase.php:84
/Users/oknate/dev/entity_browser_testing/web/modules/contrib/entity_embed/tests/src/FunctionalJavascript/MediaImageTest.php:546
/Users/oknate/dev/entity_browser_testing/web/vendor/phpunit/phpunit/src/Framework/TestCase.php:1071
/Users/oknate/dev/entity_browser_testing/web/vendor/phpunit/phpunit/src/Framework/TestCase.php:939
/Users/oknate/dev/entity_browser_testing/web/vendor/phpunit/phpunit/src/Framework/TestResult.php:698
/Users/oknate/dev/entity_browser_testing/web/vendor/phpunit/phpunit/src/Framework/TestCase.php:894

But it worked with the above condition. This allows the code to tests if, when the data-embed-button attribute is missing, it doesn't try to launch a dialog.

I also added another helper function for readability.

That was fast, too! Thanks.

IRT:

I think this is just an artifact of us not being able to double-click the widget due to test infrastructure (webdriver) limitations.

Exactly. Double clicking was working locally and it was much nicer. I think my solution doesn't hurt anything, and it works. If you can come up with a more elegant way to simulate either double clicking or triggering the context menu, I'm all ears (or eyes, to improve upon the cliché).

It would be especially cool to see the context menu open in the tests and verify the custom text per button displays.

Nice job breaking it up. Thanks! I was thinking you might recommend that.