/*\ title: test-widget.js type: application/javascript tags: [[$:/tags/test-spec]] Tests the wikitext rendering pipeline end-to-end. We also need tests that individually test parsers, rendertreenodes etc., but this gets us started. \*/ (function(){ /*jslint node: true, browser: true */ /*global $tw: false */ "use strict"; describe("Widget module", function() { var widget = require("$:/core/modules/new_widgets/widget.js"); function createWidgetNode(parseTreeNode,wiki,variables) { return new widget.widget(parseTreeNode,{ wiki: wiki, variables: variables || {}, document: $tw.document }); } function parseText(text,wiki,options) { var parser = wiki.new_parseText("text/vnd.tiddlywiki",text,options); return parser ? {type: "widget", children: parser.tree} : undefined; } function renderWidgetNode(widgetNode) { $tw.document.setSequenceNumber(0); var wrapper = $tw.document.createElement("div"); widgetNode.render(wrapper,null); // console.log(require("util").inspect(wrapper,{depth: 8})); return wrapper; } function refreshWidgetNode(widgetNode,wrapper,changes) { var changedTiddlers = {}; if(changes) { $tw.utils.each(changes,function(title) { changedTiddlers[title] = true; }); } widgetNode.refresh(changedTiddlers,wrapper,null); // console.log(require("util").inspect(wrapper,{depth: 8})); } it("should deal with text nodes and HTML elements", function() { var wiki = new $tw.Wiki(); // Test parse tree var parseTreeNode = {type: "widget", children: [ {type: "text", text: "A text node"}, {type: "element", tag: "div", attributes: { "class": {type: "string", value: "myClass"}, "title": {type: "string", value: "myTitle"} }, children: [ {type: "text", text: " and the content of a DIV"}, {type: "element", tag: "div", children: [ {type: "text", text: " and an inner DIV"}, ]}, {type: "text", text: " and back in the outer DIV"} ]} ]}; // Construct the widget node var widgetNode = createWidgetNode(parseTreeNode,wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); describe("should render", function() { // Test the rendering expect(wrapper.innerHTML).toBe("A text node
\n and the content of a DIV
\n and an inner DIV
and back in the outer DIV
"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[1].sequenceNumber).toBe(2); expect(wrapper.children[1].children[0].sequenceNumber).toBe(3); expect(wrapper.children[1].children[1].sequenceNumber).toBe(4); expect(wrapper.children[1].children[1].children[0].sequenceNumber).toBe(5); expect(wrapper.children[1].children[2].sequenceNumber).toBe(6); }); }); it("should deal with transclude widgets and indirect attributes", function() { var wiki = new $tw.Wiki(); // Add a tiddler wiki.addTiddlers([ {title: "TiddlerOne", text: "the quick brown fox"} ]); // Test parse tree var parseTreeNode = {type: "widget", children: [ {type: "text", text: "A text node"}, {type: "element", tag: "div", attributes: { "class": {type: "string", value: "myClass"}, "title": {type: "indirect", textReference: "TiddlerOne"} }, children: [ {type: "text", text: " and the content of a DIV"}, {type: "element", tag: "div", children: [ {type: "text", text: " and an inner DIV"}, ]}, {type: "text", text: " and back in the outer DIV"}, {type: "transclude", attributes: { "title": {type: "string", value: "TiddlerOne"} }} ]}, {type: "transclude", attributes: { "title": {type: "string", value: "TiddlerOne"} }} ]}; // Construct the widget node var widgetNode = createWidgetNode(parseTreeNode,wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); describe("should render", function() { // Test the rendering expect(wrapper.innerHTML).toBe("A text node
\n and the content of a DIV
\n and an inner DIV
and back in the outer DIVthe quick brown fox
the quick brown fox"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[1].sequenceNumber).toBe(2); expect(wrapper.children[1].children[0].sequenceNumber).toBe(3); expect(wrapper.children[1].children[1].sequenceNumber).toBe(4); expect(wrapper.children[1].children[1].children[0].sequenceNumber).toBe(5); expect(wrapper.children[1].children[2].sequenceNumber).toBe(6); expect(wrapper.children[1].children[3].sequenceNumber).toBe(7); expect(wrapper.children[2].sequenceNumber).toBe(8); }); // Change the transcluded tiddler wiki.addTiddler({title: "TiddlerOne", text: "jumps over the lazy dog"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerOne"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("A text node
\n and the content of a DIV
\n and an inner DIV
and back in the outer DIVjumps over the lazy dog
jumps over the lazy dog"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[1].sequenceNumber).toBe(2); expect(wrapper.children[1].children[0].sequenceNumber).toBe(3); expect(wrapper.children[1].children[1].sequenceNumber).toBe(4); expect(wrapper.children[1].children[1].children[0].sequenceNumber).toBe(5); expect(wrapper.children[1].children[2].sequenceNumber).toBe(6); expect(wrapper.children[1].children[3].sequenceNumber).toBe(9); expect(wrapper.children[2].sequenceNumber).toBe(10); }); }); it("should detect recursion of the transclude macro", function() { var wiki = new $tw.Wiki(); // Add a tiddler wiki.addTiddlers([ {title: "TiddlerOne", text: "<$transclude title='TiddlerOne'/>\n"} ]); // Test parse tree var parseTreeNode = {type: "widget", children: [ {type: "transclude", attributes: { "title": {type: "string", value: "TiddlerOne"} }} ]}; // Construct the widget node var widgetNode = createWidgetNode(parseTreeNode,wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); describe("should detect the recursion", function() { // Test the rendering expect(wrapper.innerHTML).toBe("Tiddler recursion error in transclude widget\n"); }); }); it("should deal with SVG elements", function() { var wiki = new $tw.Wiki(); // Construct the widget node var text = "\n"; var widgetNode = createWidgetNode(parseText(text,wiki,{parseAsInline:true}),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("\n\n\n"); expect(wrapper.firstChild.namespaceURI).toBe("http://www.w3.org/2000/svg"); }); it("should parse and render transclusions", function() { var wiki = new $tw.Wiki(); // Add a tiddler wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "<$transclude title={{TiddlerThree}}/>"}, {title: "TiddlerThree", text: "TiddlerOne"} ]); // Construct the widget node var text = "My <$transclude title='TiddlerTwo'/> is Jolly" var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nMy Jolly Old World is Jolly

"); }); it("should render the view widget", function() { var wiki = new $tw.Wiki(); // Add a tiddler wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"} ]); // Construct the widget node var text = "<$view title='TiddlerOne'/>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nJolly Old World

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(2); // Change the transcluded tiddler wiki.addTiddler({title: "TiddlerOne", text: "World-wide Jelly"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerOne"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nWorld-wide Jelly

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(3); }); }); it("should deal with the setvariable widget", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "<$transclude title={{TiddlerThree}}/>"}, {title: "TiddlerThree", text: "TiddlerOne"}, {title: "TiddlerFour", text: "TiddlerTwo"} ]); // Construct the widget node var text = "My <$setvariable name='tiddlerTitle' value={{TiddlerFour}}><$transclude title={{!!title}}/> is Jolly" var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nMy Jolly Old World is Jolly

