Merge pull request #246 from dwilhelmi/support-Element-type-for-exists

Make `findTargets` support a `this.target` of type `Element`

lib/__tests__/does-not-exist.ts

@@ -72,10 +72,6 @@ describe('assert.dom(...).doesNotExist()', () => {
   });
 
   test('throws for unexpected parameter types', () => {
-    expect(() => assert.dom(document.body).doesNotExist()).toThrow(
-      'Unexpected Parameter: [object HTMLBodyElement]'
-    );
-
     //@ts-ignore -- These assertions are for JavaScript users who don't have type checking
     expect(() => assert.dom(5).doesNotExist()).toThrow('Unexpected Parameter: 5');
     //@ts-ignore

lib/__tests__/exists.ts

@@ -9,7 +9,7 @@ describe('assert.dom(...).exists()', () => {
     assert = new TestAssertions();
   });
 
-  describe('selector only', () => {
+  describe('with selector', () => {
     test('succeeds if element exists', () => {
       document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
 
@@ -41,6 +41,39 @@ describe('assert.dom(...).exists()', () => {
     });
   });
 
+  describe('with Element', () => {
+    test('succeeds if element exists', () => {
+      document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
+
+      const headingElement = document.querySelector('h1');
+      assert.dom(headingElement).exists();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'Element h1.baz exists',
+          expected: 'Element h1.baz exists',
+          message: 'Element h1.baz exists',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails if element is missing', () => {
+      document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
+
+      assert.dom(null).isVisible();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'Element <not found> is not visible',
+          expected: 'Element <not found> is visible',
+          message: 'Element <not found> is visible',
+          result: false,
+        },
+      ]);
+    });
+  });
+
   describe('custom messages', () => {
     test('without options', () => {
       document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
@@ -136,10 +169,6 @@ describe('assert.dom(...).exists()', () => {
   });
 
   test('throws for unexpected parameter types', () => {
-    expect(() => assert.dom(document.body).exists()).toThrow(
-      'Unexpected Parameter: [object HTMLBodyElement]'
-    );
-
     //@ts-ignore -- These assertions are for JavaScript users who don't have type checking
     expect(() => assert.dom(5).exists()).toThrow('Unexpected Parameter: 5');
     //@ts-ignore

lib/__tests__/is-visible.ts

@@ -17,7 +17,22 @@ describe('assert.dom(...).isVisible()', () => {
     assert = new TestAssertions();
   });
 
-  describe('selector only', () => {
+  describe('with selector', () => {
+    test('fails if element is missing', () => {
+      document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
+
+      assert.dom('h2').isVisible();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'Element h2 is not visible',
+          expected: 'Element h2 is visible',
+          message: 'Element h2 is visible',
+          result: false,
+        },
+      ]);
+    });
+
     test('fails if element is missing', () => {
       document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
 
@@ -51,6 +66,23 @@ describe('assert.dom(...).isVisible()', () => {
     });
   });
 
+  describe('with Element', () => {
+    test('fails for missing element', () => {
+      document.body.innerHTML = '<h1 class="baz">foo</h1>bar';
+
+      assert.dom(null).isVisible();
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'Element <not found> is not visible',
+          expected: 'Element <not found> is visible',
+          message: 'Element <not found> is visible',
+          result: false,
+        },
+      ]);
+    });
+  });
+
   describe('with count option', () => {
     test('fails if element is missing', () => {
       document.body.innerHTML = '<div></div>'.repeat(3);

lib/assertions.ts

@@ -1196,16 +1196,18 @@ export default class DOMAssertions {
   }
 
   /**
-   * Finds a collection of HTMLElement instances from target using querySelectorAll
+   * Finds a collection of Element instances from target using querySelectorAll
    * @private
-   * @returns (HTMLElement[]) an array of HTMLElement instances
+   * @returns (Element[]) an array of Element instances
    * @throws TypeError will be thrown if target is an unrecognized type
    */
-  private findElements(): HTMLElement[] {
+  private findElements(): Element[] {
     if (this.target === null) {
       return [];
     } else if (typeof this.target === 'string') {
       return toArray(this.rootElement.querySelectorAll(this.target));
+    } else if (this.target instanceof Element) {
+      return [this.target];
     } else {
       throw new TypeError(`Unexpected Parameter: ${this.target}`);
     }

lib/assertions/exists.ts

@@ -9,12 +9,12 @@ export default function exists(options?: ExistsOptions | string, message?: strin
     expectedCount = options.count;
   }
 
-  let elements = this.findElements(this.target);
+  let elements = this.findElements();
 
   if (expectedCount === null) {
     let result = elements.length > 0;
-    let expected = format(this.target);
-    let actual = result ? expected : format(this.target, 0);
+    let expected = format(this.targetDescription);
+    let actual = result ? expected : format(this.targetDescription, 0);
 
     if (!message) {
       message = expected;
@@ -23,8 +23,8 @@ export default function exists(options?: ExistsOptions | string, message?: strin
     this.pushResult({ result, actual, expected, message });
   } else if (typeof expectedCount === 'number') {
     let result = elements.length === expectedCount;
-    let actual = format(this.target, elements.length);
-    let expected = format(this.target, expectedCount);
+    let actual = format(this.targetDescription, elements.length);
+    let expected = format(this.targetDescription, expectedCount);
 
     if (!message) {
       message = expected;

lib/assertions/is-visible.ts

@@ -10,12 +10,12 @@ export default function isVisible(options?: string | ExistsOptions, message?: st
     expectedCount = options.count;
   }
 
-  let elements = this.findElements(this.target).filter(visible);
+  let elements = this.findElements().filter(visible);
 
   if (expectedCount === null) {
     let result = elements.length > 0;
-    let expected = format(this.target);
-    let actual = result ? expected : format(this.target, 0);
+    let expected = format(this.targetDescription);
+    let actual = result ? expected : format(this.targetDescription, 0);
 
     if (!message) {
       message = expected;
@@ -24,8 +24,8 @@ export default function isVisible(options?: string | ExistsOptions, message?: st
     this.pushResult({ result, actual, expected, message });
   } else if (typeof expectedCount === 'number') {
     let result = elements.length === expectedCount;
-    let actual = format(this.target, elements.length);
-    let expected = format(this.target, expectedCount);
+    let actual = format(this.targetDescription, elements.length);
+    let expected = format(this.targetDescription, expectedCount);
 
     if (!message) {
       message = expected;

lib/helpers/element-to-string.ts

@@ -1,6 +1,8 @@
 // imported from https://github.com/nathanboktae/chai-dom
 
-export default function elementToString(el: Element | NodeList | string): string {
+export default function elementToString(el: Element | NodeList | string | null): string {
+  if (!el) return '<not found>';
+
   let desc: string;
   if (el instanceof NodeList) {
     if (el.length === 0) {