Merge pull request #6067 from nextcloud/stable12-5981-fix-preview-of-theming
[stable12] Fix preview of theming
This commit is contained in:
commit
27f44b4600
|
@ -472,6 +472,13 @@ pipeline:
|
|||
when:
|
||||
matrix:
|
||||
TESTS-ACCEPTANCE: app-files
|
||||
acceptance-app-theming:
|
||||
image: nextcloudci/php7.0:php7.0-7
|
||||
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/php7.0:php7.0-7
|
||||
commands:
|
||||
|
@ -569,6 +576,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
|
||||
|
|
|
@ -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');
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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'
|
||||
]
|
||||
|
|
|
@ -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'
|
||||
]
|
||||
|
|
|
@ -17,6 +17,7 @@ default:
|
|||
- NotificationContext
|
||||
- SettingsContext
|
||||
- SettingsMenuContext
|
||||
- ThemingAppContext
|
||||
- UsersSettingsContext
|
||||
extensions:
|
||||
Behat\MinkExtension:
|
||||
|
|
|
@ -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 open the Admin settings
|
||||
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 open the Admin settings
|
||||
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"
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -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.
|
||||
*
|
||||
|
|
Loading…
Reference in New Issue