simplestatemanager
Version:
SimpleStateManager is a library that allows you to enable and disable JavaScript based on the characteristics of the device.
405 lines (303 loc) • 13.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>QUnit - SimpleStateManager</title>
<link rel="stylesheet" href="resources/qunit.css">
<script src="resources/bind.poly.js"></script>
<script src="resources/matchmedia.mock.js"></script>
<script src="../../dist/ssm.min.js" data-cover></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="resources/qunit.js"></script>
<script src="resources/blanket.min.js"></script>
<script>
test("Add states (addState and addStates)", function() {
var fired = true;
ssm.addState(
{
id: 'desktop',
onEnter: function(){
fired = true;
}
}
);
ok(ssm.getStates().length === 1, "Adding a single state successful");
ok(fired === true, "Added state is successfully matched and enter event run");
ssm.removeState('desktop');
ok(ssm.getStates().length === 0, "Removing single state successful");
ssm.addStates([
{
id: 'desktop'
},
{
id: 'tablet'
},
{
id: 'mobile'
}
]);
ok(ssm.getStates().length === 3, "Adding multiple states successful");
ssm.removeAllStates();
ok(ssm.getStates().length === 0, "Removing multiple states successful");
});
test("Get states (getState and getStates)", function(){
var id = 'test';
ssm.addState({
id: id,
query: '(min-width: 100px)',
onEnter: function() {},
onLeave: function() {},
onResize: function() {}
});
var state = ssm.getState(id);
ok(state.id === id, "Retrieved state successfully");
ssm.removeAllStates();
ok(ssm.getStates().length === 0, "Removing state successful");
ssm.addStates([
{
id: 'desktop'
},
{
id: 'tablet'
},
{
id: 'mobile'
}
]);
ok(ssm.getStates(['desktop', 'tablet']).length === 2, "Fetched desktop and mobile states successful");
ssm.removeAllStates();
ok(ssm.getStates().length === 0, "Removing all states successful");
});
test("Remove states (removeState, removeAllStates)", function() {
ssm.addState({
id: 'desktop'
});
ok(ssm.getStates().length === 1, "Added individual state successfully, ready for removal");
ssm.removeState('desktop');
ok(ssm.getStates().length === 0, "Removed individual state successfully");
ssm.addStates([
{
id: 'desktop'
},
{
id: 'tablet'
}
]);
ok(ssm.getStates().length === 2, "Multiple states added successfully, ready for removal");
ssm.removeAllStates();
ok(ssm.getStates().length === 0, "Multiple states removed successfully");
});
test("Add a config option (addConfigOption)", function() {
ssm.addConfigOption({name:'minHeight', test: function(){}});
ok(ssm.getConfigOptions().length === 1, "Adding a single config option successful");
ssm.removeConfigOption('minHeight');
ok(ssm.getConfigOptions().length === 0, "Remove a single config option successful");
});
test("Get a config option (getConfigOption)", function() {
var name = 'minHeight';
ssm.addConfigOption({name: name, test: function(){}});
ok(ssm.getConfigOptions(name)[0].name === name, "Retrive a single config option successfully");
ssm.removeConfigOption(name);
});
test("Remove config option (removeConfigOption)", function() {
var configOptions = ssm.getConfigOptions().length;
ssm.addConfigOption({
name: 'test',
test: function(){}
});
ok(ssm.getConfigOptions().length === (configOptions + 1), "Added config option successfully");
ssm.removeConfigOption('test');
ok(ssm.getConfigOptions().length === configOptions, "Removed config option successfully");
});
test("Add a state that instantly matches (addState)", function() {
var id = 'test',
query = '(min-width: 100px)',
onEnter = function() {},
onLeave = function() {},
onResize = function() {};
var state = ssm.addState({
id: id,
query: query,
onEnter: onEnter,
onLeave: onLeave,
onResize: onResize
});
ssm.removeAllStates();
ok(state.id === id, "State has been added successfully");
ok(state.active === true, "State is correctly active");
});
test("Add a state that is unmatched (addState)", function() {
var id = 'test',
query = '(max-width: 1000px)',
onEnter = function() {},
onLeave = function() {},
onResize = function() {};
var state = ssm.addState({
id: id,
query: query,
onEnter: onEnter,
onLeave: onLeave,
onResize: onResize
});
ok(state.id === id, "State has been added successfully");
ok(state.active === false, "State is correctly inactive");
ssm.removeAllStates();
});
test("Add a state that is unmatched and then handle it matching when browser is resized (addState)", function() {
var id = 'browserMatchMediaTest',
query = '(max-width: 320px)',
onEnter = function() {
browserEnter = true;
},
onLeave = function() {
browserLeave = true;
},
browserEnter = false;
browserLeave = false;
var state = ssm.addState({
id: id,
query: query,
onEnter: onEnter,
onLeave: onLeave
});
ok(browserEnter === false, "State has not yet been entered");
ok(browserLeave === false, "State has not yet been left");
window.matchMedia.set({
width: 300
});
ok(browserEnter === true, "State enters successfully");
window.matchMedia.set({
width: 1024
});
ok(browserLeave === true, "State leaves successfully");
ssm.removeAllStates();
});
test("Test the onFirstRun method of a state (addState)", function() {
var id = 'test',
onFirstRun = function() {
firstRun = true;
},
firstRun = false;
ssm.addState({
id: id,
query: '',
onFirstRun: onFirstRun
});
ok(firstRun === true, "Passed Simple First Match");
ssm.removeAllStates();
firstRun = false;
ssm.addState({
id: id,
query: '(min-width: 1200px)',
onFirstRun: onFirstRun
});
ok(firstRun === false, "Passed not initially matched");
ssm.addState({
id: id,
query: '(min-width: 1200px)',
onFirstRun: onFirstRun
});
window.matchMedia.set({
width: 1200
});
ok(firstRun === true, "Passed matched after resize");
ssm.removeAllStates();
window.matchMedia.set({
width: 1024
});
});
test("Add a config option which validates once (addConfigOption - once)", function() {
var stateMatch = false;
ssm.addConfigOption({
name: 'once',
test: function(){
return false;
},
when: 'once'
});
ok(ssm.getConfigOptions().length === 1, "Passed always false config option added");
ssm.addState({
id: 'onceState',
once: 'value',
onEnter: function() {
stateMatch = true;
}
});
ok(stateMatch === false, "Passed state not matched");
ok(ssm.getStates().length === 0, "Passed state not added as not matched");
ssm.removeConfigOption('once');
ok(ssm.getConfigOptions().length === 0, "Passed always false config option removed");
stateMatch = false;
ssm.addConfigOption({
name: 'once',
test: function(){
return true;
},
when: 'once'
});
ok(ssm.getConfigOptions().length === 1, "Passed always true config option added");
ssm.addState({
id: 'onceState',
once: 'value',
onEnter: function() {
stateMatch = true;
}
});
ok(stateMatch === true, "Passed state matched");
ok(ssm.getStates().length === 1, "Passed state not added as matched");
ssm.removeState('onceState');
ok(ssm.getStates().length === 0, "Passed remove state");
ssm.removeConfigOption('once');
ok(ssm.getConfigOptions().length === 0, "Passed always true config option removed");
});
test("Add a config option which validates once (addConfigOption - once)", function() {
var switchedStates = false;
ssm.addState({
id: 'tiny',
query: '(max-width: 320px)',
onEnter: function() {}
});
ssm.stateChange(function(){
switchedStates = true;
});
ok(switchedStates === false, "Not switched states yet");
window.matchMedia.set({
width: 300
});
ok(switchedStates === true, "Switched states now");
ssm.removeState('tiny');
});
test("State events should receive state information", function() {
var eventOutput = null;
ssm.addState({
id: 'tiny',
query: '(max-width: 320px)',
onEnter: function(event) {
eventOutput = event;
}
});
window.matchMedia.set({
width: 300
});
ok(eventOutput.eventType === 'enter', 'Event Type should be Enter');
ok(eventOutput.state.id === 'tiny', 'Event state id should be "tiny"');
ssm.removeState('tiny');
});
test("State events should happen on immediately invoked events", function() {
var eventOutput = null;
var state = ssm.addState({
id: 'attachCallback',
query: '(max-width: 99999px)',
});
state.attachCallback('enter', function(event) {
eventOutput = event;
}, true);
ok(eventOutput.eventType === 'enter', 'Event Type should be Enter');
ok(eventOutput.state.id === 'attachCallback', 'Event state id should be "firstRun"');
});
</script>
</body>
</html>