public function WidgetJSTest::testDropdownWidget in Facets 8

Tests dropdown widget.

File

tests/src/FunctionalJavascript/WidgetJSTest.php, line 249

Class

WidgetJSTest

Tests for the JS that transforms widgets into form elements.

Namespace

Drupal\Tests\facets\FunctionalJavascript

Code

public function testDropdownWidget() {
  $facet_storage = \Drupal::entityTypeManager()
    ->getStorage('facets_facet');
  $id = 'llama';

  // Create and save a facet with a checkbox widget on the 'type' field.
  $facet_storage
    ->create([
    'id' => $id,
    'name' => strtoupper($id),
    'url_alias' => $id,
    'facet_source_id' => 'search_api:views_page__search_api_test_view__page_1',
    'field_identifier' => 'type',
    'empty_behavior' => [
      'behavior' => 'none',
    ],
    'show_only_one_result' => TRUE,
    'widget' => [
      'type' => 'dropdown',
      'config' => [
        'show_numbers' => TRUE,
        'default_option_label' => '- All -',
      ],
    ],
    'processor_configs' => [
      'url_processor_handler' => [
        'processor_id' => 'url_processor_handler',
        'weights' => [
          'pre_query' => -10,
          'build' => -10,
        ],
        'settings' => [],
      ],
    ],
  ])
    ->save();
  $this
    ->createBlock($id);

  // Go to the views page.
  $this
    ->drupalGet('search-api-test-fulltext');

  // Make sure the block is shown on the page.
  $page = $this
    ->getSession()
    ->getPage();
  $block = $page
    ->findById('block-llama-block');
  $this
    ->assertTrue($block
    ->isVisible());

  // There should be a single select element in the block.
  $this
    ->assertCount(1, $block
    ->findAll('css', 'select'));

  // The select element should be wrapped in a container with a CSS class that
  // correctly identifies the widget type.
  $this
    ->assertCount(1, $block
    ->findAll('css', 'div.facets-widget-dropdown select'));

  // The select element should have the expected CSS classes to identify it as
  // well as the data attributes that enable the JS functionality.
  $this
    ->assertCount(1, $block
    ->findAll('css', 'select.facet-inactive.item-list__dropdown.facets-dropdown.js-facets-widget.js-facets-dropdown'));
  $this
    ->assertCount(1, $block
    ->findAll('css', 'select[data-drupal-facet-id="llama"]'));
  $this
    ->assertCount(1, $block
    ->findAll('css', 'select[data-drupal-facet-alias="llama"]'));

  // The select element should have an accessible label.
  $this
    ->assertCount(1, $block
    ->findAll('css', 'select[aria-labelledby="facet_llama_label"]'));
  $this
    ->assertCount(1, $block
    ->findAll('css', 'label#facet_llama_label'));
  $this
    ->assertEquals('Facet LLAMA', $block
    ->find('css', 'label')
    ->getHtml());

  // The select element should be visible.
  $dropdown = $block
    ->find('css', 'select');
  $this
    ->assertTrue($dropdown
    ->isVisible());

  // There should be 3 options in the expected order.
  $options = $dropdown
    ->findAll('css', 'option');
  $expected = [
    // The first option is the default option, it doesn't have a value and it
    // should be selected.
    [
      '- All -',
      '',
      TRUE,
    ],
    // The second option should have the expected option text, have the URI
    // that points to the updated search result as the value, and is not
    // selected.
    [
      ' item (3)',
      base_path() . 'search-api-test-fulltext?f%5B0%5D=llama%3Aitem',
      FALSE,
    ],
    // The third option is similar.
    [
      ' article (2)',
      base_path() . 'search-api-test-fulltext?f%5B0%5D=llama%3Aarticle',
      FALSE,
    ],
  ];
  $this
    ->assertSelectOptions($expected, $options);

  // Selecting one of the options should cause a redirect to a page with
  // updated search results.
  $dropdown
    ->selectOption('item (3)');
  $this
    ->getSession()
    ->wait(6000, "window.location.search != ''");
  $current_url = $this
    ->getSession()
    ->getCurrentUrl();
  $this
    ->assertStringContainsString('search-api-test-fulltext?f%5B0%5D=llama%3Aitem', $current_url);

  // Now the clicked option should be selected and the URIs in the option
  // values should be updated.
  $dropdown = $block
    ->find('css', 'select');
  $this
    ->assertTrue($dropdown
    ->isVisible());
  $options = $dropdown
    ->findAll('css', 'option');
  $expected = [
    // The first option is the default option, it should point to the original
    // search result (without any chosen facets) and should not be selected.
    [
      '- All -',
      base_path() . 'search-api-test-fulltext',
      FALSE,
    ],
    // The second option should now be selected, and since clicking it again
    // would negate it, it should also link to the search page without any
    // chosen facets.
    [
      ' item (3)',
      base_path() . 'search-api-test-fulltext',
      TRUE,
    ],
    // The third option remains unchanged.
    [
      ' article (2)',
      base_path() . 'search-api-test-fulltext?f%5B0%5D=llama%3Aarticle',
      FALSE,
    ],
  ];
  $this
    ->assertSelectOptions($expected, $options);
}