feat(dom): DOM - toHaveFocus (#151)

Co-authored-by: Suany Chalan <79164262+suany0805@users.noreply.github.com>

Author: fonsiher

packages/dom/src/lib/ElementAssertion.ts

@@ -142,6 +142,40 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
     );
   }
 
+  /**
+   * Check if the provided element is currently focused in the document.
+   *
+   * @example
+   * const userNameInput = document.querySelector('#username');
+   * userNameInput.focus();
+   * expect(userNameInput).toHaveFocus(); // passes
+   * expect(userNameInput).not.toHaveFocus(); // fails
+   *
+   * @returns The assertion instance.
+   */
+    public toHaveFocus(): this {
+
+      const hasFocus = this.actual === document.activeElement;
+
+      const error = new AssertionError({
+        actual: this.actual,
+        expected: document.activeElement,
+        message: "Expected the element to be focused",
+      });
+
+      const invertedError = new AssertionError({
+        actual: this.actual,
+        expected: document.activeElement,
+        message: "Expected the element NOT to be focused",
+      });
+
+      return this.execute({
+        assertWhen: hasFocus,
+        error,
+        invertedError,
+      });
+    }
+
   private getClassList(): string[] {
     return this.actual.className.split(/\s+/).filter(Boolean);
   }

packages/dom/test/unit/lib/ElementAssertion.test.tsx

@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 
 import { ElementAssertion } from "../../../src/lib/ElementAssertion";
 
+import { FocusTestComponent } from "./fixtures/focusTestComponent";
 import { HaveClassTestComponent } from "./fixtures/haveClassTestComponent";
 import { NestedElementsTestComponent } from "./fixtures/nestedElementsTestComponent";
 import { SimpleTestComponent } from "./fixtures/simpleTestComponent";
@@ -265,4 +266,34 @@ describe("[Unit] ElementAssertion.test.ts", () => {
     });
   });
 
+  describe(".toHaveFocus", () => {
+    context("when the element has focus", () => {
+      it("returns the assertion instance", () => {
+        const { getByTestId } = render(<FocusTestComponent />);
+        const input1 = getByTestId("input1");
+        input1.focus();
+        const test = new ElementAssertion(input1);
+
+        expect(test.toHaveFocus()).toBeEqual(test);
+
+        expect(() => test.not.toHaveFocus())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element NOT to be focused");
+      });
+    });
+
+    context("when the element does not have focus", () => {
+      it("throws an assertion error", () => {
+        const { getByTestId } = render(<FocusTestComponent />);
+        const input1 = getByTestId("input1");
+        const test = new ElementAssertion(input1);
+
+        expect(() => test.toHaveFocus())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to be focused");
+
+        expect(test.not.toHaveFocus()).toBeEqual(test);
+      });
+    });
+  });
 });

packages/dom/test/unit/lib/fixtures/focusTestComponent.tsx

@@ -0,0 +1,10 @@
+import { ReactElement } from "react";
+
+export function FocusTestComponent(): ReactElement {
+  return (
+    <div>
+      <input data-testid="input1" />
+      <input data-testid="input2" />
+    </div>
+  );
+}