ReactChildren-test.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907
  1. // import ReactTestUtils from "../../lib/ReactTestUtils";
  2. // import React from '../../src/May';
  3. // import { render, unmountComponentAtNode, findDOMNode } from '../../src/may-dom/MayDom'
  4. // var ReactDOM = {
  5. // render: render,
  6. // unmountComponentAtNode: unmountComponentAtNode,
  7. // findDOMNode: findDOMNode
  8. // }
  9. // React.render = render;
  10. // import React from "../../dist/ReactANU";
  11. // var ReactDOM = React;
  12. var React = require('react');
  13. var ReactDOM = require('react-dom');
  14. //https://github.com/facebook/react/blob/master/src/isomorphic/children/__tests__/ReactChildren-test.js
  15. // var ReactDOM = window.ReactDOM || React;
  16. describe("ReactChildren", function () {
  17. // this.timeout(200000);
  18. it('testjasmime', () => {
  19. var foo;
  20. foo = {
  21. setBar: function (value) {
  22. bar = value;
  23. }
  24. };
  25. spyOn(foo, 'setBar');
  26. foo.setBar(123);
  27. expect(foo.setBar).toHaveBeenCalled();
  28. })
  29. it('should support identity for simple', () => {
  30. var context = {};
  31. // var callback = {
  32. var foo= function (kid, index) {
  33. // expect(this).toBe(context);
  34. // expect(index).toBe(0);
  35. // if (index > 0) {
  36. return kid;
  37. // }
  38. }
  39. // };
  40. // spyOn(callback, 'foo');
  41. var simpleKid = <span key="simple" />;
  42. var simpleKid2 = <span key="simple2" />;
  43. // First pass children into a component to fully simulate what happens when
  44. // using structures that arrive from transforms.
  45. var instance = <div>{simpleKid}</div>;
  46. // React.Children.forEach(instance.props.children, callback.foo, context);
  47. // expect(callback.foo).toHaveBeenCalled();
  48. // callback.foo.calls.reset();
  49. var mappedChildren = React.Children.map(
  50. instance.props.children,
  51. foo,
  52. context,
  53. );
  54. // expect(callback.foo).toHaveBeenCalled();
  55. expect(mappedChildren[0]).toEqual(<span key=".$simple" />);
  56. });
  57. /*it('should treat single arrayless child as being in array', () => {
  58. var context = {};
  59. var callback = spyOn.createSpy(function(kid, index) {
  60. expect(this).toBe(context);
  61. expect(index).toBe(0);
  62. return kid;
  63. });
  64. var simpleKid = <span />;
  65. var instance = <div>{simpleKid}</div>;
  66. React.Children.forEach(instance.props.children, callback, context);
  67. expect(callback).toHaveBeenCalledWith(simpleKid, 0);
  68. callback.calls.reset();
  69. var mappedChildren = React.Children.map(
  70. instance.props.children,
  71. callback,
  72. context,
  73. );
  74. expect(callback).toHaveBeenCalledWith(simpleKid, 0);
  75. expect(mappedChildren[0]).toEqual(<span key=".0" />);
  76. });
  77. it('should treat single child in array as expected', () => {
  78. var context = {};
  79. var callback = spyOn.createSpy(function(kid, index) {
  80. expect(this).toBe(context);
  81. return kid;
  82. });
  83. var simpleKid = <span key="simple" />;
  84. var instance = <div>{[simpleKid]}</div>;
  85. React.Children.forEach(instance.props.children, callback, context);
  86. expect(callback).toHaveBeenCalledWith(simpleKid, 0);
  87. callback.calls.reset();
  88. var mappedChildren = React.Children.map(
  89. instance.props.children,
  90. callback,
  91. context,
  92. );
  93. expect(callback).toHaveBeenCalledWith(simpleKid, 0);
  94. expect(mappedChildren[0]).toEqual(<span key=".$simple" />);
  95. });
  96. it('should be called for each child', () => {
  97. var zero = <div key="keyZero" />;
  98. var one = null;
  99. var two = <div key="keyTwo" />;
  100. var three = null;
  101. var four = <div key="keyFour" />;
  102. var context = {};
  103. var callback = spyOn.createSpy(function(kid, index) {
  104. expect(this).toBe(context);
  105. return kid;
  106. });
  107. var instance = (
  108. <div>
  109. {zero}
  110. {one}
  111. {two}
  112. {three}
  113. {four}
  114. </div>
  115. );
  116. function assertCalls() {
  117. expect(callback).toHaveBeenCalledWith(zero, 0);
  118. expect(callback).toHaveBeenCalledWith(one, 1);
  119. expect(callback).toHaveBeenCalledWith(two, 2);
  120. expect(callback).toHaveBeenCalledWith(three, 3);
  121. expect(callback).toHaveBeenCalledWith(four, 4);
  122. callback.calls.reset();
  123. }
  124. React.Children.forEach(instance.props.children, callback, context);
  125. assertCalls();
  126. var mappedChildren = React.Children.map(
  127. instance.props.children,
  128. callback,
  129. context,
  130. );
  131. assertCalls();
  132. expect(mappedChildren).toEqual([
  133. <div key=".$keyZero" />,
  134. <div key=".$keyTwo" />,
  135. <div key=".$keyFour" />,
  136. ]);
  137. });
  138. it('React.Children.forEach不处理null void 0', () => {
  139. var i = 0
  140. React.Children.forEach(null, function(){
  141. i++
  142. })
  143. React.Children.forEach(void 0, function(){
  144. i++
  145. })
  146. expect(i).toBe(0)
  147. })
  148. it('should traverse children of different kinds', () => {
  149. var div = <div key="divNode" />;
  150. var span = <span key="spanNode" />;
  151. var a = <a key="aNode" />;
  152. var context = {};
  153. var callback = spyOn.createSpy(function(kid, index) {
  154. expect(this).toBe(context);
  155. return kid;
  156. });
  157. var instance = (
  158. <div>
  159. {div}
  160. {[[span]]}
  161. {[a]}
  162. {'string'}
  163. {1234}
  164. {true}
  165. {false}
  166. {null}
  167. {undefined}
  168. </div>
  169. );
  170. function assertCalls() {
  171. expect(callback.calls.count()).toBe(9);
  172. expect(callback).toHaveBeenCalledWith(div, 0);
  173. expect(callback).toHaveBeenCalledWith(span, 1);
  174. expect(callback).toHaveBeenCalledWith(a, 2);
  175. expect(callback).toHaveBeenCalledWith('string', 3);
  176. expect(callback).toHaveBeenCalledWith(1234, 4);
  177. expect(callback).toHaveBeenCalledWith(null, 5);
  178. expect(callback).toHaveBeenCalledWith(null, 6);
  179. expect(callback).toHaveBeenCalledWith(null, 7);
  180. expect(callback).toHaveBeenCalledWith(null, 8);
  181. callback.calls.reset();
  182. }
  183. React.Children.forEach(instance.props.children, callback, context);
  184. assertCalls();
  185. var mappedChildren = React.Children.map(
  186. instance.props.children,
  187. callback,
  188. context,
  189. );
  190. assertCalls();
  191. expect(mappedChildren).toEqual([
  192. <div key=".$divNode" />,
  193. <span key=".1:0:$spanNode" />,
  194. <a key=".2:$aNode" />,
  195. 'string',
  196. 1234,
  197. ]);
  198. });
  199. it('should be called for each child in nested structure', () => {
  200. var zero = <div key="keyZero" />;
  201. var one = null;
  202. var two = <div key="keyTwo" />;
  203. var three = null;
  204. var four = <div key="keyFour" />;
  205. var five = <div key="keyFive" />;
  206. var context = {};
  207. var callback = spyOn.createSpy(function(kid, index) {
  208. expect(this).toBe(context);
  209. return kid;
  210. });
  211. var instance = (
  212. <div>
  213. {[[zero, one, two], [three, four], five]}
  214. </div>
  215. );
  216. function assertCalls() {
  217. expect(callback.calls.count()).toBe(6);
  218. expect(callback).toHaveBeenCalledWith(zero, 0);
  219. expect(callback).toHaveBeenCalledWith(one, 1);
  220. expect(callback).toHaveBeenCalledWith(two, 2);
  221. expect(callback).toHaveBeenCalledWith(three, 3);
  222. expect(callback).toHaveBeenCalledWith(four, 4);
  223. expect(callback).toHaveBeenCalledWith(five, 5);
  224. callback.calls.reset();
  225. }
  226. React.Children.forEach(instance.props.children, callback, context);
  227. assertCalls();
  228. var mappedChildren = React.Children.map(
  229. instance.props.children,
  230. callback,
  231. context,
  232. );
  233. assertCalls();
  234. expect(mappedChildren).toEqual([
  235. <div key=".0:$keyZero" />,
  236. <div key=".0:$keyTwo" />,
  237. <div key=".1:$keyFour" />,
  238. <div key=".$keyFive" />,
  239. ]);
  240. });
  241. it('should retain key across two mappings', () => {
  242. var zeroForceKey = <div key="keyZero" />;
  243. var oneForceKey = <div key="keyOne" />;
  244. var context = {};
  245. var callback = spyOn.createSpy(function(kid, index) {
  246. expect(this).toBe(context);
  247. return kid;
  248. });
  249. var forcedKeys = (
  250. <div>
  251. {zeroForceKey}
  252. {oneForceKey}
  253. </div>
  254. );
  255. function assertCalls() {
  256. expect(callback).toHaveBeenCalledWith(zeroForceKey, 0);
  257. expect(callback).toHaveBeenCalledWith(oneForceKey, 1);
  258. callback.calls.reset();
  259. }
  260. React.Children.forEach(forcedKeys.props.children, callback, context);
  261. assertCalls();
  262. var mappedChildren = React.Children.map(
  263. forcedKeys.props.children,
  264. callback,
  265. context,
  266. );
  267. assertCalls();
  268. expect(mappedChildren).toEqual([
  269. <div key=".$keyZero" />,
  270. <div key=".$keyOne" />,
  271. ]);
  272. });
  273. it('should be called for each child in an iterable without keys', () => {
  274. spyOn(console, 'error');
  275. var threeDivIterable = {
  276. '@@iterator': function() {
  277. var i = 0;
  278. return {
  279. next: function() {
  280. if (i++ < 3) {
  281. return {value: <div />, done: false};
  282. } else {
  283. return {value: undefined, done: true};
  284. }
  285. },
  286. };
  287. },
  288. };
  289. var context = {};
  290. var callback = spyOn.createSpy(function(kid, index) {
  291. expect(this).toBe(context);
  292. return kid;
  293. });
  294. var instance = (
  295. <div>
  296. {threeDivIterable}
  297. </div>
  298. );
  299. function assertCalls() {
  300. expect(callback.calls.count()).toBe(3);
  301. expect(callback).toHaveBeenCalledWith(<div />, 0);
  302. expect(callback).toHaveBeenCalledWith(<div />, 1);
  303. expect(callback).toHaveBeenCalledWith(<div />, 2);
  304. callback.calls.reset();
  305. }
  306. React.Children.forEach(instance.props.children, callback, context);
  307. assertCalls();
  308. console.error.calls.reset();
  309. var mappedChildren = React.Children.map(
  310. instance.props.children,
  311. callback,
  312. context,
  313. );
  314. assertCalls();
  315. expect(console.error.calls.count()).toBe(0);
  316. expect(mappedChildren).toEqual([
  317. <div key=".0" />,
  318. <div key=".1" />,
  319. <div key=".2" />,
  320. ]);
  321. });
  322. it('should be called for each child in an iterable with keys', () => {
  323. var threeDivIterable = {
  324. '@@iterator': function() {
  325. var i = 0;
  326. return {
  327. next: function() {
  328. if (i++ < 3) {
  329. return {value: <div key={'#' + i} />, done: false};
  330. } else {
  331. return {value: undefined, done: true};
  332. }
  333. },
  334. };
  335. },
  336. };
  337. var context = {};
  338. var callback = spyOn.createSpy(function(kid, index) {
  339. expect(this).toBe(context);
  340. return kid;
  341. });
  342. var instance = (
  343. <div>
  344. {threeDivIterable}
  345. </div>
  346. );
  347. function assertCalls() {
  348. expect(callback.calls.count()).toBe(3);
  349. expect(callback).toHaveBeenCalledWith(<div key="#1" />, 0);
  350. expect(callback).toHaveBeenCalledWith(<div key="#2" />, 1);
  351. expect(callback).toHaveBeenCalledWith(<div key="#3" />, 2);
  352. callback.calls.reset();
  353. }
  354. React.Children.forEach(instance.props.children, callback, context);
  355. assertCalls();
  356. var mappedChildren = React.Children.map(
  357. instance.props.children,
  358. callback,
  359. context,
  360. );
  361. assertCalls();
  362. expect(mappedChildren).toEqual([
  363. <div key=".$#1" />,
  364. <div key=".$#2" />,
  365. <div key=".$#3" />,
  366. ]);
  367. });
  368. it('should not enumerate enumerable numbers (#4776)', () => {
  369. Number.prototype['@@iterator'] = function() {
  370. throw new Error('number iterator called');
  371. };
  372. try {
  373. var instance = (
  374. <div>
  375. {5}
  376. {12}
  377. {13}
  378. </div>
  379. );
  380. var context = {};
  381. var callback = spyOn.createSpy(function(kid, index) {
  382. expect(this).toBe(context);
  383. return kid;
  384. });
  385. var assertCalls = function() {
  386. expect(callback.calls.count()).toBe(3);
  387. expect(callback).toHaveBeenCalledWith(5, 0);
  388. expect(callback).toHaveBeenCalledWith(12, 1);
  389. expect(callback).toHaveBeenCalledWith(13, 2);
  390. callback.calls.reset();
  391. };
  392. React.Children.forEach(instance.props.children, callback, context);
  393. assertCalls();
  394. var mappedChildren = React.Children.map(
  395. instance.props.children,
  396. callback,
  397. context,
  398. );
  399. assertCalls();
  400. expect(mappedChildren).toEqual([5, 12, 13]);
  401. } finally {
  402. delete Number.prototype['@@iterator'];
  403. }
  404. });
  405. it('should allow extension of native prototypes', () => {
  406. String.prototype.key = 'react';
  407. Number.prototype.key = 'rocks';
  408. var instance = (
  409. <div>
  410. {'a'}
  411. {13}
  412. </div>
  413. );
  414. var context = {};
  415. var callback = spyOn.createSpy(function(kid, index) {
  416. expect(this).toBe(context);
  417. return kid;
  418. });
  419. function assertCalls() {
  420. expect(callback.calls.count()).toBe(2, 0);
  421. expect(callback).toHaveBeenCalledWith('a', 0);
  422. expect(callback).toHaveBeenCalledWith(13, 1);
  423. callback.calls.reset();
  424. }
  425. React.Children.forEach(instance.props.children, callback, context);
  426. assertCalls();
  427. var mappedChildren = React.Children.map(
  428. instance.props.children,
  429. callback,
  430. context,
  431. );
  432. assertCalls();
  433. expect(mappedChildren).toEqual(['a', 13]);
  434. delete String.prototype.key;
  435. delete Number.prototype.key;
  436. });
  437. it('should pass key to returned component', () => {
  438. var mapFn = function(kid, index) {
  439. return <div>{kid}</div>;
  440. };
  441. var simpleKid = <span key="simple" />;
  442. var instance = <div>{simpleKid}</div>;
  443. var mappedChildren = React.Children.map(instance.props.children, mapFn);
  444. expect(React.Children.count(mappedChildren)).toBe(1);
  445. expect(mappedChildren[0]).not.toBe(simpleKid);
  446. expect(mappedChildren[0].props.children).toBe(simpleKid);
  447. expect(mappedChildren[0].key).toBe('.$simple');
  448. });
  449. it('should invoke callback with the right context', () => {
  450. var lastContext;
  451. var callback = function(kid, index) {
  452. lastContext = this;
  453. return this;
  454. };
  455. // TODO: Use an object to test, after non-object fragments has fully landed.
  456. var scopeTester = 'scope tester';
  457. var simpleKid = <span key="simple" />;
  458. var instance = <div>{simpleKid}</div>;
  459. React.Children.forEach(instance.props.children, callback, scopeTester);
  460. expect(lastContext).toBe(scopeTester);
  461. var mappedChildren = React.Children.map(
  462. instance.props.children,
  463. callback,
  464. scopeTester,
  465. );
  466. expect(React.Children.count(mappedChildren)).toBe(1);
  467. expect(mappedChildren[0]).toBe(scopeTester);
  468. });
  469. it('should be called for each child', () => {
  470. var zero = <div key="keyZero" />;
  471. var one = null;
  472. var two = <div key="keyTwo" />;
  473. var three = null;
  474. var four = <div key="keyFour" />;
  475. var mapped = [
  476. <div key="giraffe" />, // Key should be joined to obj key
  477. null, // Key should be added even if we don't supply it!
  478. <div />, // Key should be added even if not supplied!
  479. <span />, // Map from null to something.
  480. <div key="keyFour" />,
  481. ];
  482. var callback = spyOn.createSpy(function(kid, index) {
  483. return mapped[index];
  484. });
  485. var instance = (
  486. <div>
  487. {zero}
  488. {one}
  489. {two}
  490. {three}
  491. {four}
  492. </div>
  493. );
  494. React.Children.forEach(instance.props.children, callback);
  495. expect(callback).toHaveBeenCalledWith(zero, 0);
  496. expect(callback).toHaveBeenCalledWith(one, 1);
  497. expect(callback).toHaveBeenCalledWith(two, 2);
  498. expect(callback).toHaveBeenCalledWith(three, 3);
  499. expect(callback).toHaveBeenCalledWith(four, 4);
  500. callback.calls.reset();
  501. var mappedChildren = React.Children.map(instance.props.children, callback);
  502. expect(callback.calls.count()).toBe(5);
  503. expect(React.Children.count(mappedChildren)).toBe(4);
  504. // Keys default to indices.
  505. expect([
  506. mappedChildren[0].key,
  507. mappedChildren[1].key,
  508. mappedChildren[2].key,
  509. mappedChildren[3].key,
  510. ]).toEqual(['giraffe/.$keyZero', '.$keyTwo', '.3', '.$keyFour']);
  511. expect(callback).toHaveBeenCalledWith(zero, 0);
  512. expect(callback).toHaveBeenCalledWith(one, 1);
  513. expect(callback).toHaveBeenCalledWith(two, 2);
  514. expect(callback).toHaveBeenCalledWith(three, 3);
  515. expect(callback).toHaveBeenCalledWith(four, 4);
  516. expect(mappedChildren[0]).toEqual(<div key="giraffe/.$keyZero" />);
  517. expect(mappedChildren[1]).toEqual(<div key=".$keyTwo" />);
  518. expect(mappedChildren[2]).toEqual(<span key=".3" />);
  519. expect(mappedChildren[3]).toEqual(<div key=".$keyFour" />);
  520. });
  521. it('should be called for each child in nested structure', () => {
  522. var zero = <div key="keyZero" />;
  523. var one = null;
  524. var two = <div key="keyTwo" />;
  525. var three = null;
  526. var four = <div key="keyFour" />;
  527. var five = <div key="keyFive" />;
  528. var zeroMapped = <div key="giraffe" />; // Key should be overridden
  529. var twoMapped = <div />; // Key should be added even if not supplied!
  530. var fourMapped = <div key="keyFour" />;
  531. var fiveMapped = <div />;
  532. var callback = spyOn.createSpy(function(kid) {
  533. switch (kid) {
  534. case zero:
  535. return zeroMapped;
  536. case two:
  537. return twoMapped;
  538. case four:
  539. return fourMapped;
  540. case five:
  541. return fiveMapped;
  542. default:
  543. return kid;
  544. }
  545. });
  546. var frag = [[zero, one, two], [three, four], five];
  547. var instance = <div>{[frag]}</div>;
  548. React.Children.forEach(instance.props.children, callback);
  549. expect(callback.calls.count()).toBe(6);
  550. expect(callback).toHaveBeenCalledWith(zero, 0);
  551. expect(callback).toHaveBeenCalledWith(one, 1);
  552. expect(callback).toHaveBeenCalledWith(two, 2);
  553. expect(callback).toHaveBeenCalledWith(three, 3);
  554. expect(callback).toHaveBeenCalledWith(four, 4);
  555. expect(callback).toHaveBeenCalledWith(five, 5);
  556. callback.calls.reset();
  557. var mappedChildren = React.Children.map(instance.props.children, callback);
  558. expect(callback.calls.count()).toBe(6);
  559. expect(callback).toHaveBeenCalledWith(zero, 0);
  560. expect(callback).toHaveBeenCalledWith(one, 1);
  561. expect(callback).toHaveBeenCalledWith(two, 2);
  562. expect(callback).toHaveBeenCalledWith(three, 3);
  563. expect(callback).toHaveBeenCalledWith(four, 4);
  564. expect(callback).toHaveBeenCalledWith(five, 5);
  565. expect(React.Children.count(mappedChildren)).toBe(4);
  566. // Keys default to indices.
  567. expect([
  568. mappedChildren[0].key,
  569. mappedChildren[1].key,
  570. mappedChildren[2].key,
  571. mappedChildren[3].key,
  572. ]).toEqual([
  573. 'giraffe/.0:0:$keyZero',
  574. '.0:0:$keyTwo',
  575. '.0:1:$keyFour',
  576. '.0:$keyFive',
  577. ]);
  578. expect(mappedChildren[0]).toEqual(<div key="giraffe/.0:0:$keyZero" />);
  579. expect(mappedChildren[1]).toEqual(<div key=".0:0:$keyTwo" />);
  580. expect(mappedChildren[2]).toEqual(<div key=".0:1:$keyFour" />);
  581. expect(mappedChildren[3]).toEqual(<div key=".0:$keyFive" />);
  582. });
  583. it('should retain key across two mappings', () => {
  584. var zeroForceKey = <div key="keyZero" />;
  585. var oneForceKey = <div key="keyOne" />;
  586. // Key should be joined to object key
  587. var zeroForceKeyMapped = <div key="giraffe" />;
  588. // Key should be added even if we don't supply it!
  589. var oneForceKeyMapped = <div />;
  590. var mapFn = function(kid, index) {
  591. return index === 0 ? zeroForceKeyMapped : oneForceKeyMapped;
  592. };
  593. var forcedKeys = (
  594. <div>
  595. {zeroForceKey}
  596. {oneForceKey}
  597. </div>
  598. );
  599. var expectedForcedKeys = ['giraffe/.$keyZero', '.$keyOne'];
  600. var mappedChildrenForcedKeys = React.Children.map(
  601. forcedKeys.props.children,
  602. mapFn,
  603. );
  604. var mappedForcedKeys = mappedChildrenForcedKeys.map(c => c.key);
  605. expect(mappedForcedKeys).toEqual(expectedForcedKeys);
  606. var expectedRemappedForcedKeys = [
  607. 'giraffe/.$giraffe/.$keyZero',
  608. '.$.$keyOne',
  609. ];
  610. var remappedChildrenForcedKeys = React.Children.map(
  611. mappedChildrenForcedKeys,
  612. mapFn,
  613. );
  614. expect(remappedChildrenForcedKeys.map(c => c.key)).toEqual(
  615. expectedRemappedForcedKeys,
  616. );
  617. });
  618. it('should not throw if key provided is a dupe with array key', () => {
  619. var zero = <div />;
  620. var one = <div key="0" />;
  621. var mapFn = function() {
  622. return null;
  623. };
  624. var instance = (
  625. <div>
  626. {zero}
  627. {one}
  628. </div>
  629. );
  630. expect(function() {
  631. React.Children.map(instance.props.children, mapFn);
  632. }).not.toThrow();
  633. });
  634. it('should use the same key for a cloned element', () => {
  635. var instance = (
  636. <div>
  637. <div />
  638. </div>
  639. );
  640. var mapped = React.Children.map(
  641. instance.props.children,
  642. element => element,
  643. );
  644. var mappedWithClone = React.Children.map(instance.props.children, element =>
  645. React.cloneElement(element),
  646. );
  647. expect(mapped[0].key).toBe(mappedWithClone[0].key);
  648. });
  649. it('should use the same key for a cloned element with key', () => {
  650. var instance = (
  651. <div>
  652. <div key="unique" />
  653. </div>
  654. );
  655. var mapped = React.Children.map(
  656. instance.props.children,
  657. element => element,
  658. );
  659. var mappedWithClone = React.Children.map(instance.props.children, element =>
  660. React.cloneElement(element, {key: 'unique'}),
  661. );
  662. expect(mapped[0].key).toBe(mappedWithClone[0].key);
  663. });
  664. it('should return 0 for null children', () => {
  665. var numberOfChildren = React.Children.count(null);
  666. expect(numberOfChildren).toBe(0);
  667. });
  668. it('should return 0 for undefined children', () => {
  669. var numberOfChildren = React.Children.count(undefined);
  670. expect(numberOfChildren).toBe(0);
  671. });
  672. it('should return 1 for single child', () => {
  673. var simpleKid = <span key="simple" />;
  674. var instance = <div>{simpleKid}</div>;
  675. var numberOfChildren = React.Children.count(instance.props.children);
  676. expect(numberOfChildren).toBe(1);
  677. });
  678. it('should count the number of children in flat structure', () => {
  679. var zero = <div key="keyZero" />;
  680. var one = null;
  681. var two = <div key="keyTwo" />;
  682. var three = null;
  683. var four = <div key="keyFour" />;
  684. var instance = (
  685. <div>
  686. {zero}
  687. {one}
  688. {two}
  689. {three}
  690. {four}
  691. </div>
  692. );
  693. var numberOfChildren = React.Children.count(instance.props.children);
  694. expect(numberOfChildren).toBe(5);
  695. });
  696. it('should count the number of children in nested structure', () => {
  697. var zero = <div key="keyZero" />;
  698. var one = null;
  699. var two = <div key="keyTwo" />;
  700. var three = null;
  701. var four = <div key="keyFour" />;
  702. var five = <div key="keyFive" />;
  703. var instance = (
  704. <div>
  705. {[[[zero, one, two], [three, four], five], null]}
  706. </div>
  707. );
  708. var numberOfChildren = React.Children.count(instance.props.children);
  709. expect(numberOfChildren).toBe(7);
  710. });
  711. it('should flatten children to an array', () => {
  712. expect(React.Children.toArray(undefined)).toEqual([]);
  713. expect(React.Children.toArray(null)).toEqual([]);
  714. expect(React.Children.toArray(<div />).length).toBe(1);
  715. expect(React.Children.toArray([<div />]).length).toBe(1);
  716. expect(React.Children.toArray(<div />)[0].key).toBe(
  717. React.Children.toArray([<div />])[0].key,
  718. );
  719. var flattened = React.Children.toArray([
  720. [<div key="apple" />, <div key="banana" />, <div key="camel" />],
  721. [<div key="banana" />, <div key="camel" />, <div key="deli" />],
  722. ]);
  723. expect(flattened.length).toBe(6);
  724. expect(flattened[1].key).toContain('banana');
  725. expect(flattened[3].key).toContain('banana');
  726. expect(flattened[1].key).not.toBe(flattened[3].key);
  727. var reversed = React.Children.toArray([
  728. [<div key="camel" />, <div key="banana" />, <div key="apple" />],
  729. [<div key="deli" />, <div key="camel" />, <div key="banana" />],
  730. ]);
  731. expect(flattened[0].key).toBe(reversed[2].key);
  732. expect(flattened[1].key).toBe(reversed[1].key);
  733. expect(flattened[2].key).toBe(reversed[0].key);
  734. expect(flattened[3].key).toBe(reversed[5].key);
  735. expect(flattened[4].key).toBe(reversed[4].key);
  736. expect(flattened[5].key).toBe(reversed[3].key);
  737. // null/undefined/bool are all omitted
  738. expect(React.Children.toArray([1, 'two', null, undefined, true])).toEqual([
  739. 1,
  740. 'two',
  741. ]);
  742. });
  743. it('should escape keys', () => {
  744. var zero = <div key="1" />;
  745. var one = <div key="1=::=2" />;
  746. var instance = (
  747. <div>
  748. {zero}
  749. {one}
  750. </div>
  751. );
  752. var mappedChildren = React.Children.map(
  753. instance.props.children,
  754. kid => kid,
  755. );
  756. expect(mappedChildren).toEqual([
  757. <div key=".$1" />,
  758. <div key=".$1=0=2=2=02" />,
  759. ]);
  760. });
  761. it('should throw on object', () => {
  762. expect(function() {
  763. React.Children.forEach({a: 1, b: 2}, function() {}, null);
  764. }).toThrowError(
  765. 'Objects are not valid as a React child (found: object with keys ' +
  766. '{a, b}). If you meant to render a collection of children, use an ' +
  767. 'array instead.',
  768. );
  769. });
  770. it('should throw on regex', () => {
  771. // Really, we care about dates (#4840) but those have nondeterministic
  772. // serialization (timezones) so let's test a regex instead:
  773. expect(function() {
  774. React.Children.forEach(/abc/, function() {}, null);
  775. }).toThrowError(
  776. 'Objects are not valid as a React child (found: /abc/). If you meant ' +
  777. 'to render a collection of children, use an array instead.',
  778. );
  779. });*/
  780. })