mirror of
https://github.com/nasa/openmct.git
synced 2025-02-18 16:40:58 +00:00
[Stylesheets] Add spec, docs
Add tests and JSDoc to the style sheet loader introduced to allow bundles to introduce their own CSS files through the platform's regular extension mechanism; WTD-591.
This commit is contained in:
parent
486a9e02e8
commit
ccc30fde3d
@ -1,28 +1,41 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
["angular"],
|
||||
function (angular) {
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* The StyleSheetLoader adds links to style sheets exposed from
|
||||
* various bundles as extensions of category `stylesheets`.
|
||||
* @constructor
|
||||
* @param {object[]} stylesheets stylesheet extension definitions
|
||||
* @param $document Angular's jqLite-wrapped document element
|
||||
*/
|
||||
function StyleSheetLoader(stylesheets, $document) {
|
||||
var head = $document.find('head');
|
||||
var head = $document.find('head'),
|
||||
document = $document[0];
|
||||
|
||||
// Procedure for adding a single stylesheet
|
||||
function addStyleSheet(stylesheet) {
|
||||
var link = angular.element('<link>'),
|
||||
// Create a link element, and construct full path
|
||||
var link = document.createElement('link'),
|
||||
path = [
|
||||
stylesheet.bundle.path,
|
||||
stylesheet.bundle.resources,
|
||||
stylesheet.stylesheetUrl
|
||||
].join("/");
|
||||
|
||||
link.attr("rel", "stylesheet");
|
||||
link.attr("type", "text/css");
|
||||
link.attr("href", path);
|
||||
// Initialize attributes on the link
|
||||
link.setAttribute("rel", "stylesheet");
|
||||
link.setAttribute("type", "text/css");
|
||||
link.setAttribute("href", path);
|
||||
|
||||
// Append the link to the head element
|
||||
head.append(link);
|
||||
}
|
||||
|
||||
// Add all stylesheets from extensions
|
||||
stylesheets.forEach(addStyleSheet);
|
||||
}
|
||||
|
||||
|
57
platform/commonUI/general/test/StyleSheetLoaderSpec.js
Normal file
57
platform/commonUI/general/test/StyleSheetLoaderSpec.js
Normal file
@ -0,0 +1,57 @@
|
||||
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
|
||||
|
||||
define(
|
||||
["../src/StyleSheetLoader"],
|
||||
function (StyleSheetLoader) {
|
||||
"use strict";
|
||||
|
||||
describe("The style sheet loader", function () {
|
||||
var testStyleSheets,
|
||||
mockDocument,
|
||||
mockPlainDocument,
|
||||
mockHead,
|
||||
mockElement,
|
||||
loader;
|
||||
|
||||
beforeEach(function () {
|
||||
var testBundle = {
|
||||
path: "a/b",
|
||||
resources: "c"
|
||||
};
|
||||
|
||||
testStyleSheets = [
|
||||
{ stylesheetUrl: "d.css", bundle: testBundle },
|
||||
{ stylesheetUrl: "e.css", bundle: testBundle },
|
||||
{ stylesheetUrl: "f.css", bundle: testBundle }
|
||||
];
|
||||
|
||||
mockPlainDocument =
|
||||
jasmine.createSpyObj("document", ["createElement"]);
|
||||
mockDocument = [ mockPlainDocument ];
|
||||
mockDocument.find = jasmine.createSpy("$document.find");
|
||||
mockHead = jasmine.createSpyObj("head", ["append"]);
|
||||
mockElement = jasmine.createSpyObj("link", ["setAttribute"]);
|
||||
|
||||
mockDocument.find.andReturn(mockHead);
|
||||
mockPlainDocument.createElement.andReturn(mockElement);
|
||||
|
||||
loader = new StyleSheetLoader(testStyleSheets, mockDocument);
|
||||
});
|
||||
|
||||
it("appends one link per stylesheet extension", function () {
|
||||
expect(mockHead.append.calls.length)
|
||||
.toEqual(testStyleSheets.length);
|
||||
});
|
||||
|
||||
it("appends links to the head", function () {
|
||||
expect(mockDocument.find).toHaveBeenCalledWith('head');
|
||||
});
|
||||
|
||||
it("adjusts link locations", function () {
|
||||
expect(mockElement.setAttribute)
|
||||
.toHaveBeenCalledWith('href', "a/b/c/d.css");
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
@ -9,5 +9,6 @@
|
||||
"controllers/ViewSwitcherController",
|
||||
"directives/MCTContainer",
|
||||
"directives/MCTDrag",
|
||||
"directives/MCTResize"
|
||||
"directives/MCTResize",
|
||||
"StyleSheetLoader"
|
||||
]
|
Loading…
x
Reference in New Issue
Block a user