www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/responsive_image/tests/src/Functional/ResponsiveImageAdminUITest.php

   1 <?php
   2
   3 namespace Drupal\Tests\responsive_image\Functional;
   4
   5 use Drupal\Tests\BrowserTestBase;
   6
   7 /**
   8  * Thoroughly test the administrative interface of the Responsive Image module.
   9  *
  10  * @group responsive_image
  11  */
  12 class ResponsiveImageAdminUITest extends BrowserTestBase {
  13
  14   /**
  15    * Modules to enable.
  16    *
  17    * @var array
  18    */
  19   public static $modules = ['responsive_image', 'responsive_image_test_module'];
  20
  21   /**
  22    * Drupal\simpletest\WebTestBase\setUp().
  23    */
  24   protected function setUp() {
  25     parent::setUp();
  26
  27     $this->drupalLogin($this->drupalCreateUser([
  28       'administer responsive images',
  29     ]));
  30   }
  31
  32   /**
  33    * Test responsive image administration functionality.
  34    */
  35   public function testResponsiveImageAdmin() {
  36     // We start without any default styles.
  37     $this->drupalGet('admin/config/media/responsive-image-style');
  38     $this->assertText('There is no Responsive image style yet.');
  39
  40     // Add a responsive image style.
  41     $this->drupalGet('admin/config/media/responsive-image-style/add');
  42     // The 'Responsive Image' breakpoint group should be selected by default.
  43     $this->assertFieldByName('breakpoint_group', 'responsive_image');
  44
  45     // Create a new group.
  46     $edit = [
  47       'label' => 'Style One',
  48       'id' => 'style_one',
  49       'breakpoint_group' => 'responsive_image_test_module',
  50       'fallback_image_style' => 'thumbnail',
  51     ];
  52     $this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save'));
  53
  54     // Check if the new group is created.
  55     $this->assertResponse(200);
  56     $this->drupalGet('admin/config/media/responsive-image-style');
  57     $this->assertNoText('There is no Responsive image style yet.');
  58     $this->assertText('Style One');
  59     $this->assertText('style_one');
  60
  61     // Edit the group.
  62     $this->drupalGet('admin/config/media/responsive-image-style/style_one');
  63     $this->assertFieldByName('label', 'Style One');
  64     $this->assertFieldByName('breakpoint_group', 'responsive_image_test_module');
  65     $this->assertFieldByName('fallback_image_style', 'thumbnail');
  66
  67     $cases = [
  68       ['mobile', '1x'],
  69       ['mobile', '2x'],
  70       ['narrow', '1x'],
  71       ['narrow', '2x'],
  72       ['wide', '1x'],
  73       ['wide', '2x'],
  74     ];
  75     $image_styles = array_merge(
  76       [RESPONSIVE_IMAGE_EMPTY_IMAGE, RESPONSIVE_IMAGE_ORIGINAL_IMAGE],
  77       array_keys(image_style_options(FALSE))
  78     );
  79     foreach ($cases as $case) {
  80       // Check if the radio buttons are present.
  81       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping_type]', NULL);
  82       // Check if the image style dropdowns are present.
  83       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]', NULL);
  84       // Check if the sizes textfields are present.
  85       $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes]', NULL);
  86
  87       foreach ($image_styles as $image_style_name) {
  88         // Check if the image styles are available in the dropdowns.
  89         $this->assertTrue($this->xpath(
  90           '//select[@name=:name]//option[@value=:style]',
  91           [
  92             ':name' => 'keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_style]',
  93             ':style' => $image_style_name,
  94           ]
  95         ));
  96         // Check if the image styles checkboxes are present.
  97         $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][sizes_image_styles][' . $image_style_name . ']');
  98       }
  99     }
 100
 101     // Save styles for 1x variant only.
 102     $edit = [
 103       'label' => 'Style One',
 104       'breakpoint_group' => 'responsive_image_test_module',
 105       'fallback_image_style' => 'thumbnail',
 106       'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]' => 'image_style',
 107       'keyed_styles[responsive_image_test_module.mobile][1x][image_style]' => 'thumbnail',
 108       'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]' => 'sizes',
 109       'keyed_styles[responsive_image_test_module.narrow][1x][sizes]' => '(min-width: 700px) 700px, 100vw',
 110       'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][large]' => 'large',
 111       'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][medium]' => 'medium',
 112       'keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]' => 'image_style',
 113       'keyed_styles[responsive_image_test_module.wide][1x][image_style]' => 'large',
 114     ];
 115     $this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save'));
 116     $this->drupalGet('admin/config/media/responsive-image-style/style_one');
 117
 118     // Check the mapping for multipliers 1x and 2x for the mobile breakpoint.
 119     $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_style]', 'thumbnail');
 120     $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping_type]', 'image_style');
 121     $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping_type]', '_none');
 122
 123     // Check the mapping for multipliers 1x and 2x for the narrow breakpoint.
 124     $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping_type]', 'sizes');
 125     $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][sizes]', '(min-width: 700px) 700px, 100vw');
 126     $this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-large');
 127     $this->assertFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-medium');
 128     $this->assertNoFieldChecked('edit-keyed-styles-responsive-image-test-modulenarrow-1x-sizes-image-styles-thumbnail');
 129     $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping_type]', '_none');
 130
 131     // Check the mapping for multipliers 1x and 2x for the wide breakpoint.
 132     $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_style]', 'large');
 133     $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]', 'image_style');
 134     $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping_type]', '_none');
 135
 136     // Delete the style.
 137     $this->drupalGet('admin/config/media/responsive-image-style/style_one/delete');
 138     $this->drupalPostForm(NULL, [], t('Delete'));
 139     $this->drupalGet('admin/config/media/responsive-image-style');
 140     $this->assertText('There is no Responsive image style yet.');
 141   }
 142
 143 }