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]
This commit is contained in:
committed by
Jan Lysý
parent
8054088852
commit
70273c626d
@@ -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
|
||||
|
@@ -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('"Font\'", serif');
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user