Minimal profile disallows modal AJAX tests under JavascriptTestBase

I've found a similar issue when updating to Drupal 8.4 and testing our custom modifications to the Linkit dialog. Both my test and the LinkitDialog test were using this to submit the dialog:

$page->find('css', '.editor-link-dialog')->find('css', '.button.form-submit span')->click();

This no longer works as (I believe) jquery ui removed the inner span from the button. However, now you can't click the button at all. I've tried multiple incantations of pressing, clicking, etc but all fail with the error mentioned in the IS.

EDIT: Can confirm using the approach from #2253257: Use a modal for entity delete operation links is working for me.

$this->click('.ui-dialog button:contains("Save")');

Thank you @jhedstrom! Saved me hours of trying to get this to work :)

I uncovered the same bug while working on #2061377: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5 but didn't bother diagnosing further last year. Here's the snippet we're using now until this issue is figured out. I'm linking here and adding a @todo in that patch.

    // @todo: Switch to using NodeElement::click() on the button or
    // NodeElement::submit() on the form when #2831506 is fixed.
    // @see https://www.drupal.org/node/2831506
    $script = "jQuery('input[id^=\"edit-actions-save-modal\"]').click()";
    $this->getSession()->executeScript($script);
    $this->assertSession()->assertWaitOnAjaxRequest();

I've been scratching my head over this for quite a bit of time trying to accomplish this: #2870746: Add JS functional tests for modal example, including validation phase

I tried to send postition: my: top, at: top, of: window as jQueryUi options, but it didn't work.

I noticed that the screen shots are all half the size of the window that's supposed to be open when you run phantomJS.

So there are a few places this could be broken: PhantomJS itself, our configuration of PhantomJS, or CSS-type problems in the testing theme.

This is a bug in the testing system, so it's allowed in 8.4.x.

Switching to $profile = "minimal" helps out a little, but seems to place the dialog behind the overlay div.

1) Drupal\Tests\fapi_example\FunctionalJavascript\ModalFormTest::testModalForm
Zumba\GastonJS\Exception\BrowserError: There was an error inside the PhantomJS portion of GastonJS.
This is probably a bug, so please report it:
click
html.touchevents.details.js body div.ui-widget-overlay.ui-front

The testing theme basically inherits from classy. That's supposed to change in #2352949: Deprecate using Classy as the default theme for the 'testing' profile

The minimal theme does not inherit from classy, so it might need a fix of its own.

I think this might be fixed by #2346893: Duplicate AJAX wrapper around a file field

Here's a test.

In the test results you can see that Drupal\Tests\system\FunctionalJavascript\ModalProfileMinimalTest fails, but Drupal\Tests\system\FunctionalJavascript\ModalProfileTestingTest does not.

So the same test can pressButton() on modal dialog elements in the testing theme, but not the minimal theme.

The workaround in #8 will still work, and will allow tests to continue working after this is fixed.

More specific to stark theme: #2936535: Modal dialog errors in stark theme

This is the Bug Smash Initiatives daily target today.

This has say for 8 years since last update.

I've changed this to Postponed (maintainer needs more info). With the intent that the information required here is to confirm that this is still an issue.

If there is no further action on this then, given the the time this has sat idle, and that this is a test only bug then this can probably be closed if no change in 3 months.

Zumba\GastonJS\Exception\BrowserError: There was an error inside the PhantomJS portion of GastonJS.

We've not been using PhantomJs since forever, going to webdriver probably fixed this. Closing this, feel free to reopen if this is still a problem even with the current setup.