diff --git a/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_click_sort_ajax.yml b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_click_sort_ajax.yml
new file mode 100644
index 000000000000..514655f9f3b8
--- /dev/null
+++ b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_click_sort_ajax.yml
@@ -0,0 +1,65 @@
+langcode: en
+status: true
+dependencies: { }
+id: test_click_sort_ajax
+module: views
+description: ''
+tag: ''
+base_table: views_test_data
+base_field: nid
+core: '8'
+display:
+ default:
+ display_options:
+ use_ajax: true
+ fields:
+ id:
+ id: id
+ table: views_test_data
+ field: id
+ label: ID
+ plugin_id: numeric
+ name:
+ id: name
+ table: views_test_data
+ field: name
+ label: Name
+ plugin_id: string
+ created:
+ id: created
+ table: views_test_data
+ field: created
+ label: created
+ plugin_id: field
+ type: timestamp
+ settings:
+ date_format: medium
+ custom_date_format: ''
+ timezone: ''
+ access:
+ type: none
+ cache:
+ type: tag
+ style:
+ type: table
+ options:
+ info:
+ id:
+ sortable: true
+ default_sort_order: asc
+ name:
+ sortable: true
+ default_sort_order: desc
+ created:
+ sortable: false
+ display_plugin: default
+ display_title: Master
+ id: default
+ position: 0
+ page_1:
+ display_options:
+ path: test_click_sort
+ display_plugin: page
+ display_title: Page
+ id: page_1
+ position: 0
diff --git a/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_mini_pager_ajax.yml b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_mini_pager_ajax.yml
new file mode 100644
index 000000000000..c49ef340e1a0
--- /dev/null
+++ b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_mini_pager_ajax.yml
@@ -0,0 +1,88 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - node
+ - user
+id: test_mini_pager_ajax
+label: test_mini_pager
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+core: 8.x
+display:
+ default:
+ display_plugin: default
+ id: default
+ display_title: Master
+ position: null
+ display_options:
+ use_ajax: true
+ access:
+ type: perm
+ cache:
+ type: tag
+ query:
+ type: views_query
+ exposed_form:
+ type: basic
+ pager:
+ type: mini
+ options:
+ items_per_page: 3
+ offset: 0
+ id: 0
+ total_pages: null
+ tags:
+ previous: '‹‹ test'
+ next: '›› test'
+ expose:
+ items_per_page: false
+ items_per_page_label: 'Items per page'
+ items_per_page_options: '5, 10, 25, 50'
+ items_per_page_options_all: false
+ items_per_page_options_all_label: '- All -'
+ offset: false
+ offset_label: Offset
+ style:
+ type: default
+ row:
+ type: 'entity:node'
+ options:
+ view_mode: teaser
+ fields:
+ title:
+ id: title
+ table: node_field_data
+ field: title
+ label: ''
+ alter:
+ alter_text: false
+ make_link: false
+ absolute: false
+ trim: false
+ word_boundary: false
+ ellipsis: false
+ strip_tags: false
+ html: false
+ hide_empty: false
+ empty_zero: false
+ plugin_id: field
+ entity_type: node
+ entity_field: title
+ filters: { }
+ sorts:
+ nid:
+ id: nid
+ table: node_field_data
+ field: nid
+ plugin_id: standard
+ order: ASC
+ entity_type: node
+ entity_field: nid
+ title: test_mini_pager
+ filter_groups:
+ operator: AND
+ groups: { }
diff --git a/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_pager_full_ajax.yml b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_pager_full_ajax.yml
new file mode 100644
index 000000000000..31b4a26ac352
--- /dev/null
+++ b/core/modules/views/tests/modules/views_test_config/test_views/views.view.test_pager_full_ajax.yml
@@ -0,0 +1,37 @@
+langcode: en
+status: true
+dependencies:
+ module:
+ - node
+id: test_pager_full_ajax
+label: ''
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+core: '8'
+display:
+ default:
+ display_options:
+ use_ajax: true
+ access:
+ type: none
+ cache:
+ type: tag
+ exposed_form:
+ type: basic
+ pager:
+ options:
+ id: 0
+ items_per_page: 5
+ offset: 0
+ type: full
+ style:
+ type: default
+ row:
+ type: 'entity:node'
+ display_plugin: default
+ display_title: Master
+ id: default
+ position: 0
diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php
deleted file mode 100644
index c8bd7bd14c2c..000000000000
--- a/core/modules/views_ui/src/Tests/PreviewTest.php
+++ /dev/null
@@ -1,386 +0,0 @@
-install(['contextual']);
- $this->resetAll();
-
- $this->drupalGet('admin/structure/views/view/test_preview/edit');
- $this->assertResponse(200);
- $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
-
- $elements = $this->xpath('//div[@id="views-live-preview"]//ul[contains(@class, :ul-class)]/li[contains(@class, :li-class)]', [':ul-class' => 'contextual-links', ':li-class' => 'filter-add']);
- $this->assertEqual(count($elements), 1, 'The contextual link to add a new field is shown.');
-
- $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
-
- // Test that area text and exposed filters are present and rendered.
- $this->assertFieldByName('id', NULL, 'ID exposed filter field found.');
- $this->assertText('Test header text', 'Rendered header text found');
- $this->assertText('Test footer text', 'Rendered footer text found.');
- $this->assertText('Test empty text', 'Rendered empty text found.');
- }
-
- /**
- * Tests arguments in the preview form.
- */
- public function testPreviewUI() {
- $this->drupalGet('admin/structure/views/view/test_preview/edit');
- $this->assertResponse(200);
-
- $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
-
- $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
- $this->assertEqual(count($elements), 5);
-
- // Filter just the first result.
- $this->drupalPostForm(NULL, $edit = ['view_args' => '1'], t('Update preview'));
-
- $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
- $this->assertEqual(count($elements), 1);
-
- // Filter for no results.
- $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
-
- $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
- $this->assertEqual(count($elements), 0);
-
- // Test that area text and exposed filters are present and rendered.
- $this->assertFieldByName('id', NULL, 'ID exposed filter field found.');
- $this->assertText('Test header text', 'Rendered header text found');
- $this->assertText('Test footer text', 'Rendered footer text found.');
- $this->assertText('Test empty text', 'Rendered empty text found.');
-
- // Test feed preview.
- $view = [];
- $view['label'] = $this->randomMachineName(16);
- $view['id'] = strtolower($this->randomMachineName(16));
- $view['page[create]'] = 1;
- $view['page[title]'] = $this->randomMachineName(16);
- $view['page[path]'] = $this->randomMachineName(16);
- $view['page[feed]'] = 1;
- $view['page[feed_properties][path]'] = $this->randomMachineName(16);
- $this->drupalPostForm('admin/structure/views/add', $view, t('Save and edit'));
- $this->clickLink(t('Feed'));
- $this->drupalPostForm(NULL, [], t('Update preview'));
- $result = $this->xpath('//div[@id="views-live-preview"]/pre');
- $this->assertTrue(strpos($result[0], '' . $view['page[title]'] . ''), 'The Feed RSS preview was rendered.');
-
- // Test the non-default UI display options.
- // Statistics only, no query.
- $settings = \Drupal::configFactory()->getEditable('views.settings');
- $settings->set('ui.show.performance_statistics', TRUE)->save();
- $this->drupalGet('admin/structure/views/view/test_preview/edit');
- $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
- $this->assertText(t('Query build time'));
- $this->assertText(t('Query execute time'));
- $this->assertText(t('View render time'));
- $this->assertNoRaw('Query');
-
- // Statistics and query.
- $settings->set('ui.show.sql_query.enabled', TRUE)->save();
- $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
- $this->assertText(t('Query build time'));
- $this->assertText(t('Query execute time'));
- $this->assertText(t('View render time'));
- $this->assertRaw('Query');
- $query_string = <<assertEscaped($query_string);
-
- // Test that the statistics and query are rendered above the preview.
- $this->assertTrue(strpos($this->getRawContent(), 'views-query-info') < strpos($this->getRawContent(), 'view-test-preview'), 'Statistics shown above the preview.');
-
- // Test that statistics and query rendered below the preview.
- $settings->set('ui.show.sql_query.where', 'below')->save();
- $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
- $this->assertTrue(strpos($this->getRawContent(), 'view-test-preview') < strpos($this->getRawContent(), 'views-query-info'), 'Statistics shown below the preview.');
-
- // Test that the preview title isn't double escaped.
- $this->drupalPostForm("admin/structure/views/nojs/display/test_preview/default/title", $edit = ['title' => 'Double & escaped'], t('Apply'));
- $this->drupalPostForm(NULL, [], t('Update preview'));
- $elements = $this->xpath('//div[@id="views-live-preview"]/div[contains(@class, views-query-info)]//td[text()=:text]', [':text' => t('Double & escaped')]);
- $this->assertEqual(1, count($elements));
- }
-
- /**
- * Tests the taxonomy term preview AJAX.
- *
- * This tests a specific regression in the taxonomy term view preview.
- *
- * @see https://www.drupal.org/node/2452659
- */
- public function testTaxonomyAJAX() {
- \Drupal::service('module_installer')->install(['taxonomy']);
- $this->getPreviewAJAX('taxonomy_term', 'page_1', 0);
- }
-
- /**
- * Tests pagers in the preview form.
- */
- public function testPreviewWithPagersUI() {
-
- // Create 11 nodes and make sure that everyone is returned.
- $this->drupalCreateContentType(['type' => 'page']);
- for ($i = 0; $i < 11; $i++) {
- $this->drupalCreateNode();
- }
-
- // Test Full Pager.
- $this->getPreviewAJAX('test_pager_full', 'default', 5);
-
- // Test that the pager is present and rendered.
- $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
- $this->assertTrue(!empty($elements), 'Full pager found.');
-
- // Verify elements and links to pages.
- // We expect to find 5 elements: current page == 1, links to pages 2 and
- // and 3, links to 'next >' and 'last >>' pages.
- $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
- $this->assertTrue($elements[0]->a, 'Element for current page has link.');
-
- $this->assertClass($elements[1], 'pager__item', 'Element for page 2 has .pager__item class.');
- $this->assertTrue($elements[1]->a, 'Link to page 2 found.');
-
- $this->assertClass($elements[2], 'pager__item', 'Element for page 3 has .pager__item class.');
- $this->assertTrue($elements[2]->a, 'Link to page 3 found.');
-
- $this->assertClass($elements[3], 'pager__item--next', 'Element for next page has .pager__item--next class.');
- $this->assertTrue($elements[3]->a, 'Link to next page found.');
-
- $this->assertClass($elements[4], 'pager__item--last', 'Element for last page has .pager__item--last class.');
- $this->assertTrue($elements[4]->a, 'Link to last page found.');
-
- // Navigate to next page.
- $elements = $this->xpath('//li[contains(@class, :class)]/a', [':class' => 'pager__item--next']);
- $this->clickPreviewLinkAJAX($elements[0]['href'], 5);
-
- // Test that the pager is present and rendered.
- $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
- $this->assertTrue(!empty($elements), 'Full pager found.');
-
- // Verify elements and links to pages.
- // We expect to find 7 elements: links to '<< first' and '< previous'
- // pages, link to page 1, current page == 2, link to page 3 and links
- // to 'next >' and 'last >>' pages.
- $this->assertClass($elements[0], 'pager__item--first', 'Element for first page has .pager__item--first class.');
- $this->assertTrue($elements[0]->a, 'Link to first page found.');
-
- $this->assertClass($elements[1], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
- $this->assertTrue($elements[1]->a, 'Link to previous page found.');
-
- $this->assertClass($elements[2], 'pager__item', 'Element for page 1 has .pager__item class.');
- $this->assertTrue($elements[2]->a, 'Link to page 1 found.');
-
- $this->assertClass($elements[3], 'is-active', 'Element for current page has .is-active class.');
- $this->assertTrue($elements[3]->a, 'Element for current page has link.');
-
- $this->assertClass($elements[4], 'pager__item', 'Element for page 3 has .pager__item class.');
- $this->assertTrue($elements[4]->a, 'Link to page 3 found.');
-
- $this->assertClass($elements[5], 'pager__item--next', 'Element for next page has .pager__item--next class.');
- $this->assertTrue($elements[5]->a, 'Link to next page found.');
-
- $this->assertClass($elements[6], 'pager__item--last', 'Element for last page has .pager__item--last class.');
- $this->assertTrue($elements[6]->a, 'Link to last page found.');
-
- // Test Mini Pager.
- $this->getPreviewAJAX('test_mini_pager', 'default', 3);
-
- // Test that the pager is present and rendered.
- $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
- $this->assertTrue(!empty($elements), 'Mini pager found.');
-
- // Verify elements and links to pages.
- // We expect to find current pages element with no link, next page element
- // with a link, and not to find previous page element.
- $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
-
- $this->assertClass($elements[1], 'pager__item--next', 'Element for next page has .pager__item--next class.');
- $this->assertTrue($elements[1]->a, 'Link to next page found.');
-
- // Navigate to next page.
- $elements = $this->xpath('//li[contains(@class, :class)]/a', [':class' => 'pager__item--next']);
- $this->clickPreviewLinkAJAX($elements[0]['href'], 3);
-
- // Test that the pager is present and rendered.
- $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
- $this->assertTrue(!empty($elements), 'Mini pager found.');
-
- // Verify elements and links to pages.
- // We expect to find 3 elements: previous page with a link, current
- // page with no link, and next page with a link.
- $this->assertClass($elements[0], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
- $this->assertTrue($elements[0]->a, 'Link to previous page found.');
-
- $this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.');
- $this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.');
-
- $this->assertClass($elements[2], 'pager__item--next', 'Element for next page has .pager__item--next class.');
- $this->assertTrue($elements[2]->a, 'Link to next page found.');
- }
-
- /**
- * Tests the additional information query info area.
- */
- public function testPreviewAdditionalInfo() {
- \Drupal::service('module_installer')->install(['views_ui_test']);
- $this->resetAll();
-
- $this->drupalGet('admin/structure/views/view/test_preview/edit');
- $this->assertResponse(200);
-
- $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
-
- // Check for implementation of hook_views_preview_info_alter().
- // @see views_ui_test.module
- $elements = $this->xpath('//div[@id="views-live-preview"]/div[contains(@class, views-query-info)]//td[text()=:text]', [':text' => t('Test row count')]);
- $this->assertEqual(count($elements), 1, 'Views Query Preview Info area altered.');
- // Check that additional assets are attached.
- $this->assertTrue(strpos($this->getDrupalSettings()['ajaxPageState']['libraries'], 'views_ui_test/views_ui_test.test') !== FALSE, 'Attached library found.');
- $this->assertRaw('css/views_ui_test.test.css', 'Attached CSS asset found.');
- }
-
- /**
- * Tests view validation error messages in the preview.
- */
- public function testPreviewError() {
- $this->drupalGet('admin/structure/views/view/test_preview_error/edit');
- $this->assertResponse(200);
-
- $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
-
- $this->assertText('Unable to preview due to validation errors.', 'Preview error text found.');
- }
-
- /**
- * Tests the link to sort in the preview form.
- */
- public function testPreviewSortLink() {
-
- // Get the preview.
- $this->getPreviewAJAX('test_click_sort', 'page_1', 0);
-
- // Test that the header label is present.
- $elements = $this->xpath('//th[contains(@class, :class)]/a', [':class' => 'views-field views-field-name']);
- $this->assertTrue(!empty($elements), 'The header label is present.');
-
- // Verify link.
- $this->assertLinkByHref('preview/page_1?_wrapper_format=drupal_ajax&order=name&sort=desc', 0, 'The output URL is as expected.');
-
- // Click link to sort.
- $this->clickPreviewLinkAJAX($elements[0]['href'], 0);
-
- // Test that the header label is present.
- $elements = $this->xpath('//th[contains(@class, :class)]/a', [':class' => 'views-field views-field-name is-active']);
- $this->assertTrue(!empty($elements), 'The header label is present.');
-
- // Verify link.
- $this->assertLinkByHref('preview/page_1?_wrapper_format=drupal_ajax&order=name&sort=asc', 0, 'The output URL is as expected.');
- }
-
- /**
- * Get the preview form and force an AJAX preview update.
- *
- * @param string $view_name
- * The view to test.
- * @param string $panel_id
- * The view panel to test.
- * @param int $row_count
- * The expected number of rows in the preview.
- */
- protected function getPreviewAJAX($view_name, $panel_id, $row_count) {
- $this->drupalGet('admin/structure/views/view/' . $view_name . '/preview/' . $panel_id);
- $result = $this->drupalPostAjaxForm(NULL, [], ['op' => t('Update preview')]);
- $this->assertPreviewAJAX($result, $row_count);
- }
-
- /**
- * Mimic clicking on a preview link.
- *
- * @param string $url
- * The url to navigate to.
- * @param int $row_count
- * The expected number of rows in the preview.
- */
- protected function clickPreviewLinkAJAX($url, $row_count) {
- $content = $this->content;
- $drupal_settings = $this->drupalSettings;
- $ajax_settings = [
- 'wrapper' => 'views-preview-wrapper',
- 'method' => 'replaceWith',
- ];
- $url = $this->getAbsoluteUrl($url);
- $post = ['js' => 'true'] + $this->getAjaxPageStatePostData();
- $result = Json::decode($this->drupalPost($url, '', $post, ['query' => [MainContentViewSubscriber::WRAPPER_FORMAT => 'drupal_ajax']]));
- if (!empty($result)) {
- $this->drupalProcessAjaxResponse($content, $result, $ajax_settings, $drupal_settings);
- }
- $this->assertPreviewAJAX($result, $row_count);
- }
-
- /**
- * Assert that the AJAX response contains expected data.
- *
- * @param array $result
- * An array of AJAX commands.
- * @param int $row_count
- * The expected number of rows in the preview.
- */
- protected function assertPreviewAJAX($result, $row_count) {
- // Has AJAX callback replied with an insert command? If so, we can
- // assume that the page content was updated with AJAX returned data.
- $result_commands = [];
- foreach ($result as $command) {
- $result_commands[$command['command']] = $command;
- }
- $this->assertTrue(isset($result_commands['insert']), 'AJAX insert command received.');
-
- // Test if preview contains the expected number of rows.
- $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
- $this->assertEqual(count($elements), $row_count, 'Expected items found on page.');
- }
-
- /**
- * Asserts that an element has a given class.
- *
- * @param \SimpleXMLElement $element
- * The element to test.
- * @param string $class
- * The class to assert.
- * @param string $message
- * (optional) A verbose message to output.
- */
- protected function assertClass(\SimpleXMLElement $element, $class, $message = NULL) {
- if (!isset($message)) {
- $message = "Class .$class found.";
- }
- $this->assertTrue(strpos($element['class'], $class) !== FALSE, $message);
- }
-
-}
diff --git a/core/modules/views_ui/tests/src/Functional/PreviewTest.php b/core/modules/views_ui/tests/src/Functional/PreviewTest.php
new file mode 100644
index 000000000000..b76e464c8c34
--- /dev/null
+++ b/core/modules/views_ui/tests/src/Functional/PreviewTest.php
@@ -0,0 +1,161 @@
+install(['contextual']);
+ $this->resetAll();
+
+ $this->drupalGet('admin/structure/views/view/test_preview/edit');
+ $this->assertResponse(200);
+ $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
+
+ $elements = $this->xpath('//div[@id="views-live-preview"]//ul[contains(@class, :ul-class)]/li[contains(@class, :li-class)]', [':ul-class' => 'contextual-links', ':li-class' => 'filter-add']);
+ $this->assertEqual(count($elements), 1, 'The contextual link to add a new field is shown.');
+
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
+
+ // Test that area text and exposed filters are present and rendered.
+ $this->assertFieldByName('id', NULL, 'ID exposed filter field found.');
+ $this->assertText('Test header text', 'Rendered header text found');
+ $this->assertText('Test footer text', 'Rendered footer text found.');
+ $this->assertText('Test empty text', 'Rendered empty text found.');
+ }
+
+ /**
+ * Tests arguments in the preview form.
+ */
+ public function testPreviewUI() {
+ $this->drupalGet('admin/structure/views/view/test_preview/edit');
+ $this->assertResponse(200);
+
+ $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
+
+ $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
+ $this->assertEqual(count($elements), 5);
+
+ // Filter just the first result.
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '1'], t('Update preview'));
+
+ $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
+ $this->assertEqual(count($elements), 1);
+
+ // Filter for no results.
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
+
+ $elements = $this->xpath('//div[@class = "view-content"]/div[contains(@class, views-row)]');
+ $this->assertEqual(count($elements), 0);
+
+ // Test that area text and exposed filters are present and rendered.
+ $this->assertFieldByName('id', NULL, 'ID exposed filter field found.');
+ $this->assertText('Test header text', 'Rendered header text found');
+ $this->assertText('Test footer text', 'Rendered footer text found.');
+ $this->assertText('Test empty text', 'Rendered empty text found.');
+
+ // Test feed preview.
+ $view = [];
+ $view['label'] = $this->randomMachineName(16);
+ $view['id'] = strtolower($this->randomMachineName(16));
+ $view['page[create]'] = 1;
+ $view['page[title]'] = $this->randomMachineName(16);
+ $view['page[path]'] = $this->randomMachineName(16);
+ $view['page[feed]'] = 1;
+ $view['page[feed_properties][path]'] = $this->randomMachineName(16);
+ $this->drupalPostForm('admin/structure/views/add', $view, t('Save and edit'));
+ $this->clickLink(t('Feed'));
+ $this->drupalPostForm(NULL, [], t('Update preview'));
+ $result = $this->xpath('//div[@id="views-live-preview"]/pre');
+ $this->assertTrue(strpos($result[0]->getText(), '' . $view['page[title]'] . ''), 'The Feed RSS preview was rendered.');
+
+ // Test the non-default UI display options.
+ // Statistics only, no query.
+ $settings = \Drupal::configFactory()->getEditable('views.settings');
+ $settings->set('ui.show.performance_statistics', TRUE)->save();
+ $this->drupalGet('admin/structure/views/view/test_preview/edit');
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
+ $this->assertText(t('Query build time'));
+ $this->assertText(t('Query execute time'));
+ $this->assertText(t('View render time'));
+ $this->assertNoRaw('Query');
+
+ // Statistics and query.
+ $settings->set('ui.show.sql_query.enabled', TRUE)->save();
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
+ $this->assertText(t('Query build time'));
+ $this->assertText(t('Query execute time'));
+ $this->assertText(t('View render time'));
+ $this->assertRaw('Query');
+ $query_string = <<assertEscaped($query_string);
+
+ // Test that the statistics and query are rendered above the preview.
+ $this->assertTrue(strpos($this->getSession()->getPage()->getContent(), 'views-query-info') < strpos($this->getSession()->getPage()->getContent(), 'view-test-preview'), 'Statistics shown above the preview.');
+
+ // Test that statistics and query rendered below the preview.
+ $settings->set('ui.show.sql_query.where', 'below')->save();
+ $this->drupalPostForm(NULL, $edit = ['view_args' => '100'], t('Update preview'));
+ $this->assertTrue(strpos($this->getSession()->getPage()->getContent(), 'view-test-preview') < strpos($this->getSession()->getPage()->getContent(), 'views-query-info'), 'Statistics shown below the preview.');
+
+ // Test that the preview title isn't double escaped.
+ $this->drupalPostForm("admin/structure/views/nojs/display/test_preview/default/title", $edit = ['title' => 'Double & escaped'], t('Apply'));
+ $this->drupalPostForm(NULL, [], t('Update preview'));
+ $elements = $this->xpath('//div[@id="views-live-preview"]/div[contains(@class, views-query-info)]//td[text()=:text]', [':text' => 'Double & escaped']);
+ $this->assertEqual(1, count($elements));
+ }
+
+ /**
+ * Tests the additional information query info area.
+ */
+ public function testPreviewAdditionalInfo() {
+ \Drupal::service('module_installer')->install(['views_ui_test']);
+ $this->resetAll();
+
+ $this->drupalGet('admin/structure/views/view/test_preview/edit');
+ $this->assertResponse(200);
+
+ $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
+
+ // Check for implementation of hook_views_preview_info_alter().
+ // @see views_ui_test.module
+ $elements = $this->xpath('//div[@id="views-live-preview"]/div[contains(@class, views-query-info)]//td[text()=:text]', [':text' => 'Test row count']);
+ $this->assertEqual(count($elements), 1, 'Views Query Preview Info area altered.');
+ // Check that additional assets are attached.
+ $this->assertTrue(strpos($this->getDrupalSettings()['ajaxPageState']['libraries'], 'views_ui_test/views_ui_test.test') !== FALSE, 'Attached library found.');
+ $this->assertRaw('css/views_ui_test.test.css', 'Attached CSS asset found.');
+ }
+
+ /**
+ * Tests view validation error messages in the preview.
+ */
+ public function testPreviewError() {
+ $this->drupalGet('admin/structure/views/view/test_preview_error/edit');
+ $this->assertResponse(200);
+
+ $this->drupalPostForm(NULL, $edit = [], t('Update preview'));
+
+ $this->assertText('Unable to preview due to validation errors.', 'Preview error text found.');
+ }
+
+}
diff --git a/core/modules/views_ui/tests/src/FunctionalJavascript/PreviewTest.php b/core/modules/views_ui/tests/src/FunctionalJavascript/PreviewTest.php
new file mode 100644
index 000000000000..489a3748df44
--- /dev/null
+++ b/core/modules/views_ui/tests/src/FunctionalJavascript/PreviewTest.php
@@ -0,0 +1,304 @@
+enableViewsTestModule();
+
+ $admin_user = $this->drupalCreateUser([
+ 'administer site configuration',
+ 'administer views',
+ 'administer nodes',
+ 'access content overview',
+ ]);
+
+ // Disable automatic live preview to make the sequence of calls clearer.
+ \Drupal::configFactory()->getEditable('views.settings')->set('ui.always_live_preview', FALSE)->save();
+ $this->drupalLogin($admin_user);
+ }
+
+ /**
+ * Sets up the views_test_data.module.
+ *
+ * Because the schema of views_test_data.module is dependent on the test
+ * using it, it cannot be enabled normally.
+ */
+ protected function enableViewsTestModule() {
+ // Define the schema and views data variable before enabling the test module.
+ \Drupal::state()->set('views_test_data_schema', $this->schemaDefinition());
+ \Drupal::state()->set('views_test_data_views_data', $this->viewsData());
+
+ \Drupal::service('module_installer')->install(['views_test_data']);
+ $this->resetAll();
+ $this->rebuildContainer();
+ $this->container->get('module_handler')->reload();
+
+ // Load the test dataset.
+ $data_set = $this->dataSet();
+ $query = Database::getConnection()->insert('views_test_data')
+ ->fields(array_keys($data_set[0]));
+ foreach ($data_set as $record) {
+ $query->values($record);
+ }
+ $query->execute();
+ }
+
+ /**
+ * Returns the schema definition.
+ *
+ * @internal
+ */
+ protected function schemaDefinition() {
+ return ViewTestData::schemaDefinition();
+ }
+
+ /**
+ * Returns the views data definition.
+ */
+ protected function viewsData() {
+ return ViewTestData::viewsData();
+ }
+
+ /**
+ * Returns a very simple test dataset.
+ */
+ protected function dataSet() {
+ return ViewTestData::dataSet();
+ }
+
+ /**
+ * Tests the taxonomy term preview AJAX.
+ *
+ * This tests a specific regression in the taxonomy term view preview.
+ *
+ * @see https://www.drupal.org/node/2452659
+ */
+ public function testTaxonomyAJAX() {
+ \Drupal::service('module_installer')->install(['taxonomy']);
+ $this->getPreviewAJAX('taxonomy_term', 'page_1', 0);
+ }
+
+ /**
+ * Tests pagers in the preview form.
+ */
+ public function testPreviewWithPagersUI() {
+ // Create 11 nodes and make sure that everyone is returned.
+ $this->drupalCreateContentType(['type' => 'page']);
+ for ($i = 0; $i < 11; $i++) {
+ $this->drupalCreateNode();
+ }
+
+ // Test Full Pager.
+ $this->getPreviewAJAX('test_pager_full_ajax', 'default', 5);
+
+ // Test that the pager is present and rendered.
+ $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
+ $this->assertTrue(!empty($elements), 'Full pager found.');
+
+ // Verify elements and links to pages.
+ // We expect to find 5 elements: current page == 1, links to pages 2 and
+ // and 3, links to 'next >' and 'last >>' pages.
+ $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
+ $this->assertTrue($elements[0]->find('css', 'a'), 'Element for current page has link.');
+
+ $this->assertClass($elements[1], 'pager__item', 'Element for page 2 has .pager__item class.');
+ $this->assertTrue($elements[1]->find('css', 'a'), 'Link to page 2 found.');
+
+ $this->assertClass($elements[2], 'pager__item', 'Element for page 3 has .pager__item class.');
+ $this->assertTrue($elements[2]->find('css', 'a'), 'Link to page 3 found.');
+
+ $this->assertClass($elements[3], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+ $this->assertTrue($elements[3]->find('css', 'a'), 'Link to next page found.');
+
+ $this->assertClass($elements[4], 'pager__item--last', 'Element for last page has .pager__item--last class.');
+ $this->assertTrue($elements[4]->find('css', 'a'), 'Link to last page found.');
+
+ // Navigate to next page.
+ $elements = $this->xpath('//li[contains(@class, :class)]/a', [':class' => 'pager__item--next']);
+ $this->clickPreviewLinkAJAX($elements[0], 5);
+
+ // Test that the pager is present and rendered.
+ $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
+ $this->assertTrue(!empty($elements), 'Full pager found.');
+
+ // Verify elements and links to pages.
+ // We expect to find 7 elements: links to '<< first' and '< previous'
+ // pages, link to page 1, current page == 2, link to page 3 and links
+ // to 'next >' and 'last >>' pages.
+ $this->assertClass($elements[0], 'pager__item--first', 'Element for first page has .pager__item--first class.');
+ $this->assertTrue($elements[0]->find('css', 'a'), 'Link to first page found.');
+
+ $this->assertClass($elements[1], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
+ $this->assertTrue($elements[1]->find('css', 'a'), 'Link to previous page found.');
+
+ $this->assertClass($elements[2], 'pager__item', 'Element for page 1 has .pager__item class.');
+ $this->assertTrue($elements[2]->find('css', 'a'), 'Link to page 1 found.');
+
+ $this->assertClass($elements[3], 'is-active', 'Element for current page has .is-active class.');
+ $this->assertTrue($elements[3]->find('css', 'a'), 'Element for current page has link.');
+
+ $this->assertClass($elements[4], 'pager__item', 'Element for page 3 has .pager__item class.');
+ $this->assertTrue($elements[4]->find('css', 'a'), 'Link to page 3 found.');
+
+ $this->assertClass($elements[5], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+ $this->assertTrue($elements[5]->find('css', 'a'), 'Link to next page found.');
+
+ $this->assertClass($elements[6], 'pager__item--last', 'Element for last page has .pager__item--last class.');
+ $this->assertTrue($elements[6]->find('css', 'a'), 'Link to last page found.');
+
+ // Test Mini Pager.
+ $this->getPreviewAJAX('test_mini_pager_ajax', 'default', 3);
+
+ // Test that the pager is present and rendered.
+ $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
+ $this->assertTrue(!empty($elements), 'Mini pager found.');
+
+ // Verify elements and links to pages.
+ // We expect to find current pages element with no link, next page element
+ // with a link, and not to find previous page element.
+ $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
+
+ $this->assertClass($elements[1], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+ $this->assertTrue($elements[1]->find('css', 'a'), 'Link to next page found.');
+
+ // Navigate to next page.
+ $elements = $this->xpath('//li[contains(@class, :class)]/a', [':class' => 'pager__item--next']);
+ $this->clickPreviewLinkAJAX($elements[0], 3);
+
+ // Test that the pager is present and rendered.
+ $elements = $this->xpath('//ul[contains(@class, :class)]/li', [':class' => 'pager__items']);
+ $this->assertTrue(!empty($elements), 'Mini pager found.');
+
+ // Verify elements and links to pages.
+ // We expect to find 3 elements: previous page with a link, current
+ // page with no link, and next page with a link.
+ $this->assertClass($elements[0], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
+ $this->assertTrue($elements[0]->find('css', 'a'), 'Link to previous page found.');
+
+ $this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.');
+ $this->assertEmpty($elements[1]->find('css', 'a'), 'Element for current page has no link.');
+
+ $this->assertClass($elements[2], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+ $this->assertTrue($elements[2]->find('css', 'a'), 'Link to next page found.');
+ }
+
+ /**
+ * Tests the link to sort in the preview form.
+ */
+ public function testPreviewSortLink() {
+ // Get the preview.
+ $this->getPreviewAJAX('test_click_sort_ajax', 'page_1', 0);
+
+ // Test that the header label is present.
+ $elements = $this->xpath('//th[contains(@class, :class)]/a', [':class' => 'views-field views-field-name']);
+ $this->assertTrue(!empty($elements), 'The header label is present.');
+
+ // Verify link.
+ $this->assertLinkByHref('preview/page_1?_wrapper_format=drupal_ajax&order=name&sort=desc', 0, 'The output URL is as expected.');
+
+ // Click link to sort.
+ $elements[0]->click();
+ $sort_link = $this->assertSession()->waitForElement('xpath', '//th[contains(@class, \'views-field views-field-name is-active\')]/a');
+
+ $this->assertNotEmpty($sort_link);
+
+ // Verify link.
+ $this->assertLinkByHref('preview/page_1?_wrapper_format=drupal_ajax&order=name&sort=asc', 0, 'The output URL is as expected.');
+ }
+
+ /**
+ * Get the preview form and force an AJAX preview update.
+ *
+ * @param string $view_name
+ * The view to test.
+ * @param string $panel_id
+ * The view panel to test.
+ * @param int $row_count
+ * The expected number of rows in the preview.
+ */
+ protected function getPreviewAJAX($view_name, $panel_id, $row_count) {
+ $this->drupalGet('admin/structure/views/view/' . $view_name . '/edit/' . $panel_id);
+ $this->getSession()->getPage()->pressButton('Update preview');
+ $this->assertSession()->assertWaitOnAjaxRequest();
+ $this->assertPreviewAJAX($row_count);
+ }
+
+ /**
+ * Click on a preview link.
+ *
+ * @param \Behat\Mink\Element\NodeElement $element
+ * The element to click.
+ * @param int $row_count
+ * The expected number of rows in the preview.
+ */
+ protected function clickPreviewLinkAJAX(NodeElement $element, $row_count) {
+ $element->click();
+ $this->assertSession()->assertWaitOnAjaxRequest();
+ $this->assertPreviewAJAX($row_count);
+ }
+
+ /**
+ * Assert that the preview contains expected data.
+ *
+ * @param int $row_count
+ * The expected number of rows in the preview.
+ */
+ protected function assertPreviewAJAX($row_count) {
+ $elements = $this->getSession()->getPage()->findAll('css', '.view-content .views-row');
+ $this->assertCount($row_count, $elements, 'Expected items found on page.');
+ }
+
+ /**
+ * Asserts that an element has a given class.
+ *
+ * @param \Behat\Mink\Element\NodeElement $element
+ * The element to test.
+ * @param string $class
+ * The class to assert.
+ * @param string $message
+ * (optional) A verbose message to output.
+ */
+ protected function assertClass(NodeElement $element, $class, $message = NULL) {
+ if (!isset($message)) {
+ $message = "Class .$class found.";
+ }
+ $this->assertTrue(strpos($element->getAttribute('class'), $class) !== FALSE, $message);
+ }
+
+}