| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <html>
- <!-- Using a <blockquote> because it's an obscure tag -->
- <!-- which allows us to use document.querySelector() -->
- <!-- with generic tags freely inside Cypress tests. -->
- <blockquote id="root">
- <!-- This is where our test subjects will be injected. -->
- </blockquote>
- <script src="/../../packages/history/dist/cdn.js"></script>
- <script src="/../../packages/morph/dist/cdn.js"></script>
- <script src="/../../packages/persist/dist/cdn.js"></script>
- <script src="/../../packages/trap/dist/cdn.js"></script>
- <script src="/../../packages/intersect/dist/cdn.js"></script>
- <script src="/../../packages/collapse/dist/cdn.js"></script>
- <script>
- let root = document.querySelector('#root')
- // We aren't loading Alpine directly because we are expecting
- // Cypress to inject HTML into "#root", THEN we'll call
- // this function from Cypress to boot everything up.
- root.evalScripts = (extraJavaScript) => {
- // Load bespoke JavaScript.
- if (extraJavaScript) {
- let script = document.createElement('script')
- script.src = `data:text/javascript;base64,${btoa(`
- document.addEventListener('alpine:init', () => {
- ${extraJavaScript}
- })
- `)}`
- root.after(script)
- }
- // Load all injected script tags.
- root.querySelectorAll('script').forEach(el => {
- eval(el.innerHTML)
- })
- // Load Alpine.
- let script = document.createElement('script')
- script.src = '/../../packages/alpinejs/dist/cdn.js'
- root.after(script)
- document.addEventListener('alpine:initialized', () => {
- let readyEl = document.createElement('blockquote')
- readyEl.setAttribute('alpine-is-ready', true)
- readyEl.style.width = '1px'
- readyEl.style.height = '1px'
- document.querySelector('blockquote').after(readyEl)
- })
- }
- </script>
- </html>
|
