You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

SelectList-test.tsx.snap 10KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. // Jest Snapshot v1, https://goo.gl/fbAQLP
  2. exports[`should cancel filter selection when search is active 1`] = `
  3. <div
  4. className="select-list"
  5. >
  6. <div
  7. className="display-flex-center"
  8. >
  9. <span
  10. className="select-list-filter spacer-right"
  11. >
  12. <ButtonToggle
  13. disabled={false}
  14. onCheck={[Function]}
  15. options={
  16. Array [
  17. Object {
  18. "label": "selected",
  19. "value": "selected",
  20. },
  21. Object {
  22. "label": "unselected",
  23. "value": "deselected",
  24. },
  25. Object {
  26. "label": "all",
  27. "value": "all",
  28. },
  29. ]
  30. }
  31. value="deselected"
  32. />
  33. </span>
  34. <SearchBox
  35. autoFocus={true}
  36. loading={false}
  37. onChange={[Function]}
  38. placeholder="search_verb"
  39. value=""
  40. />
  41. </div>
  42. <SelectListListContainer
  43. disabledElements={
  44. Array [
  45. "bar",
  46. ]
  47. }
  48. elements={
  49. Array [
  50. "foo",
  51. "bar",
  52. "baz",
  53. ]
  54. }
  55. filter="deselected"
  56. onSelect={[MockFunction]}
  57. onUnselect={[MockFunction]}
  58. renderElement={[Function]}
  59. selectedElements={
  60. Array [
  61. "foo",
  62. ]
  63. }
  64. />
  65. </div>
  66. `;
  67. exports[`should cancel filter selection when search is active 2`] = `
  68. <div
  69. className="select-list"
  70. >
  71. <div
  72. className="display-flex-center"
  73. >
  74. <span
  75. className="select-list-filter spacer-right"
  76. >
  77. <ButtonToggle
  78. disabled={true}
  79. onCheck={[Function]}
  80. options={
  81. Array [
  82. Object {
  83. "label": "selected",
  84. "value": "selected",
  85. },
  86. Object {
  87. "label": "unselected",
  88. "value": "deselected",
  89. },
  90. Object {
  91. "label": "all",
  92. "value": "all",
  93. },
  94. ]
  95. }
  96. value="deselected"
  97. />
  98. </span>
  99. <SearchBox
  100. autoFocus={true}
  101. loading={false}
  102. onChange={[Function]}
  103. placeholder="search_verb"
  104. value="test"
  105. />
  106. </div>
  107. <SelectListListContainer
  108. disabledElements={
  109. Array [
  110. "bar",
  111. ]
  112. }
  113. elements={
  114. Array [
  115. "foo",
  116. "bar",
  117. "baz",
  118. ]
  119. }
  120. filter="all"
  121. onSelect={[MockFunction]}
  122. onUnselect={[MockFunction]}
  123. renderElement={[Function]}
  124. selectedElements={
  125. Array [
  126. "foo",
  127. ]
  128. }
  129. />
  130. </div>
  131. `;
  132. exports[`should cancel filter selection when search is active 3`] = `
  133. <div
  134. className="select-list"
  135. >
  136. <div
  137. className="display-flex-center"
  138. >
  139. <span
  140. className="select-list-filter spacer-right"
  141. >
  142. <ButtonToggle
  143. disabled={false}
  144. onCheck={[Function]}
  145. options={
  146. Array [
  147. Object {
  148. "label": "selected",
  149. "value": "selected",
  150. },
  151. Object {
  152. "label": "unselected",
  153. "value": "deselected",
  154. },
  155. Object {
  156. "label": "all",
  157. "value": "all",
  158. },
  159. ]
  160. }
  161. value="deselected"
  162. />
  163. </span>
  164. <SearchBox
  165. autoFocus={true}
  166. loading={false}
  167. onChange={[Function]}
  168. placeholder="search_verb"
  169. value=""
  170. />
  171. </div>
  172. <SelectListListContainer
  173. disabledElements={
  174. Array [
  175. "bar",
  176. ]
  177. }
  178. elements={
  179. Array [
  180. "foo",
  181. "bar",
  182. "baz",
  183. ]
  184. }
  185. filter="deselected"
  186. onSelect={[MockFunction]}
  187. onUnselect={[MockFunction]}
  188. renderElement={[Function]}
  189. selectedElements={
  190. Array [
  191. "foo",
  192. ]
  193. }
  194. />
  195. </div>
  196. `;
  197. exports[`should display a loader when searching 1`] = `
  198. <div
  199. className="select-list"
  200. >
  201. <div
  202. className="display-flex-center"
  203. >
  204. <span
  205. className="select-list-filter spacer-right"
  206. >
  207. <ButtonToggle
  208. disabled={false}
  209. onCheck={[Function]}
  210. options={
  211. Array [
  212. Object {
  213. "label": "selected",
  214. "value": "selected",
  215. },
  216. Object {
  217. "label": "unselected",
  218. "value": "deselected",
  219. },
  220. Object {
  221. "label": "all",
  222. "value": "all",
  223. },
  224. ]
  225. }
  226. value="selected"
  227. />
  228. </span>
  229. <SearchBox
  230. autoFocus={true}
  231. loading={true}
  232. onChange={[Function]}
  233. placeholder="search_verb"
  234. value=""
  235. />
  236. </div>
  237. <SelectListListContainer
  238. disabledElements={
  239. Array [
  240. "bar",
  241. ]
  242. }
  243. elements={
  244. Array [
  245. "foo",
  246. "bar",
  247. "baz",
  248. ]
  249. }
  250. filter="selected"
  251. onSelect={[MockFunction]}
  252. onUnselect={[MockFunction]}
  253. renderElement={[Function]}
  254. selectedElements={
  255. Array [
  256. "foo",
  257. ]
  258. }
  259. />
  260. </div>
  261. `;
  262. exports[`should display pagination element properly and call search method with correct parameters 1`] = `
  263. <div
  264. className="select-list"
  265. >
  266. <div
  267. className="display-flex-center"
  268. >
  269. <span
  270. className="select-list-filter spacer-right"
  271. >
  272. <ButtonToggle
  273. disabled={false}
  274. onCheck={[Function]}
  275. options={
  276. Array [
  277. Object {
  278. "label": "selected",
  279. "value": "selected",
  280. },
  281. Object {
  282. "label": "unselected",
  283. "value": "deselected",
  284. },
  285. Object {
  286. "label": "all",
  287. "value": "all",
  288. },
  289. ]
  290. }
  291. value="selected"
  292. />
  293. </span>
  294. <SearchBox
  295. autoFocus={true}
  296. loading={true}
  297. onChange={[Function]}
  298. placeholder="search_verb"
  299. value=""
  300. />
  301. </div>
  302. <SelectListListContainer
  303. disabledElements={
  304. Array [
  305. "bar",
  306. ]
  307. }
  308. elements={
  309. Array [
  310. "foo",
  311. "bar",
  312. "baz",
  313. ]
  314. }
  315. filter="selected"
  316. onSelect={[MockFunction]}
  317. onUnselect={[MockFunction]}
  318. renderElement={[Function]}
  319. selectedElements={
  320. Array [
  321. "foo",
  322. ]
  323. }
  324. />
  325. <ListFooter
  326. count={3}
  327. loadMore={[Function]}
  328. reload={[Function]}
  329. total={100}
  330. />
  331. </div>
  332. `;
  333. exports[`should display pagination element properly and call search method with correct parameters 2`] = `
  334. <div
  335. className="select-list"
  336. >
  337. <div
  338. className="display-flex-center"
  339. >
  340. <span
  341. className="select-list-filter spacer-right"
  342. >
  343. <ButtonToggle
  344. disabled={false}
  345. onCheck={[Function]}
  346. options={
  347. Array [
  348. Object {
  349. "label": "selected",
  350. "value": "selected",
  351. },
  352. Object {
  353. "label": "unselected",
  354. "value": "deselected",
  355. },
  356. Object {
  357. "label": "all",
  358. "value": "all",
  359. },
  360. ]
  361. }
  362. value="selected"
  363. />
  364. </span>
  365. <SearchBox
  366. autoFocus={true}
  367. loading={true}
  368. onChange={[Function]}
  369. placeholder="search_verb"
  370. value=""
  371. />
  372. </div>
  373. <SelectListListContainer
  374. disabledElements={
  375. Array [
  376. "bar",
  377. ]
  378. }
  379. elements={
  380. Array [
  381. "foo",
  382. "bar",
  383. "baz",
  384. ]
  385. }
  386. filter="selected"
  387. onSelect={[MockFunction]}
  388. onUnselect={[MockFunction]}
  389. renderElement={[Function]}
  390. selectedElements={
  391. Array [
  392. "foo",
  393. ]
  394. }
  395. />
  396. <ListFooter
  397. count={3}
  398. loadMore={[Function]}
  399. needReload={true}
  400. reload={[Function]}
  401. total={100}
  402. />
  403. </div>
  404. `;
  405. exports[`should display properly with advanced features 1`] = `
  406. <div
  407. className="select-list"
  408. >
  409. <div
  410. className="display-flex-center"
  411. >
  412. <span
  413. className="select-list-filter spacer-right"
  414. >
  415. <ButtonToggle
  416. disabled={false}
  417. onCheck={[Function]}
  418. options={
  419. Array [
  420. Object {
  421. "label": "selected",
  422. "value": "selected",
  423. },
  424. Object {
  425. "label": "unselected",
  426. "value": "deselected",
  427. },
  428. Object {
  429. "label": "all",
  430. "value": "all",
  431. },
  432. ]
  433. }
  434. value="selected"
  435. />
  436. </span>
  437. <SearchBox
  438. autoFocus={true}
  439. loading={false}
  440. onChange={[Function]}
  441. placeholder="search_verb"
  442. value=""
  443. />
  444. </div>
  445. <SelectListListContainer
  446. allowBulkSelection={true}
  447. disabledElements={
  448. Array [
  449. "bar",
  450. ]
  451. }
  452. elements={
  453. Array [
  454. "foo",
  455. "bar",
  456. "baz",
  457. ]
  458. }
  459. filter="selected"
  460. onSelect={[MockFunction]}
  461. onUnselect={[MockFunction]}
  462. readOnly={true}
  463. renderElement={[Function]}
  464. selectedElements={
  465. Array [
  466. "foo",
  467. ]
  468. }
  469. />
  470. <ListFooter
  471. count={3}
  472. loadMore={[Function]}
  473. reload={[Function]}
  474. total={125}
  475. />
  476. </div>
  477. `;
  478. exports[`should display properly with basics features 1`] = `
  479. <div
  480. className="select-list"
  481. >
  482. <div
  483. className="display-flex-center"
  484. >
  485. <span
  486. className="select-list-filter spacer-right"
  487. >
  488. <ButtonToggle
  489. disabled={false}
  490. onCheck={[Function]}
  491. options={
  492. Array [
  493. Object {
  494. "label": "selected",
  495. "value": "selected",
  496. },
  497. Object {
  498. "label": "unselected",
  499. "value": "deselected",
  500. },
  501. Object {
  502. "label": "all",
  503. "value": "all",
  504. },
  505. ]
  506. }
  507. value="selected"
  508. />
  509. </span>
  510. <SearchBox
  511. autoFocus={true}
  512. loading={false}
  513. onChange={[Function]}
  514. placeholder="search_verb"
  515. value=""
  516. />
  517. </div>
  518. <SelectListListContainer
  519. disabledElements={
  520. Array [
  521. "bar",
  522. ]
  523. }
  524. elements={
  525. Array [
  526. "foo",
  527. "bar",
  528. "baz",
  529. ]
  530. }
  531. filter="selected"
  532. onSelect={[MockFunction]}
  533. onUnselect={[MockFunction]}
  534. renderElement={[Function]}
  535. selectedElements={
  536. Array [
  537. "foo",
  538. ]
  539. }
  540. />
  541. </div>
  542. `;