Add Button renderer test

This commit adds a button renderer test and fixes a couple of issues
found when working on the test
[MAILPOET-5644]

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php

@@ -60,11 +60,14 @@ class Button implements BlockRenderer {
 
     // Border
     if ($parsedBlock['attrs']['style']['border'] ?? '') {
+      // Use text color if border color is not set
+      if (!($parsedBlock['attrs']['style']['border']['color'] ?? '')) {
+        $parsedBlock['attrs']['style']['border']['color'] = $parsedBlock['attrs']['style']['color']['text'] ?? null;
+      }
       $wrapperStyles = array_merge($wrapperStyles, wp_style_engine_get_styles(['border' => $parsedBlock['attrs']['style']['border']])['declarations']);
-    }
-    if ($parsedBlock['attrs']['style']['border']['width'] ?? '') {
       $wrapperStyles['border-style'] = 'solid';
     } else {
+      // Some clients render 1px border when not set as none
       $wrapperStyles['border'] = 'none';
     }
 
@@ -72,7 +75,10 @@ class Button implements BlockRenderer {
     if ($parsedBlock['attrs']['style']['spacing']['padding'] ?? '') {
       $padding = $parsedBlock['attrs']['style']['spacing']['padding'];
       $wrapperStyles['mso-padding-alt'] = "{$padding['top']} {$padding['right']} {$padding['bottom']} {$padding['left']}";
-      $linkStyles['padding'] = "{$padding['top']} {$padding['right']} {$padding['bottom']} {$padding['left']}";
+      $linkStyles['padding-top'] = $padding['top'];
+      $linkStyles['padding-right'] = $padding['right'];
+      $linkStyles['padding-bottom'] = $padding['bottom'];
+      $linkStyles['padding-left'] = $padding['left'];
     }
 
     // Typography

mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php

@@ -0,0 +1,164 @@
+<?php declare(strict_types = 1);
+
+namespace MailPoet\EmailEditor\Integrations\Core\Renderer\Blocks;
+
+use MailPoet\EmailEditor\Engine\EmailEditor;
+use MailPoet\EmailEditor\Engine\SettingsController;
+
+class ButtonTest extends \MailPoetTest {
+  /** @var Button */
+  private $buttonRenderer;
+
+  /** @var array */
+  private $parsedButton = [
+    'blockName' => 'core/button',
+    'attrs' => [
+      'width' => 50,
+      'style' => [
+        'spacing' => [
+          'padding' => [
+            'left' => '10px',
+            'right' => '10px',
+            'top' => '10px',
+            'bottom' => '10px',
+          ],
+        ],
+        'color' => [
+          'background' => '#dddddd',
+          'text' => '#111111',
+        ],
+      ],
+    ],
+    'innerBlocks' => [],
+    'innerHTML' => '<div class="wp-block-button has-custom-width wp-block-button__width-50"><a href="http://example.com" class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="color:#111111;background-color:#dddddd;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px">Button Text</a></div>',
+    'innerContent' => ['<div class="wp-block-button has-custom-width wp-block-button__width-50"><a href="http://example.com" class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="color:#111111;background-color:#dddddd;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px">Button Text</a></div>'],
+    'email_attrs' => [
+      'color' => '#111111',
+      'width' => '320px',
+    ],
+  ];
+
+  /** @var SettingsController */
+  private $settingsController;
+
+  public function _before() {
+    $this->diContainer->get(EmailEditor::class)->initialize();
+    $this->buttonRenderer = new Button();
+    $this->settingsController = $this->diContainer->get(SettingsController::class);
+  }
+
+  public function testItRendersLink() {
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('href="http://example.com"');
+    verify($output)->stringContainsString('Button Text');
+  }
+
+  public function testItRendersPaddingBasedOnAttributesValue() {
+    $this->parsedButton['attrs']['style']['spacing']['padding'] = [
+      'left' => '10px',
+      'right' => '20px',
+      'top' => '30px',
+      'bottom' => '40px',
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('padding-left:10px;');
+    verify($output)->stringContainsString('padding-right:20px;');
+    verify($output)->stringContainsString('padding-top:30px;');
+    verify($output)->stringContainsString('padding-bottom:40px;');
+  }
+
+  public function testItRendersColors() {
+    $this->parsedButton['attrs']['style']['color'] = [
+      'background' => '#000000',
+      'text' => '#111111',
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('bgcolor="#000000"');
+    verify($output)->stringContainsString('background:#000000;');
+    verify($output)->stringContainsString('color:#111111;');
+  }
+
+  public function testItRendersBorder() {
+    $this->parsedButton['attrs']['style']['border'] = [
+      'width' => '10px',
+      'color' => '#111111',
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border-color:#111111;');
+    verify($output)->stringContainsString('border-width:10px;');
+    verify($output)->stringContainsString('border-style:solid;');
+  }
+
+  public function testItRendersBorderNone() {
+    $this->parsedButton['attrs']['style']['border'] = [];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border:none;');
+  }
+
+  public function testItRendersBorderWithTextColorFallback() {
+    $this->parsedButton['attrs']['style']['border'] = [
+      'width' => '10px',
+    ];
+    $this->parsedButton['attrs']['style']['color'] = [
+      'text' => '#111111',
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border-color:#111111;');
+  }
+
+  public function testItRendersEachSideSpecificBorder() {
+    $this->parsedButton['attrs']['style']['border'] = [
+      'top' => ['width' => '1px', 'color' => '#111111'],
+      'right' => ['width' => '2px', 'color' => '#222222'],
+      'bottom' => ['width' => '3px', 'color' => '#333333'],
+      'left' => ['width' => '4px', 'color' => '#444444'],
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border-top-width:1px;');
+    verify($output)->stringContainsString('border-top-color:#111111;');
+
+    verify($output)->stringContainsString('border-right-width:2px;');
+    verify($output)->stringContainsString('border-right-color:#222222;');
+
+    verify($output)->stringContainsString('border-bottom-width:3px;');
+    verify($output)->stringContainsString('border-bottom-color:#333333;');
+
+    verify($output)->stringContainsString('border-left-width:4px;');
+    verify($output)->stringContainsString('border-left-color:#444444;');
+
+    verify($output)->stringContainsString('border-style:solid;');
+  }
+
+  public function testItRendersBorderRadius() {
+    $this->parsedButton['attrs']['style']['border'] = [
+      'radius' => '10px',
+    ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border-radius:10px;');
+  }
+
+  public function testItRendersCornerSpecificBorderRadius() {
+    $this->parsedButton['attrs']['style']['border']['radius'] = [
+      'topLeft' => '1px',
+      'topRight' => '2px',
+      'bottomLeft' => '3px',
+      'bottomRight' => '4px',
+      ];
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $this->settingsController);
+    verify($output)->stringContainsString('border-top-left-radius:1px;');
+    verify($output)->stringContainsString('border-top-right-radius:2px;');
+    verify($output)->stringContainsString('border-bottom-left-radius:3px;');
+    verify($output)->stringContainsString('border-bottom-right-radius:4px;');
+  }
+
+  public function testItAllowsSingleQuotesInFontFamilyDefinition() {
+    $settingsControllerMock = $this->createPartialMock(SettingsController::class, ['getEmailContentStyles']);
+    $settingsControllerMock->method('getEmailContentStyles')->willReturn([
+      'typography' => [
+        'fontFamily' => '"Font\'", serif',
+      ],
+    ]);
+    $output = $this->buttonRenderer->render($this->parsedButton['innerHTML'], $this->parsedButton, $settingsControllerMock);
+    verify($output)->stringContainsString('&quot;Font\'&quot;, serif');
+  }
+}