wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Fix preview of theming
This commit is contained in:
Roeland Jago Douma 2017-08-10 14:23:03 +02:00 committed by GitHub
commit ca121b7561
8 changed files with 314 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.drone.yml
View file

@ -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

18
apps/theming/js/settings-admin.js
View file

@ -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);
});
});

13
apps/theming/lib/Controller/ThemingController.php
View file

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

120
apps/theming/tests/Controller/ThemingControllerTest.php
View file

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

1
tests/acceptance/config/behat.yml
View file

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

23
tests/acceptance/features/app-theming.feature Normal file
View file

@ -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"

154
tests/acceptance/features/bootstrap/ThemingAppContext.php Normal file
View file

@ -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");
}
}
}

9
tests/acceptance/features/core/Actor.php
View file

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