collapse.spec.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import { haveAttribute, haveComputedStyle, html, notHaveAttribute, test } from '../../utils'
  2. test('can collapse and expand element',
  3. [html`
  4. <div x-data="{ expanded: false }">
  5. <button @click="expanded = ! expanded">toggle</button>
  6. <h1 x-show="expanded" x-collapse>contents <a href="#">focusable content</a></h1>
  7. </div>
  8. `],
  9. ({ get }, reload) => {
  10. get('h1').should(haveComputedStyle('height', '0px'))
  11. get('h1').should(haveAttribute('style', 'display: none; height: 0px; overflow: hidden;'))
  12. get('h1').should(haveAttribute('hidden', 'hidden'))
  13. get('button').click()
  14. get('h1').should(haveAttribute('style', 'height: auto;'))
  15. get('h1').should(notHaveAttribute('hidden'))
  16. get('button').click()
  17. get('h1').should(haveComputedStyle('height', '0px'))
  18. get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))
  19. get('h1').should(haveAttribute('hidden', 'hidden'))
  20. },
  21. )
  22. test('@click.away with x-collapse (prevent race condition)',
  23. html`
  24. <div x-data="{ show: false }">
  25. <button @click="show = true">Show</button>
  26. <h1 x-show="show" @click.away="show = false" x-collapse>h1</h1>
  27. </div>
  28. `,
  29. ({ get }) => {
  30. get('h1').should(haveComputedStyle('height', '0px'))
  31. get('button').click()
  32. get('h1').should(haveAttribute('style', 'height: auto;'))
  33. }
  34. )
  35. test('@click.away with x-collapse and borders (prevent race condition)',
  36. html`
  37. <div x-data="{ show: false }">
  38. <button @click="show = true">Show</button>
  39. <h1 style="border: 1x solid" x-show="show" @click.away="show = false" x-collapse>h1</h1>
  40. </div>
  41. `,
  42. ({ get }) => {
  43. get('h1').should(haveComputedStyle('height', '0px'))
  44. get('button').click()
  45. get('h1').should(haveAttribute('style', 'height: auto;'))
  46. }
  47. )
  48. // https://github.com/alpinejs/alpine/issues/2335
  49. test('double-click on x-collapse does not mix styles up',
  50. [html`
  51. <div x-data="{ expanded: false }">
  52. <button @click="expanded = ! expanded">toggle</button>
  53. <h1 x-show="expanded" x-collapse>contents</h1>
  54. </div>
  55. `],
  56. ({ get }, reload) => {
  57. get('h1').should(haveComputedStyle('height', '0px'))
  58. get('h1').should(haveAttribute('style', 'display: none; height: 0px; overflow: hidden;'))
  59. get('button').click()
  60. get('button').click()
  61. get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden; display: none;'))
  62. get('button').click()
  63. get('h1').should(haveAttribute('style', 'height: auto;'))
  64. get('button').click()
  65. get('button').click()
  66. get('h1').should(haveAttribute('style', 'height: auto;'))
  67. },
  68. )