Behat Mink: 12 - JavaScript 02

• https://davidwinter.me/testing-javascript-websites-with-behat/
• https://github.com/davidwinter/Testing-Javascript-websites-with-Behat

/**
 * @Then /^I should see the modal "([^"]*)"$/
 */
public function iShouldSeeTheModal($title)
{
	$this->getSession()->wait(20000, '(0 === jQuery.active && 0 === jQuery(\':animated\').length)');
	$this->assertElementContainsText('#modal-from-dom .modal-header h3', $title);
	assertTrue($this->getSession()->getPage()->find('css', '#modal-from-dom')->isVisible());
}

I’ll run through this method now line-by-line:

1. We use the wait method to allow us to wait for the animation to complete. The first parameter sets 20 seconds to wait or until the following Javascript evaluates to true. We test to ensure that all Jquery ajax calls have completed, and that no elements are being animated.
2. We want to check that the heading portion of the modal dialog contains the heading text that we pass through in the step. In our test, this is “Modal Heading”. So we use a CSS selector to do this.
3. Finally, we just want to be sure that the modal dialog is actually visible on the page.

That’s it. One final change we can make is to move our Jquery wait check code into it’s own method so that we can use this in any other custom definitions we may create in future:

protected function jqueryWait($duration = 1000)
{
		$this->getSession()->wait($duration, '(0 === jQuery.active && 0 === jQuery(\':animated\').length)');
}

/**
 * @Then /^I should see the modal "([^"]*)"$/
 */
public function iShouldSeeTheModal($title)
{
	$this->jqueryWait(20000);
	$this->assertElementContainsText('#modal-from-dom .modal-header h3', $title);
	assertTrue($this->getSession()->getPage()->find('css', '#modal-from-dom')->isVisible());
}