Add test for indeterminate state

muan · muan · commit d4d41eb35e89 · 2019-07-05T14:58:56.000-04:00
diff --git a/test/test.js b/test/test.js
@@ -350,6 +350,54 @@ describe('details-menu element', function() {
     })
   })
 
+  describe('with labels as menu item with indeterminate checkboxes', function() {
+    beforeEach(function() {
+      const container = document.createElement('div')
+      container.innerHTML = `
+        <details>
+          <summary>Click</summary>
+          <details-menu>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="false"><input type="checkbox" name="robot"> Hubot</label>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="true"><input type="checkbox" name="robot" checked> Bender</label>
+            <label tabindex="0" role="menuitemcheckbox" aria-checked="false"><input type="checkbox" name="robot"> BB-8</label>
+          </details-menu>
+        </details>
+      `
+      document.body.append(container)
+    })
+
+    afterEach(function() {
+      document.body.innerHTML = ''
+    })
+
+    it('manages checked state and fires events', function() {
+      const details = document.querySelector('details')
+      const summary = document.querySelector('summary')
+      const item = details.querySelector('label')
+      const input = item.querySelector('input')
+      let eventCounter = 0
+      document.addEventListener('details-menu-selected', () => eventCounter++, true)
+
+      input.indeterminate = true
+      input.dispatchEvent(new Event('change', {bubbles: true}))
+
+      summary.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert(details.open, 'menu opens')
+      assert.equal(item.getAttribute('aria-checked'), 'mixed')
+
+      item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert(details.open, 'menu stays open')
+      assert.equal(item.getAttribute('aria-checked'), 'true')
+      assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 2)
+
+      item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
+      assert.equal(item.getAttribute('aria-checked'), 'false')
+      assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
+
+      assert.equal(eventCounter, 3, 'selected event is fired three times')
+    })
+  })
+
   describe('with no valid menu items', function() {
     beforeEach(function() {
       const container = document.createElement('div')
