From 70273c626d8f309ea9eb376b2bc01dbcda7ee8b9 Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Fri, 22 Dec 2023 13:27:42 +0100 Subject: [PATCH] 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] --- .../Core/Renderer/Blocks/Button.php | 12 +- .../Core/Renderer/Blocks/ButtonTest.php | 164 ++++++++++++++++++ 2 files changed, 173 insertions(+), 3 deletions(-) create mode 100644 mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php diff --git a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php b/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php index 9aa64d8393..8a7bad8bc2 100644 --- a/mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Button.php +++ b/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 diff --git a/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php b/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php new file mode 100644 index 0000000000..b82b9e9b15 --- /dev/null +++ b/mailpoet/tests/integration/EmailEditor/Integration/Core/Renderer/Blocks/ButtonTest.php @@ -0,0 +1,164 @@ + 'core/button', + 'attrs' => [ + 'width' => 50, + 'style' => [ + 'spacing' => [ + 'padding' => [ + 'left' => '10px', + 'right' => '10px', + 'top' => '10px', + 'bottom' => '10px', + ], + ], + 'color' => [ + 'background' => '#dddddd', + 'text' => '#111111', + ], + ], + ], + 'innerBlocks' => [], + 'innerHTML' => '
Button Text
', + 'innerContent' => ['
Button Text
'], + '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'); + } +}