"); // Change the transcluded tiddler wiki.addTiddler({title: "TiddlerFour", text: "TiddlerOne"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerFour"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nMy Jolly Old World is Jolly

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(2); expect(wrapper.children[0].children[1].sequenceNumber).toBe(5); expect(wrapper.children[0].children[2].sequenceNumber).toBe(4); }); }); it("should deal with attributes specified as macro invocations", function() { var wiki = new $tw.Wiki(); // Construct the widget node var text = "
>>Content
"; var variables = { myMacro: { value: "My something $one$, $two$ or other $three$", params: [ {name: "one", "default": "paramOne"}, {name: "two"}, {name: "three", "default": "paramTwo"} ] } }; var widgetNode = createWidgetNode(parseText(text,wiki),wiki,variables); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\n

\nContent

"); }); it("should deal with built-in macros", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World", type: "text/vnd.tiddlywiki"} ]); // Construct the widget node var text = "\\define makelink(text,type)\n>>My linky link\n\\end\n\n<$macrocall $name=\"makelink\" text={{TiddlerOne}} type={{TiddlerOne!!type}}/>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\n\nMy linky link

"); }); it("should deal with the list widget", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "Worldly Old Jelly"}, {title: "TiddlerThree", text: "Golly Gosh"}, {title: "TiddlerFour", text: "Lemon Squash"} ]); // Construct the widget node var text = "<$list><$view field='title'/>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nTiddlerFourTiddlerOneTiddlerThreeTiddlerTwo

