Merge pull request #5981 from nextcloud/fix-preview-of-theming

Fix preview of theming

.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

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 = $("<link/>", {
 			rel: "stylesheet",
@@ -62,8 +62,12 @@ function preview(setting, value) {
 		stylesheet.appendTo("head");
 	};
 
-	reloadStylesheets('/css/core/server.css');
+	if (serverCssUrl !== undefined) {
-	reloadStylesheets('/apps/theming/styles');
+		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);
 		});
 	});
 

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'
 			]

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', 250), 'Saved'],
-			['name', str_repeat('a', 251), 'error', 'The given name is too long'],
+			['url', str_repeat('a', 500), 'Saved'],
-			['url', str_repeat('a', 500), 'success', 'Saved'],
+			['slogan', str_repeat('a', 500), 'Saved'],
-			['url', str_repeat('a', 501), 'error', 'The given web address is too long'],
+			['color', '#0082c9', 'Saved'],
-			['slogan', str_repeat('a', 500), 'success', 'Saved'],
+			['color', '#0082C9', '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'],
 		];
 	}
 
 	/**
-	 * @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([
+		$expected = new DataResponse(
-			'data' => [
+			[
-				'message' => $message,
+				'data' =>
-			],
+					[
-			'status' => $status,
+						'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'
 			]

tests/acceptance/config/behat.yml

@@ -17,6 +17,7 @@ default:
         - NotificationContext
         - SettingsContext
         - SettingsMenuContext
+        - ThemingAppContext
         - UsersSettingsContext
   extensions:
     Behat\MinkExtension:

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"

tests/acceptance/features/bootstrap/ThemingAppContext.php

@@ -0,0 +1,154 @@
+<?php
+
+/**
+ *
+ * @copyright Copyright (c) 2017, Daniel Calviño Sánchez (danxuliu@gmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+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");
+		}
+	}
+
+}

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.
 	 *