From 0ee2bf3f6bed82cbea317dc831c16ae21ab28fa7 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Mon, 9 Oct 2017 16:53:31 +0200 Subject: [PATCH] Add hasValue() assertion --- API.md | 18 +++++++ lib/__tests__/has-value.js | 103 +++++++++++++++++++++++++++++++++++++ lib/assertions.js | 36 +++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 lib/__tests__/has-value.js diff --git a/API.md b/API.md index fecc27b8b..ea84947e0 100644 --- a/API.md +++ b/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'); +``` diff --git a/lib/__tests__/has-value.js b/lib/__tests__/has-value.js new file mode 100644 index 000000000..6fdf77acf --- /dev/null +++ b/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 = ''; + 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]'); + }); +}); diff --git a/lib/assertions.js b/lib/assertions.js index d890236c6..58d68ba3a 100644 --- a/lib/assertions.js +++ b/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 */