OffCanvasTest.php 6.58 KB
Newer Older
1
2
<?php

3
namespace Drupal\Tests\system\FunctionalJavascript;
4
5

/**
6
 * Tests the off-canvas dialog functionality.
7
 *
8
 * @group system
9
 */
10
class OffCanvasTest extends OffCanvasTestBase {
11

12
13
14
15
16
17
18
19
20
  /**
   * Stores to the class that should be on the last dialog.
   *
   * @var string
   *
   * @see \Drupal\off_canvas_test\Controller\TestController::linksDisplay.
   */
  protected $lastDialogClass;

21
22
23
  /**
   * {@inheritdoc}
   */
24
  public static $modules = [
25
26
    'off_canvas_test',
  ];
27
28

  /**
29
   * Tests that non-contextual links will work with the off-canvas dialog.
30
31
   *
   * @dataProvider themeDataProvider
32
   */
33
34
35
  public function testOffCanvasLinks($theme) {
    $this->enableTheme($theme);
    $this->drupalGet('/off-canvas-test-links');
36

37
38
    $page = $this->getSession()->getPage();
    $web_assert = $this->assertSession();
39

40
41
42
43
44
45
46
47
48
49
50
51
52
    // Make sure off-canvas dialog is on page when first loaded.
    $web_assert->elementNotExists('css', '#drupal-off-canvas');

    // Check opening and closing with two separate links.
    // Make sure tray updates to new content.
    // Check the first link again to make sure the empty title class is
    // removed.
    foreach (['1', '2', '1'] as $link_index) {
      $this->assertOffCanvasDialog($link_index, 'side');
      $header_text = $this->getOffCanvasDialog()->find('css', '.ui-dialog-title')->getText();
      if ($link_index == '2') {
        // Check no title behavior.
        $web_assert->elementExists('css', '.ui-dialog-empty-title');
53
        $this->assertEquals(' ', $header_text);
54
55
56
57

        $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
        $this->assertTrue(strstr($style, 'width: 555px;') !== FALSE, 'Dialog width respected.');
        $page->clickLink("Open side panel 1");
58
        $this->waitForOffCanvasToOpen();
59
60
61
62
63
64
65
66
67
68
69
70
71
        $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
        $this->assertTrue(strstr($style, 'width: 555px;') === FALSE, 'Dialog width reset to default.');
      }
      else {
        // Check that header is correct.
        $this->assertEquals("Thing $link_index", $header_text);
        $web_assert->elementNotExists('css', '.ui-dialog-empty-title');
      }
    }

    // Test the off_canvas_top tray.
    foreach ([1, 2] as $link_index) {
      $this->assertOffCanvasDialog($link_index, 'top');
72

73
74
75
76
77
78
      $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
      if ($link_index === 1) {
        $this->assertTrue((bool) strstr($style, 'height: auto;'));
      }
      else {
        $this->assertTrue((bool) strstr($style, 'height: 421px;'));
79
80
      }
    }
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

    // Ensure an off-canvas link opened from inside the off-canvas dialog will
    // work.
    $this->drupalGet('/off-canvas-test-links');
    $page->clickLink('Display more links!');
    $this->waitForOffCanvasToOpen();
    $web_assert->linkExists('Off_canvas link!');
    // Click off-canvas link inside off-canvas dialog
    $page->clickLink('Off_canvas link!');
    /*  @var \Behat\Mink\Element\NodeElement $dialog */
    $this->waitForOffCanvasToOpen();
    $web_assert->elementTextContains('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]', 'Thing 2 says hello');

    // Ensure an off-canvas link opened from inside the off-canvas dialog will
    // work after another dialog has been opened.
    $this->drupalGet('/off-canvas-test-links');
    $page->clickLink("Open side panel 1");
    $this->waitForOffCanvasToOpen();
    $page->clickLink('Display more links!');
    $this->waitForOffCanvasToOpen();
    $web_assert->linkExists('Off_canvas link!');
    // Click off-canvas link inside off-canvas dialog
    $page->clickLink('Off_canvas link!');
    /*  @var \Behat\Mink\Element\NodeElement $dialog */
    $this->waitForOffCanvasToOpen();
    $web_assert->elementTextContains('css', '.ui-dialog[aria-describedby="drupal-off-canvas"]', 'Thing 2 says hello');
107
108
  }

109
110
111
112
113
114
115
116
117
118
119
  /**
   * Tests the body displacement behaves differently at a narrow width.
   */
  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.
120
    foreach ($this->getTestThemes() as $theme) {
121
122
123
      $this->enableTheme($theme);
      // Testing at the wider width.
      $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
128
129
      $this->waitForOffCanvasToOpen();
      // Check that the main canvas is padded when page is not narrow width and
      // tray is open.
130
131
132
      $page->waitFor(10, function ($page) {
        return $page->find('css', '.dialog-off-canvas-main-canvas')->hasAttribute('style');
      });
133
      $web_assert->elementAttributeContains('css', '.dialog-off-canvas-main-canvas', 'style', 'padding-right');
134
135
136

      // Testing at the narrower width.
      $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.');
142
143
144
    }
  }

145
146
147
148
149
150
151
152
153
154
155
156
157
158
  /**
   * @param int $link_index
   *   The index of the link to test.
   * @param string $position
   *   The position of the dialog to test.
   */
  protected function assertOffCanvasDialog($link_index, $position) {
    $page = $this->getSession()->getPage();
    $web_assert = $this->assertSession();
    $link_text = "Open $position panel $link_index";

    // Click the first test like that should open the page.
    $page->clickLink($link_text);
    if ($this->lastDialogClass) {
159
      $web_assert->assertNoElementAfterWait('css', '.' . $this->lastDialogClass);
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
    }
    $this->waitForOffCanvasToOpen($position);
    $this->lastDialogClass = "$position-$link_index";

    // Check that response text is on page.
    $web_assert->pageTextContains("Thing $link_index says hello");
    $off_canvas_tray = $this->getOffCanvasDialog();

    // Check that tray is visible.
    $this->assertEquals(TRUE, $off_canvas_tray->isVisible());

    $tray_text = $off_canvas_tray->findById('drupal-off-canvas')->getText();
    $this->assertEquals("Thing $link_index says hello", $tray_text);
  }

175
}