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 - test
- deploy - deploy
lint: lint-python:
stage: lint stage: lint
image: openlp/debian image: openlp/debian
before_script:
- sh scripts/generate_resources.sh
script: script:
- sh scripts/generate_resources.sh
- flake8 - flake8
lint-javascript:
stage: lint
image: openlp/angular
script:
- yarn install
- yarn lint
test-debian: test-debian:
stage: test stage: test
image: openlp/debian image: openlp/debian
before_script:
- sh scripts/generate_resources.sh
script: script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings --cov openlp --cov-report term - xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings --cov openlp --cov-report term
- mv .coverage linux.coverage - mv .coverage linux.coverage
artifacts: artifacts:
@ -26,35 +31,31 @@ test-debian:
test-ubuntu: test-ubuntu:
stage: test stage: test
image: openlp/ubuntu image: openlp/ubuntu
before_script:
- sh scripts/generate_resources.sh
script: script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings - xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings
test-fedora: test-fedora:
stage: test stage: test
image: openlp/fedora image: openlp/fedora
before_script:
- sh scripts/generate_resources.sh
script: script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings - xvfb-run -s '-screen 0 1024x768x24' pytest-3 --color=no --disable-warnings
test-arch: test-arch:
stage: test stage: test
image: openlp/arch image: openlp/arch
before_script:
- sh scripts/generate_resources.sh
script: script:
- sh scripts/generate_resources.sh
- xvfb-run -s '-screen 0 1024x768x24' pytest --color=no --disable-warnings - xvfb-run -s '-screen 0 1024x768x24' pytest --color=no --disable-warnings
test-macos: test-macos:
stage: test stage: test
tags: tags:
- macos - macos
before_script: script:
- export PATH=/opt/local/bin:$PATH - export PATH=/opt/local/bin:$PATH
- sh scripts/generate_resources.sh - sh scripts/generate_resources.sh
script:
- python3 -m pytest --color=no --disable-warnings --cov openlp - python3 -m pytest --color=no --disable-warnings --cov openlp
- mv .coverage macos.coverage - mv .coverage macos.coverage
artifacts: artifacts:
@ -76,6 +77,13 @@ test-windows:
only: only:
- master@openlp/openlp - master@openlp/openlp
test-display:
stage: test
image: openlp/angular
script:
- yarn install
- yarn test --browsers ChromiumHeadlessCI
pages: pages:
stage: deploy stage: deploy
image: openlp/debian 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 // preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: { preprocessors: {
// source files, that you wanna generate coverage for // source files, that you wanna generate coverage for
// do not include tests or libraries // do not include tests or libraries
// (these files will be instrumented by Istanbul) // (these files will be instrumented by Istanbul)
// "display.js": ["coverage"] // "display.js": ["coverage"]
}, },
@ -34,7 +34,7 @@ module.exports = function(config) {
// available reporters: https://npmjs.org/browse/keyword/karma-reporter // available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["dots", "junit"], reporters: ["dots", "junit"],
// configure the coverateReporter // configure the coverateReporter
/* coverageReporter: { /* coverageReporter: {
type : "html", type : "html",
dir : "htmlcov/" dir : "htmlcov/"
@ -64,6 +64,12 @@ module.exports = function(config) {
// start these browsers // start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ["Chromium"], browsers: ["Chromium"],
customLaunchers: {
ChromiumHeadlessCI: {
base: 'ChromiumHeadless',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode // Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits // 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 = { var AlertState = {
Displaying: "displaying", Displaying: "displaying",
NotDisplaying: "notDisplaying" NotDisplaying: "notDisplaying"
} };
/** /**
* Alert delay enumeration * Alert delay enumeration
@ -94,7 +94,7 @@ var AlertDelay = {
FiftyMilliseconds: 50, FiftyMilliseconds: 50,
OneSecond: 1000, OneSecond: 1000,
OnePointFiveSeconds: 1500 OnePointFiveSeconds: 1500
} };
/** /**
* Return an array of elements based on the selector query * 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 * @param {Object} rules - The rules to apply to the style
*/ */
function _createStyle(selector, rules) { function _createStyle(selector, rules) {
var style;
var id = selector.replace("#", "").replace(" .", "-").replace(".", "-").replace(" ", "_"); var id = selector.replace("#", "").replace(" .", "-").replace(".", "-").replace(" ", "_");
if ($("style#" + id).length != 0) { if ($("style#" + id).length != 0) {
var style = $("style#" + id)[0]; style = $("style#" + id)[0];
} }
else { else {
var style = document.createElement("style"); style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style); document.getElementsByTagName("head")[0].appendChild(style);
style.type = "text/css"; style.type = "text/css";
style.id = id; style.id = id;
@ -475,10 +476,10 @@ var Display = {
var alertText = $('#alert-text')[0]; var alertText = $('#alert-text')[0];
// create styles for the alerts from the settings // create styles for the alerts from the settings
_createStyle("#alert-background.settings", { _createStyle("#alert-background.settings", {
backgroundColor: settings["backgroundColor"], backgroundColor: settings.backgroundColor,
fontFamily: "'" + settings["fontFace"] + "'", fontFamily: "'" + settings.fontFace + "'",
fontSize: settings["fontSize"].toString() + "pt", fontSize: settings.fontSize.toString() + "pt",
color: settings["fontColor"] color: settings.fontColor
}); });
alertBackground.classList.add("settings"); alertBackground.classList.add("settings");
alertBackground.classList.replace("hide", "show"); alertBackground.classList.replace("hide", "show");
@ -596,16 +597,17 @@ var Display = {
* @param {string} footer_text - The HTML for the footer" * @param {string} footer_text - The HTML for the footer"
*/ */
addTextSlide: function (verse, text, footerText) { addTextSlide: function (verse, text, footerText) {
var slide;
var html = _prepareText(text); var html = _prepareText(text);
if (this._slides.hasOwnProperty(verse)) { if (this._slides.hasOwnProperty(verse)) {
var slide = $("#" + verse)[0]; slide = $("#" + verse)[0];
if (slide.innerHTML != html) { if (slide.innerHTML != html) {
slide.innerHTML = html; slide.innerHTML = html;
} }
} }
else { else {
var slidesDiv = $(".slides")[0]; var slidesDiv = $(".slides")[0];
var slide = document.createElement("section"); slide = document.createElement("section");
slide.setAttribute("id", verse); slide.setAttribute("id", verse);
slide.innerHTML = html; slide.innerHTML = html;
slidesDiv.appendChild(slide); slidesDiv.appendChild(slide);
@ -647,7 +649,7 @@ var Display = {
section.setAttribute("data-background", "#000"); section.setAttribute("data-background", "#000");
section.setAttribute("style", "height: 100%; width: 100%;"); section.setAttribute("style", "height: 100%; width: 100%;");
var img = document.createElement('img'); 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%);"); img.setAttribute("style", "max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);");
section.appendChild(img); section.appendChild(img);
slidesDiv.appendChild(section); slidesDiv.appendChild(section);
@ -664,7 +666,7 @@ var Display = {
var section = document.createElement("section"); var section = document.createElement("section");
section.setAttribute("data-background", "#000"); section.setAttribute("data-background", "#000");
var videoElement = document.createElement("video"); var videoElement = document.createElement("video");
videoElement.src = video["path"]; videoElement.src = video.path;
videoElement.preload = "auto"; videoElement.preload = "auto";
videoElement.setAttribute("id", "video"); videoElement.setAttribute("id", "video");
videoElement.setAttribute("style", "height: 100%; width: 100%;"); videoElement.setAttribute("style", "height: 100%; width: 100%;");
@ -853,39 +855,39 @@ var Display = {
var backgroundHtml = ""; var backgroundHtml = "";
switch (theme.background_type) { switch (theme.background_type) {
case BackgroundType.Transparent: case BackgroundType.Transparent:
backgroundStyle["background"] = "transparent"; backgroundStyle.background = "transparent";
break; break;
case BackgroundType.Solid: case BackgroundType.Solid:
backgroundStyle["background"] = theme.background_color; backgroundStyle.background = theme.background_color;
break; break;
case BackgroundType.Gradient: case BackgroundType.Gradient:
switch (theme.background_direction) { switch (theme.background_direction) {
case GradientType.Horizontal: case GradientType.Horizontal:
backgroundStyle["background"] = _buildLinearGradient("left top", "left bottom", backgroundStyle.background = _buildLinearGradient("left top", "left bottom",
theme.background_start_color, theme.background_start_color,
theme.background_end_color); theme.background_end_color);
break; break;
case GradientType.Vertical: case GradientType.Vertical:
backgroundStyle["background"] = _buildLinearGradient("left top", "right top", backgroundStyle.background = _buildLinearGradient("left top", "right top",
theme.background_start_color, theme.background_start_color,
theme.background_end_color); theme.background_end_color);
break; break;
case GradientType.LeftTop: case GradientType.LeftTop:
backgroundStyle["background"] = _buildLinearGradient("left top", "right bottom", backgroundStyle.background = _buildLinearGradient("left top", "right bottom",
theme.background_start_color, theme.background_start_color,
theme.background_end_color); theme.background_end_color);
break; break;
case GradientType.LeftBottom: case GradientType.LeftBottom:
backgroundStyle["background"] = _buildLinearGradient("left bottom", "right top", backgroundStyle.background = _buildLinearGradient("left bottom", "right top",
theme.background_start_color, theme.background_start_color,
theme.background_end_color); theme.background_end_color);
break; break;
case GradientType.Circular: 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); theme.background_end_color);
break; break;
default: default:
backgroundStyle["background"] = "#000"; backgroundStyle.background = "#000";
} }
break; break;
case BackgroundType.Image: case BackgroundType.Image:
@ -898,12 +900,12 @@ var Display = {
console.warn(backgroundHtml); console.warn(backgroundHtml);
break; break;
default: default:
backgroundStyle["background"] = "#000"; backgroundStyle.background = "#000";
} }
globalBackground.style.cssText = ""; globalBackground.style.cssText = "";
for (var key in backgroundStyle) { for (var bgKey in backgroundStyle) {
if (backgroundStyle.hasOwnProperty(key)) { if (backgroundStyle.hasOwnProperty(bgKey)) {
globalBackground.style.setProperty(key, backgroundStyle[key]); globalBackground.style.setProperty(bgKey, backgroundStyle[bgKey]);
} }
} }
if (!!backgroundHtml) { if (!!backgroundHtml) {
@ -924,7 +926,7 @@ var Display = {
mainStyle["font-size"] = "" + theme.font_main_size + "pt"; mainStyle["font-size"] = "" + theme.font_main_size + "pt";
mainStyle["font-style"] = !!theme.font_main_italics ? "italic" : ""; mainStyle["font-style"] = !!theme.font_main_italics ? "italic" : "";
mainStyle["font-weight"] = !!theme.font_main_bold ? "bold" : ""; 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["line-height"] = "" + (100 + theme.font_main_line_adjustment) + "%";
mainStyle["text-align"] = theme.display_horizontal_align; mainStyle["text-align"] = theme.display_horizontal_align;
if (theme.display_horizontal_align != HorizontalAlign.Justify) { 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-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"; 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 // These need to be fixed, in the Python they use a width passed in as a parameter
mainStyle["position"] = "absolute"; mainStyle.position = "absolute";
mainStyle["width"] = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px"; mainStyle.width = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px";
mainStyle["height"] = "" + (window.innerHeight - (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.left = "" + theme.font_main_x + "px";
mainStyle["top"] = "" + theme.font_main_y + "px"; mainStyle.top = "" + theme.font_main_y + "px";
var slidesDiv = $(".slides")[0]; var slidesDiv = $(".slides")[0];
slidesDiv.style.cssText = ""; slidesDiv.style.cssText = "";
for (var key in mainStyle) { for (var mainKey in mainStyle) {
if (mainStyle.hasOwnProperty(key)) { if (mainStyle.hasOwnProperty(mainKey)) {
slidesDiv.style.setProperty(key, mainStyle[key]); slidesDiv.style.setProperty(mainKey, mainStyle[mainKey]);
} }
} }
// Set up the footer // Set up the footer
footerStyle = { footerStyle = {
"text-align": "left" "text-align": "left"
}; };
footerStyle["position"] = "absolute"; footerStyle.position = "absolute";
footerStyle["left"] = "" + theme.font_footer_x + "px"; footerStyle.left = "" + theme.font_footer_x + "px";
footerStyle["top"] = "" + theme.font_footer_y + "px"; footerStyle.top = "" + theme.font_footer_y + "px";
footerStyle["bottom"] = "" + (window.innerHeight - theme.font_footer_y - theme.font_footer_height) + "px"; footerStyle.bottom = "" + (window.innerHeight - theme.font_footer_y - theme.font_footer_height) + "px";
footerStyle["width"] = "" + theme.font_footer_width + "px"; footerStyle.width = "" + theme.font_footer_width + "px";
footerStyle["font-family"] = theme.font_footer_name; footerStyle["font-family"] = theme.font_footer_name;
footerStyle["font-size"] = "" + theme.font_footer_size + "pt"; 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"; footerStyle["white-space"] = theme.font_footer_wrap ? "normal" : "nowrap";
var footer = $(".footer")[0]; var footer = $(".footer")[0];
footer.style.cssText = ""; footer.style.cssText = "";
for (var key in footerStyle) { for (var footerKey in footerStyle) {
if (footerStyle.hasOwnProperty(key)) { if (footerStyle.hasOwnProperty(footerKey)) {
footer.style.setProperty(key, footerStyle[key]); footer.style.setProperty(footerKey, footerStyle[footerKey]);
} }
} }
}, },

4
package.json
View File

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

2595
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff