spec.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <html>
  2. <!-- Using a <blockquote> because it's an obscure tag -->
  3. <!-- which allows us to use document.querySelector() -->
  4. <!-- with generic tags freely inside Cypress tests. -->
  5. <blockquote id="root">
  6. <!-- This is where our test subjects will be injected. -->
  7. </blockquote>
  8. <script src="/../../packages/morph/dist/cdn.js"></script>
  9. <script src="/../../packages/persist/dist/cdn.js"></script>
  10. <script src="/../../packages/focus/dist/cdn.js"></script>
  11. <script src="/../../packages/intersect/dist/cdn.js"></script>
  12. <script src="/../../packages/collapse/dist/cdn.js"></script>
  13. <script src="/../../packages/anchor/dist/cdn.js"></script>
  14. <script src="/../../packages/mask/dist/cdn.js"></script>
  15. <script src="/../../packages/sort/dist/cdn.js"></script>
  16. <script src="/../../packages/ui/dist/cdn.js"></script>
  17. <script>
  18. let root = document.querySelector('#root')
  19. // We aren't loading Alpine directly because we are expecting
  20. // Cypress to inject HTML into "#root", THEN we'll call
  21. // this function from Cypress to boot everything up.
  22. root.evalScripts = (extraJavaScript) => {
  23. // Load bespoke JavaScript.
  24. if (extraJavaScript) {
  25. let script = document.createElement('script')
  26. script.src = `data:text/javascript;base64,${btoa(`
  27. document.addEventListener('alpine:init', () => {
  28. ${extraJavaScript}
  29. })
  30. `)}`
  31. root.after(script)
  32. }
  33. // Load all injected script tags.
  34. root.querySelectorAll('script').forEach(el => {
  35. eval(el.innerHTML)
  36. })
  37. // Load Alpine.
  38. let script = document.createElement('script')
  39. script.src = '/../../packages/alpinejs/dist/cdn.js'
  40. root.after(script)
  41. document.addEventListener('alpine:initialized', () => {
  42. let readyEl = document.createElement('blockquote')
  43. readyEl.setAttribute('alpine-is-ready', true)
  44. readyEl.style.width = '1px'
  45. readyEl.style.height = '1px'
  46. document.querySelector('blockquote').after(readyEl)
  47. })
  48. }
  49. </script>
  50. </html>