ColorFieldWidgetJavascriptTests.php in Color Field 8.2

Namespace

Drupal\Tests\color_field\FunctionalJavascript

File

tests/src/FunctionalJavascript/ColorFieldWidgetJavascriptTests.php

<?php

namespace Drupal\Tests\color_field\FunctionalJavascript;

use Drupal\field\Entity\FieldConfig;
use Drupal\field\Entity\FieldStorageConfig;
use Drupal\FunctionalJavascriptTests\WebDriverTestBase;

/**
 * Tests for form grouping elements.
 *
 * @group form
 */
class ColorFieldWidgetJavascriptTests extends WebDriverTestBase {

  /**
   * Modules to enable.
   *
   * @var array
   */
  public static $modules = [
    'field',
    'node',
    'color_field',
  ];

  /**
   * The Entity View Display for the article node type.
   *
   * @var \Drupal\Core\Entity\Entity\EntityViewDisplay
   */
  protected $display;

  /**
   * The Entity Form Display for the article node type.
   *
   * @var \Drupal\Core\Entity\Entity\EntityFormDisplay
   */
  protected $form;

  /**
   * {@inheritdoc}
   */
  protected $defaultTheme = 'stark';

  /**
   * {@inheritdoc}
   */
  protected function setUp() {
    parent::setUp();
    $this
      ->drupalCreateContentType([
      'type' => 'article',
    ]);
    $user = $this
      ->drupalCreateUser([
      'create article content',
      'edit own article content',
    ]);
    $this
      ->drupalLogin($user);
    $entityTypeManager = $this->container
      ->get('entity_type.manager');
    FieldStorageConfig::create([
      'field_name' => 'field_color',
      'entity_type' => 'node',
      'type' => 'color_field_type',
    ])
      ->save();
    FieldConfig::create([
      'field_name' => 'field_color',
      'label' => 'Freeform Color',
      'description' => 'Color field description',
      'entity_type' => 'node',
      'bundle' => 'article',
      'required' => TRUE,
      'default_value' => [
        [
          'color' => 'ffb81c',
          'opacity' => 0.5,
        ],
      ],
    ])
      ->save();
    FieldStorageConfig::create([
      'field_name' => 'field_color_repeat',
      'entity_type' => 'node',
      'type' => 'color_field_type',
    ])
      ->save();
    FieldConfig::create([
      'field_name' => 'field_color_repeat',
      'label' => 'Repeat Color',
      'description' => 'Color repeat description',
      'entity_type' => 'node',
      'bundle' => 'article',
      'required' => FALSE,
    ])
      ->save();
    $this->form = $entityTypeManager
      ->getStorage('entity_form_display')
      ->load('node.article.default');
    $this->display = $entityTypeManager
      ->getStorage('entity_view_display')
      ->load('node.article.default');
  }

  /**
   * Test color_field_widget_box.
   */
  public function testColorFieldWidgetBox() {
    $this->form
      ->setComponent('field_color_repeat', [
      'type' => 'color_field_widget_box',
      'settings' => [
        'default_colors' => '#FF0000,#FFFFFF',
      ],
    ])
      ->setComponent('field_color', [
      'type' => 'color_field_widget_box',
      'settings' => [
        'default_colors' => '#007749,#000000,#FFFFFF,#FFB81C,#E03C31,#001489,#ffafc8,#74d7ee',
      ],
    ])
      ->save();
    $session = $this
      ->getSession();
    $web_assert = $this
      ->assertSession();
    $this
      ->drupalGet('node/add/article');
    $page = $session
      ->getPage();

    // Wait for elements to be generated.
    $web_assert
      ->waitForElementVisible('css', '#color-field-field-color_repeat button');
    $boxes = $page
      ->findAll('css', '#color-field-field-color-repeat button');
    $this
      ->assertEquals(3, count($boxes));

    // Confirm that help text/label are present.
    $web_assert
      ->responseContains('Freeform Color');
    $web_assert
      ->responseContains('Color field description');

    // Confirm that two fields aren't sharing settings.
    $boxes = $page
      ->findAll('css', '#color-field-field-color button');
    $this
      ->assertEquals(8, count($boxes));

    /** @var \Behat\Mink\Element\NodeElement $box */
    $box = $boxes[0];
    $this
      ->assertEquals('#007749', $box
      ->getAttribute('color'));

    // Only one of the fields has a default, so it is the only one that should
    // have a box that is selected. This also confirms that even if the storage
    // setting isn't uppercase hash prefixed hex that it still correctly selects
    // the right color in the color box widget.
    $active = $page
      ->findAll('css', 'button.color_field_widget_box__square.active');
    $this
      ->assertEquals(1, count($active));

    // Confirm that clicking the swatch sets the field value.
    $box
      ->click();
    $field = $page
      ->findField('field_color[0][color]');
    $this
      ->assertEquals('#007749', $field
      ->getValue());
  }

