diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f18199..2b986fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,11 +5,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) ## [Unreleased] +- Add isFocused getter + ## [0.9.2] - 2018-02-05 ### Fixed -- Make sure $root descriptor function is not wrapped in the chaining mechanism - https://github.com/bigtestjs/interactor/pull/60 +- Make sure $root descriptor function is not wrapped in the chaining mechanism - https://github.com/bigtestjs/interactor/pull/60 ## [0.9.1] - 2018-10-23 diff --git a/README.md b/README.md index dcce839..6793f03 100644 --- a/README.md +++ b/README.md @@ -211,6 +211,7 @@ describe('Logging in', () => { - `isVisible(selector)` - `isHidden(selector)` - `isPresent(selector)` +- `isFocused(selector)` - `is(selector, match)` - `hasClass(selector)` diff --git a/src/interactions/index.js b/src/interactions/index.js index 9f4c035..0c11054 100644 --- a/src/interactions/index.js +++ b/src/interactions/index.js @@ -22,6 +22,7 @@ export { default as is } from './is'; export { default as isVisible } from './is-visible'; export { default as isHidden } from './is-hidden'; export { default as isPresent } from './is-present'; +export { default as isFocused } from './is-focused'; // interaction helpers export { computed, action } from './helpers'; diff --git a/src/interactions/is-focused.js b/src/interactions/is-focused.js new file mode 100644 index 0000000..e438e0b --- /dev/null +++ b/src/interactions/is-focused.js @@ -0,0 +1,27 @@ +import { computed } from './helpers'; + +/** + * Property creator for returning `true` or `false` when an element + * should have focus. + * + * ``` html + *
+ * + * + *
+ * ``` + * + * ``` javascript + * new Interactor('#email').isFocused //=> true when email input focused + * new Interactor('#password').isFocused //=> false when email input focused + * ``` + * + * @function isFocused + * @param {String} [selector] - Nested element query selector + * @returns {Object} Property descriptor + */ +export default function(selector) { + return computed(function() { + return this.$(selector) === document.activeElement; + }); +} diff --git a/tests/fixtures/is-focused-fixture.html b/tests/fixtures/is-focused-fixture.html new file mode 100644 index 0000000..727dcdd --- /dev/null +++ b/tests/fixtures/is-focused-fixture.html @@ -0,0 +1,8 @@ +
+ + +
diff --git a/tests/interactions/is-focused.test.js b/tests/interactions/is-focused.test.js new file mode 100644 index 0000000..812cb52 --- /dev/null +++ b/tests/interactions/is-focused.test.js @@ -0,0 +1,38 @@ +/* global describe, beforeEach, it */ +import { expect } from 'chai'; +import { useFixture } from '../helpers'; +import { interactor, isFocused } from '../../src'; + +@interactor class FocusedInteractor { + isEmailFocused = isFocused('#email'); + isPasswordFocused = isFocused('#password'); +} + +describe('BigTest Interaction: isFocused', () => { + let test; + + useFixture('is-focused-fixture'); + + beforeEach(() => { + test = new FocusedInteractor('#focus-form'); + }); + + it('has isFocused properties', () => { + expect(test).to.have.property('isFocused').that.is.a('boolean'); + expect(test).to.have.property('isEmailFocused').that.is.a('boolean'); + expect(test).to.have.property('isPasswordFocused').that.is.a('boolean'); + }); + + it('returns true if the element is focused', () => { + expect(test.isFocused).to.be.false; + expect(test.isEmailFocused).to.be.true; + expect(test.isPasswordFocused).to.be.true; + }); + + it('returns false if the element is not focused', () => { + test.focus('#password'); + expect(test.isFocused).to.be.false; + expect(test.isEmailFocused).to.be.false; + expect(test.isPasswordFocused).to.be.true; + }); +});