3 namespace Drupal\Tests\system\FunctionalJavascript;
6 * Tests the off-canvas dialog functionality.
10 class OffCanvasTest extends OffCanvasTestBase {
13 * Stores to the class that should be on the last dialog.
17 * @see \Drupal\off_canvas_test\Controller\TestController::linksDisplay.
19 protected $lastDialogClass;
24 public static $modules = [
29 * Tests that non-contextual links will work with the off-canvas dialog.
31 * @dataProvider themeDataProvider
33 public function testOffCanvasLinks($theme) {
34 $this->enableTheme($theme);
35 $this->drupalGet('/off-canvas-test-links');
37 $page = $this->getSession()->getPage();
38 $web_assert = $this->assertSession();
40 // Make sure off-canvas dialog is on page when first loaded.
41 $web_assert->elementNotExists('css', '#drupal-off-canvas');
43 // Check opening and closing with two separate links.
44 // Make sure tray updates to new content.
45 // Check the first link again to make sure the empty title class is
47 foreach (['1', '2', '1'] as $link_index) {
48 $this->assertOffCanvasDialog($link_index, 'side');
49 $header_text = $this->getOffCanvasDialog()->find('css', '.ui-dialog-title')->getText();
50 if ($link_index == '2') {
51 // Check no title behavior.
52 $web_assert->elementExists('css', '.ui-dialog-empty-title');
53 $this->assertEquals(' ', $header_text);
55 $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
56 $this->assertTrue(strstr($style, 'width: 555px;') !== FALSE, 'Dialog width respected.');
57 $page->clickLink("Open side panel 1");
58 $this->waitForOffCanvasToOpen();
59 $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
60 $this->assertTrue(strstr($style, 'width: 555px;') === FALSE, 'Dialog width reset to default.');
63 // Check that header is correct.
64 $this->assertEquals("Thing $link_index", $header_text);
65 $web_assert->elementNotExists('css', '.ui-dialog-empty-title');
69 // Test the off_canvas_top tray.
70 foreach ([1, 2] as $link_index) {
71 $this->assertOffCanvasDialog($link_index, 'top');
73 $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
74 if ($link_index === 1) {
75 $this->assertTrue((bool) strstr($style, 'height: auto;'));
78 $this->assertTrue((bool) strstr($style, 'height: 421px;'));
82 // Ensure an off-canvas link opened from inside the off-canvas dialog will
84 $this->drupalGet('/off-canvas-test-links');
85 $page->clickLink('Display more links!');
86 $this->waitForOffCanvasToOpen();
87 $web_assert->linkExists('Off_canvas link!');
88 // Click off-canvas link inside off-canvas dialog
89 $page->clickLink('Off_canvas link!');
90 /* @var \Behat\Mink\Element\NodeElement $dialog */
91 $this->waitForOffCanvasToOpen();
92 $web_assert->elementTextContains('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]', 'Thing 2 says hello');
94 // Ensure an off-canvas link opened from inside the off-canvas dialog will
95 // work after another dialog has been opened.
96 $this->drupalGet('/off-canvas-test-links');
97 $page->clickLink("Open side panel 1");
98 $this->waitForOffCanvasToOpen();
99 $page->clickLink('Display more links!');
100 $this->waitForOffCanvasToOpen();
101 $web_assert->linkExists('Off_canvas link!');
102 // Click off-canvas link inside off-canvas dialog
103 $page->clickLink('Off_canvas link!');
104 /* @var \Behat\Mink\Element\NodeElement $dialog */
105 $this->waitForOffCanvasToOpen();
106 $web_assert->elementTextContains('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]', 'Thing 2 says hello');
110 * Tests the body displacement behaves differently at a narrow width.
112 public function testNarrowWidth() {
113 $narrow_width_breakpoint = 768;
116 $page = $this->getSession()->getPage();
117 $web_assert = $this->assertSession();
119 // Test the same functionality on multiple themes.
120 foreach ($this->getTestThemes() as $theme) {
121 $this->enableTheme($theme);
122 // Testing at the wider width.
123 $this->getSession()->resizeWindow($narrow_width_breakpoint + $offset, $height);
124 $this->drupalGet('/off-canvas-test-links');
125 $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')->hasAttribute('style'), 'Body not padded on wide page load.');
126 $page->clickLink("Open side panel 1");
127 $this->waitForOffCanvasToOpen();
128 // Check that the main canvas is padded when page is not narrow width and
130 $page->waitFor(10, function ($page) {
131 return $page->find('css', '.dialog-off-canvas-main-canvas')->hasAttribute('style');
133 $web_assert->elementAttributeContains('css', '.dialog-off-canvas-main-canvas', 'style', 'padding-right');
135 // Testing at the narrower width.
136 $this->getSession()->resizeWindow($narrow_width_breakpoint - $offset, $height);
137 $this->drupalGet('/off-canvas-test-links');
138 $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')->hasAttribute('style'), 'Body not padded on narrow page load.');
139 $page->clickLink("Open side panel 1");
140 $this->waitForOffCanvasToOpen();
141 $this->assertFalse($page->find('css', '.dialog-off-canvas-main-canvas')->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
146 * @param int $link_index
147 * The index of the link to test.
148 * @param string $position
149 * The position of the dialog to test.
151 protected function assertOffCanvasDialog($link_index, $position) {
152 $page = $this->getSession()->getPage();
153 $web_assert = $this->assertSession();
154 $link_text = "Open $position panel $link_index";
156 // Click the first test like that should open the page.
157 $page->clickLink($link_text);
158 if ($this->lastDialogClass) {
159 $this->waitForNoElement('.' . $this->lastDialogClass);
161 $this->waitForOffCanvasToOpen($position);
162 $this->lastDialogClass = "$position-$link_index";
164 // Check that response text is on page.
165 $web_assert->pageTextContains("Thing $link_index says hello");
166 $off_canvas_tray = $this->getOffCanvasDialog();
168 // Check that tray is visible.
169 $this->assertEquals(TRUE, $off_canvas_tray->isVisible());
171 $tray_text = $off_canvas_tray->findById('drupal-off-canvas')->getText();
172 $this->assertEquals("Thing $link_index says hello", $tray_text);