[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:
Victor Woeltjen 2015-01-14 17:23:18 -08:00
parent 486a9e02e8
commit ccc30fde3d
3 changed files with 79 additions and 8 deletions

View File

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

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

View File

@ -9,5 +9,6 @@
"controllers/ViewSwitcherController",
"directives/MCTContainer",
"directives/MCTDrag",
"directives/MCTResize"
"directives/MCTResize",
"StyleSheetLoader"
]