Merge pull request #28 from Turbo87/attributes

Adds hasAttribute() and doesNotHaveAttribute() assertions

API.md

@@ -95,6 +95,45 @@ Assert that the [HTMLElement][] or an [HTMLElement][] matching the
 assert.dom('input[type="password"]').isNotFocused();
 ```
 
+### hasAttribute
+
+-   **See: [#doesNotHaveAttribute](#doesnothaveattribute)**
+
+Assert that the [HTMLElement][] has an attribute with the provided `name`
+and optionally checks if the attribute `value` matches the provided text
+or regular expression.
+
+**Parameters**
+
+-   `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `value` **([string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) \| [RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) \| [object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)?)** 
+-   `message` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 
+
+**Examples**
+
+```javascript
+assert.dom('input.password-input').hasAttribute('type', 'password');
+```
+
+### doesNotHaveAttribute
+
+-   **See: [#hasAttribute](#hasattribute)**
+
+Assert that the [HTMLElement][] has no attribute with the provided `name`.
+
+**Aliases:** `hasNoAttribute`, `lacksAttribute`
+
+**Parameters**
+
+-   `name` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `message` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 
+
+**Examples**
+
+```javascript
+assert.dom('input.username').hasNoAttribute('disabled');
+```
+
 ### hasClass
 
 -   **See: [#doesNotHaveClass](#doesnothaveclass)**
@@ -120,7 +159,7 @@ assert.dom('input[type="password"]').hasClass('secret-password-input');
 Assert that the [HTMLElement][] does not have the `expected` CSS class using
 [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).
 
-**Aliases:** `hasNoClass`
+**Aliases:** `hasNoClass`, `lacksClass`
 
 **Parameters**
 
@@ -229,6 +268,8 @@ assert.dom('input.username').hasAnyValue();
 
 Assert that the `value` property of an [HTMLInputElement][] is empty.
 
+**Aliases:** `lacksValue`
+
 **Parameters**
 
 -   `message` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 

lib/__tests__/does-not-have-attribute.js

@@ -0,0 +1,81 @@
+/* eslint-env jest */
+
+import TestAssertions from "../helpers/test-assertions";
+
+describe('assert.dom(...).doesNotHaveAttribute()', () => {
+  let assert;
+
+  beforeEach(() => {
+    assert = new TestAssertions();
+
+    document.body.innerHTML = '<input type="password" required>';
+  });
+
+  test('succeeds for correct content', () => {
+    assert.dom('input').doesNotHaveAttribute('disabled');
+    assert.dom(document.querySelector('input')).doesNotHaveAttribute('disabled');
+
+    expect(assert.results).toEqual([{
+      actual: 'Element input does not have attribute "disabled"',
+      expected: 'Element input does not have attribute "disabled"',
+      message: 'Element input does not have attribute "disabled"',
+      result: true,
+    }, {
+      actual: 'Element input[type="password"][required] does not have attribute "disabled"',
+      expected: 'Element input[type="password"][required] does not have attribute "disabled"',
+      message: 'Element input[type="password"][required] does not have attribute "disabled"',
+      result: true,
+    }]);
+  });
+
+  test('fails for wrong content (string value)', () => {
+    assert.dom('input').doesNotHaveAttribute('type');
+    assert.dom(document.querySelector('input')).doesNotHaveAttribute('type');
+
+    expect(assert.results).toEqual([{
+      actual: 'Element input has attribute "type" with value "password"',
+      expected: 'Element input does not have attribute "type"',
+      message: 'Element input does not have attribute "type"',
+      result: false,
+    }, {
+      actual: 'Element input[type="password"][required] has attribute "type" with value "password"',
+      expected: 'Element input[type="password"][required] does not have attribute "type"',
+      message: 'Element input[type="password"][required] does not have attribute "type"',
+      result: false,
+    }]);
+  });
+
+  test('fails for wrong content (string value)', () => {
+    assert.dom('input').doesNotHaveAttribute('required');
+    assert.dom(document.querySelector('input')).doesNotHaveAttribute('required');
+
+    expect(assert.results).toEqual([{
+      actual: 'Element input has attribute "required" with value ""',
+      expected: 'Element input does not have attribute "required"',
+      message: 'Element input does not have attribute "required"',
+      result: false,
+    }, {
+      actual: 'Element input[type="password"][required] has attribute "required" with value ""',
+      expected: 'Element input[type="password"][required] does not have attribute "required"',
+      message: 'Element input[type="password"][required] does not have attribute "required"',
+      result: false,
+    }]);
+  });
+
+  test('fails for missing element', () => {
+    assert.dom('#missing').doesNotHaveAttribute('disabled');
+
+    expect(assert.results).toEqual([{
+      message: 'Element #missing exists',
+      result: false,
+    }]);
+  });
+
+  test('throws for unexpected parameter types', () => {
+    expect(() => assert.dom(5).doesNotHaveAttribute('disabled')).toThrow('Unexpected Parameter: 5');
+    expect(() => assert.dom(true).doesNotHaveAttribute('disabled')).toThrow('Unexpected Parameter: true');
+    expect(() => assert.dom(undefined).doesNotHaveAttribute('disabled')).toThrow('Unexpected Parameter: undefined');
+    expect(() => assert.dom({}).doesNotHaveAttribute('disabled')).toThrow('Unexpected Parameter: [object Object]');
+    expect(() => assert.dom(document).doesNotHaveAttribute('disabled')).toThrow('Unexpected Parameter: [object HTMLDocument]');
+  });
+});

lib/__tests__/has-attribute.js

@@ -0,0 +1,208 @@
+/* eslint-env jest */
+
+import TestAssertions from "../helpers/test-assertions";
+
+describe('assert.dom(...).hasAttribute()', () => {
+  let assert;
+
+  beforeEach(() => {
+    assert = new TestAssertions();
+
+    document.body.innerHTML = '<input type="password">';
+  });
+
+  describe('string expected', () => {
+    test('succeeds for correct name and value', () => {
+      assert.dom('input').hasAttribute('type', 'password');
+      assert.dom(document.querySelector('input')).hasAttribute('type', 'password');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type" with value "password"',
+        expected: 'Element input has attribute "type" with value "password"',
+        message: 'Element input has attribute "type" with value "password"',
+        result: true,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type" with value "password"',
+        expected: 'Element input[type="password"] has attribute "type" with value "password"',
+        message: 'Element input[type="password"] has attribute "type" with value "password"',
+        result: true,
+      }]);
+    });
+
+    test('fails for wrong value', () => {
+      assert.dom('input').hasAttribute('type', 'text');
+      assert.dom(document.querySelector('input')).hasAttribute('type', 'text');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type" with value "password"',
+        expected: 'Element input has attribute "type" with value "text"',
+        message: 'Element input has attribute "type" with value "text"',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type" with value "password"',
+        expected: 'Element input[type="password"] has attribute "type" with value "text"',
+        message: 'Element input[type="password"] has attribute "type" with value "text"',
+        result: false,
+      }]);
+    });
+
+    test('fails for missing attribute', () => {
+      assert.dom('input').hasAttribute('foo', 'bar');
+      assert.dom(document.querySelector('input')).hasAttribute('foo', 'bar');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input does not have attribute "foo"',
+        expected: 'Element input has attribute "foo" with value "bar"',
+        message: 'Element input has attribute "foo" with value "bar"',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] does not have attribute "foo"',
+        expected: 'Element input[type="password"] has attribute "foo" with value "bar"',
+        message: 'Element input[type="password"] has attribute "foo" with value "bar"',
+        result: false,
+      }]);
+    });
+  });
+
+  describe('regex expected', () => {
+    test('succeeds for matching name and value', () => {
+      assert.dom('input').hasAttribute('type', /^pass/);
+      assert.dom(document.querySelector('input')).hasAttribute('type', /^pass/);
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type" with value "password"',
+        expected: 'Element input has attribute "type" with value matching /^pass/',
+        message: 'Element input has attribute "type" with value matching /^pass/',
+        result: true,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type" with value "password"',
+        expected: 'Element input[type="password"] has attribute "type" with value matching /^pass/',
+        message: 'Element input[type="password"] has attribute "type" with value matching /^pass/',
+        result: true,
+      }]);
+    });
+
+    test('fails for wrong value', () => {
+      assert.dom('input').hasAttribute('type', /mail$/);
+      assert.dom(document.querySelector('input')).hasAttribute('type', /mail$/);
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type" with value "password"',
+        expected: 'Element input has attribute "type" with value matching /mail$/',
+        message: 'Element input has attribute "type" with value matching /mail$/',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type" with value "password"',
+        expected: 'Element input[type="password"] has attribute "type" with value matching /mail$/',
+        message: 'Element input[type="password"] has attribute "type" with value matching /mail$/',
+        result: false,
+      }]);
+    });
+
+    test('fails for missing attribute', () => {
+      assert.dom('input').hasAttribute('foo', /fo+/);
+      assert.dom(document.querySelector('input')).hasAttribute('foo', /fo+/);
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input does not have attribute "foo"',
+        expected: 'Element input has attribute "foo" with value matching /fo+/',
+        message: 'Element input has attribute "foo" with value matching /fo+/',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] does not have attribute "foo"',
+        expected: 'Element input[type="password"] has attribute "foo" with value matching /fo+/',
+        message: 'Element input[type="password"] has attribute "foo" with value matching /fo+/',
+        result: false,
+      }]);
+    });
+  });
+
+  describe('no value', () => {
+    test('succeeds for existing attribute', () => {
+      assert.dom('input').hasAttribute('type');
+      assert.dom(document.querySelector('input')).hasAttribute('type');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type"',
+        expected: 'Element input has attribute "type"',
+        message: 'Element input has attribute "type"',
+        result: true,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type"',
+        expected: 'Element input[type="password"] has attribute "type"',
+        message: 'Element input[type="password"] has attribute "type"',
+        result: true,
+      }]);
+    });
+
+    test('fails for missing attribute', () => {
+      assert.dom('input').hasAttribute('disabled');
+      assert.dom(document.querySelector('input')).hasAttribute('disabled');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input does not have attribute "disabled"',
+        expected: 'Element input has attribute "disabled"',
+        message: 'Element input has attribute "disabled"',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] does not have attribute "disabled"',
+        expected: 'Element input[type="password"] has attribute "disabled"',
+        message: 'Element input[type="password"] has attribute "disabled"',
+        result: false,
+      }]);
+    });
+  });
+
+  describe('{ any: true }', () => {
+    test('succeeds for existing attribute', () => {
+      assert.dom('input').hasAttribute('type', { any: true }, 'custom message');
+      assert.dom(document.querySelector('input')).hasAttribute('type', { any: true }, 'custom message');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input has attribute "type"',
+        expected: 'Element input has attribute "type"',
+        message: 'custom message',
+        result: true,
+      }, {
+        actual: 'Element input[type="password"] has attribute "type"',
+        expected: 'Element input[type="password"] has attribute "type"',
+        message: 'custom message',
+        result: true,
+      }]);
+    });
+
+    test('fails for missing attribute', () => {
+      assert.dom('input').hasAttribute('disabled', { any: true }, 'custom message');
+      assert.dom(document.querySelector('input')).hasAttribute('disabled', { any: true }, 'custom message');
+
+      expect(assert.results).toEqual([{
+        actual: 'Element input does not have attribute "disabled"',
+        expected: 'Element input has attribute "disabled"',
+        message: 'custom message',
+        result: false,
+      }, {
+        actual: 'Element input[type="password"] does not have attribute "disabled"',
+        expected: 'Element input[type="password"] has attribute "disabled"',
+        message: 'custom message',
+        result: false,
+      }]);
+    });
+  });
+
+  test('fails for missing element', () => {
+    assert.dom('#missing').hasAttribute('foo');
+
+    expect(assert.results).toEqual([{
+      message: 'Element #missing exists',
+      result: false,
+    }]);
+  });
+
+  test('throws for unexpected parameter types', () => {
+    expect(() => assert.dom(5).hasAttribute('foo')).toThrow('Unexpected Parameter: 5');
+    expect(() => assert.dom(true).hasAttribute('foo')).toThrow('Unexpected Parameter: true');
+    expect(() => assert.dom(undefined).hasAttribute('foo')).toThrow('Unexpected Parameter: undefined');
+    expect(() => assert.dom({}).hasAttribute('foo')).toThrow('Unexpected Parameter: [object Object]');
+    expect(() => assert.dom(document).hasAttribute('foo')).toThrow('Unexpected Parameter: [object HTMLDocument]');
+  });
+});