Merge pull request #15 from Turbo87/has-value

Add hasValue() assertion

API.md

@@ -2,6 +2,8 @@
 
 [htmlelement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
 
+[htmlinputelement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
+
 [nodelist]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
 
 ## assert.dom()
@@ -130,3 +132,19 @@ attribute.
 ```javascript
 assert.dom('#title').hasTextContaining('Welcome');
 ```
+
+### hasValue
+
+Assert that the `value` property of an [HTMLInputElement][] matches
+the `expected` text or regular expression.
+
+**Parameters**
+
+-   `expected` **([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))** 
+-   `message` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)?** 
+
+**Examples**
+
+```javascript
+assert.dom('input.username').hasValue('HSimpson');
+```

lib/__tests__/has-value.js

@@ -0,0 +1,103 @@
+/* eslint-env jest */
+
+import TestAssertions from "../helpers/test-assertions";
+
+describe('assert.dom(...).hasValue()', () => {
+  let assert;
+
+  beforeEach(() => {
+    assert = new TestAssertions();
+
+    document.body.innerHTML = '<input class="input username">';
+    document.querySelector('input.username').value = 'HSimpson';
+  });
+
+  describe('string expected', () => {
+    test('succeeds for correct content', () => {
+      assert.dom('input.username').hasValue('HSimpson');
+      assert.dom(document.querySelector('input.username')).hasValue('HSimpson');
+
+      expect(assert.results).toEqual([{
+        actual: 'HSimpson',
+        expected: 'HSimpson',
+        message: 'Element input.username has value "HSimpson"',
+        result: true,
+      }, {
+        actual: 'HSimpson',
+        expected: 'HSimpson',
+        message: 'Element input.input.username has value "HSimpson"',
+        result: true,
+      }]);
+    });
+
+    test('fails for wrong content', () => {
+      assert.dom('input.username').hasValue('Bart');
+      assert.dom(document.querySelector('input.username')).hasValue('Bart');
+
+      expect(assert.results).toEqual([{
+        actual: 'HSimpson',
+        expected: 'Bart',
+        message: 'Element input.username has value "Bart"',
+        result: false,
+      }, {
+        actual: 'HSimpson',
+        expected: 'Bart',
+        message: 'Element input.input.username has value "Bart"',
+        result: false,
+      }]);
+    });
+  });
+
+  describe('regex expected', () => {
+    test('succeeds for correct content', () => {
+      assert.dom('input.username').hasValue(/.+Simpson/);
+      assert.dom(document.querySelector('input.username')).hasValue(/.+Simpson/);
+
+      expect(assert.results).toEqual([{
+        actual: 'HSimpson',
+        expected: /.+Simpson/,
+        message: 'Element input.username has value matching /.+Simpson/',
+        result: true,
+      }, {
+        actual: 'HSimpson',
+        expected: /.+Simpson/,
+        message: 'Element input.input.username has value matching /.+Simpson/',
+        result: true,
+      }]);
+    });
+
+    test('fails for wrong content', () => {
+      assert.dom('input.username').hasValue(/.+Burns/);
+      assert.dom(document.querySelector('input.username')).hasValue(/.+Burns/);
+
+      expect(assert.results).toEqual([{
+        actual: 'HSimpson',
+        expected: /.+Burns/,
+        message: 'Element input.username has value matching /.+Burns/',
+        result: false,
+      }, {
+        actual: 'HSimpson',
+        expected: /.+Burns/,
+        message: 'Element input.input.username has value matching /.+Burns/',
+        result: false,
+      }]);
+    });
+  });
+
+  test('fails for missing element', () => {
+    assert.dom('#missing').hasValue('foo');
+
+    expect(assert.results).toEqual([{
+      message: 'Element #missing exists',
+      result: false,
+    }]);
+  });
+
+  test('throws for unexpected parameter types', () => {
+    expect(() => assert.dom(5).hasValue('foo')).toThrow('Unexpected Parameter: 5');
+    expect(() => assert.dom(true).hasValue('foo')).toThrow('Unexpected Parameter: true');
+    expect(() => assert.dom(undefined).hasValue('foo')).toThrow('Unexpected Parameter: undefined');
+    expect(() => assert.dom({}).hasValue('foo')).toThrow('Unexpected Parameter: [object Object]');
+    expect(() => assert.dom(document).hasValue('foo')).toThrow('Unexpected Parameter: [object HTMLDocument]');
+  });
+});

lib/assertions.js

@@ -139,6 +139,42 @@ export default class DOMAssertions {
     this.pushResult({ result, actual, expected, message });
   }
 
+  /**
+   * Assert that the `value` property of an [HTMLInputElement][] matches
+   * the `expected` text or regular expression.
+   *
+   * @param {string|RegExp} expected
+   * @param {string?} message
+   *
+   * @example
+   * assert.dom('input.username').hasValue('HSimpson');
+   */
+  hasValue(expected, message) {
+    let element = this.findTargetElement();
+    if (!element) return;
+
+    if (expected instanceof RegExp) {
+      let result = expected.test(element.value);
+      let actual = element.value;
+
+      if (!message) {
+        message = `Element ${this.targetDescription} has value matching ${expected}`;
+      }
+
+      this.pushResult({ result, actual, expected, message });
+
+    } else {
+      let actual = element.value;
+      let result = actual === expected;
+
+      if (!message) {
+        message = `Element ${this.targetDescription} has value "${expected}"`;
+      }
+
+      this.pushResult({ result, actual, expected, message });
+    }
+  }
+
   /**
    * @private
    */