Add isFocused getter

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
 

README.md

@@ -211,6 +211,7 @@ describe('Logging in', () => {
 - `isVisible(selector)`
 - `isHidden(selector)`
 - `isPresent(selector)`
+- `isFocused(selector)`
 - `is(selector, match)`
 - `hasClass(selector)`
 

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';

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
+ * <form>
+ *   <input type="email" id="email" />
+ *   <input type="password" id="password" />
+ * </form>
+ * ```
+ *
+ * ``` 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;
+  });
+}

tests/fixtures/is-focused-fixture.html

@@ -0,0 +1,8 @@
+<div id="focus-form">
+  <label class="test-field">
+    <input type="email" id="email" autofocus />
+  </label>
+  <label class="test-field">
+    <input type="password" id="password" />
+  </label>
+</div>

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;
+  });
+});