1
0

navigate.spec.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import { beEqualTo, beVisible, haveAttribute, haveFocus, haveText, html, notBeVisible, test } from '../../utils'
  2. // Skipping these tests because the plugin has been moved to livewire/livewire until it's stablhese tests because the plugin has been moved to livewire/livewire until it's stable...
  3. describe.skip('Navigate tests', function () {
  4. it.skip('navigates pages without reload',
  5. () => {
  6. cy.intercept('/first', {
  7. headers: { 'content-type': 'text/html' },
  8. body: html`
  9. <html>
  10. <head>
  11. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  12. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  13. </head>
  14. <body>
  15. <a href="/second">Navigate</a>
  16. <h2>First Page</h2>
  17. <script>
  18. window.fromFirstPage = true
  19. </script>
  20. </body>
  21. </html>
  22. `})
  23. cy.intercept('/second', {
  24. headers: { 'content-type': 'text/html' },
  25. body: html`
  26. <html>
  27. <head>
  28. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  29. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  30. </head>
  31. <body>
  32. <h2>Second Page</h2>
  33. </body>
  34. </html>
  35. `})
  36. cy.visit('/first')
  37. cy.window().its('fromFirstPage').should(beEqualTo(true))
  38. cy.get('h2').should(haveText('First Page'))
  39. cy.get('a').click()
  40. cy.url().should('include', '/second')
  41. cy.get('h2').should(haveText('Second Page'))
  42. cy.window().its('fromFirstPage').should(beEqualTo(true))
  43. },
  44. )
  45. it.skip('autofocuses autofocus elements',
  46. () => {
  47. cy.intercept('/first', {
  48. headers: { 'content-type': 'text/html' },
  49. body: html`
  50. <html>
  51. <head>
  52. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  53. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  54. </head>
  55. <body>
  56. <a href="/second">Navigate</a>
  57. </body>
  58. </html>
  59. `})
  60. cy.intercept('/second', {
  61. headers: { 'content-type': 'text/html' },
  62. body: html`
  63. <html>
  64. <head>
  65. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  66. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  67. </head>
  68. <body>
  69. <input type="text" autofocus>
  70. </body>
  71. </html>
  72. `})
  73. cy.visit('/first')
  74. cy.get('a').click()
  75. cy.url().should('include', '/second')
  76. cy.get('input').should(haveFocus())
  77. },
  78. )
  79. it.skip('scripts and styles are properly merged/run or skipped',
  80. () => {
  81. cy.intercept('/first', {
  82. headers: { 'content-type': 'text/html' },
  83. body: html`
  84. <html>
  85. <head>
  86. <title>First Page</title>
  87. <meta name="description" content="first description">
  88. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  89. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  90. </head>
  91. <body>
  92. <a href="/second">Navigate</a>
  93. </body>
  94. </html>
  95. `})
  96. cy.intercept('/head-script.js', {
  97. headers: { 'content-type': 'text/js' },
  98. body: `window.fromHeadScript = true`
  99. })
  100. cy.intercept('/body-script.js', {
  101. headers: { 'content-type': 'text/js' },
  102. body: `window.fromBodyScript = true`
  103. })
  104. cy.intercept('/head-style.css', {
  105. headers: { 'content-type': 'text/css' },
  106. body: `body { background: black !important; }`
  107. })
  108. cy.intercept('/second', {
  109. headers: { 'content-type': 'text/html' },
  110. body: html`
  111. <html>
  112. <head>
  113. <title>Second Page</title>
  114. <meta name="description" content="second description">
  115. <script src="/../../packages/navigate/dist/cdn.js" defer></script>
  116. <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
  117. <script src="head-script.js" defer></script>
  118. <script>window.fromHeadScriptInline = true</script>
  119. <link rel="stylesheet" src="head-style.css"></script>
  120. </head>
  121. <body>
  122. <script src="body-script.js" defer></script>
  123. <script>window.fromBodyScriptInline = true</script>
  124. </body>
  125. </html>
  126. `})
  127. cy.visit('/first')
  128. cy.get('a').click()
  129. cy.url().should('include', '/second')
  130. cy.title().should(beEqualTo('Second Page'))
  131. cy.get('meta').should(haveAttribute('name', 'description'))
  132. cy.get('meta').should(haveAttribute('content', 'second description'))
  133. cy.window().its('fromHeadScript').should(beEqualTo(true))
  134. cy.window().its('fromHeadScriptInline').should(beEqualTo(true))
  135. cy.window().its('fromBodyScript').should(beEqualTo(true))
  136. cy.window().its('fromBodyScriptInline').should(beEqualTo(true))
  137. },
  138. )
  139. })