task(assertions): Adding doesNotHaveTagName assertion

lib/__tests__/does-not-have-tagname.ts

@@ -0,0 +1,150 @@
+/* eslint-env jest */
+
+import TestAssertions from '../helpers/test-assertions';
+
+describe('assert.dom(...).doesNotHaveTagName()', () => {
+  let assert;
+
+  beforeEach(() => {
+    assert = new TestAssertions();
+  });
+
+  test('with custom message', () => {
+    document.body.innerHTML = '<section id="block">Section</section>\n';
+
+    assert.dom('#block').doesNotHaveTagName('div', 'custom message');
+
+    expect(assert.results).toEqual([
+      {
+        actual: 'section',
+        expected: 'div',
+        message: 'custom message',
+        result: true,
+      },
+    ]);
+  });
+
+  describe('with HTMLElement', () => {
+    let element;
+
+    beforeEach(() => {
+      document.body.innerHTML = '<section id="block">Section</section>\n';
+      element = document.querySelector('#block');
+    });
+
+    test('succeeds if does not have provided tagName', () => {
+      assert.dom(element).doesNotHaveTagName('div');
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'section',
+          expected: 'div',
+          message: 'Element section#block does not have tagName div',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails if has provided tagName', () => {
+      assert.dom(element).doesNotHaveTagName('section');
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'section',
+          expected: 'section',
+          message: 'Element section#block has tagName section',
+          result: false,
+        },
+      ]);
+    });
+
+    test('fails for missing element', () => {
+      assert.dom(null).doesNotHaveTagName('div');
+
+      expect(assert.results).toEqual([
+        {
+          message: 'Element <unknown> should exist',
+          result: false,
+        },
+      ]);
+    });
+  });
+
+  describe('with selector', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<section id="block">Section</section>\n';
+    });
+
+    test('succeeds if does not have provided tagName', () => {
+      assert.dom('#block').doesNotHaveTagName('div');
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'section',
+          expected: 'div',
+          message: 'Element #block does not have tagName div',
+          result: true,
+        },
+      ]);
+    });
+
+    test('fails if has provided tagName', () => {
+      assert.dom('#block').doesNotHaveTagName('section');
+
+      expect(assert.results).toEqual([
+        {
+          actual: 'section',
+          expected: 'section',
+          message: 'Element #block has tagName section',
+          result: false,
+        },
+      ]);
+    });
+
+    test('fails for missing element', () => {
+      assert.dom('#missing').doesNotHaveTagName('div');
+
+      expect(assert.results).toEqual([
+        {
+          message: 'Element #missing should exist',
+          result: false,
+        },
+      ]);
+    });
+  });
+
+  test('throws for unexpected parameter types', () => {
+    expect(() => assert.dom(5).doesNotHaveTagName('div')).toThrow('Unexpected Parameter: 5');
+    expect(() => assert.dom(true).doesNotHaveTagName('div')).toThrow('Unexpected Parameter: true');
+    expect(() => assert.dom(undefined).doesNotHaveTagName('div')).toThrow(
+      'Unexpected Parameter: undefined'
+    );
+    expect(() => assert.dom({}).doesNotHaveTagName('div')).toThrow(
+      'Unexpected Parameter: [object Object]'
+    );
+    expect(() => assert.dom(document).doesNotHaveTagName('div')).toThrow(
+      'Unexpected Parameter: [object Document]'
+    );
+  });
+
+  describe('invalid arguments to `doesNotHaveTagName`', () => {
+    let element;
+
+    beforeEach(() => {
+      document.body.innerHTML = '<section id="block">Section</section>\n';
+      element = document.querySelector('#block');
+    });
+
+    test('passing a number to `doesNotHaveTagName` will throw an error', () => {
+      expect(() => assert.dom(element).doesNotHaveTagName(1234)).toThrow(
+        'You must pass a string to "doesNotHaveTagName". You passed 1234'
+      );
+    });
+
+    test('passing an object to `doesNotHaveTagName` will throw an error', () => {
+      expect(() => assert.dom(element).doesNotHaveTagName({})).toThrow(
+        'You must pass a string to "doesNotHaveTagName". You passed [object Object]'
+      );
+    });
+  });
+});

lib/assertions.ts

@@ -1000,6 +1000,51 @@ export default class DOMAssertions {
     }
   }
 
+  /**
+   * Assert that the tagName of the {@link HTMLElement} or an {@link HTMLElement}
+   * matching the `selector` does not match the `expected` tagName, using the
+   * [`tagName`](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)
+   * property of the {@link HTMLElement}.
+   *
+   * @param {string} expected
+   * @param {string?} message
+   *
+   * @example
+   * // <section id="block">
+   * //   Title
+   * // </section>
+   *
+   * assert.dom('section#block').doesNotHaveTagName('div');
+   */
+  doesNotHaveTagName(tagName: string, message?: string) {
+    let element = this.findTargetElement();
+    let actual;
+    let expected;
+
+    if (!element) return;
+
+    if (typeof tagName !== 'string') {
+      throw new TypeError(`You must pass a string to "doesNotHaveTagName". You passed ${tagName}.`);
+    }
+
+    actual = element.tagName.toLowerCase();
+    expected = tagName.toLowerCase();
+
+    if (actual !== expected) {
+      if (!message) {
+        message = `Element ${this.targetDescription} does not have tagName ${expected}`;
+      }
+
+      this.pushResult({ result: true, actual, expected, message });
+    } else {
+      if (!message) {
+        message = `Element ${this.targetDescription} has tagName ${expected}`;
+      }
+
+      this.pushResult({ result: false, actual, expected, message });
+    }
+  }
+
   /**
    * @private
    */