Problem/Motivation

When working on tests for #2828201: Add a modal form option to the confirm and field entry form action link types and #2253257: Use a modal for config entity delete operation links, I found that using $this->assertSession()->buttonExists(t('foo'))->press() would fail with the following error:

1) Drupal\FunctionalJavascriptTests\Core\Entity\EntityListBuilderTest::testDeleteConfirmForm
Zumba\GastonJS\Exception\BrowserError: There was an error inside the PhantomJS portion of GastonJS.
This is probably a bug, so please report it:

The button is properly found via buttonExists, but the press method fails to click it.

I took a screenshot, and it turns out the modal is off the screen, which (I think) explains the failure to press.

Note that the button can be click/pressed using the click() method.

Proposed resolution

Determine why the modal isn't fully on the screen and fix.

Remaining tasks

User interface changes

API changes

Data model changes

Members fund testing for the Drupal project. Drupal Association Learn more

Comments

jhedstrom created an issue. See original summary.

jhedstrom’s picture

Status: Active » Needs review
FileSize
974 bytes
6.93 KB

This demonstrates the failure, using the same patch as from #2253257: Use a modal for config entity delete operation links, but with the press method instead.

The last submitted patch, 2: 2831506-DO-NOT-TEST.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 2: 2831506-02.patch, failed testing.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

acbramley’s picture

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 config 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 :)

ifreeman’s picture

I uncovered the same bug while working on #2061377: Allow image style to be selected in Text Editor's image dialog (necessary for structured content) 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();
Mile23’s picture

Version: 8.5.x-dev » 8.4.x-dev

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.

Mile23’s picture

FileSize
55.55 KB

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

Mile23’s picture

The testing theme basically inherits from classy. That's supposed to change in #2352949: [meta] Remove Classy testing profile dependency

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

Mile23’s picture

Status: Needs work » Needs review
FileSize
2.98 KB

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

Here's a test.

Status: Needs review » Needs work

The last submitted patch, 12: 2831506_12.patch, failed testing. View results

Mile23’s picture

Title: Modal dialogs hidden/offscreen in test theme for JavascriptTestBase » Minimal theme disallows modal AJAX tests under JavascriptTestBase
Issue tags: +Ajax, +modal dialog

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.

Mile23’s picture

Title: Minimal theme disallows modal AJAX tests under JavascriptTestBase » Minimal profile disallows modal AJAX tests under JavascriptTestBase
Related issues: +#2936535: Modal dialog errors in stark theme

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

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.