  /**
   * Test color_field_widget_spectrum widget.
   *
   * Unfortunately since the spectrum library uses clickable divs instead of
   * buttons, we can't use full interaction of clicks with elements. So instead
   * we just confirm that the right html has been generated and assume that the
   * library tests itself.
   *
   * Ensure that our handling of the palette is correctly handling different
   * types of color values. Like don't break if using commas in rgba values.
   */
  public function testColorFieldSpectrum() {
    $this->form
      ->setComponent('field_color_repeat', [
      'type' => 'color_field_widget_spectrum',
      'settings' => [
        'palette' => '["#0678BE","#53B0EB", "#96BC44"]',
        'show_palette' => FALSE,
      ],
    ])
      ->setComponent('field_color', [
      'type' => 'color_field_widget_spectrum',
      'settings' => [
        'palette' => '["#005493","#F5AA1C","#C63527","002754", hsv 0 100 100, "rgba(0,255,255,0.5)", green,hsl(0 100 50)]',
        'show_palette' => TRUE,
      ],
    ])
      ->save();

    // Disable alpha on second field.
    FieldConfig::load('node.article.field_color_repeat')
      ->setSetting('opacity', 0)
      ->save();
    $session = $this
      ->getSession();
    $web_assert = $this
      ->assertSession();
    $this
      ->drupalGet('node/add/article');
    $page = $session
      ->getPage();

    // Confirm that help text/label are present.
    $web_assert
      ->responseContains('Freeform Color');
    $web_assert
      ->responseContains('Color field description');

    // Wait for elements to be generated.
    $web_assert
      ->waitForElementVisible('css', '.sp-preview');

    // Confirm that two fields aren't sharing settings.
    // Also confirms that custom palette is being used correctly and that the
    // one field's palette isn't shown. 4 for the one palette plus one each for
    // the widget and the current color value.
    $boxes = $page
      ->findAll('css', '.sp-thumb-el');
    $this
      ->assertEquals(13, count($boxes));

    // Confirm that alpha slider is hidden if the field doesn't support opacity.
    $alpha = $page
      ->findAll('css', '.sp-alpha-enabled');
    $this
      ->assertEquals(1, count($alpha));
  }

  /**
   * Test color_field_widget_grid widget.
   *
   * Unfortunately since the grid library ALSO uses clickable divs instead of
   * buttons. We could use $session->evaluateScript() to do it but we'll
   * presume it is  tested internally and just test the basic integration.
   */
  public function testColorFieldWidgetGrid() {
    $this->form
      ->setComponent('field_color_repeat', [
      'type' => 'color_field_widget_grid',
      'settings' => [
        'cell_width' => '20',
        'cell_height' => '20',
        'cell_margin' => '1',
        'box_width' => '250',
        'box_height' => '100',
        'columns' => '16',
      ],
    ])
      ->setComponent('field_color', [
      'type' => 'color_field_widget_grid',
      'settings' => [
        'cell_width' => '10',
        'cell_height' => '10',
        'cell_margin' => '1',
        'box_width' => '115',
        'box_height' => '20',
        'columns' => '16',
      ],
    ])
      ->save();
    $session = $this
      ->getSession();
    $web_assert = $this
      ->assertSession();
    $this
      ->drupalGet('node/add/article');
    $page = $session
      ->getPage();

    // Confirm that help text/label are present.
    $web_assert
      ->responseContains('Freeform Color');
    $web_assert
      ->responseContains('Color field description');

    // Wait for elements to be generated.
    $web_assert
      ->waitForElementVisible('css', '.simpleColorDisplay');

    // Confirm that two fields aren't sharing settings.
    $boxes = $page
      ->findAll('css', '.simpleColorDisplay');
    $this
      ->assertEquals(2, count($boxes));
    $script = <<<HEREDOC
    (function() {
    fields = jQuery('.simpleColorDisplay');
    return jQuery(fields[0]).width() == jQuery(fields[1]).width()
    })()
HEREDOC;
    $this
      ->assertFalse($session
      ->evaluateScript($script));
  }

}

Classes

Name	Description
ColorFieldWidgetJavascriptTests	Tests for form grouping elements.