"); // Add another tiddler wiki.addTiddler({title: "TiddlerFive", text: "Jalapeno Peppers"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerFive"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerThreeTiddlerTwo

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(6); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(4); expect(wrapper.children[0].children[4].sequenceNumber).toBe(5); }); // Remove a tiddler wiki.deleteTiddler("TiddlerThree"); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerTwo

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(6); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(5); }); // Add it back a tiddler wiki.addTiddler({title: "TiddlerThree", text: "Something"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerThreeTiddlerTwo

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(6); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(7); expect(wrapper.children[0].children[4].sequenceNumber).toBe(5); }); }); it("should deal with the list widget followed by other widgets", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "Worldly Old Jelly"}, {title: "TiddlerThree", text: "Golly Gosh"}, {title: "TiddlerFour", text: "Lemon Squash"} ]); // Construct the widget node var text = "<$list><$view field='title'/>Something"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nTiddlerFourTiddlerOneTiddlerThreeTiddlerTwoSomething

"); // Check the next siblings of each of the list elements var listWidget = widgetNode.children[0].children[0]; // Add another tiddler wiki.addTiddler({title: "TiddlerFive", text: "Jalapeno Peppers"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerFive"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerThreeTiddlerTwoSomething

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(7); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(4); expect(wrapper.children[0].children[4].sequenceNumber).toBe(5); }); // Remove a tiddler wiki.deleteTiddler("TiddlerThree"); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerTwoSomething

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(7); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(5); }); // Add it back a tiddler wiki.addTiddler({title: "TiddlerThree", text: "Something"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerThree"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerThreeTiddlerTwoSomething

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(7); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(8); expect(wrapper.children[0].children[4].sequenceNumber).toBe(5); }); // Add another a tiddler to the end of the list wiki.addTiddler({title: "YetAnotherTiddler", text: "Something"}); // Refresh refreshWidgetNode(widgetNode,wrapper,["YetAnotherTiddler"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nTiddlerFiveTiddlerFourTiddlerOneTiddlerThreeTiddlerTwoYetAnotherTiddlerSomething

"); // Test the sequence numbers in the DOM expect(wrapper.sequenceNumber).toBe(0); expect(wrapper.children[0].sequenceNumber).toBe(1); expect(wrapper.children[0].children[0].sequenceNumber).toBe(7); expect(wrapper.children[0].children[1].sequenceNumber).toBe(2); expect(wrapper.children[0].children[2].sequenceNumber).toBe(3); expect(wrapper.children[0].children[3].sequenceNumber).toBe(8); expect(wrapper.children[0].children[4].sequenceNumber).toBe(5); }); }); it("should deal with the list widget and external templates", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "$:/myTemplate", text: "<$tiddler title=<>><$view field='title'/>"}, {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "Worldly Old Jelly"}, {title: "TiddlerThree", text: "Golly Gosh"}, {title: "TiddlerFour", text: "Lemon Squash"} ]); // Construct the widget node var text = "<$list template='$:/myTemplate'>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nTiddlerFourTiddlerOneTiddlerThreeTiddlerTwo

"); }); it("should deal with the list widget and empty lists", function() { var wiki = new $tw.Wiki(); // Construct the widget node var text = "<$list emptyMessage='nothing'><$view field='title'/>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nnothing

"); }); it("should refresh lists that become empty", function() { var wiki = new $tw.Wiki(); // Add some tiddlers wiki.addTiddlers([ {title: "TiddlerOne", text: "Jolly Old World"}, {title: "TiddlerTwo", text: "Worldly Old Jelly"}, {title: "TiddlerThree", text: "Golly Gosh"}, {title: "TiddlerFour", text: "Lemon Squash"} ]); // Construct the widget node var text = "<$list emptyMessage='nothing'><$view field='title'/>"; var widgetNode = createWidgetNode(parseText(text,wiki),wiki); // Render the widget node to the DOM var wrapper = renderWidgetNode(widgetNode); // Test the rendering expect(wrapper.innerHTML).toBe("

\nTiddlerFourTiddlerOneTiddlerThreeTiddlerTwo

"); // Get rid of the tiddlers wiki.deleteTiddler("TiddlerOne"); wiki.deleteTiddler("TiddlerTwo"); wiki.deleteTiddler("TiddlerThree"); wiki.deleteTiddler("TiddlerFour"); // Refresh refreshWidgetNode(widgetNode,wrapper,["TiddlerOne","TiddlerTwo","TiddlerThree","TiddlerFour"]); describe("should refresh", function() { // Test the refreshing expect(wrapper.innerHTML).toBe("

\nnothing

"); }); }); }); })();