mirror of
https://github.com/Jermolene/TiddlyWiki5.git
synced 2026-03-15 11:11:24 -07:00
Move checkbox widget tests to end of file
The checkbox widget tests are long and involved, so we'll move them to the end of the file so they aren't a huge block of code you need to read past to find the next test.
This commit is contained in:
Robin Munn
parent
5d369083a5
commit
ce449ce919
1 changed files with 152 additions and 144 deletions
|
|
@ -205,150 +205,6 @@ describe("Widget module", function() {
|
|||
expect(wrapper.innerHTML).toBe("<p>My Jolly Old World is Jolly</p>");
|
||||
});
|
||||
|
||||
const checkboxTestTiddlers = [
|
||||
{title: "TiddlerOne", text: "Jolly Old World", expand: "yes"},
|
||||
{title: "TiddlerTwo", text: "Jolly Old World", expand: "no"},
|
||||
];
|
||||
|
||||
const checkboxTestData = [
|
||||
{
|
||||
testName: "field mode checked",
|
||||
widgetText: "<$checkbox tiddler='TiddlerOne' field='expand' checked='yes' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "TiddlerOne": { expand: undefined } }
|
||||
},
|
||||
// Fails because checkbox logic can't handle this case. Will fix.
|
||||
// {
|
||||
// testName: "field mode unchecked",
|
||||
// widgetText: "<$checkbox tiddler='TiddlerTwo' field='expand' unchecked='no' />",
|
||||
// startsOutChecked: false,
|
||||
// expectedChange: { "TiddlerTwo": { expand: "yes" } }
|
||||
// },
|
||||
{
|
||||
testName: "field mode toggle",
|
||||
widgetText: "<$checkbox tiddler='TiddlerTwo' field='expand' checked='yes' unchecked='no' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "TiddlerTwo": { expand: "yes" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode add",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove",
|
||||
tiddlers: [{title: "Colors", colors: "green orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove inverted",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in middle position",
|
||||
tiddlers: [{title: "Colors", colors: "orange green yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in final position",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow green"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode toggle",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "green orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode toggle in middle position",
|
||||
tiddlers: [{title: "Colors", colors: "orange red yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange green yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in final position",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow red"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "filter mode 1",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "\\define checkActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='-red green'/>\n" +
|
||||
"\\define uncheckActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='red -green'/>\n" +
|
||||
"<$checkbox filter='[list[Colors!!colors]]' checked='green' unchecked='red' default='green' checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "filter mode 2",
|
||||
tiddlers: [{title: "Colors", colors: "green orange yellow"}],
|
||||
widgetText: "\\define checkActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='-red green'/>\n" +
|
||||
"\\define uncheckActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='red -green'/>\n" +
|
||||
"<$checkbox filter='[list[Colors!!colors]]' checked='green' unchecked='red' default='green' checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow red" } }
|
||||
},
|
||||
];
|
||||
|
||||
for (const data of checkboxTestData) {
|
||||
fit('checkbox widget test: ' + data.testName, function() {
|
||||
// Setup
|
||||
|
||||
// Create the wiki
|
||||
var wiki = new $tw.Wiki();
|
||||
// Add test tiddlers
|
||||
wiki.addTiddlers(checkboxTestTiddlers);
|
||||
if(data.tiddlers) wiki.addTiddlers(data.tiddlers);
|
||||
// Construct the widget node
|
||||
var widgetNode = createWidgetNode(parseText(data.widgetText,wiki),wiki);
|
||||
// Render the widget node to the DOM
|
||||
var wrapper = renderWidgetNode(widgetNode);
|
||||
|
||||
// Check initial state
|
||||
|
||||
const widget = findNodeOfType('checkbox', widgetNode);
|
||||
// Verify that the widget is or is not checked as expected
|
||||
expect(Object.getPrototypeOf(widget).getValue.call(widget)).toBe(data.startsOutChecked);
|
||||
|
||||
// Fake an event that toggles the checkbox
|
||||
// fakedom elmenets don't have a "checked" property. so we fake it because
|
||||
// Checkbox.prototype.handleChangeEvent looks at the "checked" DOM property
|
||||
widget.inputDomNode.checked = !!widget.inputDomNode.attributes.checked;
|
||||
// Now simulate checking the box
|
||||
widget.inputDomNode.checked = !widget.inputDomNode.checked;
|
||||
Object.getPrototypeOf(widget).handleChangeEvent.call(widget, null);
|
||||
|
||||
// Check state again: checkbox should be inverse of what it was
|
||||
expect(Object.getPrototypeOf(widget).getValue.call(widget)).toBe(!data.startsOutChecked);
|
||||
// Check that tiddler(s) has/have gone through expected change(s)
|
||||
for (const key of Object.keys(data.expectedChange)) {
|
||||
const tiddler = wiki.getTiddler(key);
|
||||
const change = data.expectedChange[key];
|
||||
for (const fieldName of Object.keys(change)) {
|
||||
const expectedValue = change[fieldName];
|
||||
const fieldValue = tiddler.fields[fieldName];
|
||||
expect(fieldValue).toBe(expectedValue);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
it("should render the view widget", function() {
|
||||
var wiki = new $tw.Wiki();
|
||||
// Add a tiddler
|
||||
|
|
@ -966,6 +822,158 @@ describe("Widget module", function() {
|
|||
// the <<qualify>> widget to spit out something different.
|
||||
expect(withA).toBe(withoutA);
|
||||
});
|
||||
|
||||
/*
|
||||
* Test data for checkbox widget tests
|
||||
*/
|
||||
|
||||
const checkboxTestTiddlers = [
|
||||
{title: "TiddlerOne", text: "Jolly Old World", expand: "yes"},
|
||||
{title: "TiddlerTwo", text: "Jolly Old World", expand: "no"},
|
||||
];
|
||||
|
||||
const checkboxTestData = [
|
||||
{
|
||||
testName: "field mode checked",
|
||||
widgetText: "<$checkbox tiddler='TiddlerOne' field='expand' checked='yes' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "TiddlerOne": { expand: undefined } }
|
||||
},
|
||||
// Fails because checkbox logic can't handle this case. Will fix.
|
||||
// {
|
||||
// testName: "field mode unchecked",
|
||||
// widgetText: "<$checkbox tiddler='TiddlerTwo' field='expand' unchecked='no' />",
|
||||
// startsOutChecked: false,
|
||||
// expectedChange: { "TiddlerTwo": { expand: "yes" } }
|
||||
// },
|
||||
{
|
||||
testName: "field mode toggle",
|
||||
widgetText: "<$checkbox tiddler='TiddlerTwo' field='expand' checked='yes' unchecked='no' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "TiddlerTwo": { expand: "yes" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode add",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove",
|
||||
tiddlers: [{title: "Colors", colors: "green orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove inverted",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in middle position",
|
||||
tiddlers: [{title: "Colors", colors: "orange green yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in final position",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow green"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' checked='green' />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode toggle",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "green orange yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode toggle in middle position",
|
||||
tiddlers: [{title: "Colors", colors: "orange red yellow"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange green yellow" } }
|
||||
},
|
||||
{
|
||||
testName: "list mode remove in final position",
|
||||
tiddlers: [{title: "Colors", colors: "orange yellow red"}],
|
||||
widgetText: "<$checkbox tiddler='Colors' listField='colors' unchecked='red' checked='green' />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "filter mode 1",
|
||||
tiddlers: [{title: "Colors", colors: "red orange yellow"}],
|
||||
widgetText: "\\define checkActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='-red green'/>\n" +
|
||||
"\\define uncheckActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='red -green'/>\n" +
|
||||
"<$checkbox filter='[list[Colors!!colors]]' checked='green' unchecked='red' default='green' checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> />",
|
||||
startsOutChecked: false,
|
||||
expectedChange: { "Colors": { colors: "orange yellow green" } }
|
||||
},
|
||||
{
|
||||
testName: "filter mode 2",
|
||||
tiddlers: [{title: "Colors", colors: "green orange yellow"}],
|
||||
widgetText: "\\define checkActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='-red green'/>\n" +
|
||||
"\\define uncheckActions() <$action-listops $tiddler='Colors' $field='colors' $subfilter='red -green'/>\n" +
|
||||
"<$checkbox filter='[list[Colors!!colors]]' checked='green' unchecked='red' default='green' checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> />",
|
||||
startsOutChecked: true,
|
||||
expectedChange: { "Colors": { colors: "orange yellow red" } }
|
||||
},
|
||||
];
|
||||
|
||||
/*
|
||||
* Checkbox widget tests using the test data above
|
||||
*/
|
||||
for (const data of checkboxTestData) {
|
||||
fit('checkbox widget test: ' + data.testName, function() {
|
||||
// Setup
|
||||
|
||||
// Create the wiki
|
||||
var wiki = new $tw.Wiki();
|
||||
// Add test tiddlers
|
||||
wiki.addTiddlers(checkboxTestTiddlers);
|
||||
if(data.tiddlers) wiki.addTiddlers(data.tiddlers);
|
||||
// Construct the widget node
|
||||
var widgetNode = createWidgetNode(parseText(data.widgetText,wiki),wiki);
|
||||
// Render the widget node to the DOM
|
||||
var wrapper = renderWidgetNode(widgetNode);
|
||||
|
||||
// Check initial state
|
||||
|
||||
const widget = findNodeOfType('checkbox', widgetNode);
|
||||
// Verify that the widget is or is not checked as expected
|
||||
expect(Object.getPrototypeOf(widget).getValue.call(widget)).toBe(data.startsOutChecked);
|
||||
|
||||
// Fake an event that toggles the checkbox
|
||||
// fakedom elmenets don't have a "checked" property. so we fake it because
|
||||
// Checkbox.prototype.handleChangeEvent looks at the "checked" DOM property
|
||||
widget.inputDomNode.checked = !!widget.inputDomNode.attributes.checked;
|
||||
// Now simulate checking the box
|
||||
widget.inputDomNode.checked = !widget.inputDomNode.checked;
|
||||
Object.getPrototypeOf(widget).handleChangeEvent.call(widget, null);
|
||||
|
||||
// Check state again: checkbox should be inverse of what it was
|
||||
expect(Object.getPrototypeOf(widget).getValue.call(widget)).toBe(!data.startsOutChecked);
|
||||
// Check that tiddler(s) has/have gone through expected change(s)
|
||||
for (const key of Object.keys(data.expectedChange)) {
|
||||
const tiddler = wiki.getTiddler(key);
|
||||
const change = data.expectedChange[key];
|
||||
for (const fieldName of Object.keys(change)) {
|
||||
const expectedValue = change[fieldName];
|
||||
const fieldValue = tiddler.fields[fieldName];
|
||||
expect(fieldValue).toBe(expectedValue);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue