cssloadtracker unit tests

This commit is contained in:
tfennelly 2016-04-25 10:18:56 +01:00
parent 25b1b4df41
commit eec1d30510
3 changed files with 162 additions and 2 deletions

View File

@ -0,0 +1,126 @@
var jsTest = require('@jenkins-cd/js-test');
describe("cssloadtracker.js", function () {
// Looking at './javaScriptExtensionInfo-02.json' you'll see that there are a few extension
// points with impls spread across 2 plugins:
//
// ep-1: implementations in both plugin-1 and plugin-2
// ep-2: implementation in plugin-1 only
// ep-3: implementation in plugin-2 only
//
// So this test should verify that:
// 1. Mounting ep-1 should result in the CSS for both plugins being loaded.
// 2. Mounting ep-2 should result in only the CSS from plugin-1 being loaded.
// 3. Mounting ep-3 should result in only the CSS from plugin-2 being loaded.
// 4. Mounting all ep-* should result in the CSS for both plugins being loaded.
// 5. Following from previous ... unmounting ep-1 should result in the CSS for
// both plugins still being loaded because ep-2 and ep-3 keep them loaded.
// 6. Following from previous ... unmounting ep-2 should result in the CSS for
// plugin-1 being unloaded, leaving just the CSS for plugin-2.
// 7. Following from previous ... unmounting ep-3 should result in the CSS for
// plugin-2 being unloaded, leaving no CSS.
it("- test ep-1 loads css from both plugins", function (done) {
jsTest.onPage(function() {
var javaScriptExtensionInfo = require('./javaScriptExtensionInfo-02.json');
var cssloadtracker = require('../src/cssloadtracker');
// Initialise the load tracker with plugin extension point info.
cssloadtracker.setExtensionPointMetadata(javaScriptExtensionInfo);
// Verify that there's no link elements on the page.
var cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
// Mounting ep-1 should result in the CSS for both plugins being
// loaded ...
cssloadtracker.onMount('ep-1');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(2);
expect(cssElements[0].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-1/extensions.css');
expect(cssElements[1].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-2/extensions.css');
// Unmounting ep-1 should result in the CSS for both plugins being
// unloaded ...
cssloadtracker.onUnmount('ep-1');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
done();
});
});
it("- test ep-2 loads css from plugin-1 only", function (done) {
jsTest.onPage(function() {
var javaScriptExtensionInfo = require('./javaScriptExtensionInfo-02.json');
var cssloadtracker = require('../src/cssloadtracker');
// Initialise the load tracker with plugin extension point info.
cssloadtracker.setExtensionPointMetadata(javaScriptExtensionInfo);
// Verify that there's no link elements on the page.
var cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
// Mounting ep-2 should result in the CSS for plugin-1 only being
// loaded ...
cssloadtracker.onMount('ep-2');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(1);
expect(cssElements[0].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-1/extensions.css');
// Unmounting ep-2 should result in no CSS on the page.
cssloadtracker.onUnmount('ep-2');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
done();
});
});
it("- test ep-1, ep-2 and ep-3 loads and unloads css in correct order", function (done) {
jsTest.onPage(function() {
var javaScriptExtensionInfo = require('./javaScriptExtensionInfo-02.json');
var cssloadtracker = require('../src/cssloadtracker');
// Initialise the load tracker with plugin extension point info.
cssloadtracker.setExtensionPointMetadata(javaScriptExtensionInfo);
// Verify that there's no link elements on the page.
var cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
// Mounting ep-* should result in the CSS for both plugins being
// loaded ...
cssloadtracker.onMount('ep-1');
cssloadtracker.onMount('ep-2');
cssloadtracker.onMount('ep-3');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(2);
expect(cssElements[0].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-1/extensions.css');
expect(cssElements[1].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-2/extensions.css');
// Unmounting ep-1 should no change the page CSS because ep-2 and ep-3
// are still mounted.
cssloadtracker.onUnmount('ep-1');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(2);
expect(cssElements[0].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-1/extensions.css');
expect(cssElements[1].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-2/extensions.css');
// Unmounting ep-3 should should result in plugin-2 CSS being unloaded from the page.
cssloadtracker.onUnmount('ep-3');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(1);
expect(cssElements[0].getAttribute('href')).toBe('/adjuncts/908d75c1/org/jenkins/ui/jsmodules/plugin-1/extensions.css');
// Unmounting ep-2 should should result in no CSS being on the page
cssloadtracker.onUnmount('ep-2');
cssElements = document.getElementsByTagName('link');
expect(cssElements.length).toBe(0);
done();
});
});
});

View File

@ -0,0 +1,30 @@
[
{
"extensions": [
{
"component": "component-1.1",
"extensionPoint": "ep-1"
},
{
"component": "component-1.3",
"extensionPoint": "ep-2"
}
],
"hpiPluginId": "plugin-1",
"extensionCSS": "org/jenkins/ui/jsmodules/plugin-1/extensions.css"
},
{
"extensions": [
{
"component": "component-2.1",
"extensionPoint": "ep-1"
},
{
"component": "component-2.2",
"extensionPoint": "ep-3"
}
],
"hpiPluginId": "plugin-2",
"extensionCSS": "org/jenkins/ui/jsmodules/plugin-2/extensions.css"
}
]

View File

@ -9,14 +9,14 @@
// Extension point.
// Key: Extension point name.
// Value: An array of CSS adjunct URLs that need to be activated when the extension point is rendered.
const pointCSSs = {};
var pointCSSs = {};
// Active CSS.
// Key: CSS URL.
// Value: Counter of the number of mounted Extension Points that need the CSS to be active.
// The onMount and onUnmount functions increment and decrement the counter. When the
// counter gets back to zero, the CSS can be removed from the page.
const activeCSSs = {};
var activeCSSs = {};
const jsModules = require('@jenkins-cd/js-modules');
@ -27,6 +27,10 @@ const jsModules = require('@jenkins-cd/js-modules');
* of the /jenkins-js-extension.json files found on the server classpath.
*/
exports.setExtensionPointMetadata = function(extensionPointList) {
// Reset - for testing.
pointCSSs = {};
activeCSSs = {};
// Iterate through each plugin /jenkins-js-extension.json
for(var i1 = 0; i1 < extensionPointList.length; i1++) {
var pluginMetadata = extensionPointList[i1];