diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx
index 804bc53..4682ecf 100644
--- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx
+++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx
@@ -12,6 +12,17 @@ function TestComponent(): ReactElement {
);
}
+function ContainsTestComponent(): ReactElement {
+ return (
+
+
+
+
+
+
+ );
+}
+
describe("[Unit] ElementAssertion.test.ts", () => {
describe(".toBeInTheDocument", () => {
context("when the element is in the document", () => {
@@ -42,4 +53,81 @@ describe("[Unit] ElementAssertion.test.ts", () => {
});
});
});
+
+ describe(".toContainElement", () => {
+ context("when the ancestor element contains the descendant element", () => {
+ it("returns the assertion instance", () => {
+ const { getByTestId } = render();
+
+ const grandparent = getByTestId("grandparent");
+ const parent = getByTestId("parent");
+ const child = getByTestId("child");
+ const svgElement = getByTestId("svg-element");
+
+ const grandparentTest = new ElementAssertion(grandparent);
+ const parentTest = new ElementAssertion(parent);
+
+ expect(grandparentTest.toContainElement(parent));
+ expect(grandparentTest.toContainElement(child));
+ expect(grandparentTest.toContainElement(svgElement));
+ expect(parentTest.toContainElement(child));
+
+ expect(() => grandparentTest.not.toContainElement(parent))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to NOT contain the element");
+
+ expect(() => grandparentTest.not.toContainElement(child))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to NOT contain the element");
+
+ expect(() => grandparentTest.not.toContainElement(svgElement))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to NOT contain the element");
+
+ expect(() => parentTest.not.toContainElement(child))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to NOT contain the element");
+ });
+ });
+
+ context("when the descendant element does not contain the ancestor element", () => {
+ it("returns the assertion instance", () => {
+ const { getByTestId } = render();
+
+ const grandparent = getByTestId("grandparent");
+ const parent = getByTestId("parent");
+ const child = getByTestId("child");
+ const svgElement = getByTestId("svg-element");
+
+ const parentTest = new ElementAssertion(parent);
+ const childTest = new ElementAssertion(child);
+
+ expect(parentTest.not.toContainElement(grandparent));
+ expect(parentTest.not.toContainElement(svgElement));
+ expect(childTest.not.toContainElement(grandparent));
+ expect(childTest.not.toContainElement(parent));
+ expect(childTest.not.toContainElement(svgElement));
+
+ expect(() => parentTest.toContainElement(grandparent))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to contain the element");
+
+ expect(() => parentTest.toContainElement(svgElement))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to contain the element");
+
+ expect(() => childTest.toContainElement(grandparent))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to contain the element");
+
+ expect(() => childTest.toContainElement(parent))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to contain the element");
+
+ expect(() => childTest.toContainElement(svgElement))
+ .toThrowError(AssertionError)
+ .toHaveMessage("Expected the container to contain the element");
+ });
+ });
+ });
});