combobox.spec.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892
  1. import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, contain, notContain, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, haveValue} from '../../../utils'
  2. test('it works with x-model',
  3. [html`
  4. <div
  5. x-data="{
  6. query: '',
  7. selected: null,
  8. people: [
  9. { id: 1, name: 'Wade Cooper' },
  10. { id: 2, name: 'Arlene Mccoy' },
  11. { id: 3, name: 'Devon Webb' },
  12. { id: 4, name: 'Tom Cook' },
  13. { id: 5, name: 'Tanya Fox', disabled: true },
  14. { id: 6, name: 'Hellen Schmidt' },
  15. { id: 7, name: 'Caroline Schultz' },
  16. { id: 8, name: 'Mason Heaney' },
  17. { id: 9, name: 'Claudie Smitham' },
  18. { id: 10, name: 'Emil Schaefer' },
  19. ],
  20. get filteredPeople() {
  21. return this.query === ''
  22. ? this.people
  23. : this.people.filter((person) => {
  24. return person.name.toLowerCase().includes(this.query.toLowerCase())
  25. })
  26. },
  27. }"
  28. >
  29. <div x-combobox x-model="selected">
  30. <label x-combobox:label>Select person</label>
  31. <div>
  32. <div>
  33. <input
  34. x-combobox:input
  35. :display-value="person => person.name"
  36. @change="query = $event.target.value"
  37. placeholder="Search..."
  38. />
  39. <button x-combobox:button>Toggle</button>
  40. </div>
  41. <div x-combobox:options>
  42. <ul>
  43. <template
  44. x-for="person in filteredPeople"
  45. :key="person.id"
  46. hidden
  47. >
  48. <li
  49. x-combobox:option
  50. :option="person.id"
  51. :value="person"
  52. :disabled="person.disabled"
  53. x-text="person.name"
  54. >
  55. </li>
  56. </template>
  57. </ul>
  58. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  59. </div>
  60. </div>
  61. <article x-text="selected?.name"></article>
  62. </div>
  63. </div>
  64. `],
  65. ({ get }) => {
  66. get('ul').should(notBeVisible())
  67. get('button').click()
  68. get('ul').should(beVisible())
  69. get('button').click()
  70. get('ul').should(notBeVisible())
  71. get('button').click()
  72. get('[option="2"]').click()
  73. get('ul').should(notBeVisible())
  74. get('input').should(haveValue('Arlene Mccoy'))
  75. get('article').should(haveText('Arlene Mccoy'))
  76. get('button').click()
  77. get('ul').should(contain('Wade Cooper'))
  78. .should(contain('Arlene Mccoy'))
  79. .should(contain('Devon Webb'))
  80. get('[option="3"]').click()
  81. get('ul').should(notBeVisible())
  82. get('input').should(haveValue('Devon Webb'))
  83. get('article').should(haveText('Devon Webb'))
  84. get('button').click()
  85. get('ul').should(contain('Wade Cooper'))
  86. .should(contain('Arlene Mccoy'))
  87. .should(contain('Devon Webb'))
  88. get('[option="1"]').click()
  89. get('ul').should(notBeVisible())
  90. get('input').should(haveValue('Wade Cooper'))
  91. get('article').should(haveText('Wade Cooper'))
  92. },
  93. )
  94. test('it works with internal state',
  95. [html`
  96. <div
  97. x-data="{ people: [
  98. { id: 1, name: 'Wade Cooper' },
  99. { id: 2, name: 'Arlene Mccoy' },
  100. { id: 3, name: 'Devon Webb' },
  101. { id: 4, name: 'Tom Cook' },
  102. { id: 5, name: 'Tanya Fox', disabled: true },
  103. { id: 6, name: 'Hellen Schmidt' },
  104. { id: 7, name: 'Caroline Schultz' },
  105. { id: 8, name: 'Mason Heaney' },
  106. { id: 9, name: 'Claudie Smitham' },
  107. { id: 10, name: 'Emil Schaefer' },
  108. ]}"
  109. x-combobox
  110. >
  111. <label x-combobox:label>Assigned to</label>
  112. <input x-combobox:input :display-value="(person) => person.name" type="text">
  113. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  114. <ul x-combobox:options>
  115. <template x-for="person in people" :key="person.id">
  116. <li
  117. :option="person.id"
  118. x-combobox:option
  119. :value="person"
  120. :disabled="person.disabled"
  121. >
  122. <span x-text="person.name"></span>
  123. </li>
  124. </template>
  125. </ul>
  126. </div>
  127. `],
  128. ({ get }) => {
  129. get('ul').should(notBeVisible())
  130. get('button')
  131. .should(haveText('Select Person'))
  132. .click()
  133. get('ul').should(beVisible())
  134. get('button').click()
  135. get('ul').should(notBeVisible())
  136. get('button').click()
  137. get('[option="2"]').click()
  138. get('ul').should(notBeVisible())
  139. get('button').should(haveText('Arlene Mccoy'))
  140. get('input').should(haveValue('Arlene Mccoy'))
  141. },
  142. )
  143. test('$combobox/$comboboxOption',
  144. [html`
  145. <div
  146. x-data="{ people: [
  147. { id: 1, name: 'Wade Cooper' },
  148. { id: 2, name: 'Arlene Mccoy' },
  149. { id: 3, name: 'Devon Webb' },
  150. { id: 4, name: 'Tom Cook' },
  151. { id: 5, name: 'Tanya Fox', disabled: true },
  152. { id: 6, name: 'Hellen Schmidt' },
  153. { id: 7, name: 'Caroline Schultz' },
  154. { id: 8, name: 'Mason Heaney' },
  155. { id: 9, name: 'Claudie Smitham' },
  156. { id: 10, name: 'Emil Schaefer' },
  157. ]}"
  158. x-combobox
  159. >
  160. <label x-combobox:label>Assigned to</label>
  161. <input x-combobox:input :display-value="(person) => person.name" type="text">
  162. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  163. <p x-text="$combobox.activeIndex"></p>
  164. <article x-text="$combobox.activeOption?.name"></article>
  165. <ul x-combobox:options>
  166. <template x-for="person in people" :key="person.id">
  167. <li
  168. :option="person.id"
  169. x-combobox:option
  170. :value="person"
  171. :disabled="person.disabled"
  172. :class="{
  173. 'selected': $comboboxOption.isSelected,
  174. 'active': $comboboxOption.isActive,
  175. 'disabled': $comboboxOption.isDisabled,
  176. }"
  177. >
  178. <span x-text="person.name"></span>
  179. </li>
  180. </template>
  181. </ul>
  182. </div>
  183. `],
  184. ({ get }) => {
  185. get('article').should(haveText(''))
  186. get('[option="5"]').should(haveClasses(['disabled']))
  187. get('button')
  188. .should(haveText('Select Person'))
  189. .click()
  190. get('[option="1"]').should(haveClasses(['active']))
  191. get('input').type('{downarrow}')
  192. get('article').should(haveText('Arlene Mccoy'))
  193. get('p').should(haveText('1'))
  194. get('[option="2"]').should(haveClasses(['active']))
  195. get('button').should(haveText('Select Person'))
  196. get('[option="2"]').click()
  197. get('button').should(haveText('Arlene Mccoy'))
  198. get('[option="2"]').should(haveClasses(['selected']))
  199. },
  200. )
  201. test('"name" prop',
  202. [html`
  203. <div
  204. x-data="{ people: [
  205. { id: 1, name: 'Wade Cooper' },
  206. { id: 2, name: 'Arlene Mccoy' },
  207. { id: 3, name: 'Devon Webb' },
  208. { id: 4, name: 'Tom Cook' },
  209. { id: 5, name: 'Tanya Fox', disabled: true },
  210. { id: 6, name: 'Hellen Schmidt' },
  211. { id: 7, name: 'Caroline Schultz' },
  212. { id: 8, name: 'Mason Heaney' },
  213. { id: 9, name: 'Claudie Smitham' },
  214. { id: 10, name: 'Emil Schaefer' },
  215. ]}"
  216. x-combobox
  217. name="person"
  218. >
  219. <label x-combobox:label>Assigned to</label>
  220. <input x-combobox:input :display-value="(person) => person.name" type="text">
  221. <button x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  222. <ul x-combobox:options>
  223. <template x-for="person in people" :key="person.id">
  224. <li
  225. :option="person.id"
  226. x-combobox:option
  227. :value="person.id"
  228. :disabled="person.disabled"
  229. :class="{
  230. 'selected': $comboboxOption.isSelected,
  231. 'active': $comboboxOption.isActive,
  232. }"
  233. >
  234. <span x-text="person.name"></span>
  235. </li>
  236. </template>
  237. </ul>
  238. </div>
  239. `],
  240. ({ get }) => {
  241. get('input').should(haveAttribute('value', 'null'))
  242. get('button').click()
  243. get('input').should(haveAttribute('value', 'null'))
  244. get('[option="2"]').click()
  245. get('input').should(beHidden())
  246. .should(haveAttribute('name', 'person'))
  247. .should(haveAttribute('value', '2'))
  248. .should(haveAttribute('type', 'hidden'))
  249. get('button').click()
  250. get('[option="4"]').click()
  251. get('input').should(beHidden())
  252. .should(haveAttribute('name', 'person'))
  253. .should(haveAttribute('value', '4'))
  254. .should(haveAttribute('type', 'hidden'))
  255. },
  256. );
  257. test('"name" prop with object value',
  258. [html`
  259. <div
  260. x-data="{ people: [
  261. { id: 1, name: 'Wade Cooper' },
  262. { id: 2, name: 'Arlene Mccoy' },
  263. { id: 3, name: 'Devon Webb' },
  264. { id: 4, name: 'Tom Cook' },
  265. { id: 5, name: 'Tanya Fox', disabled: true },
  266. { id: 6, name: 'Hellen Schmidt' },
  267. { id: 7, name: 'Caroline Schultz' },
  268. { id: 8, name: 'Mason Heaney' },
  269. { id: 9, name: 'Claudie Smitham' },
  270. { id: 10, name: 'Emil Schaefer' },
  271. ]}"
  272. x-combobox
  273. name="person"
  274. >
  275. <label x-combobox:label>Assigned to</label>
  276. <input x-combobox:input :display-value="(person) => person.name" type="text">
  277. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  278. <ul x-combobox:options>
  279. <template x-for="person in people" :key="person.id">
  280. <li
  281. :option="person.id"
  282. x-combobox:option
  283. :value="person"
  284. :disabled="person.disabled"
  285. :class="{
  286. 'selected': $comboboxOption.isSelected,
  287. 'active': $comboboxOption.isActive,
  288. }"
  289. >
  290. <span x-text="person.name"></span>
  291. </li>
  292. </template>
  293. </ul>
  294. </div>
  295. `],
  296. ({ get }) => {
  297. get('input[name="person"]').should(haveAttribute('value', 'null'))
  298. get('button').click()
  299. get('[name="person[id]"]').should(notExist())
  300. get('[option="2"]').click()
  301. get('input[name="person"]').should(notExist())
  302. get('[name="person[id]"]').should(beHidden())
  303. .should(haveAttribute('value', '2'))
  304. .should(haveAttribute('type', 'hidden'))
  305. get('[name="person[name]"]').should(beHidden())
  306. .should(haveAttribute('value', 'Arlene Mccoy'))
  307. .should(haveAttribute('type', 'hidden'))
  308. get('button').click()
  309. get('[option="4"]').click()
  310. get('[name="person[id]"]').should(beHidden())
  311. .should(haveAttribute('value', '4'))
  312. .should(haveAttribute('type', 'hidden'))
  313. get('[name="person[name]"]').should(beHidden())
  314. .should(haveAttribute('value', 'Tom Cook'))
  315. .should(haveAttribute('type', 'hidden'))
  316. },
  317. );
  318. test('"default-value" prop',
  319. [html`
  320. <div
  321. x-data="{ people: [
  322. { id: 1, name: 'Wade Cooper' },
  323. { id: 2, name: 'Arlene Mccoy' },
  324. { id: 3, name: 'Devon Webb' },
  325. { id: 4, name: 'Tom Cook' },
  326. { id: 5, name: 'Tanya Fox', disabled: true },
  327. { id: 6, name: 'Hellen Schmidt' },
  328. { id: 7, name: 'Caroline Schultz' },
  329. { id: 8, name: 'Mason Heaney' },
  330. { id: 9, name: 'Claudie Smitham' },
  331. { id: 10, name: 'Emil Schaefer' },
  332. ]}"
  333. x-combobox
  334. name="person"
  335. default-value="2"
  336. >
  337. <label x-combobox:label>Assigned to</label>
  338. <input x-combobox:input :display-value="(person) => person.name" type="text">
  339. <button x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  340. <ul x-combobox:options>
  341. <template x-for="person in people" :key="person.id">
  342. <li
  343. :option="person.id"
  344. x-combobox:option
  345. :value="person.id"
  346. :disabled="person.disabled"
  347. :class="{
  348. 'selected': $comboboxOption.isSelected,
  349. 'active': $comboboxOption.isActive,
  350. }"
  351. >
  352. <span x-text="person.name"></span>
  353. </li>
  354. </template>
  355. </ul>
  356. </div>
  357. `],
  358. ({ get }) => {
  359. get('input[name="person"]').should(beHidden())
  360. .should(haveAttribute('value', '2'))
  361. .should(haveAttribute('type', 'hidden'))
  362. },
  363. );
  364. test('"multiple" prop',
  365. [html`
  366. <div
  367. x-data="{
  368. people: [
  369. { id: 1, name: 'Wade Cooper' },
  370. { id: 2, name: 'Arlene Mccoy' },
  371. { id: 3, name: 'Devon Webb' },
  372. { id: 4, name: 'Tom Cook' },
  373. { id: 5, name: 'Tanya Fox', disabled: true },
  374. { id: 6, name: 'Hellen Schmidt' },
  375. { id: 7, name: 'Caroline Schultz' },
  376. { id: 8, name: 'Mason Heaney' },
  377. { id: 9, name: 'Claudie Smitham' },
  378. { id: 10, name: 'Emil Schaefer' },
  379. ]
  380. }"
  381. x-combobox
  382. multiple
  383. >
  384. <label x-combobox:label>Assigned to</label>
  385. <input x-combobox:input :display-value="(person) => person.name" type="text">
  386. <button x-combobox:button x-text="$combobox.value ? $combobox.value.join(',') : 'Select People'"></button>
  387. <ul x-combobox:options>
  388. <template x-for="person in people" :key="person.id">
  389. <li
  390. :option="person.id"
  391. x-combobox:option
  392. :value="person.id"
  393. :disabled="person.disabled"
  394. :class="{
  395. 'selected': $comboboxOption.isSelected,
  396. 'active': $comboboxOption.isActive,
  397. }"
  398. >
  399. <span x-text="person.name"></span>
  400. </li>
  401. </template>
  402. </ul>
  403. </div>
  404. `],
  405. ({ get }) => {
  406. get('button').click()
  407. get('[option="2"]').click()
  408. get('ul').should(beVisible())
  409. get('button').should(haveText('2'))
  410. get('[option="4"]').click()
  411. get('button').should(haveText('2,4'))
  412. get('ul').should(beVisible())
  413. get('[option="4"]').click()
  414. get('button').should(haveText('2'))
  415. get('ul').should(beVisible())
  416. },
  417. );
  418. test('"multiple" and "name" props together',
  419. [html`
  420. <div
  421. x-data="{
  422. people: [
  423. { id: 1, name: 'Wade Cooper' },
  424. { id: 2, name: 'Arlene Mccoy' },
  425. { id: 3, name: 'Devon Webb' },
  426. { id: 4, name: 'Tom Cook' },
  427. { id: 5, name: 'Tanya Fox', disabled: true },
  428. { id: 6, name: 'Hellen Schmidt' },
  429. { id: 7, name: 'Caroline Schultz' },
  430. { id: 8, name: 'Mason Heaney' },
  431. { id: 9, name: 'Claudie Smitham' },
  432. { id: 10, name: 'Emil Schaefer' },
  433. ]
  434. }"
  435. x-combobox
  436. multiple
  437. name="people"
  438. >
  439. <label x-combobox:label>Assigned to</label>
  440. <input x-combobox:input :display-value="(person) => person.name" type="text">
  441. <button x-combobox:button x-text="$combobox.value ? $combobox.value.map(p => p.id).join(',') : 'Select People'"></button>
  442. <ul x-combobox:options>
  443. <template x-for="person in people" :key="person.id">
  444. <li
  445. :option="person.id"
  446. x-combobox:option
  447. :value="person"
  448. :disabled="person.disabled"
  449. :class="{
  450. 'selected': $comboboxOption.isSelected,
  451. 'active': $comboboxOption.isActive,
  452. }"
  453. >
  454. <span x-text="person.name"></span>
  455. </li>
  456. </template>
  457. </ul>
  458. </div>
  459. `],
  460. ({ get }) => {
  461. // get('input[name="people"]').should(haveAttribute('value', 'null'))
  462. get('button').click()
  463. get('[name="people[0][id]"]').should(notExist())
  464. get('[option="2"]').click()
  465. get('ul').should(beVisible())
  466. get('button').should(haveText('2'))
  467. get('input[name="people"]').should(notExist())
  468. get('[name="people[0][id]"]').should(beHidden())
  469. .should(haveAttribute('value', '2'))
  470. .should(haveAttribute('type', 'hidden'))
  471. get('[name="people[0][name]"]').should(beHidden())
  472. .should(haveAttribute('value', 'Arlene Mccoy'))
  473. .should(haveAttribute('type', 'hidden'))
  474. get('[option="4"]').click()
  475. get('[name="people[0][id]"]').should(beHidden())
  476. .should(haveAttribute('value', '2'))
  477. .should(haveAttribute('type', 'hidden'))
  478. get('[name="people[0][name]"]').should(beHidden())
  479. .should(haveAttribute('value', 'Arlene Mccoy'))
  480. .should(haveAttribute('type', 'hidden'))
  481. get('[name="people[1][id]"]').should(beHidden())
  482. .should(haveAttribute('value', '4'))
  483. .should(haveAttribute('type', 'hidden'))
  484. get('[name="people[1][name]"]').should(beHidden())
  485. .should(haveAttribute('value', 'Tom Cook'))
  486. .should(haveAttribute('type', 'hidden'))
  487. get('button').should(haveText('2,4'))
  488. get('ul').should(beVisible())
  489. get('[option="4"]').click()
  490. get('[name="people[0][id]"]').should(beHidden())
  491. .should(haveAttribute('value', '2'))
  492. .should(haveAttribute('type', 'hidden'))
  493. get('[name="people[0][name]"]').should(beHidden())
  494. .should(haveAttribute('value', 'Arlene Mccoy'))
  495. .should(haveAttribute('type', 'hidden'))
  496. get('[name="people[1][id]"]').should(notExist())
  497. get('[name="people[1][name]"]').should(notExist())
  498. get('button').should(haveText('2'))
  499. get('ul').should(beVisible())
  500. },
  501. );
  502. test('keyboard controls',
  503. [html`
  504. <div
  505. x-data="{ active: null, people: [
  506. { id: 1, name: 'Wade Cooper' },
  507. { id: 2, name: 'Arlene Mccoy' },
  508. { id: 3, name: 'Devon Webb', disabled: true },
  509. { id: 4, name: 'Tom Cook' },
  510. { id: 5, name: 'Tanya Fox', disabled: true },
  511. { id: 6, name: 'Hellen Schmidt' },
  512. { id: 7, name: 'Caroline Schultz' },
  513. { id: 8, name: 'Mason Heaney' },
  514. { id: 9, name: 'Claudie Smitham' },
  515. { id: 10, name: 'Emil Schaefer' },
  516. ]}"
  517. x-combobox
  518. x-model="active"
  519. >
  520. <label x-combobox:label>Assigned to</label>
  521. <input x-combobox:input :display-value="(person) => person.name" type="text">
  522. <button x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  523. <ul x-combobox:options options>
  524. <template x-for="person in people" :key="person.id">
  525. <li
  526. :option="person.id"
  527. x-combobox:option
  528. :value="person"
  529. :disabled="person.disabled"
  530. :class="{
  531. 'selected': $comboboxOption.isSelected,
  532. 'active': $comboboxOption.isActive,
  533. }"
  534. >
  535. <span x-text="person.name"></span>
  536. </li>
  537. </template>
  538. </ul>
  539. </div>
  540. `],
  541. ({ get }) => {
  542. get('.active').should(notExist())
  543. get('button').click()
  544. get('[options]')
  545. .should(beVisible())
  546. get('input').should(haveFocus())
  547. get('[option="1"]')
  548. .should(haveClasses(['active']))
  549. get('input')
  550. .type('{downarrow}')
  551. get('[option="2"]')
  552. .should(haveClasses(['active']))
  553. get('input')
  554. .type('{downarrow}')
  555. get('[option="4"]')
  556. .should(haveClasses(['active']))
  557. get('input')
  558. .type('{uparrow}')
  559. get('[option="2"]')
  560. .should(haveClasses(['active']))
  561. get('input')
  562. .type('{home}')
  563. get('[option="1"]')
  564. .should(haveClasses(['active']))
  565. get('input')
  566. .type('{end}')
  567. get('[option="10"]')
  568. .should(haveClasses(['active']))
  569. get('input')
  570. .type('{pageUp}')
  571. get('[option="1"]')
  572. .should(haveClasses(['active']))
  573. get('input')
  574. .type('{pageDown}')
  575. get('[option="10"]')
  576. .should(haveClasses(['active']))
  577. get('input')
  578. .tab()
  579. .should(haveFocus())
  580. get('[options]')
  581. .should(beVisible())
  582. get('input')
  583. .type('{esc}')
  584. get('[options]')
  585. .should(notBeVisible())
  586. },
  587. )
  588. test('changing value manually changes internal state',
  589. [html`
  590. <div
  591. x-data="{ active: null, people: [
  592. { id: 1, name: 'Wade Cooper' },
  593. { id: 2, name: 'Arlene Mccoy' },
  594. { id: 3, name: 'Devon Webb', disabled: true },
  595. { id: 4, name: 'Tom Cook' },
  596. { id: 5, name: 'Tanya Fox', disabled: true },
  597. { id: 6, name: 'Hellen Schmidt' },
  598. { id: 7, name: 'Caroline Schultz' },
  599. { id: 8, name: 'Mason Heaney' },
  600. { id: 9, name: 'Claudie Smitham' },
  601. { id: 10, name: 'Emil Schaefer' },
  602. ]}"
  603. x-combobox
  604. x-model="active"
  605. >
  606. <label x-combobox:label>Assigned to</label>
  607. <input x-combobox:input :display-value="(person) => person.name" type="text">
  608. <button toggle x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  609. <button select-tim @click="active = 4">Select Tim</button>
  610. <ul x-combobox:options options>
  611. <template x-for="person in people" :key="person.id">
  612. <li
  613. :option="person.id"
  614. x-combobox:option
  615. :value="person.id"
  616. :disabled="person.disabled"
  617. :class="{
  618. 'selected': $comboboxOption.isSelected,
  619. 'active': $comboboxOption.isActive,
  620. }"
  621. >
  622. <span x-text="person.name"></span>
  623. </li>
  624. </template>
  625. </ul>
  626. </div>
  627. `],
  628. ({ get }) => {
  629. get('[select-tim]').click()
  630. get('[option="4"]').should(haveClasses(['selected']))
  631. get('[option="1"]').should(notHaveClasses(['selected']))
  632. get('[toggle]').should(haveText('4'))
  633. },
  634. )
  635. test('has accessibility attributes',
  636. [html`
  637. <div
  638. x-data="{ active: null, people: [
  639. { id: 1, name: 'Wade Cooper' },
  640. { id: 2, name: 'Arlene Mccoy' },
  641. { id: 3, name: 'Devon Webb', disabled: true },
  642. { id: 4, name: 'Tom Cook' },
  643. { id: 5, name: 'Tanya Fox', disabled: true },
  644. { id: 6, name: 'Hellen Schmidt' },
  645. { id: 7, name: 'Caroline Schultz' },
  646. { id: 8, name: 'Mason Heaney' },
  647. { id: 9, name: 'Claudie Smitham' },
  648. { id: 10, name: 'Emil Schaefer' },
  649. ]}"
  650. x-combobox
  651. x-model="active"
  652. >
  653. <label x-combobox:label>Assigned to</label>
  654. <input x-combobox:input :display-value="(person) => person.name" type="text">
  655. <button x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  656. <ul x-combobox:options options>
  657. <template x-for="person in people" :key="person.id">
  658. <li
  659. :option="person.id"
  660. x-combobox:option
  661. :value="person"
  662. :disabled="person.disabled"
  663. :class="{
  664. 'selected': $comboboxOption.isSelected,
  665. 'active': $comboboxOption.isActive,
  666. }"
  667. >
  668. <span x-text="person.name"></span>
  669. </li>
  670. </template>
  671. </ul>
  672. </div>
  673. `],
  674. ({ get }) => {
  675. get('input')
  676. .should(haveAttribute('aria-expanded', 'false'))
  677. get('button')
  678. .should(haveAttribute('aria-haspopup', 'true'))
  679. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1 alpine-combobox-button-1'))
  680. .should(haveAttribute('aria-expanded', 'false'))
  681. .should(notHaveAttribute('aria-controls'))
  682. .should(haveAttribute('id', 'alpine-combobox-button-1'))
  683. .should(haveAttribute('tabindex', '-1'))
  684. .click()
  685. .should(haveAttribute('aria-expanded', 'true'))
  686. .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))
  687. get('[options]')
  688. .should(haveAttribute('role', 'combobox'))
  689. .should(haveAttribute('id', 'alpine-combobox-options-1'))
  690. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))
  691. get('[option="1"]')
  692. .should(haveAttribute('role', 'option'))
  693. .should(haveAttribute('id', 'alpine-combobox-option-1'))
  694. .should(haveAttribute('tabindex', '-1'))
  695. .should(haveAttribute('aria-selected', 'true'))
  696. get('[option="2"]')
  697. .should(haveAttribute('role', 'option'))
  698. .should(haveAttribute('id', 'alpine-combobox-option-2'))
  699. .should(haveAttribute('tabindex', '-1'))
  700. .should(haveAttribute('aria-selected', 'false'))
  701. get('input')
  702. .should(haveAttribute('role', 'combobox'))
  703. .should(haveAttribute('aria-autocomplete', 'list'))
  704. .should(haveAttribute('tabindex', '0'))
  705. .should(haveAttribute('aria-expanded', 'true'))
  706. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))
  707. .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))
  708. .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-1'))
  709. .type('{downarrow}')
  710. .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-2'))
  711. get('[option="2"]')
  712. .should(haveAttribute('aria-selected', 'true'))
  713. },
  714. )
  715. test('"static" prop',
  716. [html`
  717. <div
  718. x-data="{ active: null, show: false, people: [
  719. { id: 1, name: 'Wade Cooper' },
  720. { id: 2, name: 'Arlene Mccoy' },
  721. { id: 3, name: 'Devon Webb' },
  722. { id: 4, name: 'Tom Cook' },
  723. { id: 5, name: 'Tanya Fox', disabled: true },
  724. { id: 6, name: 'Hellen Schmidt' },
  725. { id: 7, name: 'Caroline Schultz' },
  726. { id: 8, name: 'Mason Heaney' },
  727. { id: 9, name: 'Claudie Smitham' },
  728. { id: 10, name: 'Emil Schaefer' },
  729. ]}"
  730. x-combobox
  731. x-model="active"
  732. >
  733. <label x-combobox:label>Assigned to</label>
  734. <input x-combobox:input :display-value="(person) => person.name" type="text">
  735. <button normal-toggle x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  736. <button real-toggle @click="show = ! show">Toggle</button>
  737. <ul x-combobox:options x-show="show" static>
  738. <template x-for="person in people" :key="person.id">
  739. <li
  740. :option="person.id"
  741. x-combobox:option
  742. :value="person"
  743. :disabled="person.disabled"
  744. >
  745. <span x-text="person.name"></span>
  746. </li>
  747. </template>
  748. </ul>
  749. </div>
  750. `],
  751. ({ get }) => {
  752. get('ul').should(notBeVisible())
  753. get('[normal-toggle]')
  754. .should(haveText('Select Person'))
  755. .click()
  756. get('ul').should(notBeVisible())
  757. get('[real-toggle]').click()
  758. get('ul').should(beVisible())
  759. get('[option="2"]').click()
  760. get('ul').should(beVisible())
  761. get('[normal-toggle]').should(haveText('Arlene Mccoy'))
  762. },
  763. )
  764. test('clicking outside the combobox closes it and resets the state',
  765. [html`
  766. <div
  767. x-data="{
  768. query: '',
  769. selected: null,
  770. people: [
  771. { id: 1, name: 'Wade Cooper' },
  772. { id: 2, name: 'Arlene Mccoy' },
  773. { id: 3, name: 'Devon Webb' },
  774. { id: 4, name: 'Tom Cook' },
  775. { id: 5, name: 'Tanya Fox', disabled: true },
  776. { id: 6, name: 'Hellen Schmidt' },
  777. { id: 7, name: 'Caroline Schultz' },
  778. { id: 8, name: 'Mason Heaney' },
  779. { id: 9, name: 'Claudie Smitham' },
  780. { id: 10, name: 'Emil Schaefer' },
  781. ],
  782. get filteredPeople() {
  783. return this.query === ''
  784. ? this.people
  785. : this.people.filter((person) => {
  786. return person.name.toLowerCase().includes(this.query.toLowerCase())
  787. })
  788. },
  789. }"
  790. >
  791. <div x-combobox x-model="selected">
  792. <label x-combobox:label>Select person</label>
  793. <div>
  794. <div>
  795. <input
  796. x-combobox:input
  797. :display-value="person => person.name"
  798. @change="query = $event.target.value"
  799. placeholder="Search..."
  800. />
  801. <button x-combobox:button>Toggle</button>
  802. </div>
  803. <div x-combobox:options>
  804. <ul>
  805. <template
  806. x-for="person in filteredPeople"
  807. :key="person.id"
  808. hidden
  809. >
  810. <li
  811. x-combobox:option
  812. :option="person.id"
  813. :value="person"
  814. :disabled="person.disabled"
  815. x-text="person.name"
  816. >
  817. </li>
  818. </template>
  819. </ul>
  820. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  821. </div>
  822. </div>
  823. </div>
  824. <article x-text="selected?.name"></article>
  825. </div>
  826. `],
  827. ({ get }) => {
  828. get('button').click()
  829. get('[option="2"]').click()
  830. get('input').should(haveValue('Arlene Mccoy'))
  831. get('button').click()
  832. get('input').type('W')
  833. get('article').click()
  834. get('ul').should(notBeVisible())
  835. get('input').should(haveValue('Arlene Mccoy'))
  836. },
  837. )