raoul/openlp
1
0
Fork 0
forked from openlp/openlp
Code Issues Pull Requests Projects Releases Wiki Activity

Run the Display JS tests as well

Browse Source 
- Add an entry in .gitlab-ci.yml
- Create a custom browser that'll run in Docker with Chromium Headless
- Add JS linting
- Fix up issues highlighted by linter
This commit is contained in:
Raoul Snyman 2019-10-23 20:09:37 +00:00 committed by Tim Bentley
parent 3d1af40823
commit 5b7e628403
5 changed files with 2673 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.gitlab-ci.yml
View File

@ -3,20 +3,25 @@ stages:
- test
- deploy
lint:
lint-python:
stage: lint
image: openlp/debian
before_script:
- sh scripts/generate_resources.sh
script:
- sh scripts/generate_resources.sh
- flake8
lint-javascript:
stage: lint
image: openlp/angular
script:
- yarn install
- yarn lint
test-debian:
stage: test
image: openlp/debian
before_script:
- sh scripts/generate_resources.sh
script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings --cov openlp --cov-report term
- mv .coverage linux.coverage
artifacts:
@ -26,35 +31,31 @@ test-debian:
test-ubuntu:
stage: test
image: openlp/ubuntu
before_script:
- sh scripts/generate_resources.sh
script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings
test-fedora:
stage: test
image: openlp/fedora
before_script:
- sh scripts/generate_resources.sh
script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings
test-arch:
stage: test
image: openlp/arch
before_script:
- sh scripts/generate_resources.sh
script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest --color=no --disable-warnings
test-macos:
stage: test
tags:
- macos
before_script:
script:
- export PATH=/opt/local/bin:$PATH
- sh scripts/generate_resources.sh
script:
- python3 -m pytest --color=no --disable-warnings --cov openlp
- mv .coverage macos.coverage
artifacts:
@ -76,6 +77,13 @@ test-windows:
only:
- master@openlp/openlp
test-display:
stage: test
image: openlp/angular
script:
- yarn install
- yarn test --browsers ChromiumHeadlessCI
pages:
stage: deploy
image: openlp/debian

14
karma.conf.js
View File

