From 61c270ad89fe87949c5d4bd3921170030878c1de Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Tue, 10 Oct 2017 13:59:33 +0200 Subject: [PATCH 1/2] Add doesNotHaveClass() assertion --- API.md | 20 +++++++++ lib/__tests__/does-not-have-class.js | 64 ++++++++++++++++++++++++++++ lib/assertions.js | 29 ++++++++++++- 3 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 lib/__tests__/does-not-have-class.js diff --git a/API.md b/API.md index 9346ed303..3b37dc8f7 100644 --- a/API.md +++ b/API.md @@ -97,6 +97,8 @@ assert.dom('input[type="password"]').isNotFocused(); ### hasClass +- **See: [#doesNotHaveClass](#doesnothaveclass)** + Assert that the [HTMLElement][] has the `expected` CSS class using [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). @@ -111,6 +113,24 @@ Assert that the [HTMLElement][] has the `expected` CSS class using assert.dom('input[type="password"]').hasClass('secret-password-input'); ``` +### doesNotHaveClass + +- **See: [#hasClass](#hasclass)** + +Assert that the [HTMLElement][] does not have the `expected` CSS class using +[`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). + +**Parameters** + +- `expected` **[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[type="password"]').doesNotHaveClass('username-input'); +``` + ### hasText - **See: [#hasTextContaining](#hastextcontaining)** diff --git a/lib/__tests__/does-not-have-class.js b/lib/__tests__/does-not-have-class.js new file mode 100644 index 000000000..b18a78247 --- /dev/null +++ b/lib/__tests__/does-not-have-class.js @@ -0,0 +1,64 @@ +/* eslint-env jest */ + +import TestAssertions from "../helpers/test-assertions"; + +describe('assert.dom(...).doesNotHaveClass()', () => { + let assert; + + beforeEach(() => { + assert = new TestAssertions(); + + document.body.innerHTML = ''; + }); + + test('succeeds for correct content', () => { + assert.dom('input[type="password"]').doesNotHaveClass('username-input'); + assert.dom(document.querySelector('input[type="password"]')).doesNotHaveClass('username-input'); + + expect(assert.results).toEqual([{ + actual: 'secret-password-input foo', + expected: 'not: username-input', + message: 'Element input[type="password"] does not have CSS class "username-input"', + result: true, + }, { + actual: 'secret-password-input foo', + expected: 'not: username-input', + message: 'Element input.secret-password-input.foo[type="password"] does not have CSS class "username-input"', + result: true, + }]); + }); + + test('fails for wrong content', () => { + assert.dom('input[type="password"]').doesNotHaveClass('secret-password-input'); + assert.dom(document.querySelector('input[type="password"]')).doesNotHaveClass('secret-password-input'); + + expect(assert.results).toEqual([{ + actual: 'secret-password-input foo', + expected: 'not: secret-password-input', + message: 'Element input[type="password"] does not have CSS class "secret-password-input"', + result: false, + }, { + actual: 'secret-password-input foo', + expected: 'not: secret-password-input', + message: 'Element input.secret-password-input.foo[type="password"] does not have CSS class "secret-password-input"', + result: false, + }]); + }); + + test('fails for missing element', () => { + assert.dom('#missing').doesNotHaveClass('foo'); + + expect(assert.results).toEqual([{ + message: 'Element #missing exists', + result: false, + }]); + }); + + test('throws for unexpected parameter types', () => { + expect(() => assert.dom(5).doesNotHaveClass('foo')).toThrow('Unexpected Parameter: 5'); + expect(() => assert.dom(true).doesNotHaveClass('foo')).toThrow('Unexpected Parameter: true'); + expect(() => assert.dom(undefined).doesNotHaveClass('foo')).toThrow('Unexpected Parameter: undefined'); + expect(() => assert.dom({}).doesNotHaveClass('foo')).toThrow('Unexpected Parameter: [object Object]'); + expect(() => assert.dom(document).doesNotHaveClass('foo')).toThrow('Unexpected Parameter: [object HTMLDocument]'); + }); +}); diff --git a/lib/assertions.js b/lib/assertions.js index 569b1fb92..018e06f69 100644 --- a/lib/assertions.js +++ b/lib/assertions.js @@ -72,7 +72,6 @@ export default class DOMAssertions { notFocused.call(this, message); } - /** * Assert that the [HTMLElement][] has the `expected` CSS class using * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). @@ -82,6 +81,8 @@ export default class DOMAssertions { * * @example * assert.dom('input[type="password"]').hasClass('secret-password-input'); + * + * @see {@link #doesNotHaveClass} */ hasClass(expected, message) { let element = this.findTargetElement(); @@ -97,6 +98,32 @@ export default class DOMAssertions { this.pushResult({ result, actual, expected, message }); } + /** + * Assert that the [HTMLElement][] does not have the `expected` CSS class using + * [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). + * + * @param {string} expected + * @param {string?} message + * + * @example + * assert.dom('input[type="password"]').doesNotHaveClass('username-input'); + * + * @see {@link #hasClass} + */ + doesNotHaveClass(expected, message) { + let element = this.findTargetElement(); + if (!element) return; + + let result = !element.classList.contains(expected); + let actual = element.classList.toString(); + + if (!message) { + message = `Element ${this.targetDescription} does not have CSS class "${expected}"`; + } + + this.pushResult({ result, actual, expected: `not: ${expected}`, message }); + } + /** * Assert that the text of the [HTMLElement][] or an [HTMLElement][] * matching the `selector` matches the `expected` text, using the From d4c7dd7ce6d48a37c51c75c91c8c209783c12f68 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Tue, 10 Oct 2017 14:05:58 +0200 Subject: [PATCH 2/2] Add hasNoClass() alias --- API.md | 2 ++ lib/assertions.js | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/API.md b/API.md index 3b37dc8f7..1bb63a68b 100644 --- a/API.md +++ b/API.md @@ -120,6 +120,8 @@ 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` + **Parameters** - `expected` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** diff --git a/lib/assertions.js b/lib/assertions.js index 018e06f69..267f1edbe 100644 --- a/lib/assertions.js +++ b/lib/assertions.js @@ -102,6 +102,8 @@ export default class DOMAssertions { * 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` + * * @param {string} expected * @param {string?} message * @@ -124,6 +126,10 @@ export default class DOMAssertions { this.pushResult({ result, actual, expected: `not: ${expected}`, message }); } + hasNoClass(expected, message) { + this.doesNotHaveClass(expected, message); + } + /** * Assert that the text of the [HTMLElement][] or an [HTMLElement][] * matching the `selector` matches the `expected` text, using the