diff --git a/tests/src/FunctionalJavascript/WidgetJSTest.php b/tests/src/FunctionalJavascript/WidgetJSTest.php
new file mode 100644
index 0000000..8ff6311
--- /dev/null
+++ b/tests/src/FunctionalJavascript/WidgetJSTest.php
@@ -0,0 +1,181 @@
+<?php
+
+namespace Drupal\Tests\facets\FunctionalJavascript;
+
+use Drupal\block\Entity\Block;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\search_api\Entity\Index;
+
+/**
+ * Tests for the JS that transforms widgets into form elements.
+ *
+ * @group facets
+ */
+class WidgetJSTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = [
+    'views',
+    'search_api',
+    'search_api_test_backend',
+    'facets',
+    'facets_search_api_dependency',
+    'block',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  public function setUp() {
+    parent::setUp();
+
+    // Create the users used for the tests.
+    $admin_user = $this->drupalCreateUser([
+      'administer search_api',
+      'administer facets',
+      'access administration pages',
+      'administer blocks',
+    ]);
+    $this->drupalLogin($admin_user);
+
+    $this->insertExampleContent();
+  }
+
+  /**
+   * Tests checkbox widget.
+   */
+  public function testCheckboxWidget() {
+    $facet_storage = \Drupal::entityTypeManager()->getStorage('facets_facet');
+    $id = 'llama';
+
+    // Create and save a facet with a checkbox widget on the 'type' field.
+    $facet = $facet_storage->create([
+      'id' => $id,
+      'name' => strtoupper($id),
+      'url_alias' => $id,
+      'widget' => 'checkbox',
+      'facet_source_id' => 'search_api_views:search_api_test_view:page_1',
+      'field_identifier' => 'type',
+      'widget_configs' => ['show_numbers' => TRUE],
+      'processor_configs' => [
+        'url_processor_handler' => [
+          'processor_id' => 'url_processor_handler',
+          'weights' => ['pre_query' => -10, 'build' => -10],
+          'settings' => [],
+        ],
+      ],
+    ]);
+    $facet->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();
+    $page_content = $page->getContent();
+    $this->assertTrue(strpos($page_content, 'Llama block') > 0, 'Block found on page.');
+
+    // Narrow the context to the block that shows the facet and get objects that
+    // contain the <li>-html elements.
+    $list_items = $page->findById('block-llama-block')->findAll('css', 'li');
+
+    $this->assertCount(2, $list_items);
+
+    /** @var \Behat\Mink\Element\NodeElement $list_item */
+    foreach ($list_items as $list_item) {
+      $this->assertEquals('li', $list_item->getTagName());
+      $this->assertTrue(strpos($list_item->getHtml(), '<a href') !== FALSE, 'Link found in list item.');
+    }
+  }
+
+  /**
+   * Setup and insert test content.
+   */
+  private function insertExampleContent() {
+    entity_test_create_bundle('item');
+    entity_test_create_bundle('article');
+
+    $entity_test_storage = \Drupal::entityTypeManager()
+      ->getStorage('entity_test');
+    $entity_1 = $entity_test_storage->create(array(
+      'name' => 'foo bar baz',
+      'body' => 'test test',
+      'type' => 'item',
+      'keywords' => array('orange'),
+      'category' => 'item_category',
+    ));
+    $entity_1->save();
+    $entity_2 = $entity_test_storage->create(array(
+      'name' => 'foo test',
+      'body' => 'bar test',
+      'type' => 'item',
+      'keywords' => array('orange', 'apple', 'grape'),
+      'category' => 'item_category',
+    ));
+    $entity_2->save();
+    $entity_3 = $entity_test_storage->create(array(
+      'name' => 'bar',
+      'body' => 'test foobar',
+      'type' => 'item',
+    ));
+    $entity_3->save();
+    $entity_4 = $entity_test_storage->create(array(
+      'name' => 'foo baz',
+      'body' => 'test test test',
+      'type' => 'article',
+      'keywords' => array('apple', 'strawberry', 'grape'),
+      'category' => 'article_category',
+    ));
+    $entity_4->save();
+    $entity_5 = $entity_test_storage->create(array(
+      'name' => 'bar baz',
+      'body' => 'foo',
+      'type' => 'article',
+      'keywords' => array('orange', 'strawberry', 'grape', 'banana'),
+      'category' => 'article_category',
+    ));
+    $entity_5->save();
+
+    $inserted_entities = \Drupal::entityQuery('entity_test')
+        ->count()
+        ->execute();
+    $this->assertEquals(5, $inserted_entities, "5 items inserted.");
+
+    /** @var \Drupal\search_api\IndexInterface $index */
+    $index = Index::load('database_search_index');
+    $indexed_items = $index->indexItems();
+    $this->assertEquals(5, $indexed_items, '5 items indexed.');
+  }
+
+  /**
+   * Create and place a facet block in the first sidebar.
+   *
+   * @param string $id
+   *   Create a block for a facet.
+   */
+  protected function createBlock($id) {
+    $config = \Drupal::configFactory();
+    $settings = [
+      'plugin' => 'facet_block:' . $id,
+      'region' => 'sidebar_first',
+      'id' => $id . '_block',
+      'theme' => $config->get('system.theme')->get('default'),
+      'label' => ucfirst($id) . ' block',
+      'visibility' => [],
+      'weight' => 0,
+    ];
+
+    foreach (['region', 'id', 'theme', 'plugin', 'weight', 'visibility'] as $key) {
+      $values[$key] = $settings[$key];
+      // Remove extra values that do not belong in the settings array.
+      unset($settings[$key]);
+    }
+    $values['settings'] = $settings;
+    $block = Block::create($values);
+    $block->save();
+  }
+
+}