public function OffCanvasTest::testNarrowWidth in Drupal 9
Same name and namespace in other branches
- 8 core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php \Drupal\Tests\system\FunctionalJavascript\OffCanvasTest::testNarrowWidth()
Tests the body displacement behaves differently at a narrow width.
File
- core/
modules/ system/ tests/ src/ FunctionalJavascript/ OffCanvasTest.php, line 115
Class
- OffCanvasTest
- Tests the off-canvas dialog functionality.
Namespace
Drupal\Tests\system\FunctionalJavascriptCode
public function testNarrowWidth() {
$narrow_width_breakpoint = 768;
$offset = 20;
$height = 800;
$page = $this
->getSession()
->getPage();
$web_assert = $this
->assertSession();
// Test the same functionality on multiple themes.
foreach ($this
->getTestThemes() as $theme) {
$this
->enableTheme($theme);
// Testing at the wider width.
$this
->getSession()
->resizeWindow($narrow_width_breakpoint + $offset, $height);
$this
->drupalGet('/off-canvas-test-links');
$this
->assertFalse($page
->find('css', '.dialog-off-canvas-main-canvas')
->hasAttribute('style'), 'Body not padded on wide page load.');
$page
->clickLink("Open side panel 1");
$this
->waitForOffCanvasToOpen();
// Check that the main canvas is padded when page is not narrow width and
// tray is open.
$page
->waitFor(10, function ($page) {
return $page
->find('css', '.dialog-off-canvas-main-canvas')
->hasAttribute('style');
});
$web_assert
->elementAttributeContains('css', '.dialog-off-canvas-main-canvas', 'style', 'padding-right');
// Testing at the narrower width.
$this
->getSession()
->resizeWindow($narrow_width_breakpoint - $offset, $height);
$this
->drupalGet('/off-canvas-test-links');
$this
->assertFalse($page
->find('css', '.dialog-off-canvas-main-canvas')
->hasAttribute('style'), 'Body not padded on narrow page load.');
$page
->clickLink("Open side panel 1");
$this
->waitForOffCanvasToOpen();
$this
->assertFalse($page
->find('css', '.dialog-off-canvas-main-canvas')
->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
}
}