diff --git a/.drone.yml b/.drone.yml index 86f18ab59e..70af6440b2 100644 --- a/.drone.yml +++ b/.drone.yml @@ -564,6 +564,13 @@ pipeline: when: matrix: TESTS-ACCEPTANCE: app-files + acceptance-app-theming: + image: nextcloudci/integration-php7.0:integration-php7.0-4 + commands: + - tests/acceptance/run-local.sh --timeout-multiplier 10 --nextcloud-server-domain acceptance-app-theming --selenium-server selenium:4444 allow-git-repository-modifications features/app-theming.feature + when: + matrix: + TESTS-ACCEPTANCE: app-theming acceptance-login: image: nextcloudci/integration-php7.0:integration-php7.0-4 commands: @@ -718,6 +725,8 @@ matrix: TESTS-ACCEPTANCE: access-levels - TESTS: acceptance TESTS-ACCEPTANCE: app-files + - TESTS: acceptance + TESTS-ACCEPTANCE: app-theming - TESTS: acceptance TESTS-ACCEPTANCE: login - TESTS: jsunit diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 8c2ab2bc08..d9e66284d1 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -30,7 +30,7 @@ function setThemingValue(setting, value) { OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : setting, 'value' : value} ).done(function(response) { hideUndoButton(setting, value); - preview(setting, value); + preview(setting, value, response.data.serverCssUrl); }).fail(function(response) { OC.msg.finishedSaving('#theming_settings_msg', response); $('#theming_settings_loading').hide(); @@ -38,12 +38,12 @@ function setThemingValue(setting, value) { } -function preview(setting, value) { +function preview(setting, value, serverCssUrl) { OC.msg.startAction('#theming_settings_msg', t('theming', 'Loading preview…')); - var stylesheetsLoaded = 2; + var stylesheetsLoaded = 1; var reloadStylesheets = function(cssFile) { var queryString = '?reload=' + new Date().getTime(); - var url = OC.generateUrl(cssFile) + queryString; + var url = cssFile + queryString; var old = $('link[href*="' + cssFile.replace("/","\/") + '"]'); var stylesheet = $("", { rel: "stylesheet", @@ -62,8 +62,12 @@ function preview(setting, value) { stylesheet.appendTo("head"); }; - reloadStylesheets('/css/core/server.css'); - reloadStylesheets('/apps/theming/styles'); + if (serverCssUrl !== undefined) { + stylesheetsLoaded++; + + reloadStylesheets(serverCssUrl); + } + reloadStylesheets(OC.generateUrl('/apps/theming/styles')); // Preview images var timestamp = new Date().getTime(); @@ -218,7 +222,7 @@ $(document).ready(function () { var input = document.getElementById('theming-'+setting); input.value = response.data.value; } - preview(setting, response.data.value); + preview(setting, response.data.value, response.data.serverCssUrl); }); }); diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index 225673079a..b409d309f4 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -73,6 +73,8 @@ class ThemingController extends Controller { private $appData; /** @var SCSSCacher */ private $scssCacher; + /** @var IURLGenerator */ + private $urlGenerator; /** * ThemingController constructor. @@ -87,6 +89,7 @@ class ThemingController extends Controller { * @param ITempManager $tempManager * @param IAppData $appData * @param SCSSCacher $scssCacher + * @param IURLGenerator $urlGenerator */ public function __construct( $appName, @@ -98,7 +101,8 @@ class ThemingController extends Controller { IL10N $l, ITempManager $tempManager, IAppData $appData, - SCSSCacher $scssCacher + SCSSCacher $scssCacher, + IURLGenerator $urlGenerator ) { parent::__construct($appName, $request); @@ -110,6 +114,7 @@ class ThemingController extends Controller { $this->tempManager = $tempManager; $this->appData = $appData; $this->scssCacher = $scssCacher; + $this->urlGenerator = $urlGenerator; } /** @@ -172,7 +177,8 @@ class ThemingController extends Controller { [ 'data' => [ - 'message' => $this->l10n->t('Saved') + 'message' => $this->l10n->t('Saved'), + 'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss')) ], 'status' => 'success' ] @@ -303,7 +309,8 @@ class ThemingController extends Controller { 'data' => [ 'value' => $value, - 'message' => $this->l10n->t('Saved') + 'message' => $this->l10n->t('Saved'), + 'serverCssUrl' => $this->urlGenerator->linkTo('', $this->scssCacher->getCachedSCSS('core', '/core/css/server.scss')) ], 'status' => 'success' ] diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php index 5fa8dc5193..5e6e43ca3c 100644 --- a/apps/theming/tests/Controller/ThemingControllerTest.php +++ b/apps/theming/tests/Controller/ThemingControllerTest.php @@ -70,6 +70,8 @@ class ThemingControllerTest extends TestCase { private $appData; /** @var SCSSCacher */ private $scssCacher; + /** @var IURLGenerator */ + private $urlGenerator; public function setUp() { $this->request = $this->createMock(IRequest::class); @@ -85,6 +87,7 @@ class ThemingControllerTest extends TestCase { ->willReturn(123); $this->tempManager = \OC::$server->getTempManager(); $this->scssCacher = $this->createMock(SCSSCacher::class); + $this->urlGenerator = $this->createMock(IURLGenerator::class); $this->themingController = new ThemingController( 'theming', @@ -96,39 +99,85 @@ class ThemingControllerTest extends TestCase { $this->l10n, $this->tempManager, $this->appData, - $this->scssCacher + $this->scssCacher, + $this->urlGenerator ); return parent::setUp(); } - public function dataUpdateStylesheet() { + public function dataUpdateStylesheetSuccess() { return [ - ['name', str_repeat('a', 250), 'success', 'Saved'], - ['name', str_repeat('a', 251), 'error', 'The given name is too long'], - ['url', str_repeat('a', 500), 'success', 'Saved'], - ['url', str_repeat('a', 501), 'error', 'The given web address is too long'], - ['slogan', str_repeat('a', 500), 'success', 'Saved'], - ['slogan', str_repeat('a', 501), 'error', 'The given slogan is too long'], - ['color', '#0082c9', 'success', 'Saved'], - ['color', '#0082C9', 'success', 'Saved'], - ['color', '0082C9', 'error', 'The given color is invalid'], - ['color', '#0082Z9', 'error', 'The given color is invalid'], - ['color', 'Nextcloud', 'error', 'The given color is invalid'], + ['name', str_repeat('a', 250), 'Saved'], + ['url', str_repeat('a', 500), 'Saved'], + ['slogan', str_repeat('a', 500), 'Saved'], + ['color', '#0082c9', 'Saved'], + ['color', '#0082C9', 'Saved'], ]; } /** - * @dataProvider dataUpdateStylesheet + * @dataProvider dataUpdateStylesheetSuccess * * @param string $setting * @param string $value - * @param string $status * @param string $message */ - public function testUpdateStylesheet($setting, $value, $status, $message) { + public function testUpdateStylesheetSuccess($setting, $value, $message) { $this->themingDefaults - ->expects($status === 'success' ? $this->once() : $this->never()) + ->expects($this->once()) + ->method('set') + ->with($setting, $value); + $this->l10n + ->expects($this->once()) + ->method('t') + ->with($message) + ->willReturn($message); + $this->scssCacher + ->expects($this->once()) + ->method('getCachedSCSS') + ->with('core', '/core/css/server.scss') + ->willReturn('/core/css/someHash-server.scss'); + $this->urlGenerator + ->expects($this->once()) + ->method('linkTo') + ->with('', '/core/css/someHash-server.scss') + ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss'); + + $expected = new DataResponse( + [ + 'data' => + [ + 'message' => $message, + 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss', + ], + 'status' => 'success', + ] + ); + $this->assertEquals($expected, $this->themingController->updateStylesheet($setting, $value)); + } + + public function dataUpdateStylesheetError() { + return [ + ['name', str_repeat('a', 251), 'The given name is too long'], + ['url', str_repeat('a', 501), 'The given web address is too long'], + ['slogan', str_repeat('a', 501), 'The given slogan is too long'], + ['color', '0082C9', 'The given color is invalid'], + ['color', '#0082Z9', 'The given color is invalid'], + ['color', 'Nextcloud', 'The given color is invalid'], + ]; + } + + /** + * @dataProvider dataUpdateStylesheetError + * + * @param string $setting + * @param string $value + * @param string $message + */ + public function testUpdateStylesheetError($setting, $value, $message) { + $this->themingDefaults + ->expects($this->never()) ->method('set') ->with($setting, $value); $this->l10n @@ -137,12 +186,15 @@ class ThemingControllerTest extends TestCase { ->with($message) ->willReturn($message); - $expected = new DataResponse([ - 'data' => [ - 'message' => $message, - ], - 'status' => $status, - ]); + $expected = new DataResponse( + [ + 'data' => + [ + 'message' => $message, + ], + 'status' => 'error', + ] + ); $this->assertEquals($expected, $this->themingController->updateStylesheet($setting, $value)); } @@ -411,6 +463,16 @@ class ThemingControllerTest extends TestCase { ->method('undo') ->with('MySetting') ->willReturn('MyValue'); + $this->scssCacher + ->expects($this->once()) + ->method('getCachedSCSS') + ->with('core', '/core/css/server.scss') + ->willReturn('/core/css/someHash-server.scss'); + $this->urlGenerator + ->expects($this->once()) + ->method('linkTo') + ->with('', '/core/css/someHash-server.scss') + ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss'); $expected = new DataResponse( [ @@ -418,6 +480,7 @@ class ThemingControllerTest extends TestCase { [ 'value' => 'MyValue', 'message' => 'Saved', + 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss', ], 'status' => 'success' ] @@ -444,6 +507,16 @@ class ThemingControllerTest extends TestCase { ->method('undo') ->with($value) ->willReturn($value); + $this->scssCacher + ->expects($this->once()) + ->method('getCachedSCSS') + ->with('core', '/core/css/server.scss') + ->willReturn('/core/css/someHash-server.scss'); + $this->urlGenerator + ->expects($this->once()) + ->method('linkTo') + ->with('', '/core/css/someHash-server.scss') + ->willReturn('/nextcloudWebroot/core/css/someHash-server.scss'); $folder = $this->createMock(ISimpleFolder::class); $file = $this->createMock(ISimpleFile::class); $this->appData @@ -466,6 +539,7 @@ class ThemingControllerTest extends TestCase { [ 'value' => $value, 'message' => 'Saved', + 'serverCssUrl' => '/nextcloudWebroot/core/css/someHash-server.scss', ], 'status' => 'success' ] diff --git a/tests/acceptance/config/behat.yml b/tests/acceptance/config/behat.yml index f9412935e5..10e1d42502 100644 --- a/tests/acceptance/config/behat.yml +++ b/tests/acceptance/config/behat.yml @@ -17,6 +17,7 @@ default: - NotificationContext - SettingsContext - SettingsMenuContext + - ThemingAppContext - UsersSettingsContext extensions: Behat\MinkExtension: diff --git a/tests/acceptance/features/app-theming.feature b/tests/acceptance/features/app-theming.feature new file mode 100644 index 0000000000..9f5ac3f6a4 --- /dev/null +++ b/tests/acceptance/features/app-theming.feature @@ -0,0 +1,23 @@ +Feature: app-theming + + Scenario: changing the color updates the header color + Given I am logged in as the admin + And I visit the settings page + And I open the "Theming" section + And I see that the color selector in the Theming app has loaded + And I see that the header color is "0082C9" + When I set the "Color" parameter in the Theming app to "C9C9C9" + Then I see that the parameters in the Theming app are eventually saved + And I see that the header color is "C9C9C9" + + Scenario: resetting the color updates the header color + Given I am logged in as the admin + And I visit the settings page + And I open the "Theming" section + And I see that the color selector in the Theming app has loaded + And I set the "Color" parameter in the Theming app to "C9C9C9" + And I see that the parameters in the Theming app are eventually saved + And I see that the header color is "C9C9C9" + When I reset the "Color" parameter in the Theming app to its default value + Then I see that the parameters in the Theming app are eventually saved + And I see that the header color is "0082C9" diff --git a/tests/acceptance/features/bootstrap/ThemingAppContext.php b/tests/acceptance/features/bootstrap/ThemingAppContext.php new file mode 100644 index 0000000000..a36ce7b297 --- /dev/null +++ b/tests/acceptance/features/bootstrap/ThemingAppContext.php @@ -0,0 +1,154 @@ +. + * + */ + +use Behat\Behat\Context\Context; + +class ThemingAppContext implements Context, ActorAwareInterface { + + use ActorAware; + + /** + * @return Locator + */ + public static function inputFieldFor($parameterName) { + return Locator::forThe()->css("input")-> + descendantOf(self::parameterDivFor($parameterName))-> + describedAs("Input field for $parameterName parameter in Theming app"); + } + + /** + * @return Locator + */ + public static function resetButtonFor($parameterName) { + return Locator::forThe()->css(".theme-undo")-> + descendantOf(self::parameterDivFor($parameterName))-> + describedAs("Reset button for $parameterName parameter in Theming app"); + } + + /** + * @return Locator + */ + private static function parameterDivFor($parameterName) { + return Locator::forThe()->xpath("//*[@id='theming']//label//*[normalize-space() = '$parameterName']/ancestor::div[1]")-> + describedAs("Div for $parameterName parameter in Theming app"); + } + + /** + * @return Locator + */ + public static function statusMessage() { + return Locator::forThe()->id("theming_settings_msg")-> + describedAs("Status message in Theming app"); + } + + /** + * @When I set the :parameterName parameter in the Theming app to :parameterValue + */ + public function iSetTheParameterInTheThemingAppTo($parameterName, $parameterValue) { + $this->actor->find(self::inputFieldFor($parameterName), 10)->setValue($parameterValue . "\r"); + } + + /** + * @When I reset the :parameterName parameter in the Theming app to its default value + */ + public function iSetTheParameterInTheThemingAppToItsDefaultValue($parameterName) { + // The reset button is not shown when the cursor is outside the input + // field, so ensure that the cursor is on the input field by clicking on + // it. + $this->actor->find(self::inputFieldFor($parameterName), 10)->click(); + + $this->actor->find(self::resetButtonFor($parameterName), 10)->click(); + } + + /** + * @Then I see that the color selector in the Theming app has loaded + */ + public function iSeeThatTheColorSelectorInTheThemingAppHasLoaded() { + // When the color selector is loaded it removes the leading '#' from the + // value property of the input field object it is linked to, and changes + // the background color of the input field to that value. The only way + // to know that the color selector has loaded is to look for any of + // those changes. + + PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::inputFieldFor("Color"), 10)->isVisible()); + + $actor = $this->actor; + + $colorSelectorLoadedCallback = function() use($actor) { + $colorSelectorValue = $actor->getSession()->evaluateScript("return $('#theming-color')[0].value;"); + + if ($colorSelectorValue[0] === '#') { + return false; + } + + return true; + }; + + if (!Utils::waitFor($colorSelectorLoadedCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) { + PHPUnit_Framework_Assert::fail("The color selector in Theming app has not been loaded after $timeout seconds"); + } + } + + /** + * @Then I see that the header color is :color + */ + public function iSeeThatTheHeaderColorIs($color) { + $headerColor = $this->actor->getSession()->evaluateScript("return $('#header').css('background-color');"); + + if ($headerColor[0] === '#') { + $headerColor = substr($headerColor, 1); + } else if (preg_match("/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\)/", $headerColor, $matches)) { + // Convert from hex string to RGB array + $color = sscanf($color, "%02X%02X%02X"); + + // Convert from "rgb(R, G, B)" string to RGB array + $headerColor = array_splice($matches, 1); + } else { + PHPUnit_Framework_Assert::fail("The acceptance test does not know how to handle the color string returned by the browser: $headerColor"); + } + + PHPUnit_Framework_Assert::assertEquals($color, $headerColor); + } + + /** + * @Then I see that the parameters in the Theming app are eventually saved + */ + public function iSeeThatTheParametersInTheThemingAppAreEventuallySaved() { + PHPUnit_Framework_Assert::assertTrue($this->actor->find(self::statusMessage(), 10)->isVisible()); + + $actor = $this->actor; + + $savedStatusMessageShownCallback = function() use($actor) { + if ($actor->find(self::statusMessage())->getText() !== "Saved") { + return false; + } + + return true; + }; + + if (!Utils::waitFor($savedStatusMessageShownCallback, $timeout = 10 * $this->actor->getFindTimeoutMultiplier(), $timeoutStep = 1)) { + PHPUnit_Framework_Assert::fail("The 'Saved' status messages in Theming app has not been shown after $timeout seconds"); + } + } + +} diff --git a/tests/acceptance/features/core/Actor.php b/tests/acceptance/features/core/Actor.php index a87ccfb773..bf2f5a7367 100644 --- a/tests/acceptance/features/core/Actor.php +++ b/tests/acceptance/features/core/Actor.php @@ -104,6 +104,15 @@ class Actor { $this->baseUrl = $baseUrl; } + /** + * Returns the multiplier for find timeouts. + * + * @return float the multiplier to apply to find timeouts. + */ + public function getFindTimeoutMultiplier() { + return $this->findTimeoutMultiplier; + } + /** * Sets the multiplier for find timeouts. *