Fix Modal Dialog References (#225)

* Update data modal target on example

* Fix controller names

* Replace fixture file html

* Actually test modal click

* Test closing modal

* Test escape key

* Separate click and keyboard tests

docs/modal.md

@@ -11,7 +11,7 @@ application.register('modal', Modal)
 
 ```html
 <div data-controller="modal">
-  <dialog data-modal-target="modal" class="p-8 rounded-lg backdrop:bg-black/80">
+  <dialog data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80">
     <p>This modal dialog has a groovy backdrop!</p>
     <button autofocus data-action="modal#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
   </dialog>

index.html

@@ -179,12 +179,12 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Dropdowns</h2>
         <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
         <p>Modals use the <code>&lt;dialog&gt;</code> html element and can be closed with <kbd>Esc</kbd> or a button. See the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns" target="_blank" class="underline text-blue-500">dialog element MDN docs</a>.</p>
 
-        <div data-controller="dialog">
-          <dialog data-dialog-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80">
+        <div data-controller="modal">
+          <dialog data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80">
             <p>This modal dialog has a groovy backdrop!</p>
-            <button autofocus data-action="dialog#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
+            <button autofocus data-action="modal#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
           </dialog>
-          <button data-action="dialog#showModal" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open modal</button>
+          <button data-action="modal#open" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open modal</button>
         </div>
       </div>
 

package.json

@@ -41,6 +41,7 @@
   "devDependencies": {
     "@open-wc/testing": "^4.0.0",
     "@web/test-runner": "^0.18.0",
+    "@web/test-runner-commands": "^0.9.0",
     "esbuild": "^0.20.0"
   },
   "peerDependencies": {

src/modal.js

@@ -1,5 +1,4 @@
 import { Controller } from "@hotwired/stimulus"
-import { enter, leave } from "./transition"
 
 export default class extends Controller {
   static targets = ["dialog"]

test/fixtures/index.html

@@ -87,34 +87,6 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Slideovers</h2>
     </button>
   </div>
 
-  <div class="my-12">
-    <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
-
-    <div data-controller="modal" data-modal-allow-background-close="true">
-      <a href="#" data-action="click->modal#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
-        <span>Open Modal</span>
-      </a>
-
-      <!-- Modal Container -->
-      <div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
-        <!-- Modal Inner Container -->
-        <div class="max-h-screen w-full max-w-lg relative">
-          <!-- Modal Card -->
-          <div class="m-1 bg-white rounded shadow">
-            <div class="p-8">
-              <h2 class="text-xl mb-4">Large Modal Content</h2>
-              <p class="mb-4">This is an example modal dialog box.</p>
-
-              <div class="flex justify-end items-center flex-wrap mt-6">
-                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close">Close</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <div class="my-12">
     <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs</h2>
 

test/fixtures/modal.html

@@ -0,0 +1,17 @@
+<div class="my-12">
+  <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
+  <p>Modals use the <code>&lt;dialog&gt;</code> html element and can be closed with <kbd>Esc</kbd> or a button. See the
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility_concerns" target="_blank"
+      class="underline text-blue-500">dialog element MDN docs</a>.
+  </p>
+
+  <div data-controller="modal">
+    <dialog data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80">
+      <p>This modal dialog has a groovy backdrop!</p>
+      <button autofocus data-action="modal#close"
+        class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
+    </dialog>
+    <button data-action="modal#open"
+      class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open modal</button>
+  </div>
+</div>

test/modal_test.js

@@ -0,0 +1,41 @@
+import { fixture, expect } from '@open-wc/testing'
+import { sendKeys } from '@web/test-runner-commands';
+import { fetchFixture } from './test_helpers'
+
+import { Application } from '@hotwired/stimulus'
+import Modal from '../src/modal'
+
+describe('ModalController', () => {
+  describe('#default', () => {
+    beforeEach(async () => {
+      const html = await fetchFixture('modal.html')
+      await fixture(html)
+      const application = Application.start()
+      application.register('modal', Modal)
+    })
+
+    const openModalButton = document.querySelector("[data-action='modal#open']")
+
+    it('clicks to open and close the modal', async () => {
+      const dialog = document.querySelector("dialog")
+      const openModalButton = document.querySelector("[data-action='modal#open']")
+      openModalButton.click()
+      expect(dialog.hasAttribute("open")).to.equal(true)
+
+      const closeModalButton = document.querySelector("[data-action='modal#close']")
+      closeModalButton.click()
+      expect(dialog.hasAttribute("open")).to.equal(false)
+    })
+
+    it('uses the keyboard to open and close the modal', async () => {
+      const dialog = document.querySelector("dialog")
+      const openModalButton = document.querySelector("[data-action='modal#open']")
+      openModalButton.focus()
+      await sendKeys({ press: 'Space' });
+      expect(dialog.hasAttribute("open")).to.equal(true)
+
+      await sendKeys({ press: 'Escape' });
+      expect(dialog.hasAttribute("open")).to.equal(false)
+    })
+  })
+})