feat(dom): DOM Element Assertion (#129)

Co-authored-by: matycarolina <contrerasmarialejandra1@gmail.com>
Co-authored-by: Edwin Hernandez <edhernandez@stackbuilders.com>

Author: 3 people

packages/dom/package.json

@@ -40,12 +40,20 @@
   },
   "devDependencies": {
     "@assertive-ts/core": "workspace:^",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@types/jsdom-global": "^3",
     "@types/mocha": "^10.0.6",
     "@types/node": "^20.11.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-test-renderer": "^18",
     "jsdom": "^24.0.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^10.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "semantic-release": "^23.0.2",
     "semantic-release-yarn": "^3.0.2",
     "ts-node": "^10.9.2",

packages/dom/src/lib/ElementAssertion.ts

@@ -0,0 +1,33 @@
+import { Assertion, AssertionError } from "@assertive-ts/core";
+
+export class ElementAssertion<T extends Element> extends Assertion<T> {
+
+  public constructor(actual: T) {
+    super(actual);
+  }
+
+  /**
+   * Check if the element is in the document.
+   *
+   * @returns the assertion instance.
+   */
+  public toBeInTheDocument(): this {
+    const error = new AssertionError({
+      actual: this.actual,
+      message: "Expected the element to be in the document",
+    });
+    const invertedError = new AssertionError({
+      actual: this.actual,
+      message: "Expected the element to NOT be in the document",
+    });
+
+    return this.execute({
+      assertWhen: (
+        this.actual.ownerDocument.defaultView !== null
+        && this.actual.ownerDocument === this.actual.getRootNode({ composed: true })
+      ),
+      error,
+      invertedError,
+    });
+  }
+}

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

@@ -0,0 +1,45 @@
+import { AssertionError, expect } from "@assertive-ts/core";
+import { render } from "@testing-library/react";
+import { ReactElement } from "react";
+
+import { ElementAssertion } from "../../../src/lib/ElementAssertion";
+
+function TestComponent(): ReactElement {
+  return (
+    <div>
+      <button>click me</button>
+    </div>
+  );
+}
+
+describe("[Unit] ElementAssertion.test.ts", () => {
+  describe(".toBeInTheDocument", () => {
+    context("when the element is in the document", () => {
+      it("returns the assertion instance", async () => {
+        const { findByRole } = render(<TestComponent />);
+        const button = await findByRole("button", { name: "click me" });
+        const test = new ElementAssertion(button);
+
+        expect(test.toBeInTheDocument()).toBeEqual(test);
+
+        expect(() => test.not.toBeInTheDocument())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to NOT be in the document");
+      });
+    });
+
+    context("when the element is not in the document", () => {
+      it("throws an assertion error", () => {
+        const detachedElement = document.createElement("div");
+
+        const test = new ElementAssertion(detachedElement);
+
+        expect(() => test.toBeInTheDocument())
+          .toThrowError(AssertionError)
+          .toHaveMessage("Expected the element to be in the document");
+
+        expect(test.not.toBeInTheDocument()).toBeEqual(test);
+      });
+    });
+  });
+});

packages/dom/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
     "outDir": "./build",
     "typeRoots": [
       "../../node_modules/@types/",