Merge pull request #535 from Turbo87/aria-checked

isChecked: Add support for `aria-checked="true/false"`
mainmatter · Nov 12, 2019 · 57c73b5 · 57c73b5
2 parents dc1619e + aec772a
commit 57c73b5
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 4 deletions.
diff --git a/lib/__tests__/is-checked.ts b/lib/__tests__/is-checked.ts
@@ -115,6 +115,66 @@ describe('assert.dom(...).isChecked()', () => {
     });
   });
 
+  describe('aria-checked', () => {
+    test('succeeds if element is checked', () => {
+      document.body.innerHTML = '<button role="checkbox" aria-checked="true">';
+
+      assert.dom('button').isChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'checked',
+          expected: 'checked',
+          message: 'Element button is checked',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails if element is not checked', () => {
+      document.body.innerHTML = '<button role="checkbox" aria-checked="false">';
+
+      assert.dom('button').isChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'not checked',
+          expected: 'checked',
+          message: 'Element button is checked',
+          result: false,
+        },
+      ]);
+    });
+
+    test('fails if element does not have `aria-checked` attribute', () => {
+      document.body.innerHTML = '<button role="checkbox">';
+
+      assert.dom('button').isChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'not checked',
+          expected: 'checked',
+          message: 'Element button is checked',
+          result: false,
+        },
+      ]);
+    });
+
+    test('fails for missing element', () => {
+      document.body.innerHTML = '';
+
+      assert.dom('button').isChecked();
+
+      expect(assert.results).toEqual([
+        {
+          message: 'Element button should exist',
+          result: false,
+        },
+      ]);
+    });
+  });
+
   test('throws for unexpected parameter types', () => {
     expect(() => assert.dom(5).isChecked()).toThrow('Unexpected Parameter: 5');
     expect(() => assert.dom(true).isChecked()).toThrow('Unexpected Parameter: true');

diff --git a/lib/__tests__/is-not-checked.ts b/lib/__tests__/is-not-checked.ts
@@ -115,6 +115,66 @@ describe('assert.dom(...).isNotChecked()', () => {
     });
   });
 
+  describe('aria-checked', () => {
+    test('succeeds if element is not checked', () => {
+      document.body.innerHTML = '<button role="checkbox" aria-checked="false">';
+
+      assert.dom('button').isNotChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'not checked',
+          expected: 'not checked',
+          message: 'Element button is not checked',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails if element is checked', () => {
+      document.body.innerHTML = '<button role="checkbox" aria-checked="true">';
+
+      assert.dom('button').isNotChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'checked',
+          expected: 'not checked',
+          message: 'Element button is not checked',
+          result: false,
+        },
+      ]);
+    });
+
+    test('succeeds if element does not have `aria-checked` attribute', () => {
+      document.body.innerHTML = '<button role="checkbox">';
+
+      assert.dom('button').isNotChecked();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'not checked',
+          expected: 'not checked',
+          message: 'Element button is not checked',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails for missing element', () => {
+      document.body.innerHTML = '';
+
+      assert.dom('button').isNotChecked();
+
+      expect(assert.results).toEqual([
+        {
+          message: 'Element button should exist',
+          result: false,
+        },
+      ]);
+    });
+  });
+
   test('throws for unexpected parameter types', () => {
     expect(() => assert.dom(5).isNotChecked()).toThrow('Unexpected Parameter: 5');
     expect(() => assert.dom(true).isNotChecked()).toThrow('Unexpected Parameter: true');

diff --git a/lib/assertions.ts b/lib/assertions.ts
@@ -80,6 +80,8 @@ export default class DOMAssertions {
    * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
    * `selector` is currently checked.
    *
+   * Note: This also supports `aria-checked="true/false"`.
+   *
    * @param {string?} message
    *
    * @example
@@ -95,6 +97,8 @@ export default class DOMAssertions {
    * Assert that the {@link HTMLElement} or an {@link HTMLElement} matching the
    * `selector` is currently unchecked.
    *
+   * Note: This also supports `aria-checked="true/false"`.
+   *
    * @param {string?} message
    *
    * @example

diff --git a/lib/assertions/is-checked.ts b/lib/assertions/is-checked.ts
@@ -4,8 +4,20 @@ export default function checked(message) {
   let element = this.findTargetElement();
   if (!element) return;
 
-  let result = element.checked === true;
-  let actual = element.checked === true ? 'checked' : 'not checked';
+  let isChecked = element.checked === true;
+  let isNotChecked = element.checked === false;
+
+  let result = isChecked;
+
+  let hasCheckedProp = isChecked || isNotChecked;
+  if (!hasCheckedProp) {
+    let ariaChecked = element.getAttribute('aria-checked');
+    if (ariaChecked !== null) {
+      result = ariaChecked === 'true';
+    }
+  }
+
+  let actual = result ? 'checked' : 'not checked';
   let expected = 'checked';
 
   if (!message) {

diff --git a/lib/assertions/is-not-checked.ts b/lib/assertions/is-not-checked.ts
@@ -4,8 +4,20 @@ export default function notChecked(message) {
   let element = this.findTargetElement();
   if (!element) return;
 
-  let result = element.checked === false;
-  let actual = element.checked === true ? 'checked' : 'not checked';
+  let isChecked = element.checked === true;
+  let isNotChecked = element.checked === false;
+
+  let result = !isChecked;
+
+  let hasCheckedProp = isChecked || isNotChecked;
+  if (!hasCheckedProp) {
+    let ariaChecked = element.getAttribute('aria-checked');
+    if (ariaChecked !== null) {
+      result = ariaChecked !== 'true';
+    }
+  }
+
+  let actual = result ? 'not checked' : 'checked';
   let expected = 'not checked';
 
   if (!message) {