@ -23,9 +23,9 @@ module.exports = function(config) {
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
// "display.js": ["coverage"]
},
@ -34,7 +34,7 @@ module.exports = function(config) {
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["dots", "junit"],
// configure the coverateReporter
// configure the coverateReporter
/* coverageReporter: {
type : "html",
dir : "htmlcov/"
@ -64,6 +64,12 @@ module.exports = function(config) {
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ["Chromium"],
customLaunchers: {
ChromiumHeadlessCI: {
base: 'ChromiumHeadless',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits

86
openlp/core/display/html/display.js
View File

@ -85,7 +85,7 @@ var AlertLocation = {
var AlertState = {
Displaying: "displaying",
NotDisplaying: "notDisplaying"
}
};
/**
* Alert delay enumeration
@ -94,7 +94,7 @@ var AlertDelay = {
FiftyMilliseconds: 50,
OneSecond: 1000,
OnePointFiveSeconds: 1500
}
};
/**
* Return an array of elements based on the selector query
@ -180,12 +180,13 @@ function _fromCamelCase(text) {
* @param {Object} rules - The rules to apply to the style
*/
function _createStyle(selector, rules) {
var style;
var id = selector.replace("#", "").replace(" .", "-").replace(".", "-").replace(" ", "_");
if ($("style#" + id).length != 0) {
var style = $("style#" + id)[0];
style = $("style#" + id)[0];
}
else {
var style = document.createElement("style");
style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
style.type = "text/css";
style.id = id;
@ -475,10 +476,10 @@ var Display = {
var alertText = $('#alert-text')[0];
// create styles for the alerts from the settings
_createStyle("#alert-background.settings", {
backgroundColor: settings["backgroundColor"],
fontFamily: "'" + settings["fontFace"] + "'",
fontSize: settings["fontSize"].toString() + "pt",
color: settings["fontColor"]
backgroundColor: settings.backgroundColor,
fontFamily: "'" + settings.fontFace + "'",
fontSize: settings.fontSize.toString() + "pt",
color: settings.fontColor
});
alertBackground.classList.add("settings");
alertBackground.classList.replace("hide", "show");
@ -596,16 +597,17 @@ var Display = {
* @param {string} footer_text - The HTML for the footer"
*/
addTextSlide: function (verse, text, footerText) {
var slide;
var html = _prepareText(text);
if (this._slides.hasOwnProperty(verse)) {
var slide = $("#" + verse)[0];
slide = $("#" + verse)[0];
if (slide.innerHTML != html) {
slide.innerHTML = html;
}
}
else {
var slidesDiv = $(".slides")[0];
var slide = document.createElement("section");
slide = document.createElement("section");
slide.setAttribute("id", verse);
slide.innerHTML = html;
slidesDiv.appendChild(slide);
@ -647,7 +649,7 @@ var Display = {
section.setAttribute("data-background", "#000");
section.setAttribute("style", "height: 100%; width: 100%;");
var img = document.createElement('img');
img.src = slide["path"];
img.src = slide.path;
img.setAttribute("style", "max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);");
section.appendChild(img);
slidesDiv.appendChild(section);
@ -664,7 +666,7 @@ var Display = {
var section = document.createElement("section");
section.setAttribute("data-background", "#000");
var videoElement = document.createElement("video");
videoElement.src = video["path"];
videoElement.src = video.path;
videoElement.preload = "auto";
videoElement.setAttribute("id", "video");
videoElement.setAttribute("style", "height: 100%; width: 100%;");
@ -853,39 +855,39 @@ var Display = {
var backgroundHtml = "";
switch (theme.background_type) {
case BackgroundType.Transparent:
backgroundStyle["background"] = "transparent";
backgroundStyle.background = "transparent";
break;
case BackgroundType.Solid:
backgroundStyle["background"] = theme.background_color;
backgroundStyle.background = theme.background_color;
break;
case BackgroundType.Gradient:
switch (theme.background_direction) {
case GradientType.Horizontal:
backgroundStyle["background"] = _buildLinearGradient("left top", "left bottom",
backgroundStyle.background = _buildLinearGradient("left top", "left bottom",
theme.background_start_color,
theme.background_end_color);
break;
case GradientType.Vertical:
backgroundStyle["background"] = _buildLinearGradient("left top", "right top",
backgroundStyle.background = _buildLinearGradient("left top", "right top",
theme.background_start_color,
theme.background_end_color);
break;
case GradientType.LeftTop:
backgroundStyle["background"] = _buildLinearGradient("left top", "right bottom",
backgroundStyle.background = _buildLinearGradient("left top", "right bottom",
theme.background_start_color,
theme.background_end_color);
break;
case GradientType.LeftBottom:
backgroundStyle["background"] = _buildLinearGradient("left bottom", "right top",
backgroundStyle.background = _buildLinearGradient("left bottom", "right top",
theme.background_start_color,
theme.background_end_color);
break;
case GradientType.Circular:
backgroundStyle["background"] = _buildRadialGradient(window.innerWidth / 2, theme.background_start_color,
backgroundStyle.background = _buildRadialGradient(window.innerWidth / 2, theme.background_start_color,
theme.background_end_color);
break;
default:
backgroundStyle["background"] = "#000";
backgroundStyle.background = "#000";
}
break;
case BackgroundType.Image:
@ -898,12 +900,12 @@ var Display = {
console.warn(backgroundHtml);
break;
default:
backgroundStyle["background"] = "#000";
backgroundStyle.background = "#000";
}
globalBackground.style.cssText = "";
for (var key in backgroundStyle) {
if (backgroundStyle.hasOwnProperty(key)) {
globalBackground.style.setProperty(key, backgroundStyle[key]);
for (var bgKey in backgroundStyle) {
if (backgroundStyle.hasOwnProperty(bgKey)) {
globalBackground.style.setProperty(bgKey, backgroundStyle[bgKey]);
}
}
if (!!backgroundHtml) {
@ -924,7 +926,7 @@ var Display = {
mainStyle["font-size"] = "" + theme.font_main_size + "pt";
mainStyle["font-style"] = !!theme.font_main_italics ? "italic" : "";
mainStyle["font-weight"] = !!theme.font_main_bold ? "bold" : "";
mainStyle["color"] = theme.font_main_color;
mainStyle.color = theme.font_main_color;
mainStyle["line-height"] = "" + (100 + theme.font_main_line_adjustment) + "%";
mainStyle["text-align"] = theme.display_horizontal_align;
if (theme.display_horizontal_align != HorizontalAlign.Justify) {
@ -938,36 +940,36 @@ var Display = {
mainStyle["padding-bottom"] = theme.display_vertical_align == VerticalAlign.Bottom ? "0.5em" : "0";
mainStyle["padding-left"] = !!theme.font_main_outline ? "" + (theme.font_main_outline_size * 2) + "pt" : "0";
// These need to be fixed, in the Python they use a width passed in as a parameter
mainStyle["position"] = "absolute";
mainStyle["width"] = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px";
mainStyle["height"] = "" + (window.innerHeight - (theme.font_main_outline_size * 4)) + "px";
mainStyle["left"] = "" + theme.font_main_x + "px";
mainStyle["top"] = "" + theme.font_main_y + "px";
mainStyle.position = "absolute";
mainStyle.width = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px";
mainStyle.height = "" + (window.innerHeight - (theme.font_main_outline_size * 4)) + "px";
mainStyle.left = "" + theme.font_main_x + "px";
mainStyle.top = "" + theme.font_main_y + "px";
var slidesDiv = $(".slides")[0];
slidesDiv.style.cssText = "";
for (var key in mainStyle) {
if (mainStyle.hasOwnProperty(key)) {
slidesDiv.style.setProperty(key, mainStyle[key]);
for (var mainKey in mainStyle) {
if (mainStyle.hasOwnProperty(mainKey)) {
slidesDiv.style.setProperty(mainKey, mainStyle[mainKey]);
}
}
// Set up the footer
footerStyle = {
"text-align": "left"
};
footerStyle["position"] = "absolute";
footerStyle["left"] = "" + theme.font_footer_x + "px";
footerStyle["top"] = "" + theme.font_footer_y + "px";
footerStyle["bottom"] = "" + (window.innerHeight - theme.font_footer_y - theme.font_footer_height) + "px";
footerStyle["width"] = "" + theme.font_footer_width + "px";
footerStyle.position = "absolute";
footerStyle.left = "" + theme.font_footer_x + "px";
footerStyle.top = "" + theme.font_footer_y + "px";
footerStyle.bottom = "" + (window.innerHeight - theme.font_footer_y - theme.font_footer_height) + "px";
footerStyle.width = "" + theme.font_footer_width + "px";
footerStyle["font-family"] = theme.font_footer_name;
footerStyle["font-size"] = "" + theme.font_footer_size + "pt";
footerStyle["color"] = theme.font_footer_color;
footerStyle.color = theme.font_footer_color;
footerStyle["white-space"] = theme.font_footer_wrap ? "normal" : "nowrap";
var footer = $(".footer")[0];
footer.style.cssText = "";
for (var key in footerStyle) {
if (footerStyle.hasOwnProperty(key)) {
footer.style.setProperty(key, footerStyle[key]);
for (var footerKey in footerStyle) {
if (footerStyle.hasOwnProperty(footerKey)) {
footer.style.setProperty(footerKey, footerStyle[footerKey]);
}
}
},

4
package.json
View File

@ -8,6 +8,7 @@
},
"dependencies": {
"jasmine-core": "^2.6.4",
"jshint": "^2.10.2",
"karma": "^3.1.4",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^1.1.2",
@ -17,7 +18,8 @@
"karma-log-reporter": "0.0.4"
},
"scripts": {
"test": "karma start --single-run"
"test": "karma start --single-run",
"lint": "jshint openlp/core/display/html/display.js"
},
"author": "OpenLP Developers",
"license": "GPL-3.0-or-later"

2595
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff