From d6e3f5f2edea5cbdac41e08022c6d00ec46fe0a1 Mon Sep 17 00:00:00 2001
From: Jeffrey Cherewaty <jeffrey@frontside.io>
Date: Thu, 27 Jun 2019 13:46:03 -0500
Subject: [PATCH] Add isFocused getter

---
 CHANGELOG.md                           |  4 ++-
 README.md                              |  1 +
 src/interactions/index.js              |  1 +
 src/interactions/is-focused.js         | 27 ++++++++++++++++++
 tests/fixtures/is-focused-fixture.html |  8 ++++++
 tests/interactions/is-focused.test.js  | 38 ++++++++++++++++++++++++++
 6 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/interactions/is-focused.js
 create mode 100644 tests/fixtures/is-focused-fixture.html
 create mode 100644 tests/interactions/is-focused.test.js

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