Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use childNodes method in storybook-root
Best JavaScript code snippet using storybook-root
ReactDOMServerIntegrationElements-test.js
Source:ReactDOMServerIntegrationElements-test.js 
1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 */9'use strict';10const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');11const TEXT_NODE_TYPE = 3;12let React;13let ReactDOM;14let ReactDOMServer;15function initModules() {16 jest.resetModuleRegistry();17 React = require('react');18 ReactDOM = require('react-dom');19 ReactDOMServer = require('react-dom/server');20 // Make them available to the helpers.21 return {22 ReactDOM,23 ReactDOMServer,24 };25}26const {27 resetModules,28 itRenders,29 itThrowsWhenRendering,30 serverRender,31 streamRender,32 clientCleanRender,33 clientRenderOnServerString,34} = ReactDOMServerIntegrationUtils(initModules);35describe('ReactDOMServerIntegration', () => {36 beforeEach(() => {37 resetModules();38 });39 describe('elements and children', function() {40 function expectNode(node, type, value) {41 expect(node).not.toBe(null);42 expect(node.nodeType).toBe(type);43 expect(node.nodeValue).toMatch(value);44 }45 function expectTextNode(node, text) {46 expectNode(node, TEXT_NODE_TYPE, text);47 }48 describe('text children', function() {49 itRenders('a div with text', async render => {50 const e = await render(<div>Text</div>);51 expect(e.tagName).toBe('DIV');52 expect(e.childNodes.length).toBe(1);53 expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');54 });55 itRenders('a div with text with flanking whitespace', async render => {56 // prettier-ignore57 const e = await render(<div> Text </div>);58 expect(e.childNodes.length).toBe(1);59 expectNode(e.childNodes[0], TEXT_NODE_TYPE, ' Text ');60 });61 itRenders('a div with an empty text child', async render => {62 const e = await render(<div>{''}</div>);63 expect(e.childNodes.length).toBe(0);64 });65 itRenders('a div with multiple empty text children', async render => {66 const e = await render(67 <div>68 {''}69 {''}70 {''}71 </div>,72 );73 if (render === serverRender || render === streamRender) {74 // For plain server markup result we should have no text nodes if75 // they're all empty.76 expect(e.childNodes.length).toBe(0);77 expect(e.textContent).toBe('');78 } else {79 expect(e.childNodes.length).toBe(3);80 expectTextNode(e.childNodes[0], '');81 expectTextNode(e.childNodes[1], '');82 expectTextNode(e.childNodes[2], '');83 }84 });85 itRenders('a div with multiple whitespace children', async render => {86 // prettier-ignore87 const e = await render(<div>{' '}{' '}{' '}</div>);88 if (89 render === serverRender ||90 render === clientRenderOnServerString ||91 render === streamRender92 ) {93 // For plain server markup result we have comments between.94 // If we're able to hydrate, they remain.95 expect(e.childNodes.length).toBe(5);96 expectTextNode(e.childNodes[0], ' ');97 expectTextNode(e.childNodes[2], ' ');98 expectTextNode(e.childNodes[4], ' ');99 } else {100 expect(e.childNodes.length).toBe(3);101 expectTextNode(e.childNodes[0], ' ');102 expectTextNode(e.childNodes[1], ' ');103 expectTextNode(e.childNodes[2], ' ');104 }105 });106 itRenders('a div with text sibling to a node', async render => {107 const e = await render(108 <div>109 Text<span>More Text</span>110 </div>,111 );112 let spanNode;113 expect(e.childNodes.length).toBe(2);114 spanNode = e.childNodes[1];115 expectTextNode(e.childNodes[0], 'Text');116 expect(spanNode.tagName).toBe('SPAN');117 expect(spanNode.childNodes.length).toBe(1);118 expectNode(spanNode.firstChild, TEXT_NODE_TYPE, 'More Text');119 });120 itRenders('a non-standard element with text', async render => {121 // This test suite generally assumes that we get exactly122 // the same warnings (or none) for all scenarios including123 // SSR + innerHTML, hydration, and client-side rendering.124 // However this particular warning fires only when creating125 // DOM nodes on the client side. We force it to fire early126 // so that it gets deduplicated later, and doesn't fail the test.127 expect(() => {128 ReactDOM.render(<nonstandard />, document.createElement('div'));129 }).toWarnDev('The tag <nonstandard> is unrecognized in this browser.');130 const e = await render(<nonstandard>Text</nonstandard>);131 expect(e.tagName).toBe('NONSTANDARD');132 expect(e.childNodes.length).toBe(1);133 expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');134 });135 itRenders('a custom element with text', async render => {136 const e = await render(<custom-element>Text</custom-element>);137 expect(e.tagName).toBe('CUSTOM-ELEMENT');138 expect(e.childNodes.length).toBe(1);139 expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');140 });141 itRenders('a leading blank child with a text sibling', async render => {142 const e = await render(<div>{''}foo</div>);143 if (render === serverRender || render === streamRender) {144 expect(e.childNodes.length).toBe(1);145 expectTextNode(e.childNodes[0], 'foo');146 } else {147 expect(e.childNodes.length).toBe(2);148 expectTextNode(e.childNodes[0], '');149 expectTextNode(e.childNodes[1], 'foo');150 }151 });152 itRenders('a trailing blank child with a text sibling', async render => {153 const e = await render(<div>foo{''}</div>);154 // with Fiber, there are just two text nodes.155 if (render === serverRender || render === streamRender) {156 expect(e.childNodes.length).toBe(1);157 expectTextNode(e.childNodes[0], 'foo');158 } else {159 expect(e.childNodes.length).toBe(2);160 expectTextNode(e.childNodes[0], 'foo');161 expectTextNode(e.childNodes[1], '');162 }163 });164 itRenders('an element with two text children', async render => {165 const e = await render(166 <div>167 {'foo'}168 {'bar'}169 </div>,170 );171 if (172 render === serverRender ||173 render === clientRenderOnServerString ||174 render === streamRender175 ) {176 // In the server render output there's a comment between them.177 expect(e.childNodes.length).toBe(3);178 expectTextNode(e.childNodes[0], 'foo');179 expectTextNode(e.childNodes[2], 'bar');180 } else {181 expect(e.childNodes.length).toBe(2);182 expectTextNode(e.childNodes[0], 'foo');183 expectTextNode(e.childNodes[1], 'bar');184 }185 });186 itRenders(187 'a component returning text node between two text nodes',188 async render => {189 const B = () => 'b';190 const e = await render(191 <div>192 {'a'}193 <B />194 {'c'}195 </div>,196 );197 if (198 render === serverRender ||199 render === clientRenderOnServerString ||200 render === streamRender201 ) {202 // In the server render output there's a comment between them.203 expect(e.childNodes.length).toBe(5);204 expectTextNode(e.childNodes[0], 'a');205 expectTextNode(e.childNodes[2], 'b');206 expectTextNode(e.childNodes[4], 'c');207 } else {208 expect(e.childNodes.length).toBe(3);209 expectTextNode(e.childNodes[0], 'a');210 expectTextNode(e.childNodes[1], 'b');211 expectTextNode(e.childNodes[2], 'c');212 }213 },214 );215 itRenders('a tree with sibling host and text nodes', async render => {216 class X extends React.Component {217 render() {218 return [null, [<Y key="1" />], false];219 }220 }221 function Y() {222 return [<Z key="1" />, ['c']];223 }224 function Z() {225 return null;226 }227 const e = await render(228 <div>229 {[['a'], 'b']}230 <div>231 <X key="1" />232 d233 </div>234 e235 </div>,236 );237 if (238 render === serverRender ||239 render === clientRenderOnServerString ||240 render === streamRender241 ) {242 // In the server render output there's comments between text nodes.243 expect(e.childNodes.length).toBe(5);244 expectTextNode(e.childNodes[0], 'a');245 expectTextNode(e.childNodes[2], 'b');246 expect(e.childNodes[3].childNodes.length).toBe(3);247 expectTextNode(e.childNodes[3].childNodes[0], 'c');248 expectTextNode(e.childNodes[3].childNodes[2], 'd');249 expectTextNode(e.childNodes[4], 'e');250 } else {251 expect(e.childNodes.length).toBe(4);252 expectTextNode(e.childNodes[0], 'a');253 expectTextNode(e.childNodes[1], 'b');254 expect(e.childNodes[2].childNodes.length).toBe(2);255 expectTextNode(e.childNodes[2].childNodes[0], 'c');256 expectTextNode(e.childNodes[2].childNodes[1], 'd');257 expectTextNode(e.childNodes[3], 'e');258 }259 });260 });261 describe('number children', function() {262 itRenders('a number as single child', async render => {263 const e = await render(<div>{3}</div>);264 expect(e.textContent).toBe('3');265 });266 // zero is falsey, so it could look like no children if the code isn't careful.267 itRenders('zero as single child', async render => {268 const e = await render(<div>{0}</div>);269 expect(e.textContent).toBe('0');270 });271 itRenders('an element with number and text children', async render => {272 const e = await render(273 <div>274 {'foo'}275 {40}276 </div>,277 );278 // with Fiber, there are just two text nodes.279 if (280 render === serverRender ||281 render === clientRenderOnServerString ||282 render === streamRender283 ) {284 // In the server markup there's a comment between.285 expect(e.childNodes.length).toBe(3);286 expectTextNode(e.childNodes[0], 'foo');287 expectTextNode(e.childNodes[2], '40');288 } else {289 expect(e.childNodes.length).toBe(2);290 expectTextNode(e.childNodes[0], 'foo');291 expectTextNode(e.childNodes[1], '40');292 }293 });294 });295 describe('null, false, and undefined children', function() {296 itRenders('null single child as blank', async render => {297 const e = await render(<div>{null}</div>);298 expect(e.childNodes.length).toBe(0);299 });300 itRenders('false single child as blank', async render => {301 const e = await render(<div>{false}</div>);302 expect(e.childNodes.length).toBe(0);303 });304 itRenders('undefined single child as blank', async render => {305 const e = await render(<div>{undefined}</div>);306 expect(e.childNodes.length).toBe(0);307 });308 itRenders('a null component children as empty', async render => {309 const NullComponent = () => null;310 const e = await render(311 <div>312 <NullComponent />313 </div>,314 );315 expect(e.childNodes.length).toBe(0);316 });317 itRenders('null children as blank', async render => {318 const e = await render(<div>{null}foo</div>);319 expect(e.childNodes.length).toBe(1);320 expectTextNode(e.childNodes[0], 'foo');321 });322 itRenders('false children as blank', async render => {323 const e = await render(<div>{false}foo</div>);324 expect(e.childNodes.length).toBe(1);325 expectTextNode(e.childNodes[0], 'foo');326 });327 itRenders('null and false children together as blank', async render => {328 const e = await render(329 <div>330 {false}331 {null}foo{null}332 {false}333 </div>,334 );335 expect(e.childNodes.length).toBe(1);336 expectTextNode(e.childNodes[0], 'foo');337 });338 itRenders('only null and false children as blank', async render => {339 const e = await render(340 <div>341 {false}342 {null}343 {null}344 {false}345 </div>,346 );347 expect(e.childNodes.length).toBe(0);348 });349 });350 describe('elements with implicit namespaces', function() {351 itRenders('an svg element', async render => {352 const e = await render(<svg />);353 expect(e.childNodes.length).toBe(0);354 expect(e.tagName).toBe('svg');355 expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');356 });357 itRenders('svg child element with an attribute', async render => {358 let e = await render(<svg viewBox="0 0 0 0" />);359 expect(e.childNodes.length).toBe(0);360 expect(e.tagName).toBe('svg');361 expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');362 expect(e.getAttribute('viewBox')).toBe('0 0 0 0');363 });364 itRenders(365 'svg child element with a namespace attribute',366 async render => {367 let e = await render(368 <svg>369 <image xlinkHref="http://i.imgur.com/w7GCRPb.png" />370 </svg>,371 );372 e = e.firstChild;373 expect(e.childNodes.length).toBe(0);374 expect(e.tagName).toBe('image');375 expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');376 expect(e.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(377 'http://i.imgur.com/w7GCRPb.png',378 );379 },380 );381 itRenders('svg child element with a badly cased alias', async render => {382 let e = await render(383 <svg>384 <image xlinkhref="http://i.imgur.com/w7GCRPb.png" />385 </svg>,386 1,387 );388 e = e.firstChild;389 expect(e.hasAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe(390 false,391 );392 expect(e.getAttribute('xlinkhref')).toBe(393 'http://i.imgur.com/w7GCRPb.png',394 );395 });396 itRenders('svg element with a tabIndex attribute', async render => {397 let e = await render(<svg tabIndex="1" />);398 expect(e.tabIndex).toBe(1);399 });400 itRenders(401 'svg element with a badly cased tabIndex attribute',402 async render => {403 let e = await render(<svg tabindex="1" />, 1);404 expect(e.tabIndex).toBe(1);405 },406 );407 itRenders('svg element with a mixed case name', async render => {408 let e = await render(409 <svg>410 <filter>411 <feMorphology />412 </filter>413 </svg>,414 );415 e = e.firstChild.firstChild;416 expect(e.childNodes.length).toBe(0);417 expect(e.tagName).toBe('feMorphology');418 expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');419 });420 itRenders('a math element', async render => {421 const e = await render(<math />);422 expect(e.childNodes.length).toBe(0);423 expect(e.tagName).toBe('math');424 expect(e.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');425 });426 });427 // specially wrapped components428 // (see the big switch near the beginning ofReactDOMComponent.mountComponent)429 itRenders('an img', async render => {430 const e = await render(<img />);431 expect(e.childNodes.length).toBe(0);432 expect(e.nextSibling).toBe(null);433 expect(e.tagName).toBe('IMG');434 });435 itRenders('a button', async render => {436 const e = await render(<button />);437 expect(e.childNodes.length).toBe(0);438 expect(e.nextSibling).toBe(null);439 expect(e.tagName).toBe('BUTTON');440 });441 itRenders('a div with dangerouslySetInnerHTML number', async render => {442 // Put dangerouslySetInnerHTML one level deeper because otherwise443 // hydrating from a bad markup would cause a mismatch (since we don't444 // patch dangerouslySetInnerHTML as text content).445 const e = (await render(446 <div>447 <span dangerouslySetInnerHTML={{__html: 0}} />448 </div>,449 )).firstChild;450 expect(e.childNodes.length).toBe(1);451 expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);452 expect(e.textContent).toBe('0');453 });454 itRenders('a div with dangerouslySetInnerHTML boolean', async render => {455 // Put dangerouslySetInnerHTML one level deeper because otherwise456 // hydrating from a bad markup would cause a mismatch (since we don't457 // patch dangerouslySetInnerHTML as text content).458 const e = (await render(459 <div>460 <span dangerouslySetInnerHTML={{__html: false}} />461 </div>,462 )).firstChild;463 expect(e.childNodes.length).toBe(1);464 expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);465 expect(e.firstChild.data).toBe('false');466 });467 itRenders(468 'a div with dangerouslySetInnerHTML text string',469 async render => {470 // Put dangerouslySetInnerHTML one level deeper because otherwise471 // hydrating from a bad markup would cause a mismatch (since we don't472 // patch dangerouslySetInnerHTML as text content).473 const e = (await render(474 <div>475 <span dangerouslySetInnerHTML={{__html: 'hello'}} />476 </div>,477 )).firstChild;478 expect(e.childNodes.length).toBe(1);479 expect(e.firstChild.nodeType).toBe(TEXT_NODE_TYPE);480 expect(e.textContent).toBe('hello');481 },482 );483 itRenders(484 'a div with dangerouslySetInnerHTML element string',485 async render => {486 const e = await render(487 <div dangerouslySetInnerHTML={{__html: "<span id='child'/>"}} />,488 );489 expect(e.childNodes.length).toBe(1);490 expect(e.firstChild.tagName).toBe('SPAN');491 expect(e.firstChild.getAttribute('id')).toBe('child');492 expect(e.firstChild.childNodes.length).toBe(0);493 },494 );495 itRenders('a div with dangerouslySetInnerHTML object', async render => {496 const obj = {497 toString() {498 return "<span id='child'/>";499 },500 };501 const e = await render(<div dangerouslySetInnerHTML={{__html: obj}} />);502 expect(e.childNodes.length).toBe(1);503 expect(e.firstChild.tagName).toBe('SPAN');504 expect(e.firstChild.getAttribute('id')).toBe('child');505 expect(e.firstChild.childNodes.length).toBe(0);506 });507 itRenders(508 'a div with dangerouslySetInnerHTML set to null',509 async render => {510 const e = await render(511 <div dangerouslySetInnerHTML={{__html: null}} />,512 );513 expect(e.childNodes.length).toBe(0);514 },515 );516 itRenders(517 'a div with dangerouslySetInnerHTML set to undefined',518 async render => {519 const e = await render(520 <div dangerouslySetInnerHTML={{__html: undefined}} />,521 );522 expect(e.childNodes.length).toBe(0);523 },524 );525 itRenders('a noscript with children', async render => {526 const e = await render(527 <noscript>528 <div>Enable JavaScript to run this app.</div>529 </noscript>,530 );531 if (render === clientCleanRender) {532 // On the client we ignore the contents of a noscript533 expect(e.childNodes.length).toBe(0);534 } else {535 // On the server or when hydrating the content should be correct536 expect(e.childNodes.length).toBe(1);537 expect(e.firstChild.textContent).toBe(538 '<div>Enable JavaScript to run this app.</div>',539 );540 }541 });542 describe('newline-eating elements', function() {543 itRenders(544 'a newline-eating tag with content not starting with \\n',545 async render => {546 const e = await render(<pre>Hello</pre>);547 expect(e.textContent).toBe('Hello');548 },549 );550 itRenders(551 'a newline-eating tag with content starting with \\n',552 async render => {553 const e = await render(<pre>{'\nHello'}</pre>);554 expect(e.textContent).toBe('\nHello');555 },556 );557 itRenders('a normal tag with content starting with \\n', async render => {558 const e = await render(<div>{'\nHello'}</div>);559 expect(e.textContent).toBe('\nHello');560 });561 });562 describe('different component implementations', function() {563 function checkFooDiv(e) {564 expect(e.childNodes.length).toBe(1);565 expectNode(e.firstChild, TEXT_NODE_TYPE, 'foo');566 }567 itRenders('stateless components', async render => {568 const FunctionComponent = () => <div>foo</div>;569 checkFooDiv(await render(<FunctionComponent />));570 });571 itRenders('ES6 class components', async render => {572 class ClassComponent extends React.Component {573 render() {574 return <div>foo</div>;575 }576 }577 checkFooDiv(await render(<ClassComponent />));578 });579 itRenders('factory components', async render => {580 const FactoryComponent = () => {581 return {582 render: function() {583 return <div>foo</div>;584 },585 };586 };587 checkFooDiv(await render(<FactoryComponent />));588 });589 });590 describe('component hierarchies', async function() {591 itRenders('single child hierarchies of components', async render => {592 const Component = props => <div>{props.children}</div>;593 let e = await render(594 <Component>595 <Component>596 <Component>597 <Component />598 </Component>599 </Component>600 </Component>,601 );602 for (let i = 0; i < 3; i++) {603 expect(e.tagName).toBe('DIV');604 expect(e.childNodes.length).toBe(1);605 e = e.firstChild;606 }607 expect(e.tagName).toBe('DIV');608 expect(e.childNodes.length).toBe(0);609 });610 itRenders('multi-child hierarchies of components', async render => {611 const Component = props => <div>{props.children}</div>;612 const e = await render(613 <Component>614 <Component>615 <Component />616 <Component />617 </Component>618 <Component>619 <Component />620 <Component />621 </Component>622 </Component>,623 );624 expect(e.tagName).toBe('DIV');625 expect(e.childNodes.length).toBe(2);626 for (let i = 0; i < 2; i++) {627 const child = e.childNodes[i];628 expect(child.tagName).toBe('DIV');629 expect(child.childNodes.length).toBe(2);630 for (let j = 0; j < 2; j++) {631 const grandchild = child.childNodes[j];632 expect(grandchild.tagName).toBe('DIV');633 expect(grandchild.childNodes.length).toBe(0);634 }635 }636 });637 itRenders('a div with a child', async render => {638 const e = await render(639 <div id="parent">640 <div id="child" />641 </div>,642 );643 expect(e.id).toBe('parent');644 expect(e.childNodes.length).toBe(1);645 expect(e.childNodes[0].id).toBe('child');646 expect(e.childNodes[0].childNodes.length).toBe(0);647 });648 itRenders('a div with multiple children', async render => {649 const e = await render(650 <div id="parent">651 <div id="child1" />652 <div id="child2" />653 </div>,654 );655 expect(e.id).toBe('parent');656 expect(e.childNodes.length).toBe(2);657 expect(e.childNodes[0].id).toBe('child1');658 expect(e.childNodes[0].childNodes.length).toBe(0);659 expect(e.childNodes[1].id).toBe('child2');660 expect(e.childNodes[1].childNodes.length).toBe(0);661 });662 itRenders(663 'a div with multiple children separated by whitespace',664 async render => {665 const e = await render(666 <div id="parent">667 <div id="child1" /> <div id="child2" />668 </div>,669 );670 expect(e.id).toBe('parent');671 let child1, child2, textNode;672 expect(e.childNodes.length).toBe(3);673 child1 = e.childNodes[0];674 textNode = e.childNodes[1];675 child2 = e.childNodes[2];676 expect(child1.id).toBe('child1');677 expect(child1.childNodes.length).toBe(0);678 expectTextNode(textNode, ' ');679 expect(child2.id).toBe('child2');680 expect(child2.childNodes.length).toBe(0);681 },682 );683 itRenders(684 'a div with a single child surrounded by whitespace',685 async render => {686 // prettier-ignore687 const e = await render(<div id="parent"> <div id="child" /> </div>); // eslint-disable-line no-multi-spaces688 let textNode1, child, textNode2;689 expect(e.childNodes.length).toBe(3);690 textNode1 = e.childNodes[0];691 child = e.childNodes[1];692 textNode2 = e.childNodes[2];693 expect(e.id).toBe('parent');694 expectTextNode(textNode1, ' ');695 expect(child.id).toBe('child');696 expect(child.childNodes.length).toBe(0);697 expectTextNode(textNode2, ' ');698 },699 );700 itRenders('a composite with multiple children', async render => {701 const Component = props => props.children;702 const e = await render(703 <Component>{['a', 'b', [undefined], [[false, 'c']]]}</Component>,704 );705 let parent = e.parentNode;706 if (707 render === serverRender ||708 render === clientRenderOnServerString ||709 render === streamRender710 ) {711 // For plain server markup result we have comments between.712 // If we're able to hydrate, they remain.713 expect(parent.childNodes.length).toBe(5);714 expectTextNode(parent.childNodes[0], 'a');715 expectTextNode(parent.childNodes[2], 'b');716 expectTextNode(parent.childNodes[4], 'c');717 } else {718 expect(parent.childNodes.length).toBe(3);719 expectTextNode(parent.childNodes[0], 'a');720 expectTextNode(parent.childNodes[1], 'b');721 expectTextNode(parent.childNodes[2], 'c');722 }723 });724 });725 describe('escaping >, <, and &', function() {726 itRenders('>,<, and & as single child', async render => {727 const e = await render(<div>{'<span>Text"</span>'}</div>);728 expect(e.childNodes.length).toBe(1);729 expectNode(e.firstChild, TEXT_NODE_TYPE, '<span>Text"</span>');730 });731 itRenders('>,<, and & as multiple children', async render => {732 const e = await render(733 <div>734 {'<span>Text1"</span>'}735 {'<span>Text2"</span>'}736 </div>,737 );738 if (739 render === serverRender ||740 render === clientRenderOnServerString ||741 render === streamRender742 ) {743 expect(e.childNodes.length).toBe(3);744 expectTextNode(e.childNodes[0], '<span>Text1"</span>');745 expectTextNode(e.childNodes[2], '<span>Text2"</span>');746 } else {747 expect(e.childNodes.length).toBe(2);748 expectTextNode(e.childNodes[0], '<span>Text1"</span>');749 expectTextNode(e.childNodes[1], '<span>Text2"</span>');750 }751 });752 });753 describe('carriage return and null character', () => {754 // HTML parsing normalizes CR and CRLF to LF.755 // It also ignores null character.756 // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream757 // If we have a mismatch, it might be caused by that (and should not be reported).758 // We won't be patching up in this case as that matches our past behavior.759 itRenders(760 'an element with one text child with special characters',761 async render => {762 const e = await render(<div>{'foo\rbar\r\nbaz\nqux\u0000'}</div>);763 if (render === serverRender || render === streamRender) {764 expect(e.childNodes.length).toBe(1);765 // Everything becomes LF when parsed from server HTML.766 // Null character is ignored.767 expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar\nbaz\nqux');768 } else {769 expect(e.childNodes.length).toBe(1);770 // Client rendering (or hydration) uses JS value with CR.771 // Null character stays.772 expectNode(773 e.childNodes[0],774 TEXT_NODE_TYPE,775 'foo\rbar\r\nbaz\nqux\u0000',776 );777 }778 },779 );780 itRenders(781 'an element with two text children with special characters',782 async render => {783 const e = await render(784 <div>785 {'foo\rbar'}786 {'\r\nbaz\nqux\u0000'}787 </div>,788 );789 if (render === serverRender || render === streamRender) {790 // We have three nodes because there is a comment between them.791 expect(e.childNodes.length).toBe(3);792 // Everything becomes LF when parsed from server HTML.793 // Null character is ignored.794 expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');795 expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\nbaz\nqux');796 } else if (render === clientRenderOnServerString) {797 // We have three nodes because there is a comment between them.798 expect(e.childNodes.length).toBe(3);799 // Hydration uses JS value with CR and null character.800 expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');801 expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');802 } else {803 expect(e.childNodes.length).toBe(2);804 // Client rendering uses JS value with CR and null character.805 expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\rbar');806 expectNode(e.childNodes[1], TEXT_NODE_TYPE, '\r\nbaz\nqux\u0000');807 }808 },809 );810 itRenders(811 'an element with an attribute value with special characters',812 async render => {813 const e = await render(<a title={'foo\rbar\r\nbaz\nqux\u0000'} />);814 if (815 render === serverRender ||816 render === streamRender ||817 render === clientRenderOnServerString818 ) {819 // Everything becomes LF when parsed from server HTML.820 // Null character in an attribute becomes the replacement character.821 // Hydration also ends up with LF because we don't patch up attributes.822 expect(e.title).toBe('foo\nbar\nbaz\nqux\uFFFD');823 } else {824 // Client rendering uses JS value with CR and null character.825 expect(e.title).toBe('foo\rbar\r\nbaz\nqux\u0000');826 }827 },828 );829 });830 describe('components that throw errors', function() {831 itThrowsWhenRendering(832 'a function returning undefined',833 async render => {834 const UndefinedComponent = () => undefined;835 await render(<UndefinedComponent />, 1);836 },837 'UndefinedComponent(...): Nothing was returned from render. ' +838 'This usually means a return statement is missing. Or, to ' +839 'render nothing, return null.',840 );841 itThrowsWhenRendering(842 'a class returning undefined',843 async render => {844 class UndefinedComponent extends React.Component {845 render() {846 return undefined;847 }848 }849 await render(<UndefinedComponent />, 1);850 },851 'UndefinedComponent(...): Nothing was returned from render. ' +852 'This usually means a return statement is missing. Or, to ' +853 'render nothing, return null.',854 );855 itThrowsWhenRendering(856 'a function returning an object',857 async render => {858 const ObjectComponent = () => ({x: 123});859 await render(<ObjectComponent />, 1);860 },861 'Objects are not valid as a React child (found: object with keys {x}).' +862 (__DEV__863 ? ' If you meant to render a collection of children, use ' +864 'an array instead.'865 : ''),866 );867 itThrowsWhenRendering(868 'a class returning an object',869 async render => {870 class ObjectComponent extends React.Component {871 render() {872 return {x: 123};873 }874 }875 await render(<ObjectComponent />, 1);876 },877 'Objects are not valid as a React child (found: object with keys {x}).' +878 (__DEV__879 ? ' If you meant to render a collection of children, use ' +880 'an array instead.'881 : ''),882 );883 itThrowsWhenRendering(884 'top-level object',885 async render => {886 await render({x: 123});887 },888 'Objects are not valid as a React child (found: object with keys {x}).' +889 (__DEV__890 ? ' If you meant to render a collection of children, use ' +891 'an array instead.'892 : ''),893 );894 });895 describe('badly-typed elements', function() {896 itThrowsWhenRendering(897 'object',898 async render => {899 let EmptyComponent = {};900 expect(() => {901 EmptyComponent = <EmptyComponent />;902 }).toWarnDev(903 'Warning: React.createElement: type is invalid -- expected a string ' +904 '(for built-in components) or a class/function (for composite ' +905 'components) but got: object. You likely forgot to export your ' +906 "component from the file it's defined in, or you might have mixed up " +907 'default and named imports.',908 {withoutStack: true},909 );910 await render(EmptyComponent);911 },912 'Element type is invalid: expected a string (for built-in components) or a class/function ' +913 '(for composite components) but got: object.' +914 (__DEV__915 ? " You likely forgot to export your component from the file it's defined in, " +916 'or you might have mixed up default and named imports.'917 : ''),918 );919 itThrowsWhenRendering(920 'null',921 async render => {922 let NullComponent = null;923 expect(() => {924 NullComponent = <NullComponent />;925 }).toWarnDev(926 'Warning: React.createElement: type is invalid -- expected a string ' +927 '(for built-in components) or a class/function (for composite ' +928 'components) but got: null.',929 {withoutStack: true},930 );931 await render(NullComponent);932 },933 'Element type is invalid: expected a string (for built-in components) or a class/function ' +934 '(for composite components) but got: null',935 );936 itThrowsWhenRendering(937 'undefined',938 async render => {939 let UndefinedComponent = undefined;940 expect(() => {941 UndefinedComponent = <UndefinedComponent />;942 }).toWarnDev(943 'Warning: React.createElement: type is invalid -- expected a string ' +944 '(for built-in components) or a class/function (for composite ' +945 'components) but got: undefined. You likely forgot to export your ' +946 "component from the file it's defined in, or you might have mixed up " +947 'default and named imports.',948 {withoutStack: true},949 );950 await render(UndefinedComponent);951 },952 'Element type is invalid: expected a string (for built-in components) or a class/function ' +953 '(for composite components) but got: undefined.' +954 (__DEV__955 ? " You likely forgot to export your component from the file it's defined in, " +956 'or you might have mixed up default and named imports.'957 : ''),958 );959 });960 });...
CreditDisplaySpec.js
Source:CreditDisplaySpec.js
1defineSuite([2 'Scene/CreditDisplay',3 'Core/defined',4 'Core/Credit'5 ], function(6 CreditDisplay,7 defined,8 Credit) {9 'use strict';10 var container;11 var imageContainer = 'cesium-credit-imageContainer';12 var textContainer = 'cesium-credit-textContainer';13 var text = 'cesium-credit-text';14 var image = 'cesium-credit-image';15 var imgSrc = 'imagesrc';16 var delimiter = 'cesium-credit-delimiter';17 var creditDisplay;18 beforeEach(function() {19 container = document.createElement('div');20 container.id = 'credit-container';21 });22 afterEach(function(){23 if (defined(creditDisplay)) {24 creditDisplay.destroy();25 creditDisplay = undefined;26 }27 });28 it('credit display throws with no container', function() {29 expect(function() {30 return new CreditDisplay();31 }).toThrowDeveloperError();32 });33 it('credit display addCredit throws when credit is undefined', function() {34 expect(function() {35 creditDisplay = new CreditDisplay(container);36 creditDisplay.addCredit();37 }).toThrowDeveloperError();38 });39 it('credit display addDefaultCredit throws when credit is undefined', function() {40 expect(function() {41 creditDisplay = new CreditDisplay(container);42 creditDisplay.addDefaultCredit();43 }).toThrowDeveloperError();44 });45 it('credit display removeDefaultCredit throws when credit is undefined', function() {46 expect(function() {47 creditDisplay = new CreditDisplay(container);48 creditDisplay.removeDefaultCredit();49 }).toThrowDeveloperError();50 });51 it('credits have unique ids', function() {52 var credit1 = new Credit({53 text: 'credit1',54 imageUrl: imgSrc,55 link: 'http://cesiumjs.org/'56 });57 var credit2 = new Credit({58 text: 'credit2',59 imageUrl: imgSrc,60 link: 'http://cesiumjs.org/'61 });62 expect(credit1.id).not.toEqual(credit2.id);63 var credit1a = new Credit({64 text: 'credit1',65 imageUrl: imgSrc,66 link: 'http://cesiumjs.org/'67 });68 expect(credit1.id).toEqual(credit1a.id);69 });70 it('credit display displays text credit', function() {71 creditDisplay = new CreditDisplay(container);72 var credit = new Credit({73 text: 'credit1',74 showOnScreen: true75 });76 creditDisplay.beginFrame();77 creditDisplay.addCredit(credit);78 creditDisplay.endFrame();79 expect(container.childNodes.length).toEqual(3);80 var child0 = container.childNodes[0];81 var child1 = container.childNodes[1];82 expect(child0.className).toEqual(imageContainer);83 expect(child1.className).toEqual(textContainer);84 expect(child0.childNodes.length).toEqual(0);85 expect(child1.childNodes.length).toEqual(1);86 expect(child1.childNodes[0].className).toEqual(text);87 expect(child1.childNodes[0].innerHTML).toEqual('credit1');88 });89 it('credit display displays image credit', function() {90 creditDisplay = new CreditDisplay(container);91 var credit = new Credit({92 imageUrl: imgSrc,93 showOnScreen: true94 });95 creditDisplay.beginFrame();96 creditDisplay.addCredit(credit);97 creditDisplay.endFrame();98 var child0 = container.childNodes[0];99 var child1 = container.childNodes[1];100 expect(child0.className).toEqual(imageContainer);101 expect(child1.className).toEqual(textContainer);102 expect(child0.childNodes.length).toEqual(1);103 expect(child1.childNodes.length).toEqual(0);104 var child00 = child0.childNodes[0];105 expect(child00.className).toEqual(image);106 expect(child00.childNodes.length).toEqual(1);107 expect(child00.childNodes[0].src).toContain(imgSrc);108 });109 it('credit display displays hyperlink credit', function() {110 creditDisplay = new CreditDisplay(container);111 var link = 'http://cesiumjs.org/';112 var credit = new Credit({113 link: link,114 showOnScreen: true115 });116 creditDisplay.beginFrame();117 creditDisplay.addCredit(credit);118 creditDisplay.endFrame();119 var child0 = container.childNodes[0];120 var child1 = container.childNodes[1];121 expect(child0.className).toEqual(imageContainer);122 expect(child1.className).toEqual(textContainer);123 expect(child0.childNodes.length).toEqual(0);124 expect(child1.childNodes.length).toEqual(1);125 var child10 = child1.childNodes[0];126 expect(child10.className).toEqual(text);127 expect(child10.childNodes.length).toEqual(1);128 expect(child10.childNodes[0].href).toEqual(link);129 expect(child10.childNodes[0].innerHTML).toEqual(link);130 });131 it('credit display updates html when credits change', function() {132 var credit1 = new Credit({133 text: 'credit1',134 showOnScreen: true135 });136 var credit2 = new Credit({137 imageUrl: imgSrc,138 showOnScreen: true139 });140 creditDisplay = new CreditDisplay(container);141 creditDisplay.beginFrame();142 creditDisplay.addCredit(credit1);143 creditDisplay.endFrame();144 var innerHTML = container.innerHTML;145 var child0 = container.childNodes[0];146 var child1 = container.childNodes[1];147 expect(child0.childNodes.length).toEqual(0);148 expect(child1.childNodes.length).toEqual(1);149 expect(child1.childNodes[0].innerHTML).toEqual('credit1');150 creditDisplay.beginFrame();151 creditDisplay.addCredit(credit2);152 creditDisplay.endFrame();153 expect(container.innerHTML).not.toEqual(innerHTML);154 innerHTML = container.innerHTML;155 child0 = container.childNodes[0];156 child1 = container.childNodes[1];157 expect(child0.childNodes.length).toEqual(1);158 expect(child1.childNodes.length).toEqual(0);159 var child00 = child0.childNodes[0];160 expect(child00.childNodes.length).toEqual(1);161 expect(child00.childNodes[0].src).toContain(imgSrc);162 creditDisplay.beginFrame();163 creditDisplay.addCredit(credit1);164 creditDisplay.addCredit(credit2);165 creditDisplay.endFrame();166 expect(container.innerHTML).not.toEqual(innerHTML);167 innerHTML = container.innerHTML;168 expect(container.childNodes[0].childNodes.length).toEqual(1);169 expect(container.childNodes[1].childNodes.length).toEqual(1);170 creditDisplay.beginFrame();171 creditDisplay.endFrame();172 expect(container.innerHTML).not.toEqual(innerHTML);173 expect(container.childNodes[0].childNodes.length).toEqual(0);174 expect(container.childNodes[1].childNodes.length).toEqual(0);175 });176 it('credit display uses delimeter for text credits', function() {177 var credit1 = new Credit({178 text: 'credit1',179 showOnScreen: true180 });181 var credit2 = new Credit({182 text: 'credit2',183 showOnScreen: true184 });185 creditDisplay = new CreditDisplay(container, ', ');186 creditDisplay.beginFrame();187 creditDisplay.addCredit(credit1);188 creditDisplay.addCredit(credit2);189 creditDisplay.endFrame();190 var child0 = container.childNodes[0];191 var child1 = container.childNodes[1];192 expect(child0.className).toEqual(imageContainer);193 expect(child1.className).toEqual(textContainer);194 expect(child0.childNodes.length).toEqual(0);195 expect(child1.childNodes.length).toEqual(3);196 expect(child1.childNodes[0].className).toEqual(text);197 expect(child1.childNodes[0].innerHTML).toEqual('credit1');198 expect(child1.childNodes[1].className).toEqual(delimiter);199 expect(child1.childNodes[1].innerHTML).toEqual(', ');200 expect(child1.childNodes[2].className).toEqual(text);201 expect(child1.childNodes[2].innerHTML).toEqual('credit2');202 });203 it('credit display manages delimeters correctly for text credits', function() {204 var credit1 = new Credit({205 text: 'credit1',206 showOnScreen: true207 });208 var credit2 = new Credit({209 text: 'credit2',210 showOnScreen: true211 });212 var credit3 = new Credit({213 text: 'credit3',214 showOnScreen: true215 });216 creditDisplay = new CreditDisplay(container, ', ');217 creditDisplay.beginFrame();218 creditDisplay.addCredit(credit1);219 creditDisplay.addCredit(credit2);220 creditDisplay.addCredit(credit3);221 creditDisplay.endFrame();222 var child0 = container.childNodes[0];223 var child1 = container.childNodes[1];224 expect(child0.className).toEqual(imageContainer);225 expect(child1.className).toEqual(textContainer);226 expect(child0.childNodes.length).toEqual(0);227 expect(child1.childNodes.length).toEqual(5);228 expect(child1.childNodes[0].className).toEqual(text);229 expect(child1.childNodes[1].className).toEqual(delimiter);230 expect(child1.childNodes[2].className).toEqual(text);231 expect(child1.childNodes[3].className).toEqual(delimiter);232 expect(child1.childNodes[4].className).toEqual(text);233 creditDisplay.beginFrame();234 creditDisplay.addCredit(credit2);235 creditDisplay.addCredit(credit3);236 creditDisplay.endFrame();237 child1 = container.childNodes[1];238 expect(child1.className).toEqual(textContainer);239 expect(child1.childNodes.length).toEqual(3);240 expect(child1.childNodes[0].className).toEqual(text);241 expect(child1.childNodes[1].className).toEqual(delimiter);242 expect(child1.childNodes[2].className).toEqual(text);243 creditDisplay.beginFrame();244 creditDisplay.addCredit(credit2);245 creditDisplay.endFrame();246 child1 = container.childNodes[1];247 expect(child1.className).toEqual(textContainer);248 expect(child1.childNodes.length).toEqual(1);249 expect(child1.childNodes[0].className).toEqual(text);250 creditDisplay.beginFrame();251 creditDisplay.addCredit(credit2);252 creditDisplay.addCredit(credit3);253 creditDisplay.endFrame();254 child1 = container.childNodes[1];255 expect(child1.className).toEqual(textContainer);256 expect(child1.childNodes.length).toEqual(3);257 expect(child1.childNodes[0].className).toEqual(text);258 expect(child1.childNodes[1].className).toEqual(delimiter);259 expect(child1.childNodes[2].className).toEqual(text);260 });261 it('credit display uses text as title for image credit', function() {262 var credit1 = new Credit({263 text: 'credit text',264 imageUrl: imgSrc,265 showOnScreen: true266 });267 creditDisplay = new CreditDisplay(container);268 creditDisplay.beginFrame();269 creditDisplay.addCredit(credit1);270 creditDisplay.endFrame();271 var child0 = container.childNodes[0];272 expect(child0.className).toEqual(imageContainer);273 expect(child0.childNodes.length).toEqual(1);274 var child00 = child0.childNodes[0];275 expect(child00.className).toEqual(image);276 expect(child00.childNodes.length).toEqual(1);277 expect(child00.childNodes[0].src).toContain(imgSrc);278 expect(child00.childNodes[0].alt).toEqual('credit text');279 expect(child00.childNodes[0].title).toEqual('credit text');280 });281 it('credit display creates image credit with hyperlink', function() {282 var credit1 = new Credit({283 imageUrl: imgSrc,284 link: 'link.com',285 showOnScreen: true286 });287 creditDisplay = new CreditDisplay(container);288 creditDisplay.beginFrame();289 creditDisplay.addCredit(credit1);290 creditDisplay.endFrame();291 var child0 = container.childNodes[0];292 expect(child0.className).toEqual(imageContainer);293 expect(child0.childNodes.length).toEqual(1);294 var child00 = child0.childNodes[0];295 expect(child00.className).toEqual(image);296 expect(child00.childNodes.length).toEqual(1);297 var child000 = child00.childNodes[0];298 expect(child000.href).toContain('link.com');299 expect(child000.childNodes.length).toEqual(1);300 expect(child000.childNodes[0].src).toContain(imgSrc);301 });302 it('credit display displays default credit', function() {303 var defaultCredit = new Credit({304 text: 'default credit',305 showOnScreen: true306 });307 var credit1 = new Credit({308 text: 'credit1',309 showOnScreen: true310 });311 creditDisplay = new CreditDisplay(container, ', ');312 creditDisplay.addDefaultCredit(defaultCredit);313 creditDisplay.beginFrame();314 creditDisplay.addCredit(credit1);315 creditDisplay.endFrame();316 var child1 = container.childNodes[1];317 expect(child1.className).toEqual(textContainer);318 expect(child1.childNodes.length).toEqual(3);319 expect(child1.childNodes[0].className).toEqual(text);320 expect(child1.childNodes[0].innerHTML).toEqual('default credit');321 expect(child1.childNodes[1].className).toEqual(delimiter);322 expect(child1.childNodes[1].innerHTML).toEqual(', ');323 expect(child1.childNodes[2].className).toEqual(text);324 expect(child1.childNodes[2].innerHTML).toEqual('credit1');325 creditDisplay.beginFrame();326 creditDisplay.endFrame();327 child1 = container.childNodes[1];328 expect(child1.className).toEqual(textContainer);329 expect(child1.childNodes.length).toEqual(1);330 expect(child1.childNodes[0].className).toEqual(text);331 expect(child1.childNodes[0].innerHTML).toEqual('default credit');332 });333 it('credit display displays credits when default is removed', function() {334 var defaultCredit = new Credit({335 text: 'defaultCredit',336 showOnScreen: true337 });338 var credit1 = new Credit({339 text: 'credit1',340 showOnScreen: true341 });342 creditDisplay = new CreditDisplay(container, ', ');343 creditDisplay.addDefaultCredit(defaultCredit);344 creditDisplay.beginFrame();345 creditDisplay.addCredit(credit1);346 creditDisplay.endFrame();347 var child1 = container.childNodes[1];348 expect(child1.className).toEqual(textContainer);349 expect(child1.childNodes.length).toEqual(3);350 expect(child1.childNodes[0].className).toEqual(text);351 expect(child1.childNodes[0].innerHTML).toEqual('defaultCredit');352 expect(child1.childNodes[1].className).toEqual(delimiter);353 expect(child1.childNodes[1].innerHTML).toEqual(', ');354 expect(child1.childNodes[2].className).toEqual(text);355 expect(child1.childNodes[2].innerHTML).toEqual('credit1');356 creditDisplay.removeDefaultCredit(defaultCredit);357 creditDisplay.beginFrame();358 creditDisplay.addCredit(credit1);359 creditDisplay.endFrame();360 child1 = container.childNodes[1];361 expect(child1.className).toEqual(textContainer);362 expect(child1.childNodes.length).toEqual(1);363 expect(child1.childNodes[0].className).toEqual(text);364 expect(child1.childNodes[0].innerHTML).toEqual('credit1');365 });366 it('credit display displays default image credit', function() {367 var defaultCredit = new Credit({368 imageUrl: imgSrc,369 showOnScreen: true370 });371 var credit1 = new Credit({372 text: 'credit1',373 showOnScreen: true374 });375 creditDisplay = new CreditDisplay(container, ', ');376 creditDisplay.addDefaultCredit(defaultCredit);377 creditDisplay.beginFrame();378 creditDisplay.addCredit(credit1);379 creditDisplay.endFrame();380 var child0 = container.childNodes[0];381 var child1 = container.childNodes[1];382 expect(child0.className).toEqual(imageContainer);383 expect(child1.className).toEqual(textContainer);384 expect(child0.childNodes.length).toEqual(1);385 expect(child1.childNodes.length).toEqual(1);386 creditDisplay.beginFrame();387 creditDisplay.endFrame();388 child0 = container.childNodes[0];389 child1 = container.childNodes[1];390 expect(child0.className).toEqual(imageContainer);391 expect(child1.className).toEqual(textContainer);392 expect(child0.childNodes.length).toEqual(1);393 expect(child1.childNodes.length).toEqual(0);394 });395 it('credit display displays credits when default image is removed', function() {396 var defaultCredit = new Credit({397 imageUrl: imgSrc,398 showOnScreen: true399 });400 var credit1 = new Credit({401 text: 'credit1',402 showOnScreen: true403 });404 creditDisplay = new CreditDisplay(container, ', ');405 creditDisplay.addDefaultCredit(defaultCredit);406 creditDisplay.beginFrame();407 creditDisplay.addCredit(credit1);408 creditDisplay.endFrame();409 var child0 = container.childNodes[0];410 var child1 = container.childNodes[1];411 expect(child0.className).toEqual(imageContainer);412 expect(child1.className).toEqual(textContainer);413 expect(child0.childNodes.length).toEqual(1);414 expect(child1.childNodes.length).toEqual(1);415 creditDisplay.removeDefaultCredit(defaultCredit);416 creditDisplay.beginFrame();417 creditDisplay.addCredit(credit1);418 creditDisplay.endFrame();419 child0 = container.childNodes[0];420 child1 = container.childNodes[1];421 expect(child0.className).toEqual(imageContainer);422 expect(child1.className).toEqual(textContainer);423 expect(child0.childNodes.length).toEqual(0);424 expect(child1.childNodes.length).toEqual(1);425 });426 it('credit display only displays one if two image credits are equal', function() {427 var credit1 = new Credit({428 imageUrl: imgSrc,429 showOnScreen: true430 });431 var credit2 = new Credit({432 imageUrl: imgSrc,433 showOnScreen: true434 });435 creditDisplay = new CreditDisplay(container);436 creditDisplay.beginFrame();437 creditDisplay.addCredit(credit1);438 creditDisplay.addCredit(credit2);439 creditDisplay.endFrame();440 var child0 = container.childNodes[0];441 var child1 = container.childNodes[1];442 expect(child0.className).toEqual(imageContainer);443 expect(child1.className).toEqual(textContainer);444 expect(child0.childNodes.length).toEqual(1);445 expect(child1.childNodes.length).toEqual(0);446 var child00 = child0.childNodes[0];447 expect(child00.className).toEqual(image);448 expect(child00.childNodes.length).toEqual(1);449 expect(child00.childNodes[0].src).toContain(imgSrc);450 });451 it('credit display only displays one if two text credits are equal', function() {452 var credit1 = new Credit({453 text: 'credit1',454 showOnScreen: true455 });456 var credit2 = new Credit({457 text: 'credit1',458 showOnScreen: true459 });460 creditDisplay = new CreditDisplay(container);461 creditDisplay.beginFrame();462 creditDisplay.addCredit(credit1);463 creditDisplay.addCredit(credit2);464 creditDisplay.endFrame();465 var child0 = container.childNodes[0];466 var child1 = container.childNodes[1];467 expect(child0.className).toEqual(imageContainer);468 expect(child1.className).toEqual(textContainer);469 expect(child0.childNodes.length).toEqual(0);470 expect(child1.childNodes.length).toEqual(1);471 expect(child1.childNodes[0].className).toEqual(text);472 expect(child1.childNodes[0].innerHTML).toEqual('credit1');473 });474 it('displays credits in a lightbox', function() {475 var credit1 = new Credit({text: 'credit1'});476 var credit2 = new Credit({imageUrl: imgSrc});477 creditDisplay = new CreditDisplay(container);478 var creditList = creditDisplay._creditList;479 creditDisplay.showLightbox();480 creditDisplay.beginFrame();481 creditDisplay.addCredit(credit1);482 creditDisplay.endFrame();483 creditDisplay.update();484 var innerHTML = creditList.innerHTML;485 expect(creditList.childNodes.length).toEqual(1);486 expect(creditList.childNodes[0].innerHTML).toEqual('credit1');487 creditDisplay.beginFrame();488 creditDisplay.addCredit(credit2);489 creditDisplay.endFrame();490 creditDisplay.update();491 expect(creditList.innerHTML).not.toEqual(innerHTML);492 innerHTML = creditList.innerHTML;493 expect(creditList.childNodes.length).toEqual(1);494 expect(creditList.childNodes[0].childNodes[0].src).toContain(imgSrc);495 creditDisplay.beginFrame();496 creditDisplay.addCredit(credit1);497 creditDisplay.addCredit(credit2);498 creditDisplay.endFrame();499 creditDisplay.update();500 expect(creditList.innerHTML).not.toEqual(innerHTML);501 innerHTML = creditList.innerHTML;502 expect(creditList.childNodes.length).toEqual(2);503 creditDisplay.beginFrame();504 creditDisplay.endFrame();505 creditDisplay.update();506 expect(creditList.innerHTML).not.toEqual(innerHTML);507 expect(creditList.childNodes.length).toEqual(0);508 creditDisplay.hideLightbox();509 });510 it('only renders lightbox credits when lightbox is visible', function() {511 var credit1 = new Credit({text: 'credit1'});512 var credit2 = new Credit({imageUrl: imgSrc});513 creditDisplay = new CreditDisplay(container);514 var creditList = creditDisplay._creditList;515 creditDisplay.beginFrame();516 creditDisplay.addCredit(credit1);517 creditDisplay.addCredit(credit2);518 creditDisplay.endFrame();519 creditDisplay.update();520 expect(creditList.childNodes.length).toEqual(0);521 creditDisplay.showLightbox();522 creditDisplay.beginFrame();523 creditDisplay.addCredit(credit1);524 creditDisplay.addCredit(credit2);525 creditDisplay.endFrame();526 creditDisplay.update();527 expect(creditList.childNodes.length).toEqual(2);528 creditDisplay.hideLightbox();529 });530 it('updates lightbox when a new frames are not rendered', function() {531 var credit1 = new Credit({text: 'credit1'});532 var credit2 = new Credit({imageUrl: imgSrc});533 creditDisplay = new CreditDisplay(container);534 var creditList = creditDisplay._creditList;535 creditDisplay.update();536 expect(creditList.childNodes.length).toEqual(0);537 creditDisplay.beginFrame();538 creditDisplay.addCredit(credit1);539 creditDisplay.addCredit(credit2);540 creditDisplay.endFrame();541 creditDisplay.update();542 expect(creditList.childNodes.length).toEqual(0);543 creditDisplay.showLightbox();544 creditDisplay.update();545 expect(creditList.childNodes.length).toEqual(2);546 creditDisplay.hideLightbox();547 creditDisplay.update();548 expect(creditList.childNodes.length).toEqual(0);549 creditDisplay.hideLightbox();550 });...
TestUtil.js
Source:TestUtil.js
1//dojo.require("dojo.has");2require([3 "dijit/_base/manager", // dijit.byId4 "doh/runner" //doh functions5]);6function fireOnClick(obj){7 var anchorNode;8 if(typeof obj === "string"){9 var demoWidget = dijit.byId(obj);10 anchorNode = demoWidget.domNode;11 }else{12 anchorNode = obj;13 }14 if(dojo.isIE<9){15 anchorNode.fireEvent( "onclick" );16 }else{17 var e = document.createEvent('Events');18 e.initEvent('click', true, true);19 anchorNode.dispatchEvent(e);20 }21}22function fireOnMouseDown(obj){23 var anchorNode;24 if(typeof obj === "string"){25 var demoWidget = dijit.byId(obj);26 anchorNode = demoWidget.domNode;27 }else{28 anchorNode = obj;29 }30 if(dojo.isIE<9){31 anchorNode.fireEvent( "onmousedown" );32 }else{33 var eventName = "mousedown";34 if (dojo.isIE >= 10){35 eventName = "MSPointerDown";36 }37 var e = document.createEvent('Events');38 e.initEvent(eventName, true, true);39 anchorNode.dispatchEvent(e);40 }41}42function fireOnMouseUp(obj){43 var anchorNode;44 if(typeof obj === "string"){45 var demoWidget = dijit.byId(obj);46 anchorNode = demoWidget.domNode;47 }else{48 anchorNode = obj;49 }50 if(dojo.isIE<9){51 anchorNode.fireEvent( "onmouseup" );52 }else{53 var eventName = "mouseup";54 if (dojo.isIE >= 10){55 eventName = "MSPointerUp";56 }57 var e = document.createEvent('Events');58 e.initEvent(eventName, true, true);59 anchorNode.dispatchEvent(e);60 }61}62function fireTouchEvent(eventtype, node, x, y){63 var e;64 if(dojo.isIE<9){65 e = document.createEventObject(window.event);66 e.button = 1;67 e.pageX = x;68 e.pageY = y;69 node.fireEvent( "on" + eventtype[1], e );70 }else{71 e = document.createEvent('Events');72 e.initEvent( dojo.has('touch') ? eventtype[0] : eventtype[1], true, true);73 e.touches = [ { pageX: x, pageY: y } ];74 e.pageX = x;75 e.pageY = y;76 e.changedTouches = e.touches;77 node.dispatchEvent(e);78 }79}80/*81function fireTouchStart(node, x, y){82 fireTouchEvent(["touchstart", "mousedown"], node, x, y);83}84function fireTouchEnd(node, x, y){85 fireTouchEvent(["touchend", "mouseup"], node, x, y);86}87function fireTouchMove(node, x, y){88 fireTouchEvent(["touchmove", "mousemove"], node, x, y);89}90*/91function verifyListItem(id, text, rightText, domButtonType, hasIcon, hasRightIcon, hasIcon2, hasVariableHeight, regExp, hasSelected, isSprite){92 var demoWidget = dijit.byId(id);93 doh.assertNotEqual(null, demoWidget, "ListItem: Did not instantiate. id=" + id);94 doh.assertEqual('mblListItem' + (hasVariableHeight ?" mblVariableHeight":"") + (hasSelected ?" mblListItemSelected":""), demoWidget.domNode.className, "id=" + id);95 var childNodes = demoWidget.domNode.children;96// doh.assertEqual('mblListItemAnchor' + (hasIcon?'':' mblListItemAnchorNoIcon'), childNodes[0].className);97 98// doh.assertEqual('A', childNodes[0].tagName);99 100// childNodes = childNodes[0].childNodes;101 var i=0;102 if(hasIcon){103 if(!dojo.isIE && regExp){104 if(isSprite){105 doh.assertTrue(childNodes[i].childNodes[0].src.search(regExp) != -1, "search " + regExp.toString());106 }else{107 doh.assertTrue(childNodes[i].src.search(regExp) != -1, "search " + regExp.toString());108 }109 }110 doh.assertTrue(dojo.hasClass(childNodes[i], 'mblListItemIcon'), 'mblListItemIcon id=' + id + " got: " + childNodes[i].className);111 i++;112 }113 if(hasRightIcon){114 if(domButtonType){115 doh.assertEqual(domButtonType + ' mblDomButton', childNodes[i].childNodes[0].className, "id=" + id);116 }117 doh.assertTrue(dojo.hasClass(childNodes[i], 'mblListItemRightIcon'), 'mblListItemRightIcon id=' + id + " got: " + childNodes[i].className);118 i++;119 }120 if(hasIcon2){121 doh.assertTrue(dojo.hasClass(childNodes[i], 'mblListItemRightIcon2'), 'mblListItemRightIcon2 id=' + id + " got: " + childNodes[i].className);122 i++;123 }124 if(rightText){125 doh.assertEqual(rightText, dojo.isFF ==3.6 ? childNodes[i].childNodes[0].innerHTML : childNodes[i].innerHTML, "id=" + id); //2 0r 3126 doh.assertEqual('mblListItemRightText', childNodes[i++].className, "id=" + id);127 }128 if(!hasVariableHeight){129 doh.assertEqual('mblListItemLabel', childNodes[i].className, "id=" + id);130 doh.assertEqual('DIV', childNodes[i].tagName, "id=" + id);131 }else{132 doh.assertEqual('mblListItemLabel', childNodes[i+1].className, "id=" + id);133 doh.assertEqual('DIV', childNodes[i+1].tagName, "id=" + id);134 }135 try{136 doh.assertEqual(text, dojo.trim(childNodes[i].innerHTML.replace(/\r\n|\n|\t/g,"")), "id=" + id);137 } catch (e) {138 if(dojo.isFF ==3.6){139 doh.assertEqual(text, dojo.trim(childNodes[i].childNodes[0].innerHTML.replace(/\r\n|\n|\t/g,"")), "id=" + id);140 }else{141 throw e;142 }143 }144}145function verifyListItemPos(id, rTop, rRight, rBottom, rLeft, sTop, sLeft, isSprite) {146 var demoWidget = dijit.byId(id);147 var node;148 if(isSprite){149 node = demoWidget.domNode.childNodes[0].childNodes[0];150 }else{151 node = demoWidget.domNode.childNodes[0].childNodes[0].childNodes[0];152 }153 verifyRect(node, rTop, rRight, rBottom, rLeft);154 doh.assertEqual(sTop, node.style.top);155 doh.assertEqual(sLeft, node.style.left);156}157function verifyRect(node, rTop, rRight, rBottom, rLeft) {158 var rectArray = node.style.clip.split(/[, ]+/);159 doh.assertEqual("rect("+rTop, rectArray[0]);160 doh.assertEqual(rRight, rectArray[1]);161 doh.assertEqual(rBottom, rectArray[2]);162 doh.assertEqual(rLeft+")", rectArray[3]);163}164function verifyIconItem(id, text, display, regExp, isSprite){165 var demoWidget = dijit.byId(id);166 if(!dojo.isIE && !dojo.isFF) {167 if(isSprite){168 doh.assertTrue(demoWidget.domNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0].src.search(regExp) != -1, "search " + regExp.toString() + " id=" +id);169 }else{170 doh.assertTrue(demoWidget.domNode.childNodes[0].childNodes[0].childNodes[0].src.search(regExp) != -1, "search " + regExp.toString() + " id=" +id);171 }172 }173 doh.assertEqual(text, demoWidget.domNode.childNodes[0].childNodes[1].childNodes[0].nodeValue, "id=" +id);174 doh.assertEqual(display, demoWidget.paneWidget.domNode.style.display, "id=" +id);175 doh.assertEqual('mblIconItemPaneHeading', demoWidget.paneWidget.domNode.childNodes[0].className, "id=" +id);176 doh.assertEqual('mblDomButtonBlueMinus mblDomButton', demoWidget.paneWidget.domNode.childNodes[0].childNodes[0].childNodes[0].className, "id=" +id);177 doh.assertEqual(text, demoWidget.paneWidget.domNode.childNodes[0].childNodes[1].childNodes[0].nodeValue, "id=" +id);178}179function verifyTabBarButton(id, text, classNames, visibility1, visibility2, regExp1, regExp2, isSprite){180 var demoWidget = dijit.byId(id);181 for(var i = 0; i < classNames.length;i++){182 doh.assertTrue(dojo.hasClass(demoWidget.domNode, classNames[i]), classNames[i] + " id=" +id + " className:"+demoWidget.domNode.className);183 }184 doh.assertEqual('mblTabBarButtonIconArea', demoWidget.domNode.childNodes[0].className, "id=" +id);185 doh.assertEqual('mblTabBarButtonLabel', demoWidget.domNode.childNodes[1].className, "id=" +id);186 if(demoWidget.iconNode1){187 if(!dojo.isIE) {188 if(isSprite){189 doh.assertTrue(demoWidget.iconNode1.childNodes[0].src.search(regExp1) != -1, "search " + regExp1.toString() + " id=" +id);190 }else{191 doh.assertTrue(demoWidget.iconNode1.src.search(regExp1) != -1, "search " + regExp1.toString() + " id=" +id);192 }193 }194// doh.assertEqual(visibility1, demoWidget.iconNode1.style.visibility, "id=" +id);195 }else{196 console.log("There is no iconNode1. id=" + id);197 }198 if(demoWidget.iconNode2){199 if(!dojo.isIE){200 if(isSprite){201 doh.assertTrue(demoWidget.iconNode2.childNodes[0].src.search(regExp2) != -1, "search " + regExp2.toString() + " id=" +id);202 }else{203 doh.assertTrue(demoWidget.iconNode2.src.search(regExp2) != -1, "search " + regExp2.toString() + " id=" +id);204 }205 }206 doh.assertEqual(visibility2, demoWidget.iconNode2.style.visibility, "id=" +id);207 }else{208 console.log("There is no iconNode2. id=" + id);209 }210 doh.assertEqual(text, dojo.trim(demoWidget.labelNode.innerHTML), "id=" +id);...
Using AI Code Generation
1const storybookRoot = document.querySelector('storybook-root');2const storybookIframe = storybookRoot.childNodes[0];3const storybookIframeDoc = storybookIframe.contentDocument;4const storybookIframeBody = storybookIframeDoc.body;5const storybookIframeWindow = storybookIframe.contentWindow;6const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');7const storybookIframeWindow = storybookIframe.contentWindow;8const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');9const storybookIframeWindow = storybookIframe.contentWindow;10const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');11const storybookIframeWindow = storybookIframe.contentWindow;12const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');13const storybookIframeWindow = storybookIframe.contentWindow;14const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');15const storybookIframeWindow = storybookIframe.contentWindow;16const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');17const storybookIframeWindow = storybookIframe.contentWindow;18const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');19const storybookIframeWindow = storybookIframe.contentWindow;20const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');21const storybookIframeWindow = storybookIframe.contentWindow;22const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');23const storybookIframeWindow = storybookIframe.contentWindow;24const storybookIframeElement = storybookIframeWindow.document.querySelector('#root');25const storybookIframeWindow = storybookIframe.contentWindow;
Using AI Code Generation
1const root = document.getElementById('storybook-root');2const children = root.childNodes;3for (let i = 0; i < children.length; i++) {4 console.log(children[i]);5}6const root = document.getElementById('storybook-preview-iframe');7const children = root.childNodes;8for (let i = 0; i < children.length; i++) {9 console.log(children[i]);10}11const root = document.getElementById('storybook-preview-iframe');12const children = root.childNodes;13for (let i = 0; i < children.length; i++) {14 console.log(children[i]);15}16const root = document.getElementById('storybook-preview-iframe');17const children = root.childNodes;18for (let i = 0; i < children.length; i++) {19 console.log(children[i]);20}21const root = document.getElementById('storybook-preview-iframe');22const children = root.childNodes;23for (let i = 0; i < children.length; i++) {24 console.log(children[i]);25}
Using AI Code Generation
1const stories = document.querySelector('storybook-root').childNodes;2for (let i = 0; i < stories.length; i++) {3 const story = stories[i];4 console.log(story);5}6const stories = document.querySelector('storybook-root').querySelectorAll('div');7for (let i = 0; i < stories.length; i++) {8 const story = stories[i];9 console.log(story);10}11const stories = document.querySelector('storybook-root').getElementsByTagName('div');12for (let i = 0; i < stories.length; i++) {13 const story = stories[i];14 console.log(story);15}16const stories = document.querySelector('storybook-root').getElementsByClassName('sbdocs sbdocs-wrapper');17for (let i = 0; i < stories.length; i++) {18 const story = stories[i];19 console.log(story);20}21const stories = document.querySelector('storybook-root').getElementsByClassName('sbdocs sbdocs-wrapper');22for (let i = 0; i < stories.length; i++) {23 const story = stories[i];24 console.log(story);25}26const stories = document.querySelector('storybook-root').querySelectorAll('div.sbdocs.sbdocs-wrapper');27for (let i = 0; i < stories.length; i++) {28 const story = stories[i];29 console.log(story);30}31const stories = document.querySelector('storybook-root').querySelectorAll('div.sbdocs.sbdocs-wrapper');32for (let i = 0; i < stories.length; i++) {33 const story = stories[i];34 console.log(story);35}
Using AI Code Generation
1const { JSDOM } = require("jsdom");2const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);3const storybookRoot = dom.window.document.querySelector('#storybook-root')4console.log(firstStory.textContent)5const { JSDOM } = require("jsdom");6const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);7const storybookRoot = dom.window.document.querySelector('#storybook-root')8console.log(secondStory.textContent)9const { JSDOM } = require("jsdom");10const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);11const storybookRoot = dom.window.document.querySelector('#storybook-root')12console.log(thirdStory.textContent)13const { JSDOM } = require("jsdom");14const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);15const storybookRoot = dom.window.document.querySelector('#storybook-root')16console.log(fourthStory.textContent)17const { JSDOM } = require("jsdom");18const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);19const storybookRoot = dom.window.document.querySelector('#storybook-root')20console.log(fifthStory.textContent)21const { JSDOM
Using AI Code Generation
1var storybookRoot = document.getElementById('storybook-root');2var storybookRootChildren = storybookRoot.childNodes;3console.log("storybookRootChildren.length: " + storybookRootChildren.length);4var storybookPreviewIframe = document.getElementById('storybook-preview-iframe');5var storybookPreviewIframeChildren = storybookPreviewIframe.childNodes;6console.log("storybookPreviewIframeChildren.length: " + storybookPreviewIframeChildren.length);7var storybookPreviewWrapper = document.getElementById('storybook-preview-wrapper');8var storybookPreviewWrapperChildren = storybookPreviewWrapper.childNodes;9console.log("storybookPreviewWrapperChildren.length: " + storybookPreviewWrapperChildren.length);10var storybookPreview = document.getElementById('storybook-preview');11var storybookPreviewChildren = storybookPreview.childNodes;12console.log("storybookPreviewChildren.length: " + storybookPreviewChildren.length);13var storybookPreviewIframe = document.getElementById('storybook-preview-iframe');14var storybookPreviewIframeChildren = storybookPreviewIframe.childNodes;15console.log("storybookPreviewIframeChildren.length: " + storybookPreviewIframeChildren.length);16var storybookPreviewIframe = document.getElementById('storybook-preview-iframe');17var storybookPreviewIframeChildren = storybookPreviewIframe.childNodes;18console.log("storybookPreviewIframeChildren.length: " + storybookPreviewIframeChildren.length);19var storybookPreviewIframe = document.getElementById('storybook-preview-iframe');20var storybookPreviewIframeChildren = storybookPreviewIframe.childNodes;21console.log("storybookPreviewIframeChildren.length: " + storybookPreviewIframeChildren.length);22var storybookPreviewIframe = document.getElementById('storybook-preview
Using AI Code Generation
1var storybookRoot = document.querySelector("storybook-root");2var storybookIframe = storybookRoot.childNodes[0];3var storybookPreview = storybookIframe.contentDocument.querySelector(4);5var storybookPreviewIframe = storybookPreview.contentDocument.querySelector(6);7var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(8);9var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(10);11var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(12);13var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(14);15var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(16);17var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(18);19var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(20);21var storybookPreviewIframe = storybookPreviewIframe.contentDocument.querySelector(22);
Using AI Code Generation
1var allNodes = document.getElementById('storybook-root').childNodes;2var nodes = [];3for (var i = 0; i < allNodes.length; i++) {4 nodes.push(allNodes[i]);5}6var node = nodes.find(function (n) {7 return n.textContent.indexOf('Button') > -1;8});9node.click();10import { configure } from '@storybook/react';11import { setOptions } from '@storybook/addon-options';12import { setDefaults } from '@storybook/addon-info';13import { setConsoleOptions } from '@storybook/addon-console';14import { addDecorator } from '@storybook/react';15import { withConsole } from '@storybook/addon-console';16import { withInfo } from '@storybook/addon-info';17setOptions({
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
