| 454 | | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| 455 | | "http://www.w3.org/TR/html4/strict.dtd"> |
| 456 | | <html> |
| 457 | | <head> |
| 458 | | <title>dojo.html.set test</title> |
| 459 | | |
| 460 | | <script src='../../dojo.js' djConfig='isDebug:true, parseOnLoad:false'></script> |
| 461 | | <script src='../../html.js'></script> |
| 462 | | <script src='../../../util/doh/runner.js'></script> |
| 463 | | <script type="text/javascript">console.log("doh runner loaded");</script> |
| 464 | | <script> |
| 465 | | dojo.require('doh.runner'); |
| 466 | | dojo.require('dojo.html'); |
| 467 | | dojo.require('dojo.NodeList-html'); |
| 468 | | console.log("requires done"); |
| 469 | | |
| 470 | | /* test goals |
| 471 | | * injecting content as string, node, nodelist. |
| 472 | | * injecting exotic nodes/markup e.g. table rows, lists |
| 473 | | * injecting whole html documents (extractContent option) |
| 474 | | * parsing resulting content |
| 475 | | |
| 476 | | * cleanup when setting content |
| 477 | | */ |
| 478 | | dojo.declare("dojo.html.test.SimpleThing", null, { |
| 479 | | constructor: function(params, node) { |
| 480 | | node.setAttribute("test", "ok"); |
| 481 | | } |
| 482 | | }); |
| 483 | | |
| 484 | | dojo.declare("dojo.html.test.ParserInstantiateTester", null, { |
| 485 | | constructor: function(params, node) { |
| 486 | | node.setAttribute("test", "ok"); |
| 487 | | } |
| 488 | | }); |
| 489 | | dojo.declare("dojo.html.test.DeclarativeContentSetter", dojo.html._ContentSetter, { |
| 490 | | postscript: function() { |
| 491 | | this.set(); |
| 492 | | } |
| 493 | | }); |
| 494 | | |
| 495 | | |
| 496 | | dojo.addOnLoad(function(){ |
| 497 | | console.log("starting addOnLoad"); |
| 498 | | |
| 499 | | function ieTrimSpaceBetweenTags(str){ |
| 500 | | return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1"); |
| 501 | | } |
| 502 | | |
| 503 | | |
| 504 | | targetNode = null; |
| 505 | | |
| 506 | | doh.register("basicChecks", [ |
| 507 | | { |
| 508 | | name: 'set', |
| 509 | | runTest: function(t){ |
| 510 | | window.currentTest = "basicChecks set"; |
| 511 | | console.log("running " + currentTest); |
| 512 | | targetNode = dojo.byId("pane1"); |
| 513 | | var msg = "Simple No-params Test"; |
| 514 | | var result = ""; |
| 515 | | dojo.html.set( |
| 516 | | targetNode, |
| 517 | | msg |
| 518 | | ); |
| 519 | | t.assertEqual(msg, targetNode.innerHTML); |
| 520 | | } |
| 521 | | }, |
| 522 | | { |
| 523 | | name: 'setContentWithOnEnd', |
| 524 | | runTest: function(t){ |
| 525 | | window.currentTest = "basicChecks setContentWithOnEnd"; |
| 526 | | console.log("running " + currentTest); |
| 527 | | targetNode = dojo.byId("pane1"); |
| 528 | | var msg = "setContentWithOnEnd Test"; |
| 529 | | var result = false; |
| 530 | | dojo.html.set( |
| 531 | | targetNode, |
| 532 | | msg, |
| 533 | | { |
| 534 | | onEnd: function() { |
| 535 | | console.log("in custom onEnd"); |
| 536 | | dojo.getObject(this.declaredClass).prototype.onEnd.call(this); |
| 537 | | result = true; |
| 538 | | } |
| 539 | | } |
| 540 | | ); |
| 541 | | t.assertEqual(msg, targetNode.innerHTML); |
| 542 | | t.assertTrue(result); |
| 543 | | } |
| 544 | | }, |
| 545 | | { |
| 546 | | name: 'setContent_with_parsing', |
| 547 | | runTest: function(t){ |
| 548 | | window.currentTest = "basicChecks setContent_with_parsing"; |
| 549 | | console.log("running " + currentTest); |
| 550 | | var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>'; |
| 551 | | dojo.html.set( |
| 552 | | dojo.byId("pane1"), |
| 553 | | cont, |
| 554 | | { |
| 555 | | postscript: function() { |
| 556 | | this.set(); |
| 557 | | |
| 558 | | t.assertTrue(typeof ifrs != "undefined" && ifrs.declaredClass=="dojo.html.test.SimpleThing"); |
| 559 | | t.assertTrue(this.parseResults.length > 0); |
| 560 | | }, |
| 561 | | parseContent: true |
| 562 | | } |
| 563 | | ); |
| 564 | | } |
| 565 | | }, |
| 566 | | { |
| 567 | | name: 'emptyElement', |
| 568 | | runTest: function(t){ |
| 569 | | window.currentTest = "basicChecks emptyElement"; |
| 570 | | console.log("running " + currentTest); |
| 571 | | var msg = "setContentWithOnEnd Test"; |
| 572 | | var node = dojo.byId("pane1"); |
| 573 | | node.innerHTML = '<div><span>just</span>some test<br/></div>text'; |
| 574 | | var cNodes = node.childNodes.length; |
| 575 | | |
| 576 | | dojo.html._emptyNode(dojo.byId("pane1")); |
| 577 | | t.assertTrue(node.childNodes.length == 0 && node.innerHTML == ""); |
| 578 | | } |
| 579 | | }, |
| 580 | | // the following tests use the _emptyNode function, so ensure it passes before |
| 581 | | // head-scratching over any failures that follow |
| 582 | | { |
| 583 | | name: 'changeContentTRHead', |
| 584 | | runTest: function(t){ |
| 585 | | window.currentTest = "basicChecks changeContentTRHead"; |
| 586 | | console.log("running " + currentTest); |
| 587 | | targetNode = dojo.query('table#tableTest > thead > tr')[0]; |
| 588 | | |
| 589 | | var html = "<td><div>This</div>Should<u>Work</u></td>"; |
| 590 | | dojo.html.set( |
| 591 | | targetNode, |
| 592 | | html, |
| 593 | | { |
| 594 | | "testname": "basicChecks changeContentTRHead" |
| 595 | | } |
| 596 | | ); |
| 597 | | var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
| 598 | | t.assertEqual(html.toLowerCase(), res); |
| 599 | | }, |
| 600 | | tearDown: function(){ |
| 601 | | dojo.html._emptyNode(targetNode); |
| 602 | | } |
| 603 | | }, |
| 604 | | { |
| 605 | | name: 'changeContentTHead', |
| 606 | | runTest: function(t){ |
| 607 | | window.currentTest = "basicChecks changeContentTHead"; |
| 608 | | console.log("running " + currentTest); |
| 609 | | targetNode = dojo.query('table#tableTest > thead')[0]; |
| 610 | | |
| 611 | | var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>"; |
| 612 | | dojo.html.set( |
| 613 | | targetNode, |
| 614 | | html, |
| 615 | | { |
| 616 | | "testname": "basicChecks changeContentTHead" |
| 617 | | } |
| 618 | | ); |
| 619 | | var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
| 620 | | t.assertEqual(html.toLowerCase(), res); |
| 621 | | }, |
| 622 | | tearDown: function(){ |
| 623 | | dojo.html._emptyNode(targetNode); |
| 624 | | } |
| 625 | | }, |
| 626 | | { |
| 627 | | name: 'changeContentTRBody', |
| 628 | | runTest: function(t){ |
| 629 | | window.currentTest = "basicChecks changeContentTRBody"; |
| 630 | | console.log("running " + currentTest); |
| 631 | | targetNode = dojo.query('table#tableTest > tbody > tr')[0]; |
| 632 | | var html = "<td><div>This</div>Should<u>Work</u></td>"; |
| 633 | | dojo.html.set( |
| 634 | | targetNode, |
| 635 | | html, |
| 636 | | { |
| 637 | | "testname": "basicChecks changeContentTRBody" |
| 638 | | }); |
| 639 | | var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
| 640 | | t.assertEqual(html.toLowerCase(), res); |
| 641 | | }, |
| 642 | | tearDown: function(){ |
| 643 | | dojo.html._emptyNode(targetNode); |
| 644 | | } |
| 645 | | }, |
| 646 | | { |
| 647 | | name: 'changeContentTBody', |
| 648 | | runTest: function(t){ |
| 649 | | window.currentTest = "basicChecks changeContentTBody"; |
| 650 | | console.log("running " + currentTest); |
| 651 | | targetNode = dojo.query('table#tableTest > tbody')[0]; |
| 652 | | var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>"; |
| 653 | | dojo.html.set( |
| 654 | | targetNode, html, |
| 655 | | { |
| 656 | | "testname": "basicChecks changeContentTBody" |
| 657 | | }); |
| 658 | | var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
| 659 | | t.assertEqual(html.toLowerCase(), res); |
| 660 | | }, |
| 661 | | tearDown: function(){ |
| 662 | | dojo.html._emptyNode(targetNode); |
| 663 | | } |
| 664 | | }, |
| 665 | | { |
| 666 | | name: 'changeContentTable', |
| 667 | | runTest: function(t){ |
| 668 | | window.currentTest = "basicChecks changeContentTable"; |
| 669 | | console.log("running " + currentTest); |
| 670 | | targetNode = dojo.query('table#tableTest')[0]; |
| 671 | | var html = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>"; |
| 672 | | dojo.html.set( |
| 673 | | targetNode, html, |
| 674 | | { |
| 675 | | "testname": "basicChecks changeContentTable" |
| 676 | | }); |
| 677 | | var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase()); |
| 678 | | t.assertEqual(html.toLowerCase(), res); |
| 679 | | }, |
| 680 | | tearDown: function(){ |
| 681 | | dojo.html._emptyNode(targetNode); |
| 682 | | } |
| 683 | | }, |
| 684 | | { |
| 685 | | name: 'extractContent', |
| 686 | | runTest: function(t){ |
| 687 | | window.currentTest = "basicChecks extractContent"; |
| 688 | | console.log("running " + currentTest); |
| 689 | | targetNode = dojo.byId("pane1"); |
| 690 | | var html = '' |
| 691 | | +'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">' |
| 692 | | +'<html> ' |
| 693 | | +' <head> ' |
| 694 | | +' <title> ' |
| 695 | | +' the title ' |
| 696 | | +' </title> ' |
| 697 | | +' </head> ' |
| 698 | | +' <body> ' |
| 699 | | +' <p> ' |
| 700 | | +' This is the <b>Good Stuff</b><br> ' |
| 701 | | +' </p> ' |
| 702 | | +' </body> ' |
| 703 | | +'</html> '; |
| 704 | | |
| 705 | | dojo.html.set( |
| 706 | | targetNode, html, |
| 707 | | { |
| 708 | | "testname": "basicChecks changeContentTable", |
| 709 | | extractContent: true |
| 710 | | }); |
| 711 | | t.assertTrue(targetNode.innerHTML.indexOf("title") == -1); |
| 712 | | t.assertTrue(dojo.query("*", targetNode).length == 3); |
| 713 | | }, |
| 714 | | tearDown: function(){ |
| 715 | | dojo.html._emptyNode(targetNode); |
| 716 | | } |
| 717 | | } |
| 718 | | ]); |
| 719 | | doh.register("nodelistExtension", [ |
| 720 | | { |
| 721 | | name: 'nodelistHtml', |
| 722 | | runTest: function(t){ |
| 723 | | window.currentTest = "nodelistExtension nodelistHtml"; |
| 724 | | console.log("running " + currentTest); |
| 725 | | |
| 726 | | dojo.query(".zork").html("<li dojoType='dojo.html.test.ParserInstantiateTester'>1</li><li dojoType='dojo.html.test.ParserInstantiateTester'>2</li><li dojoType='dojo.html.test.ParserInstantiateTester'>3</li>", |
| 727 | | { |
| 728 | | parseContent: true, |
| 729 | | onBegin: function() { |
| 730 | | this.content = this.content.replace(/([0-9])/g, this.id + ": $1"); |
| 731 | | dojo.getObject(this.declaredClass).prototype.onBegin.call(this); |
| 732 | | } |
| 733 | | }).removeClass("notdone").addClass("done"); |
| 734 | | |
| 735 | | var liNodes = dojo.query(".zork > li"); |
| 736 | | |
| 737 | | // test the innerHTML's got replaced in our onBegin |
| 738 | | t.assertTrue( liNodes.every(function(n) { return n.innerHTML.match(/SetContent/) }) ); |
| 739 | | console.log(this.name + ": innerHTML.match subtest was ok"); |
| 740 | | // test the parent elements got the correct className |
| 741 | | t.assertTrue( dojo.query(".zork").every(function(n) { return n.className == "zork done"; }) ); |
| 742 | | console.log(this.name + ": li.className subtest was ok"); |
| 743 | | // and test the parser correctly created object from the child nodes |
| 744 | | t.assertTrue( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) ); |
| 745 | | console.log(this.name + ": Tester instantiation subtest was ok"); |
| 746 | | |
| 747 | | }, |
| 748 | | tearDown: function(){ |
| 749 | | // dojo.html._emptyNode(targetNode); |
| 750 | | } |
| 751 | | } |
| 752 | | ]); |
| 753 | | doh.register("fromMarkup", [ |
| 754 | | { |
| 755 | | name: 'contentOpFromMarkup', |
| 756 | | runTest: function(t){ |
| 757 | | window.currentTest = "fromMarkup contentOpFromMarkup"; |
| 758 | | console.log("running " + currentTest); |
| 759 | | |
| 760 | | dojo.parser.parse("markupSetContentOp"); |
| 761 | | t.assertTrue(dojo.byId("markupPane").innerHTML == "markupSetContentOp: new node content"); |
| 762 | | }, |
| 763 | | tearDown: function(){ |
| 764 | | dojo.byId("markupPane").innerHTML = "initial content"; |
| 765 | | } |
| 766 | | }, |
| 767 | | { |
| 768 | | name: 'extendedContentOpFromMarkup', |
| 769 | | runTest: function(t){ |
| 770 | | window.currentTest = "fromMarkup extendedSetMethod"; |
| 771 | | console.log("running " + currentTest); |
| 772 | | |
| 773 | | dojo.parser.parse("markupSetContentOpX"); |
| 774 | | |
| 775 | | t.assertTrue(dojo.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase()); |
| 776 | | }, |
| 777 | | tearDown: function(){ |
| 778 | | dojo.byId("markupPane").innerHTML = "initial content"; |
| 779 | | } |
| 780 | | } |
| 781 | | ]); |
| 782 | | doh.register("reuse", [ |
| 783 | | { |
| 784 | | name: 'ContentSetterReUse', |
| 785 | | runTest: function(t){ |
| 786 | | window.currentTest = "reuse ContentSetterReUser"; |
| 787 | | console.log("running " + currentTest); |
| 788 | | |
| 789 | | targetNode = dojo.byId('pane1'); |
| 790 | | var args = [ |
| 791 | | [ |
| 792 | | "simple" |
| 793 | | ], |
| 794 | | [ |
| 795 | | '<div dojoType="dojo.html.test.SimpleThing" jsId="id00">parsed content</div>', |
| 796 | | { |
| 797 | | parseContent: true |
| 798 | | } |
| 799 | | ], |
| 800 | | [ |
| 801 | | '<div dojoType="dojo.html.test.SimpleThing" jsId="id01">parsed content</div>', |
| 802 | | { |
| 803 | | parseContent: true |
| 804 | | } |
| 805 | | ] |
| 806 | | ]; |
| 807 | | var setter = new dojo.html._ContentSetter({ |
| 808 | | node: targetNode |
| 809 | | }); |
| 810 | | dojo.forEach(args, function(applyArgs) { |
| 811 | | setter.node = targetNode; |
| 812 | | setter.set.apply(setter, applyArgs); |
| 813 | | setter.tearDown(); |
| 814 | | }); |
| 815 | | t.assertTrue(id00 && id01); |
| 816 | | // check we cleaned up after ourselves |
| 817 | | t.assertFalse(setter.parseResults); |
| 818 | | }, |
| 819 | | tearDown: function(){ |
| 820 | | dojo.byId("markupPane").innerHTML = "initial content"; |
| 821 | | } |
| 822 | | } |
| 823 | | ]); |
| 824 | | |
| 825 | | |
| 826 | | |
| 827 | | doh.run(); |
| 828 | | }); |
| 829 | | </script> |
| 830 | | <style> |
| 831 | | @import "../../../dojo/resources/dojo.css"; |
| 832 | | |
| 833 | | .box { |
| 834 | | border: 1px solid black; |
| 835 | | height: 190px; |
| 836 | | width: 80%; |
| 837 | | overflow: auto; |
| 838 | | } |
| 839 | | .zork { |
| 840 | | width: 200px; |
| 841 | | margin: 10px; |
| 842 | | list-style-type: none; |
| 843 | | } |
| 844 | | .notdone { |
| 845 | | color: #999; background-color: #ccc; |
| 846 | | } |
| 847 | | .done { |
| 848 | | color: #fff; background-color: #090; |
| 849 | | } |
| 850 | | .done li { |
| 851 | | border: 1px; background-color: orange; |
| 852 | | width: 180px; |
| 853 | | } |
| 854 | | .red { |
| 855 | | color: red; |
| 856 | | } |
| 857 | | |
| 858 | | </style> |
| 859 | | </head> |
| 860 | | <body class='tundra'> |
| 861 | | <h1>dojo.html.set</h1> |
| 862 | | |
| 863 | | <div id="pane1"></div> |
| 864 | | <div id="pane2"></div> |
| 865 | | <table id='tableTest' class='box'> |
| 866 | | <thead> |
| 867 | | <tr> |
| 868 | | <td></td> |
| 869 | | </tr> |
| 870 | | </thead> |
| 871 | | <tbody> |
| 872 | | <tr> |
| 873 | | <td></td> |
| 874 | | </tr> |
| 875 | | <tbody> |
| 876 | | </table> |
| 877 | | <ul class="zork notdone">initial content</ul> |
| 878 | | <ul class="zork notdone">initial content</ul> |
| 879 | | <ul class="zork notdone">initial content</ul> |
| 880 | | |
| 881 | | <div id="markupPane">initial content</div> |
| 882 | | <div id="markupSetContentOp"> |
| 883 | | <div dojoType="dojo.html.test.DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div> |
| 884 | | </div> |
| 885 | | <div id="markupSetContentOpX"> |
</
