Update slideover tests

test/fixtures/slideover.html

@@ -1,48 +1,7 @@
-<div class="container mx-auto p-8"
-     data-controller="slideover"
-     data-slideover-invisible-class="-translate-x-full,opacity-0"
-     data-slideover-visible-class="translate-x-0,opacity-100"
-     data-slideover-entering-class=""
-     data-slideover-enter-timeout="300,300"
-     data-slideover-leaving-class=""
-     data-slideover-leave-timeout="300,0"
-     data-slideover-active-target="#slideover-target">
-  <!-- begin sidebar/slideover -->
-  <div id="sidebar-mobile">
-    <div data-slideover-target="overlay" class="fixed inset-0 flex z-40 transition-opacity ease-linear duration-300 opacity-0 hidden">
-      <div class="fixed inset-0">
-        <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
-      </div>
-      <div id="slideover-target" data-slideover-target="menu" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800 transition ease-in-out duration-300 transform -translate-x-full hidden">
-        <div class="absolute top-0 right-0 -mr-14 p-1">
-          <button data-action="slideover#_hide" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
-            <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        <div class="flex-shrink-0 flex items-center px-4">
-          <h1 class="text-white text-2xl font-bold">Sidebar</h1>
-        </div>
-        <div class="mt-5 flex-1 h-0 overflow-y-auto">
-          <nav class="px-2 space-y-1">
-          </nav>
-        </div>
-      </div>
-      <div class="flex-shrink-0 w-14">
-        <!-- Dummy element to force sidebar to shrink to fit close icon -->
-      </div>
-    </div>
-  </div>
-
-  <!-- end sidebar/slideover -->
-
-  <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Examples</h1>
-
-  <div class="my-12">
-    <h2 class="text-2xl text-gray-800 font-semibold mb-4">Slideovers</h2>
-    <button data-action="click->slideover#toggle click@window->slideover#hide" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
-      <span>Open Slideover</span>
-    </button>
-  </div>
+<div data-controller="slideover">
+  <dialog data-slideover-target="dialog" class="slideover h-full max-h-full m-0 w-96 p-8 backdrop:bg-black/80">
+    <p>This slideover dialog has a groovy backdrop!</p>
+    <button autofocus data-action="slideover#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
+  </dialog>
+  <button data-action="slideover#open" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open slideover</button>
 </div>

test/slideover_test.js

@@ -14,21 +14,11 @@ describe('SlideoverController', () => {
       application.register('slideover', Slideover)
     })
 
-    it('applies visible class to target ', () => {
-      const mobileSidebar = document.querySelector('#sidebar-mobile')
-      const invisibleClass = document.querySelector('[data-controller="slideover"]').dataset
-        .slideoverInvisibleClass
-      const visibleClass = document.querySelector('[data-controller="slideover"]').dataset
-        .slideoverVisibleClass
-
-      const overLayTarget = mobileSidebar.querySelector('[data-slideover-target="overlay"]')
-      const actionBtn = document.querySelector(
-        '[data-action="click->slideover#toggle click@window->slideover#hide"]',
-      )
-
-      expect(overLayTarget.className.includes('hidden')).to.equal(true)
-      actionBtn.click()
-      expect(overLayTarget.className.includes(visibleClass)).to.equal(false)
+    it('opens dialog', () => {
+      const dialog = document.querySelector("dialog")
+      expect(dialog.hasAttribute("open")).to.equal(false)
+      document.querySelector("[data-action='slideover#open']").click()
+      expect(dialog.hasAttribute("open")).to.equal(true)
     })
   })
 })